deblan/side_menu
deblan/side_menu
3
6
Fork 5
Code Issues 6 Pull requests 11 Projects Releases 119 Wiki Activity

remove most of jquery

Browse source
This commit is contained in:
Simon Vieille 2021-10-28 15:47:03 +02:00
parent f26adb6ac1
commit cc7c9f6ed5
4 changed files with 115 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/SideMenu.js
View file

@ -41,7 +41,7 @@ const mountSideMenuComponent = () => {
sideMenu.$mount('#side-menu') sideMenu.$mount('#side-menu')
$('body').trigger('side-menu.ready') document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.ready'))
} else { } else {
window.setTimeout(mountSideMenuComponent, 50) window.setTimeout(mountSideMenuComponent, 50)
} }

20
templates/js/_alwaysDisplayed.js
View file

@ -1,5 +1,5 @@
var alwaysDisplayed = function() { var alwaysDisplayed = function() {
var elements = document.querySelectorAll('*'); var elements = querySelectorAll('*')
var fixedElements = [] var fixedElements = []
for (var i in elements) { for (var i in elements) {
@ -25,7 +25,21 @@ var alwaysDisplayed = function() {
continue continue
} }
if (jQuery(element).parents('#side-menu').length) { let elementIsInSideMenu = false
let parent = element.parentNode
while (parent && !elementIsInSideMenu) {
try {
if (parent.getAttribute('id') === 'side-menu') {
elementIsInSideMenu = true
}
} catch (e) {
}
parent = parent.parentNode
}
if (elementIsInSideMenu) {
continue continue
} }
@ -56,7 +70,7 @@ if (content && content.classList.contains('app-settings')) {
} }
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
if (loaded) { if (loaded) {
return; return
} }
const element = content.querySelector('#app-category-your-apps') || content.querySelector('#app-navigation ul') const element = content.querySelector('#app-category-your-apps') || content.querySelector('#app-navigation ul')

17
templates/js/_loaderEnabled.js
View file

@ -1,15 +1,14 @@
var pageLoader = jQuery('<div id="side-menu-loader">') let pageLoader = createElement('div', {id: 'side-menu-loader'})
var pageLoaderBar = jQuery('<div id="side-menu-loader-bar">') let pageLoaderBar = createElement('div', {id: 'side-menu-loader-bar'})
body.append(pageLoader) pageLoader.appendChild(pageLoaderBar)
pageLoader.append(pageLoaderBar) querySelector('body').appendChild(pageLoader)
var pageLoaderValue = 0 let pageLoaderValue = 0
$(window).on('beforeunload', function() {
setInterval(function() {
pageLoaderBar.width(pageLoaderValue.toString() + '%')
window.addEventListener('beforeunload', () => {
setInterval(() => {
pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
pageLoaderValue = Math.min(pageLoaderValue + .2, 100) pageLoaderValue = Math.min(pageLoaderValue + .2, 100)
}, 25) }, 25)
}) })

146
templates/js/script.php
View file

@ -13,65 +13,94 @@ if ($_['always-displayed']) {
?> ?>
(function() { (function() {
var sideMenuContainer = jQuery('<div id="side-menu-container">') const querySelector = function(selector, element) {
var sideMenuOpener = jQuery('<button class="side-menu-opener"></button>') if (element) {
var sideMenu = jQuery('<div id="side-menu">') return element.querySelector(selector)
var body = jQuery('body') }
var html = jQuery('html')
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches 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'): ?> <?php if ($display === 'big-menu'): ?>
sideMenu.attr('data-bigmenu', '1') sideMenu.setAttribute('data-bigmenu', '1')
<?php elseif ($display === 'side-with-categories'): ?> <?php elseif ($display === 'side-with-categories'): ?>
sideMenu.attr('data-sidewithcategories', '1') sideMenu.setAttribute('data-sidewithcategories', '1')
<?php endif; ?> <?php endif; ?>
var targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>; querySelector('body').addEventListener('side-menu.apps', (e) => {
document.querySelector('body').addEventListener('side-menu.apps', function(e) {
const apps = e.detail.apps; const apps = e.detail.apps;
<?php if ($_['hide-when-no-apps']): ?> <?php if ($_['hide-when-no-apps']): ?>
sideMenu = jQuery('#side-menu') const sideMenu = querySelector('#side-menu')
if (apps.length === 0) { if (apps.length === 0) {
sideMenu.removeClass('open') sideMenu.classList.remove('open')
sideMenu.addClass('hide') sideMenu.classList.add('hide')
sideMenuOpener.addClass('hide') sideMenuOpener.classList.add('hide')
} else { } else {
sideMenu.removeClass('hide') sideMenu.classList.remove('hide')
sideMenuOpener.removeClass('hide') sideMenuOpener.classList.remove('hide')
} }
<?php if ($display === 'always-displayed'): ?> <?php if ($display === 'always-displayed'): ?>
if (apps.length === 0) { if (apps.length === 0) {
html.removeClass('side-menu-always-displayed'); html.classList.remove('side-menu-always-displayed')
} else { } else {
html.addClass('side-menu-always-displayed'); html.classList.add('side-menu-always-displayed')
} }
<?php endif; ?> <?php endif; ?>
<?php else: ?> <?php else: ?>
<?php if ($display === 'always-displayed'): ?> <?php if ($display === 'always-displayed'): ?>
if (apps.length === 0) { if (apps.length === 0) {
html.removeClass('side-menu-always-displayed'); html.classList.remove('side-menu-always-displayed')
} else { } else {
html.addClass('side-menu-always-displayed'); html.classList.add('side-menu-always-displayed')
} }
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
}) })
body.on('side-menu.ready', function() { body.addEventListener('side-menu.ready', () => {
sideMenu = jQuery('#side-menu') const sideMenu = querySelector('#side-menu')
const headerMenuOpener = querySelector('#header .side-menu-opener')
const sideMenuOpener = querySelector('#side-menu .side-menu-opener')
var headerMenuOpener = jQuery('#header .side-menu-opener') sideMenuFocus = () => {
var sideMenuOpener = jQuery('#side-menu .side-menu-opener') let a = querySelector('.side-menu-app.active a', sideMenu)
sideMenuFocus = function() {
var a = sideMenu.find('.side-menu-app.active a')
if (a.length === 0) { if (a.length === 0) {
a = sideMenu.find('.side-menu-app:first-child a') a = querySelector('.side-menu-app:first-child a', sideMenu)
} }
if (a.length > 0) { if (a.length > 0) {
@ -80,78 +109,81 @@ if ($_['always-displayed']) {
} }
<?php if ($_['opener-hover'] || $display === 'always-displayed'): ?> <?php if ($_['opener-hover'] || $display === 'always-displayed'): ?>
var sideMenuMouseLeave = function() { const sideMenuMouseLeave = () => {
sideMenu sideMenu.classList.remove('open')
.removeClass('open') sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
.off('mouseleave', sideMenuMouseLeave)
} }
var sideMenuMouseEnter = function() { const sideMenuMouseEnter = () => {
sideMenu.on('mouseleave', sideMenuMouseLeave) sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
} }
var sideMenuOpenerMouseEnter = function() { const sideMenuOpenerMouseEnter = () => {
sideMenu sideMenu.classList.add('open')
.addClass('open') sideMenu.addEventListener('mouseenter', sideMenuMouseEnter)
.on('mouseenter', sideMenuMouseEnter)
sideMenuFocus() sideMenuFocus()
} }
if (!isTouchDevice) { if (!isTouchDevice) {
<?php if ($_['opener-hover']): ?> <?php if ($_['opener-hover']): ?>
headerMenuOpener.on('mouseenter', sideMenuOpenerMouseEnter) headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
sideMenu.addClass('hide-opener') sideMenu.classList.add('hide-opener')
<?php endif ?> <?php endif ?>
sideMenu.on('mouseleave', sideMenuMouseLeave) sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
sideMenu.on('mouseenter', sideMenuOpenerMouseEnter) sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
} }
<?php endif; ?> <?php endif; ?>
headerMenuOpener.on('click', function() { headerMenuOpener.addEventListener('click', () => {
sideMenu.addClass('open') sideMenu.classList.add('open')
sideMenu.find('.side-menu-app.active a').focus()
const a = querySelector('.side-menu-app.active a', sideMenu)
if (a.length) {
a.focus()
}
}) })
<?php if ($display === 'always-displayed'): ?> <?php if ($display === 'always-displayed'): ?>
sideMenuOpener.on('click', function() { sideMenuOpener.addEventListener('click', () => {
sideMenu.toggleClass('open') sideMenu.classList.toggle('open')
}) })
<?php else: ?> <?php else: ?>
sideMenuOpener.on('click', function() { sideMenuOpener.addEventListener('click', () => {
sideMenu.removeClass('open') sideMenu.classList.remove('open')
}) })
<?php endif; ?> <?php endif; ?>
jQuery(document).keydown(function(e) { document.addEventListener('keydown', (e) => {
var key = e.key || e.keyCode var key = e.key || e.keyCode
if ((key === 'o' || key === 79) && e.ctrlKey === true) { if ((key === 'o' || key === 79) && e.ctrlKey === true) {
e.preventDefault() e.preventDefault()
sideMenu.toggleClass('open') sideMenu.classList.toggle('open')
sideMenuFocus() sideMenuFocus()
} }
}) })
}) })
body.append(sideMenuContainer) body.appendChild(sideMenuContainer)
sideMenuContainer.append(sideMenu) sideMenuContainer.appendChild(sideMenu)
<?php if ($_['loader-enabled'] === true): ?> <?php if ($_['loader-enabled'] === true): ?>
<?php require_once __DIR__.'/_loaderEnabled.js'; ?> <?php require_once __DIR__.'/_loaderEnabled.js'; ?>
<?php endif; ?> <?php endif; ?>
<?php if ($_['opener-position'] === 'before'): ?> <?php if ($_['opener-position'] === 'before'): ?>
sideMenuOpener.insertBefore('#nextcloud') nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
<?php else: ?> <?php else: ?>
sideMenuOpener.insertAfter('#nextcloud') nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
<?php endif; ?> <?php endif; ?>
<?php if (!empty($_['top-menu-apps'])): ?> <?php if (!empty($_['top-menu-apps'])): ?>
var topMenuApps = <?php echo json_encode($_['top-menu-apps']); ?>; const topMenuApps = <?php echo json_encode($_['top-menu-apps']); ?>
<?php require_once __DIR__.'/_topMenuApps.js'; ?> <?php require_once __DIR__.'/_topMenuApps.js'; ?>
<?php endif; ?> <?php endif; ?>