2021-10-21 21:37:32 +02:00
|
|
|
<?php
|
|
|
|
|
|
|
|
$display = 'default';
|
|
|
|
|
|
|
|
if ($_['always-displayed']) {
|
|
|
|
$display = 'always-displayed';
|
|
|
|
} elseif ($_['big-menu']) {
|
|
|
|
$display = 'big-menu';
|
|
|
|
} elseif ($_['side-with-categories']) {
|
|
|
|
$display = 'side-with-categories';
|
|
|
|
}
|
|
|
|
|
|
|
|
?>
|
|
|
|
|
2020-04-17 13:57:23 +02:00
|
|
|
(function() {
|
2022-10-16 19:57:32 +02:00
|
|
|
const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
|
2024-01-28 23:02:35 +01:00
|
|
|
const sideMenuOpener = SMcreateElement('button', {
|
|
|
|
'class': 'side-menu-opener',
|
2024-02-14 12:12:08 +01:00
|
|
|
'arial-label': t('side_menu', 'Toggle the menu'),
|
|
|
|
'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
|
2024-01-28 23:02:35 +01:00
|
|
|
})
|
2022-10-16 19:57:32 +02:00
|
|
|
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
|
|
|
|
|
2022-11-04 22:14:28 +01:00
|
|
|
window.targetBlankApps = <?php echo json_encode($_['target-blank-apps']), "\n" ?>
|
2022-10-16 19:57:32 +02:00
|
|
|
window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
|
2022-11-04 22:14:28 +01:00
|
|
|
window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']), "\n"; ?>
|
2022-10-27 21:51:58 +02:00
|
|
|
window.menuAppsOrder = <?php echo json_encode($_['apps-order']), "\n"; ?>
|
2022-12-26 12:57:07 +01:00
|
|
|
window.topMenuAppsMouseOverHiddenLabel = <?php echo json_encode($_['top-menu-mouse-over-hidden-label']), "\n"; ?>
|
2022-10-16 19:57:32 +02:00
|
|
|
|
|
|
|
<?php if ($display === 'big-menu'): ?>
|
|
|
|
sideMenu.setAttribute('data-bigmenu', '1')
|
|
|
|
<?php elseif ($display === 'side-with-categories'): ?>
|
|
|
|
sideMenu.setAttribute('data-sidewithcategories', '1')
|
|
|
|
<?php endif; ?>
|
|
|
|
|
2024-02-14 12:12:08 +01:00
|
|
|
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()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
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')
|
2021-10-28 15:47:03 +02:00
|
|
|
}
|
2022-10-16 19:57:32 +02:00
|
|
|
<?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')
|
2021-10-28 15:47:03 +02:00
|
|
|
}
|
2022-10-16 19:57:32 +02:00
|
|
|
<?php endif; ?>
|
2020-08-06 15:00:59 +02:00
|
|
|
<?php endif; ?>
|
2022-10-16 19:57:32 +02:00
|
|
|
})
|
2020-08-06 15:00:59 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
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')
|
2020-04-17 13:57:23 +02:00
|
|
|
|
2023-01-21 22:12:17 +01:00
|
|
|
if (!headerMenuOpener) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
<?php if ($_['opener-hover']): ?>
|
|
|
|
const sideMenuMouseLeave = () => {
|
|
|
|
sideMenu.classList.remove('open')
|
|
|
|
sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
|
|
|
|
}
|
2020-04-17 13:57:23 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
const sideMenuMouseEnter = () => {
|
|
|
|
sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
|
|
|
|
}
|
2020-05-14 15:30:34 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
const sideMenuOpenerMouseEnter = () => {
|
|
|
|
sideMenu.classList.add('open')
|
|
|
|
sideMenu.addEventListener('mouseenter', sideMenuMouseEnter)
|
2020-04-17 13:57:23 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
sideMenuFocus()
|
|
|
|
}
|
2020-09-14 14:40:14 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
if (!isTouchDevice) {
|
|
|
|
<?php if ($_['opener-hover']): ?>
|
|
|
|
headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
|
2020-09-23 14:32:25 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
sideMenu.classList.add('hide-opener')
|
|
|
|
<?php endif ?>
|
2020-04-17 13:57:23 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
|
|
|
|
sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
|
|
|
|
}
|
|
|
|
<?php endif; ?>
|
2021-10-28 15:47:03 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
headerMenuOpener.addEventListener('click', () => {
|
|
|
|
sideMenu.classList.add('open')
|
|
|
|
headerMenuOpener.blur()
|
2024-02-14 12:12:08 +01:00
|
|
|
sideMenuFocus()
|
2022-10-16 19:57:32 +02:00
|
|
|
})
|
2020-05-14 15:30:34 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
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; ?>
|
|
|
|
})
|
|
|
|
}
|
2020-05-14 15:30:34 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
document.addEventListener('keydown', (e) => {
|
|
|
|
var key = e.key || e.keyCode
|
2020-05-14 15:30:34 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
if ((key === 'o' || key === 79) && e.ctrlKey === true) {
|
|
|
|
e.preventDefault()
|
2022-03-15 10:51:40 +01:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
sideMenu.classList.toggle('open')
|
|
|
|
sideMenuFocus()
|
|
|
|
}
|
|
|
|
})
|
2022-03-15 10:51:40 +01:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
const sideMenuObserver = new MutationObserver((e) => {
|
|
|
|
if (body.getAttribute('id') !== 'body-settings') {
|
|
|
|
return
|
|
|
|
}
|
2022-03-15 10:51:40 +01:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
body.classList.toggle('body-settings-side-menu', sideMenu.classList.contains('open'))
|
2020-04-17 13:57:23 +02:00
|
|
|
})
|
2020-04-29 09:03:03 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
sideMenuObserver.observe(sideMenu, {
|
|
|
|
attributes: true,
|
|
|
|
attributeFilter: ['class'],
|
|
|
|
childList: false,
|
|
|
|
characterData: false
|
|
|
|
})
|
|
|
|
})
|
2020-05-19 15:17:54 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
body.appendChild(sideMenuContainer)
|
|
|
|
sideMenuContainer.appendChild(sideMenu)
|
2020-05-12 19:45:46 +02:00
|
|
|
|
2022-10-16 19:57:32 +02:00
|
|
|
<?php if ($_['loader-enabled'] === true): ?>
|
|
|
|
PageLoader()
|
|
|
|
<?php endif; ?>
|
2020-09-02 19:09:37 +02:00
|
|
|
|
2023-01-21 22:12:17 +01:00
|
|
|
if (nextcloud) {
|
|
|
|
<?php if ($_['opener-position'] === 'before'): ?>
|
|
|
|
nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
|
|
|
|
<?php else: ?>
|
|
|
|
nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
|
|
|
|
<?php endif; ?>
|
|
|
|
}
|
2020-04-17 13:57:23 +02:00
|
|
|
})();
|