asterisk-cdr-viewer/client/js/comcli.js

'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 = "";