switcher: reset selection after browser back navigation #1065

assets/js/theme.js

@@ -1444,6 +1444,42 @@ function scrollToPositions() {
   }
 }
 
+function handleHistoryClearer() {
+  document.querySelectorAll('.R-historyclearer button').forEach(function (select) {
+    select.addEventListener('click', function (event) {
+      clearHistory();
+    });
+  });
+}
+
+function handleLanguageSwitcher() {
+  document.querySelectorAll('.R-languageswitcher select').forEach(function (select) {
+    select.addEventListener('change', function (event) {
+      const url = this.options[`R-select-language-${this.value}`].dataset.url;
+      this.value = this.querySelector('[data-selected]')?.value ?? select.value;
+      window.location = url;
+    });
+  });
+}
+
+function handleVariantSwitcher() {
+  document.querySelectorAll('.R-variantswitcher select').forEach(function (select) {
+    select.addEventListener('change', function (event) {
+      window.relearn.changeVariant(this.value);
+    });
+  });
+}
+
+function handleVersionSwitcher() {
+  document.querySelectorAll('.R-versionswitcher select').forEach(function (select) {
+    select.addEventListener('change', function (event) {
+      const url = (this.options[`R-select-version-${this.value}`].dataset.abs == 'true' ? '' : window.relearn.relBaseUri) + this.options[`R-select-version-${this.value}`].dataset.uri + window.relearn.path;
+      this.value = this.querySelector('[data-selected]')?.value ?? select.value;
+      window.location = url;
+    });
+  });
+}
+
 window.addEventListener('popstate', function (event) {
   scrollToPositions();
 });
