remove most of jquery
This commit is contained in:
parent
f26adb6ac1
commit
cc7c9f6ed5
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
|
|
|
@ -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; ?>
|
||||||
|
|
Loading…
Reference in a new issue