Adjust menu loading and styles to be more complete (#1544)

Rework the links provided and menu styling to allow for a clear menu
edge, and a slight highlighting when hovering. Ensures that clicking
anywhere in the highlighted section should bring you to the selected
version.

docs/_sass/custom/custom.scss

@@ -85,8 +85,5 @@ ul#toc li {
 
 .plugin-version-menu-background-fonts-style {
   @include fs-2;
-  @media (prefers-color-scheme: dark) {
+  background-color: inherit;
-    background-color: $grey-dk-300;
-    color: $grey-dk-000;
-  }
 }

docs/assets/js/plugin_versions_menu.js

@@ -47,61 +47,62 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
         const defaultBranch = await defaultBranchPromise;
         options.unshift({ value: 'latest', text: defaultBranch });
 
-        var current = "";
+        var currentVersion = "";
         const versionPath = `${basePath}/version/`;
         const path = window.location.pathname.toLowerCase();
         if (path.startsWith(versionPath)) {
             const start = versionPath.length;
-            const end = path.indexOf('/', start);
+            const end = path.indexOf('/', start+1);
-            current = path.substring(start, end);
+            currentVersion = path.substring(start, end < 0 ? path.length : end);
+            currentPage = path.substring(end < 0 ? path.length : end);
         } else {
-            current = defaultBranch;
+            currentVersion = defaultBranch;
+            currentPage = path.substring(basePath.length);
         }
-        menu.innerHTML = `Plugin Version: ${current}`;
+        menu.innerHTML = `Plugin Version: ${currentVersion}`;
         menu.appendChild(dropdown);
 
         options.forEach( item => {
-            var opt = document.createElement('a');
+            var link = document.createElement('a');
-            opt.href = item.value === 'latest' ? '' : `${versionPath}/${item.value}`;
+            var wrapper = document.createElement('div');
-            opt.innerHTML = item.text;
+            link.href = (item.value === 'latest' ? basePath : versionPath + item.value) + currentPage;
-            opt.style.cssText = `
+            link.innerHTML = item.text;
-            padding-left: 1rem;
+            link.className = 'plugin-version-menu-option';
-            `
+            link.style.cssText = `
+            width: 100%;
+            padding: 0.5rem 2rem 0.5rem 1rem;
+            display: block;
+            `;
+            wrapper.style.cssText = `
+            width: 100%;
+            height: 100%;
+            display: block;
+            backdrop-filter: brightness(0.85);
+            `;
 
-            if (item.value === options[0].value) {
+            wrapper.addEventListener('mouseover', function(e) { brightenMenuOption(e.target); });
-                opt.className = "plugin-version-selected"
+            wrapper.addEventListener('mouseout', function(e) { restoreMenuOption(e.target); });
+
+            if (item.text === currentVersion) {
+                link.style.fontWeight = 'bold';
             }
 
-            dropdown.appendChild(opt);
+            wrapper.appendChild(link);
+            dropdown.appendChild(wrapper);
         });
     };
 
-    function showMenu(menu, dropdown) {
+    function brightenMenuOption(option) {
-        dropdown.style.display = 'block';
+        option.style.backdropFilter = 'brightness(1.1)';
-        menu.style.backgroundImage = menuBackgroundImageOpen;
+        // possible alternatives
+        //option.style.boxShadow = 'inset 0 0 0 10em rgba(255, 255, 255, 0.6)';
+        //option.style.backgroundColor = 'rgba(255,255,255,0.5)';
     }
 
-    function hideMenu(menu, dropdown) {
+    function restoreMenuOption(option) {
-        dropdown.style.display = 'none';
+        option.style.backdropFilter = 'brightness(0.9)';
-        menu.style.backgroundImage = menuBackgroundImageClosed;
+        //option.style.boxShadow = 'none';
-    }
+        //option.style.backgroundColor = 'transparent';
-
-    function toggleMenu(menu, dropdown) {
-        if (dropdown.style.display == 'none') {
-            showMenu(menu, dropdown);
-        } else {
-            hideMenu(menu, dropdown);
-        }
-    }
-
-    function toggleMenuDisplay(menuElement, dropDownElement, e) {
-        if (dropDownElement.contains(e.target)) {
-            return;
-        }
-
-        if (menuElement.contains(e.target)) {
-            toggleMenu(menuElement, dropDownElement);
-        }
     }
 
     // get main menu element and style as needed
@@ -116,28 +117,60 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
       background-image: ${menuBackgroundImageClosed};
       background-repeat: no-repeat;
       background-position: 90% 40%;
+      cursor: pointer;
     `;
 
     dropdown = document.createElement('div');
     dropdown.id = "plugin-version-dropdown";
     dropdown.className = 'plugin-version-menu-background-fonts-style';
     dropdown.style.cssText = `
-      position: absolute;
+      position: relative;
-      min-width: 145px;
+      top: 0.25rem;
-      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+      left: -0.25rem;
-      padding: 12px 16px;
+      min-width: 150px;
+      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
+      padding: 0;
       z-index: 1;
     `;
+
+    function showMenu() {
+        dropdown.style.display = 'block';
+        menuElement.style.backgroundImage = menuBackgroundImageOpen;
+    }
+
+    function hideMenu() {
+        dropdown.style.display = 'none';
+        menuElement.style.backgroundImage = menuBackgroundImageClosed;
+    }
+
+    function toggleMenu() {
+        if (dropdown.style.display == 'none') {
+            showMenu();
+        } else {
+            hideMenu();
+        }
+    }
+
+    function toggleMenuDisplay(e) {
+        if (dropdown.contains(e.target)) {
+            return;
+        }
+
+        if (menuElement.contains(e.target)) {
+            toggleMenu();
+        }
+    }
+
     // ensure initial style of drop down menu is set
-    toggleMenu(menuElement, dropdown);
+    toggleMenu();
 
     // populate menu with available options and current version
     loadOptions(menuElement, dropdown);
-    menuElement.addEventListener('click', function(e) {toggleMenuDisplay(menuElement, dropdown, e);})
+    menuElement.addEventListener('click', toggleMenuDisplay)
     window.addEventListener('click', function(e){
         if (!menuElement.contains(e.target)){
             // Clicked outside the drop down menu
-            hideMenu(menuElement, dropdown);
+            hideMenu();
         }
     });
 }(repository_nwo, basePath);