fix issue with loader and refactoring
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
This commit is contained in:
parent
f0988b93bd
commit
7c86d53da7
|
@ -139,7 +139,7 @@
|
||||||
max-height: 100px;
|
max-height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-menu-header {
|
.enu-header {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2300;
|
z-index: 2300;
|
||||||
|
@ -232,7 +232,6 @@
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-menu-always-displayed #header,
|
|
||||||
.side-menu-always-displayed body {
|
.side-menu-always-displayed body {
|
||||||
width: calc(100% - 50px) !important;
|
width: calc(100% - 50px) !important;
|
||||||
}
|
}
|
||||||
|
|
20
src/PageLoader.js
Normal file
20
src/PageLoader.js
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
const createElement = require('./lib/createElement')
|
||||||
|
|
||||||
|
const PageLoader = () => {
|
||||||
|
const pageLoader = createElement('div', {id: 'side-menu-loader'})
|
||||||
|
const pageLoaderBar = createElement('div', {id: 'side-menu-loader-bar'})
|
||||||
|
|
||||||
|
pageLoader.appendChild(pageLoaderBar)
|
||||||
|
document.querySelector('body').appendChild(pageLoader)
|
||||||
|
|
||||||
|
let pageLoaderValue = 0
|
||||||
|
|
||||||
|
window.addEventListener('beforeunload', () => {
|
||||||
|
setInterval(() => {
|
||||||
|
pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
|
||||||
|
pageLoaderValue = Math.min(pageLoaderValue + .2, 100)
|
||||||
|
}, 25)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = PageLoader
|
|
@ -20,10 +20,15 @@ import AppMenu from './AppMenu.vue'
|
||||||
import SideMenu from './SideMenu.vue'
|
import SideMenu from './SideMenu.vue'
|
||||||
import SideMenuBig from './SideMenuBig.vue'
|
import SideMenuBig from './SideMenuBig.vue'
|
||||||
import SideMenuWithCategories from './SideMenuWithCategories.vue'
|
import SideMenuWithCategories from './SideMenuWithCategories.vue'
|
||||||
|
import PageLoader from './PageLoader'
|
||||||
|
import SMcreateElement from './lib/createElement'
|
||||||
|
|
||||||
Vue.prototype.OC = OC
|
Vue.prototype.OC = OC
|
||||||
Vue.prototype.t = OC.L10N.translate
|
Vue.prototype.t = OC.L10N.translate
|
||||||
|
|
||||||
|
window.SMcreateElement = SMcreateElement
|
||||||
|
window.PageLoader = PageLoader
|
||||||
|
|
||||||
const mountSideMenuComponent = () => {
|
const mountSideMenuComponent = () => {
|
||||||
const container = document.querySelector('#side-menu')
|
const container = document.querySelector('#side-menu')
|
||||||
|
|
||||||
|
|
11
src/lib/createElement.js
Normal file
11
src/lib/createElement.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
module.exports = (tagName, attributes) => {
|
||||||
|
const element = document.createElement(tagName)
|
||||||
|
|
||||||
|
if (typeof attributes === 'object') {
|
||||||
|
for (let i in attributes) {
|
||||||
|
element.setAttribute(i, attributes[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return element
|
||||||
|
}
|
|
@ -117,11 +117,12 @@
|
||||||
|
|
||||||
<?php if ($_['always-displayed']): ?>
|
<?php if ($_['always-displayed']): ?>
|
||||||
#content {
|
#content {
|
||||||
left: 60px;
|
left: 53px;
|
||||||
width: calc(100% - (var(--body-container-margin) * 2) - 70px)
|
width: calc(100% - (var(--body-container-margin) * 2) - 62px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-vue {
|
#content-vue {
|
||||||
width: calc(100% - (var(--body-container-margin) * 2) - 60px)
|
width: calc(100% - (var(--body-container-margin) * 2) - 60px);
|
||||||
|
margin-left: 11px;
|
||||||
}
|
}
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
|
@ -1,14 +0,0 @@
|
||||||
let pageLoader = createElement('div', {id: 'side-menu-loader'})
|
|
||||||
let pageLoaderBar = createElement('div', {id: 'side-menu-loader-bar'})
|
|
||||||
|
|
||||||
pageLoader.appendChild(pageLoaderBar)
|
|
||||||
querySelector('body').appendChild(pageLoader)
|
|
||||||
|
|
||||||
let pageLoaderValue = 0
|
|
||||||
|
|
||||||
window.addEventListener('beforeunload', () => {
|
|
||||||
setInterval(() => {
|
|
||||||
pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
|
|
||||||
pageLoaderValue = Math.min(pageLoaderValue + .2, 100)
|
|
||||||
}, 25)
|
|
||||||
})
|
|
|
@ -13,200 +13,168 @@ if ($_['always-displayed']) {
|
||||||
?>
|
?>
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
const querySelector = function(selector, element) {
|
const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
|
||||||
if (element) {
|
const sideMenuOpener = SMcreateElement('button', {'class': 'side-menu-opener'})
|
||||||
return element.querySelector(selector)
|
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']); ?>
|
||||||
|
|
||||||
|
<?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; ?>
|
||||||
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'): ?>
|
|
||||||
sideMenu.setAttribute('data-bigmenu', '1')
|
|
||||||
<?php elseif ($display === 'side-with-categories'): ?>
|
|
||||||
sideMenu.setAttribute('data-sidewithcategories', '1')
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
querySelector('body').addEventListener('side-menu.apps', (e) => {
|
|
||||||
const apps = e.detail.apps;
|
|
||||||
|
|
||||||
<?php if ($_['hide-when-no-apps']): ?>
|
|
||||||
const sideMenu = 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 = querySelector('#side-menu')
|
|
||||||
const headerMenuOpener = querySelector('#header .side-menu-opener')
|
|
||||||
const sideMenuOpener = querySelectorAll('#side-menu .side-menu-opener')
|
|
||||||
|
|
||||||
sideMenuFocus = () => {
|
|
||||||
let a = querySelector('.side-menu-app.active a', sideMenu)
|
|
||||||
|
|
||||||
if (!a) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a.length === 0) {
|
|
||||||
a = querySelector('.side-menu-app:first-child a', sideMenu)
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = querySelector('.side-menu-app.active a', sideMenu)
|
|
||||||
|
|
||||||
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): ?>
|
|
||||||
<?php require_once __DIR__.'/_loaderEnabled.js'; ?>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<?php if ($_['opener-position'] === 'before'): ?>
|
|
||||||
nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
|
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
|
<?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; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
|
headerMenuOpener.addEventListener('click', () => {
|
||||||
window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']); ?>
|
sideMenu.classList.add('open')
|
||||||
|
|
||||||
<?php if ($display === 'always-displayed'): ?>
|
const a = sideMenu.querySelector('.side-menu-app.active a')
|
||||||
<?php require_once __DIR__.'/_alwaysDisplayed.js'; ?>
|
|
||||||
<?php endif; ?>
|
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; ?>
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in a new issue