fix top menu generation; fix issue #66 by removing usage of setInterval

templates/js/_topMenuApps.js

@@ -1,4 +1,6 @@
 let menuCache = null
+let updateTopMenuIsRunning = false
+let forceUpdateTopMenu = false
 
 const breakpointMobileWidth = 1024
 const usePercentualAppMenuLimit = 0.8
@@ -58,6 +60,7 @@ const updateTopMenu = function() {
         } else {
             app.classList.remove('hidden')
             app.classList.add('app-external-site')
+
             appShown.push(app)
 
             navigationAppsHtml = navigationAppsHtml + app.outerHTML
@@ -66,6 +69,7 @@ const updateTopMenu = function() {
         if (targetBlankApps.indexOf(dataId) !== -1) {
             querySelector('a', app).setAttribute('target', '_blank')
         }
+
     }
 
     navigationApps.innerHTML = navigationAppsHtml
@@ -88,12 +92,6 @@ const updateTopMenu = function() {
         appCount = minAppsDesktop
     }
 
-    if (appCount === 0) {
-        menu.classList.add('hidden')
-    } else {
-        menu.classList.remove('hidden')
-    }
-
     menu.style.opacity = 1
 
     if (appShown.length - 1 - appCount >= 1) {
@@ -107,20 +105,21 @@ const updateTopMenu = function() {
     let k = 0
     let notInHeader = 0
 
+
     for (let app of appShown) {
         const name = app.getAttribute('data-id')
-        const item = querySelector('#apps li[data-id=' + name + '].app-external-site')
+        const li = querySelector('#apps li[data-id=' + name + '].app-external-site')
 
         if (k < appCount && appCount > 0) {
             app.classList.remove('hidden')
-            lastShownApp = app
+            li.classList.add('in-header')
 
-            item.classList.add('in-header')
+            lastShownApp = app
         } else {
             app.classList.add('hidden')
-            notInHeader++
+            li.classList.remove('in-header')
 
-            item.classList.remove('in-header')
+            notInHeader++
 
             const a = querySelector('a', app)
 
@@ -129,7 +128,7 @@ const updateTopMenu = function() {
                 app.classList.remove('hidden')
                 notInHeader++
 
-                item.classList.add('in-header')
+                li.classList.add('in-header')
             }
         }
 
@@ -172,7 +171,7 @@ const updateTopMenu = function() {
             const svg = querySelector('svg', app)
 
             if (querySelectorAll('svg defs', app).length > 0) {
-                return
+                continue
             }
 
             const defs = `
@@ -202,4 +201,17 @@ const updateTopMenu = function() {
     menuCache = menu.innerHTML + menu.nextSibling.innerHTML
 }
 
-setInterval(updateTopMenu, 1000)
+
+for (let timeout of [300, 500, 700]) {
+    setTimeout(updateTopMenu, timeout)
+}
+
+let resizeTimeout = null;
+
+window.addEventListener('resize', () => {
+    if (resizeTimeout !== null) {
+        clearTimeout(resizeTimeout)
+    }
+
+    resizeTimeout = setTimeout(updateTopMenu, 100)
+})