@leapdev/gui 0.2.239 → 0.2.242

package/dist/scss/xsf-crx/sf-leap.js

@@ -1,16 +1,56 @@
-(function () {
-	var getChildren = function (n, skipMe) {
-		var r = [];
-		for (; n; n = n.nextSibling)
-			if (n.nodeType == 1 && n != skipMe) r.push(n);
-		return r;
-	};
+// Mutation Observer for Accordion and Tabs
+//https://gist.github.com/matthewmorrone/da487467501e8b815430
+(function (win) {
+	'use strict';
 
-	var getSiblings = function (n) {
-		return getChildren(n.parentNode.firstChild, n);
-	};
+	var listeners = [],
+		doc = win.document,
+		MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
+		observer;
 
-	var getClosestParent = function (elem, selector) {
+	function ready(selector, fn) {
+		// Store the selector and callback to be monitored
+		listeners.push({
+			selector: selector,
+			fn: fn
+		});
+		if (!observer) {
+			// Watch for changes in the document
+			observer = new MutationObserver(check);
+			observer.observe(doc.documentElement, {
+				childList: true,
+				subtree: true
+			});
+		}
+		// Check if the element is currently in the DOM
+		check();
+	}
+
+	function check() {
+		// Check the DOM for elements matching a stored selector
+		for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
+			listener = listeners[i];
+			// Query for elements matching the specified selector
+			elements = doc.querySelectorAll(listener.selector);
+			for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
+				element = elements[j];
+				// Make sure the callback isn't invoked with the 
+				// same element more than once
+				if (!element.ready) {
+					element.ready = true;
+					// Invoke the callback with the element
+					listener.fn.call(element, element);
+				}
+			}
+		}
+	}
+	// Expose `ready`
+	win.ready = ready;
+})(this);
+
+//LEAP Help Centre JS for Components generated via Chrome Extension
+(function () {
+	const getClosestParent = function (elem, selector) {
 		if (!Element.prototype.matches) {
 			Element.prototype.matches =
 				Element.prototype.matchesSelector ||
@@ -33,15 +73,18 @@
 		return null;
 	};
 
-	// For Version 1 the order of Hash appendages is Tab -> Accordion -> Subaccordion
-	var appendHash = function (str) {
-		window.location.hash = (() => {
-			const lowercasedStr = str.toLowerCase();
-			return lowercasedStr.split(' ').join('-');
-		})();
+	const getChildren = function (n, skipMe) {
+		let r = [];
+		for (; n; n = n.nextSibling)
+			if (n.nodeType == 1 && n != skipMe) r.push(n);
+		return r;
+	};
+
+	const getSiblings = function (n) {
+		return getChildren(n.parentNode.firstChild, n);
 	};
 
-	var getDeviceType = function () {
+	const getDeviceType = function () {
 		const ua = navigator.userAgent;
 		const isiOS = () => {
 			return /iPad|iPhone/.test(ua) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
@@ -59,14 +102,166 @@
 		return;
 	};
 
+	// #@desktop:accordion-2;sub-accordion-1@parent-accordion-1
+	// Set default tab via URL hash parameters or device type if present on tabs
+	const urlHash = {
+		topicsTabAccordion: {},
+		articleTabsInit: false,
+		articleAccordionInit: false,
+		deviceType: getDeviceType(),
+		list: window.location.hash,
+		init: function () {
+			urlHash.openedTopics = window.location.hash.substring(1).split('@').splice(1);
+
+			ready('.sf-tabs', function () {
+				if (!urlHash.articleTabsInit) {
+
+					const toggleTabs = (params) => {
+						// Remove existing active CSS classes
+						const currentTabContentID = params.tabNav.querySelector('.sf-tab-item.active').firstElementChild.id.substring(7);
+						params.tabNav.querySelector('.sf-tab-item.active').classList.remove('active');
+						document.getElementById(currentTabContentID).classList.remove('in');
+
+						//Update tab according to device with active and in css class
+						params.targetTabLink.parentNode.classList.add('active');
+						document.getElementById(params.targetTabLink.id.substring(7)).classList.add('in');
+					};
+
+					document.querySelectorAll('.sf-tabs').forEach(tab => {
+						tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
+							const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
+
+							const _closestParent = urlHash.closestParent(tabitem);
+
+							urlHash.topicsTabAccordion[tabitem.id] = {
+								text: tabItemText,
+								isMainParent: _closestParent.flag,
+								parentLabel: _closestParent.parentLabel,
+								directParentID: _closestParent.directParentID
+							};
+
+							// If URL hash is not present, we locate the name of the device tab
+							const sfTabNav = tabitem.parentNode.parentNode;
+							if (tabItemText === urlHash.deviceType && urlHash.list === '') {
+								if (sfTabNav.querySelector('.sf-tab-item.active').classList.contains('active')) {
+									toggleTabs({
+										targetTabLink: tabitem,
+										tabNav: sfTabNav
+									});
+								}
+							}
+
+							if (urlHash.list !== '' && urlHash.list.search(tabItemText) > -1) {
+								Object.keys(urlHash.topicsTabAccordion).forEach(key => {
+									if (tabItemText == urlHash.topicsTabAccordion[key].text) {
+										toggleTabs({
+											targetTabLink: tabitem,
+											tabNav: sfTabNav
+										});
+									}
+								});
+							}
+						});
+					});
+
+					urlHash.articleTabsInit = true;
+					console.log(urlHash.topicsTabAccordion);
+				}
+			});
+
+			ready('.sf-accordion', function () {
+				if (!urlHash.articleAccordionInit) {
+					const urlHashList = window.location.hash;
+					document.querySelectorAll('.sf-accordion-toggle').forEach(accordionToggle => {
+						const accordionText = accordionToggle
+							.querySelector('.sf-accordion-text')
+							.textContent.split(' ').join('-').toLowerCase();
+
+						const _closestParent = urlHash.closestParent(accordionToggle);
+
+						urlHash.topicsTabAccordion[accordionToggle.id] = {
+							text: accordionText,
+							isMainParent: _closestParent.flag,
+							parentLabel: _closestParent.parentLabel
+						};
+
+						if (urlHashList !== '' && urlHash.list.split(':')[1] === accordionText) {
+							Object.keys(urlHash.topicsTabAccordion).forEach(key => {
+								if (accordionText == urlHash.topicsTabAccordion[key].text) {
+									document.getElementById(key).classList.add('in');
+
+									const hasAccordionParent = getClosestParent(accordionToggle, '.sf-accordion-content');
+									if (hasAccordionParent !== null) {
+										document.getElementById(`target_${hasAccordionParent.id}`).classList.add('in');
+									}
+									return;
+								}
+							});
+						}
+					});
+
+					urlHash.articleAccordionInit = true;
+				}
+			});
+
+			if (window.location.pathname.includes('/article')) {
+				urlHash.observe();
+			}
+		},
+		observe: function () {
+			const previousState = window.history.state;
+			let t = setInterval(function () {
+				if (previousState !== window.history.state) {
+					previousState = window.history.state;
+					clearInterval(t);
+					urlHash.reset();
+				}
+			}, 100);
+		},
+		closestParent: function (child) {
+			const tabContent = getClosestParent(child, '.sf-tab-content');
+			const accordionContent = getClosestParent(child, '.sf-accordion-content');
+			const parentLabel = () => {
+				if (tabContent !== null) {
+					return document.getElementById(`target_${tabContent.id}`).textContent;
+				}
+				else if (accordionContent !== null) {
+					return document.getElementById(`target_${accordionContent.id}`).querySelector('.sf-accordion-text').textContent;
+				}
+				else {
+					return '';
+				}
+			};
+			// console.log(tabContent, accordionContent);
+			return {
+				parentLabel: parentLabel().split(' ').join('-').toLowerCase(),
+				flag: tabContent !== null || accordionContent !== null ? false : true,
+				directParentID: 'test'
+			};
+		},
+		setItem: function (id) {
+			const childText = urlHash.topicsTabAccordion[id].isMainParent ? '' : (':' + urlHash.topicsTabAccordion[id].text);
+			const parentText = urlHash.topicsTabAccordion[id].isMainParent ? urlHash.topicsTabAccordion[id].text : urlHash.topicsTabAccordion[id].parentLabel;
+			return `@${parentText}${childText}`;
+		},
+		reset: function () {
+			urlHash.topicsTabAccordion = {};
+			urlHash.articleTabsInit = false;
+			urlHash.articleAccordionInit = false;
+			urlHash.init();
+		}
+	};
+
+	urlHash.init();
+	// Tab and Accordion Toggling
 	document.addEventListener('click', function (event) {
-		var
+		const
 			targetElem = event.target,
 			className = targetElem.classList;
 
 		if (className.value.indexOf('sf-tab-item-link') !== -1) {
 			event.preventDefault();
-			var targetID,
+			let targetID,
 				activeTabBtn,
 				targetTab,
 				targetTabSiblings,
@@ -82,8 +277,6 @@
 			activeTabBtn.classList.add('active');
 			targetTab.classList.add('in');
 
-			appendHash(targetElem.textContent);
-
 			activeBtnTabSiblings.forEach(function (element) {
 				if (element.classList.value.indexOf('active') !== -1) element.classList.remove('active');
 			});
@@ -93,61 +286,17 @@
 		}
 
 		if (className.value.indexOf('sf-accordion-toggle') !== -1) {
-			appendHash(targetElem.querySelector('.sf-accordion-text').textContent);
-			className.value.indexOf('in') == -1 ?
-				className.add('in') : className.remove('in');
+			className.value.indexOf('in') == -1 ? className.add('in') : className.remove('in');
 		}
 
-		return false;
-	}, false);
-
-	// Set default tab via URL hash or device type if present on tabs
-	document.addEventListener('DOMContentLoaded', function () {
-		const tabs = document.querySelectorAll('.sf-tabs');
-		const accordion = document.querySelectorAll('.sf-accordion-toggle');
-		const urlHashList = window.location.hash !== '' ? window.location.hash.substring(1).split('#') : undefined;
-
-		const openParent = (childElement) => {
-			const closestTab = getClosestParent(childElement, '.sf-tab-content');
-			const closestAccordion = getClosestParent(childElement, '.sf-accordion-content');
-
-			if (closestTab !== null) {
-				document.getElementById(`target_${closestTab.id}`).click();
-			}
-			if (closestAccordion !== null) {
-				document.getElementById(`target_${closestAccordion.id}`).click();
-			}
-		};
-
-		if (tabs.length !== 0) {
-			tabs.forEach(tab => {
-				const deviceType = getDeviceType();
-				tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
-					const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
-
-					if (tabItemText === deviceType && typeof (urlHashList) === 'undefined') {
-						tabitem.click();
-					}
-					else if (typeof (urlHashList) !== 'undefined' && urlHashList.includes(tabItemText)) {
-						openParent(tabitem);
-						tabitem.click();
-					}
-				});
-			});
-		}
-
-		if (accordion.length !== 0) {
-			accordion.forEach(accordionToggle => {
-				const accordionText = accordionToggle
-					.querySelector('.sf-accordion-text')
-					.textContent.split(' ').join('-').toLowerCase();
-
-				if (typeof (urlHashList) !== 'undefined' && urlHashList.includes(accordionText)) {
-					openParent(accordionToggle);
-					accordionToggle.click();
-				}
-			});
+		if (
+			className.value.indexOf('sf-tab-item-link') !== -1 ||
+			className.value.indexOf('sf-accordion-toggle') !== -1
+		) {
+			// console.log(urlHash.topicsTabAccordion);
+			window.location.hash = urlHash.setItem(targetElem.id);
 		}
-	});
 
+		return false;
+	}, false);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapdev/gui",
-  "version": "0.2.239",
+  "version": "0.2.242",
   "description": "LEAP GUI",
   "author": "LEAP Dev",
   "license": "ISC",