vgapp 0.2.4 → 0.2.5

package/app/modules/vgrollup/js/vgrollup.js

@@ -1,8 +1,7 @@
 import BaseModule from "../../base-module";
-import {execute, isDisabled, isVisible, mergeDeepObject, noop} from "../../../utils/js/functions";
+import {execute, isDisabled, mergeDeepObject} from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
-import {Manipulator} from "../../../utils/js/dom/manipulator";
 
 /**
  * Constants
@@ -10,13 +9,11 @@ import {Manipulator} from "../../../utils/js/dom/manipulator";
 const NAME = 'rollup';
 const NAME_KEY = 'vg.rollup';
 const CLASS_NAME_SHOW = 'show';
-const CLASS_NAME_HIDE = 'd-none';
+const CLASS_NAME_HIDE = 'vg-rollup-display--none';
 const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="rollup"]'
 
 const EVENT_KEY_HIDE   = `${NAME_KEY}.hide`;
-const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
 const EVENT_KEY_SHOW   = `${NAME_KEY}.show`;
-const EVENT_KEY_SHOWN  = `${NAME_KEY}.shown`;
 
 const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 
@@ -25,10 +22,44 @@ class VGRollup  extends BaseModule {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject({
-
+			content: 'text',
+			offset: 0,
+			cnt: 0,
+			fade: true,
+			transition: false,
+			number: false,
+			height: 0,
+			ellipsis: {
+				line: null
+			},
+			more: ' еще ',
+			button: {
+				enable: true,
+				more: "Показать",
+				less: "Свернуть"
+			}
 		}, params));
 
+		this.classes = {
+			container: 'vg-rollup',
+			hidden: "vg-rollup-content--hidden",
+			fade: "vg-rollup-content--fade",
+			ellipsis: "vg-rollup-content--ellipsis",
+			button: "vg-rollup-content--button",
+			transition: "vg-rollup-content--transition"
+		};
+
+		this.total    = 0;
+		this.count    = 0;
+		this.offset   = 0;
+		this.isOffset = false;
+
+		if (this._params.offset > 0) {
+			this.offset = (this._params.offset + this._params.cnt) || 0;
+			this.isOffset = true;
+		}
 
+		this.build();
 	}
 
 	static get NAME() {
@@ -39,19 +70,180 @@ class VGRollup  extends BaseModule {
 		return NAME_KEY
 	}
 
-	build() {
+	static toggle(target, relatedTarget) {
+		const instance = VGRollup.getOrCreateInstance(target);
+		let isShown = instance.isShow();
+
+		if (!isShown) {
+			instance._element.classList.add(CLASS_NAME_SHOW);
+			relatedTarget.innerHTML = instance._params.button.less;
+
+			if (instance.offset > 0) {
+				if (instance.isOffset) {
+					relatedTarget.innerHTML = instance._params.button.more;
+				} else {
+					relatedTarget.innerHTML = instance._params.button.less;
+				}
+			}
+
+			instance.switch(instance._element, false);
+			EventHandler.trigger(instance._element, EVENT_KEY_SHOW, { relatedTarget });
+		} else {
+			let textShowNum = '',
+				isShowNum = instance._params.number;
+
+
+			if (isShowNum) {
+				let sum = (instance.total) - (instance.count);
+
+				if (sum > 0) {
+					textShowNum = instance._params.more + sum;
+				}
+			}
 
+			relatedTarget.setAttribute("aria-expanded", false);
+			instance._element.classList.remove(CLASS_NAME_SHOW);
+			relatedTarget.innerHTML = instance._params.button.more + textShowNum;
+			instance.switch(instance._element, true);
+
+			EventHandler.trigger(instance._element, EVENT_KEY_HIDE, { relatedTarget });
+		}
 	}
 
-	toggle(relatedTarget) {
-		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+	build(el = null, isButtonAppend = true) {
+		let _this = this,
+			element = el || _this._element,
+			self_height = element.clientHeight, set_height = _this._params.height || (self_height / 2);
+
+		element.classList.add(_this.classes.container)
+
+		let isFade =        _this._params.fade,
+			isTransition =  _this._params.transition,
+			isEllipsis =    _this._params.ellipsis.line !== null,
+			isButton =      _this._params.button.enable,
+			isShowNum =     _this._params.number;
+
+		if (!isButtonAppend) _this.switch(element);
+
+		if (self_height > set_height && _this._params.content === 'text') {
+			element.classList.add(_this.classes.hidden);
+			element.style.height = set_height + "px";
+
+			ellipsis();
+			transition();
+			fade();
+			button();
+		} else if (_this._params.content === 'elements') {
+			let elementClass = _this._params.elements || 'item',
+				items = element.querySelectorAll('.' + elementClass),
+				cnt = _this._params.cnt || 5,
+				i = 1;
+
+			_this.total = items.length;
+			_this.count = cnt;
+
+			for (const item of items) {
+				if (i > cnt) {
+					item.classList.add(CLASS_NAME_HIDE)
+				}
+
+				i++;
+			}
+
+			if (isButton === true) isButton = (i - 1) > cnt;
+
+			ellipsis();
+			transition();
+			fade();
+			button();
+		}
+
+		function ellipsis() {
+			if (isEllipsis) {
+				let line = _this._params.ellipsis.line;
+				isFade = false;
+
+				if (line) {
+					element.classList.add(_this.classes.ellipsis);
+					element.style.webkitLineClamp = line;
+				} else {
+					console.log("Переменная [data-line] или параметр[line] не должны быть пустыми");
+				}
+			}
+		}
+
+		// TODO no work
+		function transition() {
+			if (isTransition) {
+				element.classList.add(_this.classes.transition);
+			}
+		}
+
+		function fade() {
+			if (isFade) {
+				element.classList.add(_this.classes.fade);
+			}
+		}
+
+		function button() {
+			if (isButtonAppend) {
+				element.setAttribute("id", element.id);
+
+				if (isButton) {
+					let textShowNum = '';
+
+					if (isShowNum) {
+						let sum = (_this.total) - (_this.count);
+
+						if (sum > 0) {
+							textShowNum = _this._params.more + sum;
+						}
+					}
+
+					let btnTextMore = _this._params.button.more;
+					element.insertAdjacentHTML("afterend", "<div  class=\"" + _this.classes.button + "\"><a href=\"#\" aria-expanded=\"false\" data-vg-toggle=\"rollup\" data-vg-target=\"#" + element.id + "\">" + btnTextMore + textShowNum + "</a></div>");
+				}
+			}
+		}
 	}
 
-	show(relatedTarget) {
+	switch(el, switcher = false) {
+		const _this = this;
+
+		if (switcher) {
+			this.build(el, false);
+		} else {
+			el.classList.remove(this.classes.hidden);
+			el.classList.remove(this.classes.ellipsis);
+			el.classList.remove(this.classes.fade);
+
+			el.removeAttribute("style");
 
+			if (_this._params.content === 'elements') {
+				let className = _this._params.elements;
+
+				let items = [...el.querySelectorAll('.' + className)];
+				if (items.length) {
+					if (_this.offset > 0) {
+						let className = _this._params.elements,
+							items = [...el.querySelectorAll('.' + className)];
+
+						items.slice(_this.count, _this.offset).forEach(item => item.classList.remove(CLASS_NAME_HIDE));
+						_this.offset = _this.offset + _this.settings.offset;
+
+						if (_this.offset > items.length) {
+							_this.isOffset = false;
+							_this.offset = 0;
+						}
+					} else {
+						items.forEach((item) => item.classList.remove(CLASS_NAME_HIDE))
+					}
+				}
+			}
+		}
 	}
 
-	_isShown() {
+	isShow() {
 		return this._element.classList.contains(CLASS_NAME_SHOW);
 	}
 
@@ -59,10 +251,11 @@ class VGRollup  extends BaseModule {
 	 * Инициализация
 	 * @param element
 	 * @param params
+	 * @param callback
 	 */
