diff --git a/css/sideMenu.css b/css/sideMenu.css index 63f72a9..a99de63 100644 --- a/css/sideMenu.css +++ b/css/sideMenu.css @@ -139,7 +139,7 @@ max-height: 100px; } -.side-menu-header { +.enu-header { height: 150px; width: 100%; z-index: 2300; @@ -232,7 +232,6 @@ margin-top: -2px; } -.side-menu-always-displayed #header, .side-menu-always-displayed body { width: calc(100% - 50px) !important; } diff --git a/src/PageLoader.js b/src/PageLoader.js new file mode 100644 index 0000000..3c8bd13 --- /dev/null +++ b/src/PageLoader.js @@ -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 diff --git a/src/SideMenu.js b/src/SideMenu.js index 244a6cf..e7b3675 100644 --- a/src/SideMenu.js +++ b/src/SideMenu.js @@ -20,10 +20,15 @@ import AppMenu from './AppMenu.vue' import SideMenu from './SideMenu.vue' import SideMenuBig from './SideMenuBig.vue' import SideMenuWithCategories from './SideMenuWithCategories.vue' +import PageLoader from './PageLoader' +import SMcreateElement from './lib/createElement' Vue.prototype.OC = OC Vue.prototype.t = OC.L10N.translate +window.SMcreateElement = SMcreateElement +window.PageLoader = PageLoader + const mountSideMenuComponent = () => { const container = document.querySelector('#side-menu') diff --git a/src/lib/createElement.js b/src/lib/createElement.js new file mode 100644 index 0000000..19c8207 --- /dev/null +++ b/src/lib/createElement.js @@ -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 +} diff --git a/templates/css/stylesheet.php b/templates/css/stylesheet.php index 7f92613..6582131 100644 --- a/templates/css/stylesheet.php +++ b/templates/css/stylesheet.php @@ -117,11 +117,12 @@ #content { - left: 60px; - width: calc(100% - (var(--body-container-margin) * 2) - 70px) + left: 53px; + width: calc(100% - (var(--body-container-margin) * 2) - 62px); } #content-vue { - width: calc(100% - (var(--body-container-margin) * 2) - 60px) + width: calc(100% - (var(--body-container-margin) * 2) - 60px); + margin-left: 11px; } diff --git a/templates/js/_loaderEnabled.js b/templates/js/_loaderEnabled.js deleted file mode 100644 index 1d5ff4e..0000000 --- a/templates/js/_loaderEnabled.js +++ /dev/null @@ -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) -}) diff --git a/templates/js/script.php b/templates/js/script.php index 1c04466..b942533 100644 --- a/templates/js/script.php +++ b/templates/js/script.php @@ -13,200 +13,168 @@ if ($_['always-displayed']) { ?> (function() { - const querySelector = function(selector, element) { - if (element) { - return element.querySelector(selector) + 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 = + + window.topMenuApps = + window.topSideMenuApps = + + + sideMenu.setAttribute('data-bigmenu', '1') + + sideMenu.setAttribute('data-sidewithcategories', '1') + + + document.querySelector('body').addEventListener('side-menu.apps', (e) => { + const apps = e.detail.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') + } + + + if (apps.length === 0) { + html.classList.remove('side-menu-always-displayed') + } else { + html.classList.add('side-menu-always-displayed') } - - 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 = - - - sideMenu.setAttribute('data-bigmenu', '1') - - sideMenu.setAttribute('data-sidewithcategories', '1') - - - querySelector('body').addEventListener('side-menu.apps', (e) => { - const apps = e.detail.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') - } - - - if (apps.length === 0) { - html.classList.remove('side-menu-always-displayed') - } else { - html.classList.add('side-menu-always-displayed') - } - - - - if (apps.length === 0) { - html.classList.remove('side-menu-always-displayed') - } else { - html.classList.add('side-menu-always-displayed') - } - - - }) - - 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() - } - } - - - 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) { - - headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter) - - sideMenu.classList.add('hide-opener') - - - sideMenu.addEventListener('mouseleave', sideMenuMouseLeave) - sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter) - } - - - 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', () => { - - sideMenu.classList.toggle('open') - - sideMenu.classList.remove('open') - - }) - } - - 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) - - - - - - - nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud) + - nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling) + + if (apps.length === 0) { + html.classList.remove('side-menu-always-displayed') + } else { + html.classList.add('side-menu-always-displayed') + } + + + }) + + 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() + } + } + + + 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) { + + headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter) + + sideMenu.classList.add('hide-opener') + + + sideMenu.addEventListener('mouseleave', sideMenuMouseLeave) + sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter) + } - window.topMenuApps = - window.topSideMenuApps = + 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', () => { + + sideMenu.classList.toggle('open') + + sideMenu.classList.remove('open') + + }) + } + + 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) + + + PageLoader() + + + + nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud) + + nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling) + })();