side_menu/templates/js/script.php

<?php

$display = 'default';

if ($_['always-displayed']) {
    $display = 'always-displayed';
} elseif ($_['big-menu']) {
    $display = 'big-menu';
} elseif ($_['side-with-categories']) {
    $display = 'side-with-categories';
}

?>

(function() {
    const querySelector = function(selector, element) {
        if (element) {
            return element.querySelector(selector)
        }

        return document.querySelector(selector)
    }

    const querySelectorAll = function(selector, element) {
        if (element) {
            return element.querySelectorAll(selector)
        }

        return document.querySelectorAll(selector)
    }

    const createElement = function(tagName, attributes) {
        const element = document.createElement(tagName)

        if (typeof attributes === 'object') {
            for (let i in attributes) {
                element.setAttribute(i, attributes[i])
            }
        }

        return element
    }

    const sideMenuContainer = createElement('div', {id: 'side-menu-container'})
    const sideMenuOpener = createElement('button', {'class': 'side-menu-opener'})
    const sideMenu = createElement('div', {id: 'side-menu'})

    const body = querySelector('body')
    const html = querySelector('html')
    const nextcloud = querySelector('#nextcloud')

    const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
    const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>

    <?php if ($display === 'big-menu'): ?>
        sideMenu.setAttribute('data-bigmenu', '1')
    <?php elseif ($display === 'side-with-categories'): ?>
        sideMenu.setAttribute('data-sidewithcategories', '1')
    <?php endif; ?>

    querySelector('body').addEventListener('side-menu.apps', (e) => {
        const apps = e.detail.apps;

        <?php if ($_['hide-when-no-apps']): ?>
            const sideMenu = querySelector('#side-menu')

            if (apps.length === 0) {
                sideMenu.classList.remove('open')
                sideMenu.classList.add('hide')
                sideMenuOpener.classList.add('hide')
            } else {
                sideMenu.classList.remove('hide')
                sideMenuOpener.classList.remove('hide')
            }

            <?php if ($display === 'always-displayed'): ?>
                if (apps.length === 0) {
                    html.classList.remove('side-menu-always-displayed')
                } else {
                    html.classList.add('side-menu-always-displayed')
                }
            <?php endif; ?>
        <?php else: ?>
            <?php if ($display === 'always-displayed'): ?>
                if (apps.length === 0) {
                    html.classList.remove('side-menu-always-displayed')
                } else {
                    html.classList.add('side-menu-always-displayed')
                }
            <?php endif; ?>
        <?php endif; ?>
    })

    body.addEventListener('side-menu.ready', () => {
        const sideMenu = querySelector('#side-menu')
        const headerMenuOpener = querySelector('#header .side-menu-opener')
        const sideMenuOpener = querySelectorAll('#side-menu .side-menu-opener')

        sideMenuFocus = () => {
            let a = querySelector('.side-menu-app.active a', sideMenu)

            if (!a) {
                return
            }

            if (a.length === 0) {
                a = querySelector('.side-menu-app:first-child a', sideMenu)
            }

            if (a.length > 0) {
                a.focus()
            }
        }

        <?php if ($_['opener-hover']): ?>
            const sideMenuMouseLeave = () => {
                sideMenu.classList.remove('open')
                sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
            }

            const sideMenuMouseEnter = () => {
                sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
            }

            const sideMenuOpenerMouseEnter = () => {
                sideMenu.classList.add('open')
                sideMenu.addEventListener('mouseenter', sideMenuMouseEnter)

                sideMenuFocus()
            }

            if (!isTouchDevice) {
                <?php if ($_['opener-hover']): ?>
                    headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter)

                    sideMenu.classList.add('hide-opener')
                <?php endif ?>

                sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
                sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
            }
        <?php endif; ?>

        headerMenuOpener.addEventListener('click', () => {
            sideMenu.classList.add('open')

            const a = querySelector('.side-menu-app.active a', sideMenu)

            if (a !== null) {
                a.focus()
            }
        })

        for (let opener of sideMenuOpener) {
            opener.addEventListener('click', () => {
                <?php if ($display === 'always-displayed'): ?>
                    sideMenu.classList.toggle('open')
                <?php else: ?>
                    sideMenu.classList.remove('open')
                <?php endif; ?>
            })
        }

        document.addEventListener('keydown', (e) => {
            var key = e.key || e.keyCode

            if ((key === 'o' || key === 79) && e.ctrlKey === true) {
                e.preventDefault()

                sideMenu.classList.toggle('open')
                sideMenuFocus()
            }
        })
    })

    body.appendChild(sideMenuContainer)
    sideMenuContainer.appendChild(sideMenu)

    <?php if ($_['loader-enabled'] === true): ?>
        <?php require_once __DIR__.'/_loaderEnabled.js'; ?>
    <?php endif; ?>

    <?php if ($_['opener-position'] === 'before'): ?>
        nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
    <?php else: ?>
        nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
    <?php endif; ?>

    <?php if (!empty($_['top-menu-apps'])): ?>
        const topMenuApps = <?php echo json_encode($_['top-menu-apps']); ?>

        <?php require_once __DIR__.'/_topMenuApps.js'; ?>
    <?php endif; ?>

    <?php if ($display === 'always-displayed'): ?>
        <?php require_once __DIR__.'/_alwaysDisplayed.js'; ?>
    <?php endif; ?>
})();