vgapp 0.2.3 → 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

@@ -37,5 +37,8 @@
   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;
+		}
+	}
 }

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -25,6 +25,8 @@ const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
 const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
 const EVENT_KEY_HIDE_PREVENTED = `hidePrevented.${NAME_KEY}`;
 const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
+const EVENT_KEY_POPSTATE_DATA_API = `popstate.${NAME_KEY}.data.api`;
+const EVENT_KEY_DOM_LOADED_DATA_API = `DOMContentLoaded.${NAME_KEY}.data.api`;
 
 class VGSidebar extends BaseModule {
 	constructor(element, params = {}) {
@@ -34,6 +36,7 @@ class VGSidebar extends BaseModule {
 			backdrop: true,
 			overflow: true,
 			keyboard: true,
+			hash: false,
 			animation: {
 				enable: false,
 				in: 'animate__rollIn',
@@ -71,7 +74,8 @@ class VGSidebar extends BaseModule {
 		const _this = this;
 		if (isDisabled(_this._element)) return;
 
-		_this._params = _this._getParams(relatedTarget, _this._params);
+		if (relatedTarget) _this._params = _this._getParams(relatedTarget, _this._params);
+
 		_this._route(function (status, data) {
 			EventHandler.trigger(_this._element, EVENT_KEY_LOADED, {stats: status, data: data});
 		});
@@ -87,6 +91,14 @@ class VGSidebar extends BaseModule {
 			Overflow.append();
 		}
 
+		if (this._params.hash) {
+			window.history.pushState(null, "vg-sidebar-open", "#" + this._element.id);
+
+			EventHandler.on(window, EVENT_KEY_POPSTATE_DATA_API, () => {
+				this.hide();
+			});
+		}
+
 		_this._element.classList.add(CLASS_NAME_SHOW);
 		document.body.classList.add(CLASS_NAME_OPEN);
 
@@ -124,6 +136,10 @@ class VGSidebar extends BaseModule {
 					Overflow.destroy();
 				}
 
+				if (_this._params.hash) {
+					history.pushState("", document.title, window.location.pathname + window.location.search);
+				}
+
 				document.body.classList.remove(CLASS_NAME_OPEN);
 				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
 			}
@@ -171,7 +187,6 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 
 	this.setAttribute('aria-expanded', true);
 	EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
-		//if (isVisible(this)) this.focus();
 		this.setAttribute('aria-expanded', false);
 	})
 
@@ -184,4 +199,19 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	data.toggle(this);
 });
 
+EventHandler.on(document, EVENT_KEY_DOM_LOADED_DATA_API, function () {
+	let targetHash = window.location.hash.slice(1);
+	if (targetHash) {
+		let target = Selectors.find('#' + targetHash);
+		if (target && target.classList.contains('vg-sidebar')) {
+			if (isDisabled(target)) {
+				return;
+			}
+
+			const data = VGSidebar.getOrCreateInstance(target)
+			data.toggle();
+		}
+	}
+})
+
 export default VGSidebar;