@@ -1757,6 +1793,10 @@ function ready(fn) {
 ready(function () {
   initArrowVerticalNav();
   initArrowHorizontalNav();
+  handleHistoryClearer();
+  handleLanguageSwitcher();
+  handleVariantSwitcher();
+  handleVersionSwitcher();
   initMermaid();
   initOpenapi();
   initMenuScrollbar();

docs/assets/js/variant.js

@@ -45,14 +45,14 @@ var variants = {
 
   addCustomVariantOption: function () {
     var customvariant = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariant');
-    var select = document.querySelector('#R-select-variant');
+    if (!customvariant ) {
-    if (!customvariant || !select) {
       return;
     }
-    var option = document.querySelector('#R-select-variant-' + this.customvariantname);
+    document.querySelectorAll('.R-variantswitcher select').forEach((select) => {
+      var option = select.options[`R-select-variant-${this.customvariantname}`];
       if (!option) {
         option = document.createElement('option');
-      option.id = 'R-select-variant-' + this.customvariantname;
+        option.id = `R-select-variant-${this.customvariantname}`;
         option.value = this.customvariantname;
         option.text = this.customvariantname.replace(/-/g, ' ').replace(/\w\S*/g, function (w) {
           return w.replace(/^\w/g, function (c) {
@@ -61,13 +61,13 @@ var variants = {
         });
         select.appendChild(option);
       }
+    });
   },
 
   removeCustomVariantOption: function () {
-    var option = document.querySelector('#R-select-variant-' + this.customvariantname);
+    document.querySelectorAll(`.R-variantswitcher option[value=${this.customvariantname}]`).forEach((option) => {
-    if (option) {
       option.remove();
-    }
+    });
   },
 
   addCustomVariantStyles: function () {

layouts/partials/sidebar/element/historyclearer.html

@@ -7,7 +7,7 @@
                 <i class="{{ $icon }}"></i>
                 <span>&nbsp;</span>
                 <div class="control-style">
-                  <button onclick="clearHistory();">{{ T "Clear-History" }}</button>
+                  <button>{{ T "Clear-History" }}</button>
                 </div>
                 <div class="clear"></div>
               </div>

layouts/partials/sidebar/element/languageswitcher.html

@@ -8,10 +8,10 @@
                 <span>&nbsp;</span>
                 <div class="control-style">
                   <label class="a11y-only" for="R-select-language">{{ T "Language" }}</label>
-                  <select id="R-select-language" onchange="location = this.querySelector( `#R-select-language-${this.value}` ).dataset.url;">
+                  <select id="R-select-language">
                     {{- $pageLang := .page.Language.Lang }}
                     {{- range .page.AllTranslations }}
-                    <option id="R-select-language-{{ .Language.Lang }}" value="{{ .Language.Lang }}" data-url="{{ partial "permalink.gotmpl" (dict "to" .) }}" lang="{{ .Language.LanguageCode }}"{{ if eq $pageLang .Language.Lang }} selected{{ end }}>{{ .Language.LanguageName }}</option>
+                    <option id="R-select-language-{{ .Language.Lang }}" value="{{ .Language.Lang }}" data-url="{{ partial "permalink.gotmpl" (dict "to" .) }}" lang="{{ .Language.LanguageCode }}"{{ if eq $pageLang .Language.Lang }} selected data-selected{{ end }}>{{ .Language.LanguageName }}</option>
                     {{- end }}
                   </select>
                 </div>

layouts/partials/sidebar/element/variantswitcher.html

@@ -9,7 +9,7 @@
                 <span>&nbsp;</span>
                 <div class="control-style">
                   <label class="a11y-only" for="R-select-variant">{{ T "Theme" }}</label>
-                  <select id="R-select-variant" onchange="window.relearn.changeVariant( this.value );">
+                  <select id="R-select-variant">
                     {{- $firstvariant := true }}
                     {{- range $themevariants }}
                       {{- $themevariant := . }}

layouts/partials/sidebar/element/versionswitcher.html

@@ -10,12 +10,9 @@
                 <span>&nbsp;</span>
                 <div class="control-style">
                   <label class="a11y-only" for="R-select-version">{{ T "Version" }}</label>
-                  <select id="R-select-version" onchange="location = this.querySelector( `#R-select-version-${this.value}` ).dataset.abs == 'true' ?
+                  <select id="R-select-version">
-                    this.querySelector( `#R-select-version-${this.value}` ).dataset.uri + window.relearn.path :
-                    window.relearn.relBaseUri + this.querySelector( `#R-select-version-${this.value}` ).dataset.uri + window.relearn.path;"
-                  >
                     {{- range $versions }}
-                    <option id="R-select-version-{{ .identifier | anchorize }}" value="{{ .identifier | anchorize }}" data-identifier="{{ .identifier }}" data-abs="{{ .isAbs }}" data-uri="{{ .baseURL }}"{{ if eq $pageVersion .identifier }} selected{{ end }}>{{ .title }}</option>
+                    <option id="R-select-version-{{ .identifier | anchorize }}" value="{{ .identifier | anchorize }}" data-identifier="{{ .identifier }}" data-abs="{{ .isAbs }}" data-uri="{{ .baseURL }}"{{ if eq $pageVersion .identifier }} selected data-selected{{ end }}>{{ .title }}</option>
                     {{- end }}
                   </select>
                 </div>

layouts/partials/stylesheet.html

@@ -153,14 +153,12 @@
         document.documentElement.dataset.rThemeVariant = variant;
         if (oldVariant != variant) {
           document.dispatchEvent( new CustomEvent('themeVariantLoaded', { detail: { variant, oldVariant } }) );
+          window.relearn.markVariant();
         }
       }
       window.relearn.markVariant = function() {
         var variant = window.localStorage.getItem(window.relearn.absBaseUri + "/variant");
-        var select = document.querySelector("#R-select-variant");
+        document.querySelectorAll(".R-variantswitcher select").forEach((select) => {select.value = variant;});
-        if (select) {
-          select.value = variant;
-        }
       }
       window.relearn.initVariant = function() {
         var variant = window.localStorage.getItem(window.relearn.absBaseUri + "/variant") ?? "";

layouts/partials/version.txt

@@ -1 +1 @@
-7.5.0+a05b2124652293b1be3742f26aa3913861f956de
+7.5.0+3ccc8f777f8dd35f750a00ca986f9db808548306