-	static init(element, params = {}) {
+	static init(element, params = {}, callback) {
 		const instance = VGRollup.getOrCreateInstance(element, params);
-		instance.toggle();
+		execute(callback, [instance]);
 	}
 }
 
@@ -82,9 +275,7 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	}
 
 	this.setAttribute('aria-expanded', true);
-
-	const data = VGRollup.getOrCreateInstance(target)
-	data.toggle(this);
+	VGRollup.toggle(target, this);
 });
 
 

package/app/modules/vgrollup/scss/vgrollup.css

@@ -1,41 +1,44 @@
-@charset "UTF-8";
-/**
-*--------------------------------------------------------------------------
-* Модуль: VGRollup
-* Автор: Vegas DEV
-* Лицензия: смотри LICENSE
-*--------------------------------------------------------------------------
-**/
-.vg-rollup {
-  --vg-rollup-transition: all 0.5s ease-in-out ;
-  --vg-rollup-fade-height: 100px ;
-  --vg-rollup-fade-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) ;
-  transform: var(--vg-rollup-transition);
-}
-.vg-rollup-button {
-  --vg-rollup-button-align: center ;
-  text-align: var(--vg-rollup-button-align);
-}
-.vg-rollup-content--hidden {
-  overflow: hidden;
-}
-.vg-rollup-content--fade {
-  position: relative;
-}
-.vg-rollup-content--fade:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: var(--vg-rollup-fade-height);
-  background: var(--vg-rollup-fade-background);
-}
-.vg-rollup-content--ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-
-/*# sourceMappingURL=vgrollup.css.map */
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGRollup
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-rollup {
+  --vg-rollup-transition: all 0.5s ease-in-out ;
+  --vg-rollup-fade-height: 100px ;
+  --vg-rollup-fade-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) ;
+  transform: var(--vg-rollup-transition);
+}
+.vg-rollup-button {
+  --vg-rollup-button-align: center ;
+  text-align: var(--vg-rollup-button-align);
+}
+.vg-rollup-content--hidden {
+  overflow: hidden;
+}
+.vg-rollup-content--fade {
+  position: relative;
+}
+.vg-rollup-content--fade:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: var(--vg-rollup-fade-height);
+  background: var(--vg-rollup-fade-background);
+}
+.vg-rollup-content--ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.vg-rollup-display--none {
+  display: none !important;
+}
+
+/*# sourceMappingURL=vgrollup.css.map */

package/app/modules/vgrollup/scss/vgrollup.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vgrollup.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;ECNG;EAAA;EAAA;EDQF;;AAEA;ECVE;EDYD;;AAIA;EACC;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA","file":"vgrollup.css"}
+{"version":3,"sourceRoot":"","sources":["vgrollup.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;ECNG;EAAA;EAAA;EDQF;;AAEA;ECVE;EDYD;;AAIA;EACC;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA;;AAKD;EACC","file":"vgrollup.css"}

package/app/modules/vgrollup/scss/vgrollup.scss

@@ -46,4 +46,10 @@
 			-webkit-box-orient: vertical;
 		}
 	}
+
+	&-display {
+		&--none {
+			display: none !important;
+		}
+	}
 }