You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
3.2 KiB
112 lines
3.2 KiB
'use strict';
|
|
|
|
const wrapListener = function(callback, ...args) {
|
|
return function cf(ev) {
|
|
if (ev && callback) {
|
|
callback(ev, ...args);
|
|
}
|
|
}
|
|
};
|
|
|
|
const createListener = function(element, event, callback, ...args) {
|
|
element.addEventListener(event, wrapListener(callback, element, ...args));
|
|
};
|
|
|
|
const createSVG = (classList, symbolId) => {
|
|
const div = document.createElement('div');
|
|
div.classList.add(...classList);
|
|
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
|
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + symbolId);
|
|
|
|
svg.appendChild(use);
|
|
div.appendChild(svg);
|
|
|
|
return div;
|
|
};
|
|
|
|
const changeSVGImage = (element, newSymbolId) => {
|
|
element.querySelector('svg > use').setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#" + newSymbolId);
|
|
};
|
|
|
|
const storageGet = name => {
|
|
try {
|
|
return localStorage.getItem(name);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const storageSet = (name, value) => {
|
|
try {
|
|
localStorage.setItem(name, value);
|
|
} catch (e) { }
|
|
};
|
|
|
|
|
|
|
|
const handlerSubsection = function(ev, el, shouldOpen) {
|
|
const selector = el.getAttribute('ts');
|
|
const name = el.getAttribute('cn');
|
|
|
|
if (selector && name) {
|
|
const target = document.querySelector(selector);
|
|
|
|
if (target) {
|
|
const isOpen = (shouldOpen === true || shouldOpen === false) ? !shouldOpen : !target.classList.contains('hidden');
|
|
|
|
changeSVGImage(el.querySelector('.collapser'), isOpen ? 'icon-plus' : 'icon-minus');
|
|
target.classList.toggle('hidden', isOpen);
|
|
storageSet('ss-' + name, isOpen ? 'closed' : 'open');
|
|
}
|
|
}
|
|
};
|
|
|
|
const initializeSubsections = function() {
|
|
document.querySelectorAll('.left-panel .section.sub').forEach( e => {
|
|
const state = storageGet('ss-' + e.getAttribute('cn'));
|
|
if (state === 'open' || state === 'closed') {
|
|
handlerSubsection(null, e, !!(state === 'open'));
|
|
}
|
|
});
|
|
};
|
|
|
|
initializeSubsections();
|
|
|
|
document.querySelectorAll('.left-panel .section.sub .clickable-area').forEach(
|
|
e => e.addEventListener('click', wrapListener(handlerSubsection, e.parentElement))
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const showMessage = function(parms) {
|
|
if (!parms || !parms.header) {
|
|
throw new Error('Invalid message parameters');
|
|
}
|
|
|
|
const msg = document.querySelector('.message-wrapper');
|
|
|
|
if (msg.querySelector('.icon .image')) {
|
|
msg.querySelector('.icon .image').remove();
|
|
}
|
|
if (parms.icon) {
|
|
msg.querySelector('.icon').appendChild(createSVG(['image'], parms.icon));
|
|
}
|
|
|
|
msg.querySelector('.header').innerHTML = parms.header;
|
|
msg.querySelector('.text').innerHTML = parms.text || '';
|
|
msg.querySelector('.button .button-text').innerHTML = parms.button || 'Закрыть';
|
|
|
|
msg.classList.add('active');
|
|
};
|
|
|
|
[document.querySelector('.message-wrapper .message .close-button'), document.querySelector('.message .button')].forEach( e => e.addEventListener('click', () => {
|
|
document.querySelector('.message-wrapper').classList.remove('active');
|
|
}));
|
|
|
|
|
|
|
|
document.querySelector('.message-wrapper').style.display = "";
|
|
|