799 lines
31 KiB
JavaScript
799 lines
31 KiB
JavaScript
/**
|
||
* DokuWiki Mikio Template Javascript
|
||
*
|
||
* @link http://dokuwiki.org/template:mikio
|
||
* @author James Collins <james.collins@outlook.com.au>
|
||
* @license GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html)
|
||
*/
|
||
"use strict";
|
||
|
||
const mikio = {
|
||
queueResize: false,
|
||
mikioCSS: false,
|
||
stickyItems: [],
|
||
stickyOffset: 0,
|
||
stickyIndex: 2010,
|
||
darkMode: 'light',
|
||
|
||
ready: function () {
|
||
const updateStickyScroll = function () {
|
||
self.stickyItems.forEach((item) => {
|
||
// noinspection JSDeprecatedSymbols
|
||
if ((window.scrollY || window.pageYOffset) > item.offsetYTop) {
|
||
if (item.element.style.position !== 'fixed') {
|
||
let site = document.getElementById('dokuwiki__site');
|
||
site.style.paddingTop = ((parseInt(site.style.paddingTop) || 0) + item.element.offsetHeight) + 'px';
|
||
|
||
item.element.style.position = 'fixed';
|
||
item.element.style.top = self.stickyOffset + 'px';
|
||
item.element.style.zIndex = self.stickyIndex;
|
||
|
||
self.stickyOffset += item.element.offsetHeight;
|
||
self.stickyIndex--;
|
||
}
|
||
} else {
|
||
if (item.element.style.position === 'fixed') {
|
||
let site = document.getElementById('dokuwiki__site');
|
||
site.style.paddingTop = ((parseInt(site.style.paddingTop) || 0) - item.element.offsetHeight) + 'px';
|
||
self.stickyOffset -= item.element.offsetHeight;
|
||
self.stickyIndex++;
|
||
|
||
item.element.style.position = 'relative';
|
||
item.element.style.top = null;
|
||
item.element.style.zIndex = null;
|
||
}
|
||
}
|
||
});
|
||
};
|
||
const self = this;
|
||
|
||
this.initDarkMode();
|
||
this.addToggleClick('mikio-sidebar-toggle', 'mikio-sidebar-collapse');
|
||
this.addToggleClick('mikio-navbar-toggle', 'mikio-navbar-collapse');
|
||
this.addDropdownClick('mikio-nav-dropdown', 'mikio-dropdown');
|
||
this.indexmenuPatch();
|
||
this.typeahead();
|
||
|
||
const updateStickyItems = function () {
|
||
window.removeEventListener('scroll', updateStickyScroll);
|
||
|
||
const stickyElements = document.getElementsByClassName('mikio-sticky');
|
||
self.stickyItems = [];
|
||
if (stickyElements && stickyElements.length > 0) {
|
||
const stickyOffset = stickyElements[0].offsetTop;
|
||
let stickyHeightCount = stickyOffset;
|
||
|
||
[].forEach.call(stickyElements, (item) => {
|
||
let top = stickyOffset;
|
||
if (item.offsetTop - stickyHeightCount > stickyHeightCount) {
|
||
top = stickyHeightCount;
|
||
}
|
||
|
||
self.stickyItems.push({
|
||
element: item,
|
||
offsetYTop: top,
|
||
debugItemTop: item.offsetTop,
|
||
debugOffset: stickyOffset,
|
||
debugHeight: stickyHeightCount
|
||
});
|
||
stickyHeightCount += item.offsetHeight;
|
||
});
|
||
|
||
window.addEventListener('scroll', updateStickyScroll);
|
||
updateStickyScroll();
|
||
}
|
||
};
|
||
|
||
|
||
updateStickyItems();
|
||
|
||
window.onresize = function () {
|
||
if (!this.queueResize) {
|
||
this.queueResize = true;
|
||
const self = this;
|
||
window.setTimeout(function () {
|
||
self.queueResize = false;
|
||
Array.from(document.getElementsByClassName('mikio-dropdown')).forEach(function (elem) {
|
||
if (!elem.classList.contains('closed')) {
|
||
elem.classList.add('closed');
|
||
}
|
||
});
|
||
|
||
updateStickyItems();
|
||
}, 100);
|
||
}
|
||
};
|
||
|
||
// Mikio-Dropdown - Click
|
||
Array.from(document.getElementsByClassName('mikio-dropdown')).forEach(function (elem) {
|
||
elem.addEventListener('click', function (event) {
|
||
event.stopPropagation();
|
||
});
|
||
});
|
||
|
||
// Mikio-Dropdown - Close when clicked outside dropdown
|
||
Array.from(document.getElementsByTagName('body')).forEach(function (elem) {
|
||
elem.addEventListener('click', function () {
|
||
Array.from(document.getElementsByClassName('mikio-dropdown')).forEach(function (elem) {
|
||
if (!elem.classList.contains('closed')) {
|
||
elem.classList.add('closed');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// Mikio-Navbar-Toggle - Fix
|
||
Array.from(document.getElementsByClassName('mikio-navbar-toggle')).forEach(function (elem) {
|
||
elem.classList.add('closed');
|
||
});
|
||
|
||
// Mikio-Dropdown - Fix
|
||
Array.from(document.getElementsByClassName('mikio-dropdown')).forEach(function (elem) {
|
||
elem.classList.add('closed');
|
||
});
|
||
|
||
// Input File - Cleanup
|
||
Array.from(document.querySelectorAll('input[type=file]')).forEach(function (elem) {
|
||
const style = window.getComputedStyle(elem);
|
||
|
||
if (style.display !== 'none') {
|
||
const parentElem = elem.parentElement;
|
||
const fileRect = elem.getBoundingClientRect();
|
||
const parentRect = parentElem.getBoundingClientRect();
|
||
const spanElem = document.createElement('span');
|
||
|
||
elem.style.opacity = '0';
|
||
parentElem.style.position = 'relative';
|
||
spanElem.innerHTML = 'Choose file...';
|
||
spanElem.classList.add('mikio-input-file');
|
||
spanElem.style.left = Math.floor(fileRect.left - parentRect.left) + 'px';
|
||
spanElem.style.width = Math.floor(fileRect.right - fileRect.left) + 'px';
|
||
mikio.insertAfter(spanElem, elem);
|
||
|
||
spanElem.addEventListener('click', function (event) {
|
||
if (event.target.parentElement.tagName.toLowerCase() !== 'label') {
|
||
let sibling = mikio.getPrevSibling(event.target, 'input');
|
||
if (typeof sibling !== 'undefined') {
|
||
sibling.click();
|
||
}
|
||
}
|
||
});
|
||
|
||
elem.addEventListener('change', function () {
|
||
if (this.files.length > 0) {
|
||
let mikioInput = mikio.getNextSibling(this, '.mikio-input-file');
|
||
if (typeof mikioInput !== 'undefined') {
|
||
mikioInput.innerHTML = this.files[0].name;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// Input - Span (Placeholder) clear when typing
|
||
Array.from(document.querySelectorAll('.mikio.dokuwiki .mode_login fieldset label.block input.edit, .mikio.dokuwiki .mode_denied fieldset label.block input.edit')).forEach(function (elem) {
|
||
if (elem.value.length !== 0) {
|
||
const sibling = mikio.getPrevSibling(elem, 'span');
|
||
if (sibling) {
|
||
sibling.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
elem.addEventListener('keydown', function (event) {
|
||
const sibling = mikio.getPrevSibling(event.target, 'span');
|
||
|
||
setTimeout(function () {
|
||
if (sibling) {
|
||
if (event.target.value !== '') {
|
||
sibling.style.display = 'none';
|
||
} else {
|
||
sibling.style.display = 'block';
|
||
}
|
||
}
|
||
}, 50);
|
||
});
|
||
});
|
||
|
||
// Admin - Exit button
|
||
Array.from(document.querySelectorAll('a[rel="exit-admin"]')).forEach(function (elem) {
|
||
elem.addEventListener('click', function (event) {
|
||
event.preventDefault();
|
||
|
||
let href = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
|
||
|
||
let params = window.location.search;
|
||
if (params !== '') {
|
||
params = params.substring(1).split('&');
|
||
if (params.length > 1) {
|
||
href += '?';
|
||
params.forEach(function (p) {
|
||
if (p.substring(0, 3) === 'id=') {
|
||
href += p;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
window.location = href;
|
||
});
|
||
});
|
||
|
||
// Admin - Back button
|
||
Array.from(document.querySelectorAll('a[rel="exit-page"]')).forEach(function (elem) {
|
||
elem.addEventListener('click', function (event) {
|
||
event.preventDefault();
|
||
|
||
let href = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
|
||
|
||
let params = window.location.search;
|
||
if (params !== '') {
|
||
params = params.substring(1).split('&');
|
||
if (params.length > 1) {
|
||
href += '?';
|
||
params.forEach(function (p) {
|
||
if (p.substring(0, 5) !== 'page=') {
|
||
href += p + '&';
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
window.location = href;
|
||
});
|
||
});
|
||
|
||
// Admin - Resize large text blocks in tasks
|
||
Array.from(document.querySelectorAll('.admin_tasks span.prompt')).forEach(function (elem) {
|
||
if (elem.offsetHeight > 48) {
|
||
elem.style.fontSize = '80%';
|
||
}
|
||
});
|
||
|
||
let target = document.getElementById('mediamanager__page');
|
||
if (target) {
|
||
// Media Manager - ui-resizable is always auto
|
||
const mediaChangedObserver = new MutationObserver(function (mutationsList) {
|
||
for (let mutation of mutationsList) {
|
||
if (mutation.type === 'childList') {
|
||
if (mutation.addedNodes) {
|
||
mutation.addedNodes.forEach(function (node) {
|
||
if (node.nodeName === 'LI') {
|
||
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
if (mutation.type === 'attributes' && mutation.attributeName === 'style' && mutation.target && mutation.target.style.height) {
|
||
mutation.target.style.height = '';
|
||
}
|
||
}
|
||
});
|
||
|
||
mediaChangedObserver.observe(target, {attributes: true, childList: true, subtree: true});
|
||
}
|
||
|
||
// Media Manager - file click
|
||
Array.from(document.querySelectorAll('#mediamanager__page .filelist')).forEach(function (elem) {
|
||
elem.addEventListener('click', function (event) {
|
||
const liElem = event.target.closest('li');
|
||
if (liElem && event.target.closest('ul.thumbs')) {
|
||
const aElem = liElem.querySelector('dd.name a');
|
||
if (aElem) aElem.click();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Popup Media Manager - clean file info
|
||
const mediaPopupFileInfoClean = function (elem) {
|
||
// var file = { resolution: '', date: '', time: '', size: '' };
|
||
|
||
const infoElem = elem.querySelector('span.info');
|
||
if (infoElem) {
|
||
const infoText = infoElem.innerText.replace(/(<[^>]*>|[()])/g, '');
|
||
const detail = infoText.split(' ');
|
||
while (detail.length < 4) {
|
||
detail.unshift('');
|
||
}
|
||
|
||
infoElem.innerHTML = detail[0] + '<br>' + detail[1] + ' ' + detail[2] + '<br>' + detail[3];
|
||
}
|
||
|
||
Array.from(elem.querySelectorAll('img')).forEach(function (elem) {
|
||
elem.removeAttribute('width');
|
||
elem.removeAttribute('height');
|
||
});
|
||
}
|
||
|
||
target = document.getElementById('media__content');
|
||
if (target) {
|
||
Array.from(target.querySelectorAll('div.odd, div.even')).forEach(function (elem) {
|
||
mediaPopupFileInfoClean(elem);
|
||
});
|
||
|
||
const mediaPopupObserver = new MutationObserver(function (mutationsList) {
|
||
for (let mutation of mutationsList) {
|
||
if (mutation.type === 'childList') {
|
||
if (mutation.addedNodes) {
|
||
mutation.addedNodes.forEach(function (node) {
|
||
if (node.nodeName === 'DIV') {
|
||
mediaPopupFileInfoClean(node);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
mediaPopupObserver.observe(target, {attributes: false, childList: true});
|
||
}
|
||
|
||
// noinspection JSUnresolvedReference
|
||
if (window.mikioFooterRun && typeof window.mikioFooterRun === "function") window.mikioFooterRun();
|
||
|
||
const linkElements = document.getElementsByTagName('link');
|
||
for (let element of linkElements) {
|
||
if (element.rel === 'stylesheet' && element.href) {
|
||
if (element.href.includes('/lib/exe/css.php')) {
|
||
const mediaChangedObserver = new MutationObserver(function (mutationsList) {
|
||
for (let mutation of mutationsList) {
|
||
if (mutation.type === 'attributes' && mutation.attributeName === 'href') {
|
||
if (self.mikioCSS !== false) {
|
||
let elem = self.mikioCSS;
|
||
let prev = elem.href;
|
||
|
||
setTimeout(function () {
|
||
const url = new URL(prev);
|
||
const params = url.searchParams;
|
||
params.set('seed', new Date().getTime().toString());
|
||
url.search = params.toString();
|
||
elem.href = url.toString();
|
||
}, 500);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
mediaChangedObserver.observe(element, {attributes: true, childList: true, subtree: true});
|
||
} else if (element.href.includes('/lib/tpl/mikio/css.php')) {
|
||
this.mikioCSS = element;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Update color text field when selector changes
|
||
let colorSelectorInputs = document.querySelectorAll('div.mikio-color-picker input[type="color"]');
|
||
colorSelectorInputs.forEach(input => {
|
||
input.addEventListener('input', () => {
|
||
let colorTextInput = document.querySelector(`div.mikio-color-picker input[for="${input.id}"]`);
|
||
if (colorTextInput) {
|
||
colorTextInput.value = input.value;
|
||
}
|
||
});
|
||
});
|
||
|
||
let colorTextInputs = document.querySelectorAll('div.mikio-color-picker input[type="text"]');
|
||
colorTextInputs.forEach(input => {
|
||
input.addEventListener('blur', () => {
|
||
const id = input.getAttribute('for');
|
||
let colorSelectorInput = document.querySelector(`div.mikio-color-picker input[id="${id}"]`);
|
||
if (colorSelectorInput) {
|
||
colorSelectorInput.value = this.colorToHex(input.value);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
initDarkMode: function () {
|
||
const showLightDark = document.querySelector('.mikio-darklight-button') != null;
|
||
if (showLightDark === true) {
|
||
let setting = this.getCookie('lightDarkToggle');
|
||
if (setting === 'dark' || setting === 'light' || setting === 'auto') {
|
||
this.darkMode = setting;
|
||
}
|
||
|
||
if (document.querySelector('.mikio-auto-darklight') == null && setting === 'auto') {
|
||
this.darkMode = 'light';
|
||
}
|
||
} else {
|
||
if (document.querySelector('.mikio-auto-darklight') != null) {
|
||
this.darkMode = 'auto';
|
||
}
|
||
}
|
||
|
||
const self = this;
|
||
|
||
if (window.matchMedia) {
|
||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||
self.updateDarkMode();
|
||
});
|
||
}
|
||
|
||
this.addEventListenerByClassName('mikio-darklight-button', 'click', function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const autoAllowed = (document.querySelector('.mikio-iicon.mikio-darklight-auto') != null);
|
||
|
||
if (self.darkMode === 'light') {
|
||
self.darkMode = 'dark';
|
||
} else if (self.darkMode === 'dark') {
|
||
if (autoAllowed === true) {
|
||
self.darkMode = 'auto';
|
||
} else {
|
||
self.darkMode = 'light';
|
||
}
|
||
} else if (self.darkMode === 'auto') {
|
||
self.darkMode = 'light';
|
||
} else {
|
||
self.darkMode = 'dark';
|
||
}
|
||
|
||
self.updateDarkMode();
|
||
});
|
||
|
||
this.updateDarkMode();
|
||
},
|
||
|
||
updateDarkMode: function () {
|
||
const html = document.querySelector('html');
|
||
let themeMode = this.darkMode;
|
||
|
||
if (this.darkMode === 'auto') {
|
||
html.dataset.themeAuto = 'true';
|
||
|
||
themeMode = 'light';
|
||
if (window.matchMedia) {
|
||
let prefersColorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
themeMode = prefersColorSchemeQuery.matches ? 'dark' : 'light';
|
||
}
|
||
} else {
|
||
delete html.dataset.themeAuto;
|
||
}
|
||
|
||
html.dataset.theme = `theme-${themeMode}`;
|
||
this.setCookie('lightDarkToggle', this.darkMode);
|
||
},
|
||
|
||
insertAfter: function (newNode, existingNode) {
|
||
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
|
||
},
|
||
|
||
addToggleClick: function (elemToggle, elemCollapse) {
|
||
this.addEventListenerByClassName(elemToggle, 'click', function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
let nextSibling = mikio.getNextSibling(this, '.' + elemCollapse);
|
||
|
||
if (typeof nextSibling !== 'undefined') {
|
||
mikio.toggleCollapse(this, nextSibling);
|
||
}
|
||
});
|
||
},
|
||
|
||
addDropdownClick: function (elemToggle, elemCollapse) {
|
||
this.addEventListenerByClassName(elemToggle, 'click', function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const dropdown = this.querySelector('.' + elemCollapse);
|
||
if (dropdown) {
|
||
mikio.toggleDropdown(dropdown);
|
||
}
|
||
});
|
||
},
|
||
|
||
addEventListenerByClassName: function (className, eventType, callback) {
|
||
Array.from(document.getElementsByClassName(className)).forEach(function (elem) {
|
||
elem.addEventListener(eventType, callback);
|
||
});
|
||
},
|
||
|
||
getNextSibling: function (elem, selector) {
|
||
let sibling = elem.nextElementSibling;
|
||
|
||
while (sibling) {
|
||
if (sibling.matches(selector)) return sibling;
|
||
sibling = sibling.nextElementSibling;
|
||
}
|
||
},
|
||
|
||
getPrevSibling: function (elem, selector) {
|
||
let sibling = elem.previousElementSibling;
|
||
|
||
while (sibling) {
|
||
if (sibling.matches(selector)) return sibling;
|
||
sibling = sibling.previousElementSibling;
|
||
}
|
||
},
|
||
|
||
toggleCollapse: function (objToggle, objCollapse) {
|
||
if (objToggle.classList.contains('closed')) {
|
||
objToggle.classList.remove('closed');
|
||
objToggle.classList.add('open');
|
||
const height = objCollapse.offsetHeight;
|
||
objCollapse.style.overflow = 'hidden';
|
||
objCollapse.style.height = '0';
|
||
objCollapse.style.paddingTop = '0';
|
||
objCollapse.style.paddingBottom = '0';
|
||
objCollapse.style.marginTop = '0';
|
||
objCollapse.style.marginBottom = '0';
|
||
objCollapse.offsetHeight;
|
||
objCollapse.style.boxSizing = 'border-box';
|
||
objCollapse.style.transitionProperty = "height, margin, padding";
|
||
objCollapse.style.transitionDuration = '500ms';
|
||
objCollapse.style.height = height + 'px';
|
||
objCollapse.style.removeProperty('padding-top');
|
||
objCollapse.style.removeProperty('padding-bottom');
|
||
objCollapse.style.removeProperty('margin-top');
|
||
objCollapse.style.removeProperty('margin-bottom');
|
||
window.setTimeout(function () {
|
||
objCollapse.style.removeProperty('height');
|
||
objCollapse.style.removeProperty('overflow');
|
||
objCollapse.style.removeProperty('transition-duration');
|
||
objCollapse.style.removeProperty('transition-property');
|
||
objCollapse.style.removeProperty('box-sizing');
|
||
}, 500);
|
||
} else {
|
||
objCollapse.style.transitionProperty = 'height, margin, padding';
|
||
objCollapse.style.transitionDuration = '500ms';
|
||
objCollapse.style.boxSizing = 'border-box';
|
||
objCollapse.style.height = objCollapse.offsetHeight + 'px';
|
||
objCollapse.offsetHeight;
|
||
objCollapse.style.overflow = 'hidden';
|
||
objCollapse.style.height = '0';
|
||
objCollapse.style.paddingTop = '0';
|
||
objCollapse.style.paddingBottom = '0';
|
||
objCollapse.style.marginTop = '0';
|
||
objCollapse.style.marginBottom = '0';
|
||
window.setTimeout(function () {
|
||
objToggle.classList.add('closed');
|
||
objToggle.classList.remove('open');
|
||
objCollapse.style.removeProperty('height');
|
||
objCollapse.style.removeProperty('padding-top');
|
||
objCollapse.style.removeProperty('padding-bottom');
|
||
objCollapse.style.removeProperty('margin-top');
|
||
objCollapse.style.removeProperty('margin-bottom');
|
||
objCollapse.style.removeProperty('overflow');
|
||
objCollapse.style.removeProperty('transition-duration');
|
||
objCollapse.style.removeProperty('transition-property');
|
||
objCollapse.style.removeProperty('box-sizing');
|
||
}, 500);
|
||
}
|
||
},
|
||
|
||
|
||
toggleDropdown: function (objToggle) {
|
||
if (objToggle.classList.contains('closed')) {
|
||
objToggle.classList.remove('closed');
|
||
} else {
|
||
objToggle.classList.add('closed');
|
||
}
|
||
|
||
Array.from(document.getElementsByClassName('mikio-dropdown')).forEach(function (elem) {
|
||
if (!elem.classList.contains('closed') && elem !== objToggle) {
|
||
elem.classList.add('closed');
|
||
}
|
||
});
|
||
},
|
||
|
||
setHeroSubTitle: function (str) {
|
||
Array.from(document.getElementsByClassName('mikio-hero-subtitle')).forEach(function (elem) {
|
||
elem.innerHTML = str;
|
||
});
|
||
},
|
||
|
||
setHeroImage: function (str) {
|
||
const heroImages = document.getElementsByClassName('mikio-hero-image');
|
||
|
||
if (heroImages.length > 0) {
|
||
Array.from(document.getElementsByClassName('mikio-hero-image')).forEach(function (elem) {
|
||
elem.style.backgroundImage = 'url(\'' + str + '\')';
|
||
elem.classList.add('mikio-hero-image-resize');
|
||
});
|
||
} else {
|
||
Array.from(document.getElementsByClassName('mikio-hero-text')).forEach(function (elem) {
|
||
elem.insertAdjacentHTML('afterend', '<div class="mikio-hero-image mikio-hero-image-resize" style="background-image:url(\'' + str + '\');"></div>');
|
||
});
|
||
}
|
||
},
|
||
|
||
setHeroColor: function (str) {
|
||
const colors = str.trim().replace(/ +(?= )/g, '').split(/(?!\(.*)\s(?![^(]*?\))/g);
|
||
if (colors.length > 0 && colors[0] !== '') {
|
||
Array.from(document.getElementsByClassName('mikio-hero')).forEach(function (elem) {
|
||
elem.style.backgroundColor = colors[0];
|
||
});
|
||
|
||
if (colors.length > 1) {
|
||
Array.from(document.getElementsByClassName('mikio-hero-title')).forEach(function (elem) {
|
||
elem.style.color = colors[1];
|
||
});
|
||
}
|
||
|
||
if (colors.length > 2) {
|
||
Array.from(document.getElementsByClassName('mikio-hero-subtitle')).forEach(function (elem) {
|
||
elem.style.color = colors[2];
|
||
});
|
||
}
|
||
|
||
if (colors.length > 3) {
|
||
Array.from(document.getElementsByClassName('mikio-hero')).forEach(function (parentElem) {
|
||
Array.from(parentElem.querySelectorAll('.mikio-breadcrumbs ul li a')).forEach(function (elem) {
|
||
elem.style.color = colors[3];
|
||
});
|
||
|
||
Array.from(parentElem.querySelectorAll('.mikio-breadcrumbs ul li, .mikio-breadcrumbs ul li a')).forEach(function (elem) {
|
||
elem.style.color = colors[3];
|
||
elem.onmouseover = function () { this.style.color = (colors.length > 4 ? colors[4] : 'initial'); };
|
||
elem.onmouseout = function () { this.style.color = colors[3]; };
|
||
});
|
||
});
|
||
}
|
||
}
|
||
},
|
||
|
||
setTags: function (str) {
|
||
Array.from(document.getElementsByClassName('mikio-tags')).forEach(function (elem) {
|
||
elem.innerHTML = str;
|
||
});
|
||
},
|
||
|
||
hidePart: function (part) {
|
||
const selectorArray = {
|
||
topheader: '.mikio-page-topheader',
|
||
header: '.mikio-page-header',
|
||
contentheader: '.mikio-page-contentheader',
|
||
contentfooter: '.mikio-page-contentfooter',
|
||
sidebarheader: '.mikio-sidebar-left .mikio-sidebar-header',
|
||
sidebarfooter: '.mikio-sidebar-left .mikio-sidebar-footer',
|
||
rightsidebarheader: '.mikio-sidebar-right .mikio-sidebar-header',
|
||
rightsidebarfooter: '.mikio-sidebar-right .mikio-sidebar-footer',
|
||
footer: '.mikio-footer',
|
||
bottomfooter: '.mikio-page-bottomfooter',
|
||
navbar: '.mikio-navbar',
|
||
hero: '.mikio-hero'
|
||
};
|
||
|
||
if (selectorArray.hasOwnProperty(part)) {
|
||
Array.from(document.querySelectorAll(selectorArray[part])).forEach(function (elem) {
|
||
elem.style.display = 'none';
|
||
});
|
||
}
|
||
},
|
||
|
||
indexmenuPatch: function () {
|
||
window.setTimeout(function () {
|
||
Array.from(document.querySelectorAll('a.navSel')).forEach(function (elem) {
|
||
let prev = mikio.getPrevSibling(elem, 'img');
|
||
if (prev) {
|
||
prev.style.opacity = '1';
|
||
}
|
||
});
|
||
}, 50);
|
||
|
||
|
||
document.addEventListener('mouseover', function (event) {
|
||
const indexmenuClasses = ['nodeUrl', 'nodeSel', 'node'];
|
||
if ([...event.target.classList].some(className => indexmenuClasses.indexOf(className) !== -1)) {
|
||
let prev = mikio.getPrevSibling(event.target, 'img');
|
||
if (prev) {
|
||
prev.style.opacity = '1';
|
||
}
|
||
}
|
||
});
|
||
|
||
document.addEventListener('mouseout', function (event) {
|
||
const indexmenuClasses = ['nodeUrl', 'nodeSel', 'node'];
|
||
if ([...event.target.classList].some(className => indexmenuClasses.indexOf(className) !== -1)) {
|
||
let prev = mikio.getPrevSibling(event.target, 'img');
|
||
if (prev) {
|
||
prev.style.opacity = '';
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// Add typeahead support for quick seach. Taken from bootstrap3 theme.
|
||
typeahead: function () {
|
||
jQuery(".search_typeahead").typeahead({
|
||
|
||
source: function (query, process) {
|
||
|
||
return jQuery.post(DOKU_BASE + 'lib/exe/ajax.php',
|
||
{
|
||
call: 'qsearch',
|
||
q: encodeURI(query)
|
||
},
|
||
function (data) {
|
||
|
||
const results = [];
|
||
|
||
jQuery(data).find('a').each(function () {
|
||
|
||
const page = jQuery(this);
|
||
|
||
results.push({
|
||
name: page.text(),
|
||
href: page.attr('href'),
|
||
title: page.attr('title'),
|
||
category: page.attr('title').replace(/:/g, ' : '),
|
||
});
|
||
|
||
});
|
||
|
||
return process(results);
|
||
|
||
});
|
||
},
|
||
|
||
itemLink: function (item) {
|
||
return item.href;
|
||
},
|
||
|
||
itemTitle: function (item) {
|
||
return item.title;
|
||
},
|
||
|
||
followLinkOnSelect: true,
|
||
autoSelect: false,
|
||
items: 10,
|
||
fitToElement: true,
|
||
delay: 500,
|
||
theme: 'bootstrap4',
|
||
|
||
});
|
||
},
|
||
|
||
getCookie: function (cname) {
|
||
let name = cname + "=";
|
||
let decodedCookie = decodeURIComponent(document.cookie);
|
||
let ca = decodedCookie.split(';');
|
||
for (let i = 0; i < ca.length; i++) {
|
||
let c = ca[i];
|
||
while (c.charAt(0) === ' ') {
|
||
c = c.substring(1);
|
||
}
|
||
if (c.indexOf(name) === 0) {
|
||
return c.substring(name.length, c.length);
|
||
}
|
||
}
|
||
return "";
|
||
},
|
||
|
||
setCookie: function (cname, cvalue, exdays) {
|
||
const d = new Date();
|
||
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
|
||
let expires = "expires=" + d.toUTCString();
|
||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;SameSite=Lax";
|
||
},
|
||
|
||
clearCookie: function (cname) {
|
||
document.cookie = cname + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax";
|
||
},
|
||
|
||
colorToHex: function (color) {
|
||
// Create a canvas element
|
||
let canvas = document.createElement('canvas');
|
||
canvas.height = 1;
|
||
canvas.width = 1;
|
||
let ctx = canvas.getContext('2d');
|
||
|
||
// Set the fillStyle to the color input
|
||
ctx.fillStyle = color;
|
||
ctx.fillRect(0, 0, 1, 1);
|
||
|
||
// Get the pixel data from the canvas
|
||
let data = ctx.getImageData(0, 0, 1, 1).data;
|
||
|
||
// Convert the RGB values to HEX
|
||
return '#' + ((1 << 24) + (data[0] << 16) + (data[1] << 8) + data[2]).toString(16).slice(1).toUpperCase();
|
||
}
|
||
};
|
||
|
||
if (document.readyState !== 'loading') {
|
||
mikio.ready();
|
||
} else {
|
||
document.addEventListener('DOMContentLoaded', function () { mikio.ready() });
|
||
}
|