pipicar/resources/assets/js/app.js

require('./bootstrap');

window.BpmnModeler = require('camunda-bpmn-js/lib/camunda-platform/Modeler')

$(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip();
    //
    // const menuLinks = document.querySelectorAll('.sidebar-platform .sidebar-list li .parent-link');
    // const sidebarDiv = document.querySelector('.sidebar-platform');
    // menuLinks.forEach((link, index) => {
    //     link.addEventListener('mouseover', (event) => {
    //         const newLink = link.cloneNode(true);
    //         newLink.classList.add('clone-link');
    //         newLink.classList.add('clone-link' + index);
    //         sidebarDiv.appendChild(newLink);
    //         const posTop = link.getBoundingClientRect().top;
    //         newLink.style.top = posTop + 'px';
    //     });
    //     link.addEventListener('mouseout', (event) => {
    //         document.querySelector('.clone-link' + index).remove();
    //     });
    // });
    // const sidebarTreeParents = document.querySelectorAll('.sidebar-platform .tree-content.tree-parent');
    // const appDiv = document.getElementById('app');
    // sidebarTreeParents.forEach(item => {
    //     const treeToggleButton = item.previousElementSibling;
    //     const newTitle = treeToggleButton.cloneNode(true);
    //     newTitle.classList.add('clone-title');
    //     item.appendChild(newTitle);
    //     treeToggleButton.addEventListener('mouseover', (event) => {
    //         const posTop = treeToggleButton.getBoundingClientRect().top;
    //         const posBottom = Number(window.innerHeight - treeToggleButton.getBoundingClientRect().bottom);
    //         item.style.top = null;
    //         item.style.bottom = null;
    //         item.style.maxHeight = null;
    //         item.style.overflow = null;
    //         if (!appDiv.classList.contains('menu-open')) {
    //             if (posBottom < 250) {
    //                 item.style.bottom = posBottom + 'px';
    //                 item.style.maxHeight = `calc(100vh - ${posBottom}px)`;
    //             } else {
    //                 item.style.top = posTop + 50 + 'px';
    //                 newTitle.style.top = posTop + 'px';
    //                 item.style.maxHeight = `calc(100vh - ${posTop + 50}px)`;
    //             }
    //             item.style.overflow = 'auto';
    //         }
    //     });
    // });
    //
    // const sidebarTreeParentsRemoveStyles = () => {
    //     sidebarTreeParents.forEach(item => {
    //         item.style.top = null;
    //         item.style.bottom = null;
    //         item.style.maxHeight = null;
    //         item.style.overflow = null;
    //     });
    // };

    const sidebarList = document.querySelectorAll('.sidebar-platform .sidebar-list .li-parent');
    const sidebarContent = document.querySelector('.sidebar-platform .sidebar-content');
    if(sidebarList.length){
        sidebarList.forEach((li, index) => {
            const nextLi = li.nextElementSibling;
            li.addEventListener('mouseover', () => {
                sidebarContent.style.overflow = 'visible';
                index === 0 ? li.style.top = '-50px' : li.style.top = `${index * 50}px`;
            });
            li.addEventListener('mouseout', () => {
                sidebarContent.style.overflow = null;
                li.style.top = null;
            })
        });
    }

    $('.tree-toggle').click(function () {
        if($('#app').hasClass('menu-open')){
            $(this).parent().children('ul.tree-content').slideToggle(200);
            $(this).toggleClass('active');
        }
    });

    $('.menu-trigger').click(function () {
        // sidebarTreeParentsRemoveStyles();
        axios.get('/ru/set_open_menu').then(resp => {
            console.log(resp.data);
        });
        if ($('#app').hasClass("menu-open")) {
            $('#app').removeClass('menu-open');
        } else {
            $('#app').addClass('menu-open');
        }
    })

    $(".filter-trigger").on("click", function (event) {
        event.stopPropagation();
        $("#filter_block").slideToggle(200);
        $(this).toggleClass('active')
    });


    // <code-block> save to localStorage history of redirected url
    // const locationPath = window.location.pathname + window.location.search;
    // const historyContent = document.querySelector('#history-urls');
    // const historyListEl = document.querySelector('#history-urls .history-list');
    // const clearButton = document.querySelector('#history-urls .clear-local-block');
    // const historyUrls = localStorage.getItem('historyUrls');
    //
    // function addEmpty() {
    //     const span = document.createElement('span');
    //     span.classList.add('no-history');
    //     span.innerHTML = 'История пуста';
    //     historyListEl.appendChild(span);
    //     historyContent.classList.add('empty-list');
    // }
    //
    // function deleteChild() {
    //     let child = historyListEl.lastElementChild;
    //     while (child) {
    //         historyListEl.removeChild(child);
    //         child = historyListEl.lastElementChild;
    //     }
    // }
    //
    // function textTimeFormatter(time, type) {
    //     let text = '';
    //     let lastNum = time;
    //     if (time > 10) {
    //         lastNum = Number(time.toString().split('')[1]);
    //     }
    //     if (type === 'sec') {
    //         if (lastNum === 1) text = 'секунду';
    //         if (lastNum > 1 && lastNum < 5) text = 'секунды';
    //         if (lastNum >= 5 || lastNum === 0) text = 'секунд';
    //     }
    //     if (type === 'min') {
    //         if (lastNum === 1) text = 'минуту';
    //         if (lastNum > 1 && lastNum < 5) text = 'минуты';
    //         if (lastNum >= 5 || lastNum === 0) text = 'минут';
    //     }
    //     if (type === 'hour') {
    //         if (lastNum === 1) text = 'час';
    //         if (lastNum > 1 && lastNum < 5) text = 'часа';
    //         if (lastNum >= 5 || lastNum === 0) text = 'часов';
    //     }
    //     if (type === 'day') {
    //         text = '1 дня';
    //     }
    //     return text;
    // }
    //
    // let historyUrlsArray = JSON.parse(historyUrls);
    // if (historyUrlsArray) {
    //     historyContent.classList.remove('empty-list');
    //     historyUrlsArray.forEach(item => {
    //         let diffInDays = Math.floor((new Date() - new Date(item.date)) / 1000);
    //         let timeType = '';
    //         if (diffInDays < 60) {
    //             timeType = 'sec';
    //         } else if (diffInDays > 60 && diffInDays < 3600) {
    //             diffInDays = Math.floor(diffInDays / 60);
    //             timeType = 'min';
    //         } else if (diffInDays > 3600 && diffInDays < 86400) {
    //             diffInDays = Math.floor(diffInDays / 60 / 60);
    //             timeType = 'hour';
    //         } else {
    //             timeType = 'day';
    //         }
    //         const timeTypeText = textTimeFormatter(diffInDays, timeType);
    //         if (timeType === 'day') {
    //             diffInDays = 'Более';
    //         }
    //         const a = document.createElement('a');
    //         a.href = item.url;
    //         a.innerHTML = `<span>${item.url}</span><small><b>${item.dateString}</b> <b>${diffInDays} ${timeTypeText} назад</b></small>`;
    //         historyListEl.prepend(a);
    //     });
    // } else {
    //     historyUrlsArray = [];
    //     addEmpty();
    // }
    //
    // if (historyUrlsArray.length > 20) {
    //     historyUrlsArray.pop();
    // }
    //
    // if (locationPath !== '/' && locationPath !== '/login' && locationPath !== '/register' && locationPath !== '/logout') {
    //     historyUrlsArray.push({
    //         url: locationPath,
    //         date: new Date(),
    //         dateString: new Date().toLocaleString()
    //     });
    // }
    // localStorage.setItem('historyUrls', JSON.stringify(historyUrlsArray));
    //
    // clearButton.addEventListener('click', () => {
    //     localStorage.setItem('historyUrls', null);
    //     deleteChild();
    //     addEmpty();
    // });
    // </code-block>


    Waves.init();
    Waves.attach('.sidebar-list li a');
    Waves.attach('.sidebar-list li .tree-toggle');
    Waves.attach('.navbar-platform .item-nav');
    Waves.attach('.btn');
    $('[data-toggle="tooltip"]').tooltip();
});