forked from deblan/side_menu
182 lines
5.2 KiB
PHP
182 lines
5.2 KiB
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 sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
|
|
const sideMenuOpener = SMcreateElement('button', {'class': 'side-menu-opener'})
|
|
const sideMenu = SMcreateElement('div', {id: 'side-menu'})
|
|
|
|
const body = document.querySelector('body')
|
|
const html = document.querySelector('html')
|
|
const nextcloud = document.querySelector('#nextcloud')
|
|
|
|
const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
|
|
const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>
|
|
|
|
window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
|
|
window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps'])."\n"; ?>
|
|
window.menuAppsOrder = <?php echo json_encode($_['apps-order']), "\n"; ?>
|
|
|
|
<?php if ($display === 'big-menu'): ?>
|
|
sideMenu.setAttribute('data-bigmenu', '1')
|
|
<?php elseif ($display === 'side-with-categories'): ?>
|
|
sideMenu.setAttribute('data-sidewithcategories', '1')
|
|
<?php endif; ?>
|
|
|
|
document.querySelector('body').addEventListener('side-menu.apps', (e) => {
|
|
const apps = e.detail.apps;
|
|
|
|
<?php if ($_['hide-when-no-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')
|
|
}
|
|
|
|
<?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 = document.querySelector('#side-menu')
|
|
const headerMenuOpener = document.querySelector('#header .side-menu-opener')
|
|
const sideMenuOpener = document.querySelectorAll('#side-menu .side-menu-opener')
|
|
|
|
sideMenuFocus = () => {
|
|
let a = document.querySelector('.side-menu-app.active a', sideMenu)
|
|
|
|
if (!a) {
|
|
return
|
|
}
|
|
|
|
if (a.length === 0) {
|
|
a = sideMenu.querySelector('.side-menu-app:first-child a')
|
|
}
|
|
|
|
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 = sideMenu.querySelector('.side-menu-app.active a')
|
|
|
|
if (a !== null) {
|
|
a.focus()
|
|
}
|
|
|
|
headerMenuOpener.blur()
|
|
})
|
|
|
|
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()
|
|
}
|
|
})
|
|
|
|
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)
|
|
|
|
<?php if ($_['loader-enabled'] === true): ?>
|
|
PageLoader()
|
|
<?php endif; ?>
|
|
|
|
<?php if ($_['opener-position'] === 'before'): ?>
|
|
nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
|
|
<?php else: ?>
|
|
nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
|
|
<?php endif; ?>
|
|
})();
|