(function() { const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'}) const sideMenuOpener = SMcreateElement('button', { 'class': 'side-menu-opener', 'arial-label': t('side_menu', 'Toggle the menu'), 'html': `${t('side_menu', 'Toggle the menu')}` }) const sideMenu = SMcreateElement('div', {id: 'side-menu'}) const body = document.querySelector('body') const html = document.querySelector('html') const nextcloud = document.querySelector('#nextcloud') const logo = document.querySelector('.header-left .logo') const isTouchDevice = window.matchMedia("(pointer: coarse)").matches window.targetBlankApps = window.topMenuApps = window.topSideMenuApps = window.menuAppsOrder = window.topMenuAppsMouseOverHiddenLabel = sideMenu.setAttribute('data-bigmenu', '1') sideMenu.setAttribute('data-sidewithcategories', '1') const sideMenuFocus = () => { let a = document.querySelector('#side-menu .side-menu-app.active a') || document.querySelector('#side-menu .side-menu-app a') if (a) { a.focus() } } document.querySelector('body').addEventListener('side-menu.apps', (e) => { const apps = e.detail.apps; const sideMenu = document.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') } if (apps.length === 0) { html.classList.remove('side-menu-always-displayed') } else { html.classList.add('side-menu-always-displayed') } if (apps.length === 0) { html.classList.remove('side-menu-always-displayed') } else { html.classList.add('side-menu-always-displayed') } }) body.addEventListener('side-menu.ready', () => { const sideMenu = document.querySelector('#side-menu') const headerMenuOpener = document.querySelector('#header .side-menu-opener') const sideMenuOpener = document.querySelectorAll('#side-menu .side-menu-opener') if (!headerMenuOpener) { return } 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) { headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter) sideMenu.classList.add('hide-opener') sideMenu.addEventListener('mouseleave', sideMenuMouseLeave) sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter) } headerMenuOpener.addEventListener('click', () => { sideMenu.classList.add('open') headerMenuOpener.blur() sideMenuFocus() }) for (let opener of sideMenuOpener) { opener.addEventListener('click', () => { sideMenu.classList.toggle('open') sideMenu.classList.remove('open') }) } 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() } }) const sideMenuObserver = new MutationObserver((e) => { if (body.getAttribute('id') !== 'body-settings') { return } body.classList.toggle('body-settings-side-menu', sideMenu.classList.contains('open')) }) sideMenuObserver.observe(sideMenu, { attributes: true, attributeFilter: ['class'], childList: false, characterData: false }) }) body.appendChild(sideMenuContainer) sideMenuContainer.appendChild(sideMenu) PageLoader() if (nextcloud) { if (logo && logo.parentNode !== nextcloud) { nextcloud.appendChild(logo) } nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud) nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling) } })();