@leapdev/gui
Version:
LEAP GUI
304 lines (269 loc) • 9.99 kB
JavaScript
// Mutation Observer for Accordion and Tabs
//https://gist.github.com/matthewmorrone/da487467501e8b815430
(function (win) {
'use strict';
var listeners = [],
doc = win.document,
MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
observer;
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 ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function (s) {
const matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) { }
return i > -1;
};
}
// Get the closest matching element
for (; elem && elem !== document; elem = elem.parentNode) {
if (elem.matches(selector)) return elem;
}
return null;
};
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);
};
const getDeviceType = function () {
const ua = navigator.userAgent;
const isiOS = () => {
return /iPad|iPhone/.test(ua) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
};
const isAndroid = () => { return /android/i.test(ua); };
if (isAndroid()) {
return 'android';
}
else if (isiOS()) {
if (/iPad/.test(ua)) { return 'ipad'; }
else if (/iPhone/.test(ua)) { return 'iphone'; }
else { return 'ios'; }
}
return;
};
// #@desktop:accordion-2;sub-accordion-1@parent-accordion-1
// Set default tab via URL hash parameters or device type if present on tabs
window['urlHash'] = {
topicsTabAccordion: {},
articleTabsInit: false,
articleAccordionInit: false,
deviceType: getDeviceType(),
list: window.location.hash,
init: function () {
// window.urlHash.openedTopics = window.location.hash.substring(1).split('@').splice(1);
ready('.sf-tabs', function () {
if (!window.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 = window.urlHash.closestParent(tabitem);
window.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 === window.urlHash.deviceType && urlHash.list === '') {
if (sfTabNav.querySelector('.sf-tab-item.active').classList.contains('active')) {
toggleTabs({
targetTabLink: tabitem,
tabNav: sfTabNav
});
}
}
if (window.urlHash.list !== '' && window.urlHash.list.search(tabItemText) > -1) {
Object.keys(window.urlHash.topicsTabAccordion).forEach(key => {
if (tabItemText == window.urlHash.topicsTabAccordion[key].text) {
toggleTabs({
targetTabLink: tabitem,
tabNav: sfTabNav
});
}
});
}
});
});
window.urlHash.articleTabsInit = true;
if (window.location.pathname.includes('/article')) {
window.urlHash.observe();
}
// console.log(window.urlHash.topicsTabAccordion);
}
});
ready('.sf-accordion', function () {
if (!window.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 = window.urlHash.closestParent(accordionToggle);
window.urlHash.topicsTabAccordion[accordionToggle.id] = {
text: accordionText,
isMainParent: _closestParent.flag,
parentLabel: _closestParent.parentLabel
};
if (urlHashList !== '' && window.urlHash.list.split(':')[1] === accordionText) {
Object.keys(window.urlHash.topicsTabAccordion).forEach(key => {
if (accordionText == window.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;
}
});
},
observe: function () {
let previousState = window.location.pathname;
let t = setInterval(function () {
if (previousState !== window.location.pathname) {
previousState = window.location.pathname;
clearInterval(t);
window.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) {
// console.log(window.urlHash.topicsTabAccordion);
const childText = window.urlHash.topicsTabAccordion[id].isMainParent ? '' : (':' + window.urlHash.topicsTabAccordion[id].text);
const parentText = window.urlHash.topicsTabAccordion[id].isMainParent ? window.urlHash.topicsTabAccordion[id].text : window.urlHash.topicsTabAccordion[id].parentLabel;
return `@${parentText}${childText}`;
},
reset: function () {
window.urlHash.topicsTabAccordion = {};
window.urlHash.articleTabsInit = false;
window.urlHash.articleAccordionInit = false;
window.urlHash.init();
}
};
window.urlHash.init();
// Tab and Accordion Toggling
document.addEventListener('click', function (event) {
const
targetElem = event.target,
className = targetElem.classList;
if (className.value.indexOf('sf-tab-item-link') !== -1) {
event.preventDefault();
let targetID,
activeTabBtn,
targetTab,
targetTabSiblings,
activeBtnTabSiblings;
targetID = targetElem.getAttribute('id').split('target_')[1];
activeTabBtn = targetElem.parentNode;
targetTab = document.getElementById(targetID);
targetTabSiblings = getSiblings(targetTab);
activeBtnTabSiblings = getSiblings(activeTabBtn);
activeTabBtn.classList.add('active');
targetTab.classList.add('in');
activeBtnTabSiblings.forEach(function (element) {
if (element.classList.value.indexOf('active') !== -1) element.classList.remove('active');
});
targetTabSiblings.forEach(function (element) {
if (element.classList.value.indexOf('in') !== -1) element.classList.remove('in');
});
}
if (className.value.indexOf('sf-accordion-toggle') !== -1) {
className.value.indexOf('in') == -1 ? className.add('in') : className.remove('in');
}
if (
className.value.indexOf('sf-tab-item-link') !== -1 ||
className.value.indexOf('sf-accordion-toggle') !== -1
) {
window.location.replace(`#${window.urlHash.setItem(targetElem.id)}`);
// console.log(window.urlHash.topicsTabAccordion);
// window.location.hash = window.urlHash.setItem(targetElem.id);
}
return false;
}, false);
})();