Make switcher JavaScript unparsed and reduce elements (#1539)

Avoid the need to parse the main version switching menu creation and
handling code by moving the site constants to a separate file.

Additionally move more of the element construction into the JavaScript
code to make it closer to a web component and facilitate more control by
a common script to be loaded by all published versions.

docs/_assets/js/plugin_versions_menu.js

@@ -1,22 +1,9 @@
-{%- comment %}handle development serving site on root{% endcomment %}
-{%- if site.baseurl.size == 0 %}
-const basePath = '';
-{%- else %}
-const basePath = '/{{ site.github.repository_name }}';
-{%- endif %}
-
-{%- if site.repository_nwo != nil %}
-const repository_nwo = '{{ site.repository_nwo }}';
-{%- else %}
-const repository_nwo = '{{ site.github.repository_nwo }}';
-{%- endif %}
-
 const { buildWebStorage, setupCache } = window.AxiosCacheInterceptor;
 const storage = buildWebStorage(sessionStorage, 'axios-cache:');
 const axiosCached = setupCache(axios.create(), { storage });
 
 changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
-    async function loadOptions(select) {
+    async function loadOptions(selectElement) {
         const defaultBranchPromise = axiosCached.get(
             `https://api.github.com/repos/${repository_nwo}`,
         ).then(res => {
@@ -62,7 +49,7 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
             opt.value = item.value;
             opt.innerHTML = item.text;
 
-            select.appendChild(opt);
+            selectElement.appendChild(opt);
         });
 
         const path = window.location.pathname.toLowerCase();
@@ -70,9 +57,9 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
         if (path.startsWith(versionPath)) {
             const start = versionPath.length;
             const end = path.indexOf('/', start);
-            select.value = path.substring(start, end);
+            selectElement.value = path.substring(start, end);
         } else {
-            select.value = 'latest';
+            selectElement.value = 'latest';
         }
     };
 
@@ -90,7 +77,14 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
         window.location.pathname = targetPath;
     };
 
-    loadOptions(document.getElementById("plugin-version"));
+    var pluginVersionMenuElement = document.getElementById("plugin-version-menu")
+    pluginVersionMenuElement.innerHTML = "Plugin Version: "
+    var selectElement = document.createElement('select');
+    selectElement.id = "plugin-version"
+    selectElement.addEventListener('change', function() {changeVersion(this); });
+    pluginVersionMenuElement.appendChild(selectElement);
+
+    loadOptions(selectElement);
 
     return changeVersion;
 }(repository_nwo, basePath);

docs/_assets/js/site_constants.js.liquid

@@ -0,0 +1,14 @@
+{%- comment %}handle development serving site on root{% endcomment %}
+{%- if site.baseurl.size == 0 %}
+const basePath = '';
+{%- else %}
+const basePath = '/{{ site.github.repository_name }}';
+{%- endif %}
+
+{%- if site.repository_nwo != nil %}
+const repository_nwo = '{{ site.repository_nwo }}';
+{%- else %}
+const repository_nwo = '{{ site.github.repository_nwo }}';
+{%- endif %}
+
+

docs/_includes/header_custom.html

@@ -1,6 +1,3 @@
-<div class="plugin-version-select site-footer">
+<script src="{% asset "js/site_constants.js" @path %}"></script>
-  Plugin Version:
+<div id="plugin-version-menu" class="site-footer"></div>
-  <select id="plugin-version" onChange="changeVersion(this)">
+<script src="{% asset "js/plugin_versions_menu.js" @path %}"></script>
-  </select>
-</div>
-<script src="{% asset "js/version_switcher.js" @path %}"></script>