fix issue with loader and refactoring

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;
 }

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

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')
 

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
+}

templates/css/stylesheet.php

@@ -117,11 +117,12 @@
 
 <?php if ($_['always-displayed']): ?>
   #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 {
-    width: calc(100% - (var(--body-container-margin) * 2) - 60px)
+    width: calc(100% - (var(--body-container-margin) * 2) - 60px);
+    margin-left: 11px;
   }
 <?php endif; ?>

templates/js/_loaderEnabled.js

@@ -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)
-})

templates/js/script.php

@@ -13,56 +13,31 @@ if ($_['always-displayed']) {
 ?>
 
 (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'})
-        }
 
-        return document.querySelector(selector)
+  const body = document.querySelector('body')
-    }
+  const html = document.querySelector('html')
-
+  const nextcloud = document.querySelector('#nextcloud')
-    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']) ?>
 
+  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; ?>
 
-    querySelector('body').addEventListener('side-menu.apps', (e) => {
+  document.querySelector('body').addEventListener('side-menu.apps', (e) => {
     const apps = e.detail.apps;
 
     <?php if ($_['hide-when-no-apps']): ?>
-            const sideMenu = querySelector('#side-menu')
+      const sideMenu = document.querySelector('#side-menu')
 
       if (apps.length === 0) {
         sideMenu.classList.remove('open')
@@ -92,19 +67,19 @@ if ($_['always-displayed']) {
   })
 
   body.addEventListener('side-menu.ready', () => {
-        const sideMenu = querySelector('#side-menu')
+    const sideMenu = document.querySelector('#side-menu')
-        const headerMenuOpener = querySelector('#header .side-menu-opener')
+    const headerMenuOpener = document.querySelector('#header .side-menu-opener')
-        const sideMenuOpener = querySelectorAll('#side-menu .side-menu-opener')
+    const sideMenuOpener = document.querySelectorAll('#side-menu .side-menu-opener')
 
     sideMenuFocus = () => {
-            let a = querySelector('.side-menu-app.active a', sideMenu)
+      let a = document.querySelector('.side-menu-app.active a', sideMenu)
 
       if (!a) {
         return
       }
 
       if (a.length === 0) {
-                a = querySelector('.side-menu-app:first-child a', sideMenu)
+        a = sideMenu.querySelector('.side-menu-app:first-child a')
       }
 
       if (a.length > 0) {
@@ -144,7 +119,7 @@ if ($_['always-displayed']) {
     headerMenuOpener.addEventListener('click', () => {
       sideMenu.classList.add('open')
 
-            const a = querySelector('.side-menu-app.active a', sideMenu)
+      const a = sideMenu.querySelector('.side-menu-app.active a')
 
       if (a !== null) {
         a.focus()
@@ -194,7 +169,7 @@ if ($_['always-displayed']) {
   sideMenuContainer.appendChild(sideMenu)
 
   <?php if ($_['loader-enabled'] === true): ?>
-        <?php require_once __DIR__.'/_loaderEnabled.js'; ?>
+    PageLoader()
   <?php endif; ?>
 
   <?php if ($_['opener-position'] === 'before'): ?>
@@ -202,11 +177,4 @@ if ($_['always-displayed']) {
   <?php else: ?>
     nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
   <?php endif; ?>
-
-    window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
-    window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']); ?>
-
-    <?php if ($display === 'always-displayed'): ?>
-        <?php require_once __DIR__.'/_alwaysDisplayed.js'; ?>
-    <?php endif; ?>
 })();