CLDR-7459 make sideways view be by-request

tools/cldr-apps/js/src/esm/cldrSideways.mjs

@@ -8,7 +8,9 @@ import * as cldrLoad from "./cldrLoad.mjs";
 import * as cldrStatus from "./cldrStatus.mjs";
 import * as cldrSurvey from "./cldrSurvey.mjs";
 
-const SIDEWAYS_DEBUG = false;
+const SIDEWAYS_DEBUG = true;
+/** If true only load when clicked */
+const LOAD_ON_DEMAND = true;
 
 const NON_BREAKING_SPACES = "\u00A0\u00A0\u00A0"; // non-breaking spaces
 const UNEQUALS_SIGN = "\u2260\u00A0"; // U+2260 = "≠"
@@ -70,7 +72,17 @@ function loadMenu(regionalVariantsWrapper, xpstrid) {
   }
 }
 
-function fetchAndLoadMenu(regionalVariantsWrapper, xpstrid, cacheKey) {
+function reallyFetch(regionalVariantsWrapper, xpstrid, cacheKey) {
+  cldrLoad.myLoad(
+    getSidewaysUrl(curLocale, xpstrid),
+    "sidewaysView",
+    function (json) {
+      setMenuFromData(regionalVariantsWrapper, json, cacheKey);
+    }
+  );
+}
+
+function fetchAfterDelay(regionalVariantsWrapper, xpstrid, cacheKey) {
   clearMyTimeout();
   regionalVariantsWrapper.setLoading();
   sidewaysShowTimeoutId = window.setTimeout(function () {
@@ -86,17 +98,22 @@ function fetchAndLoadMenu(regionalVariantsWrapper, xpstrid, cacheKey) {
       }
       return;
     }
-    cldrLoad.myLoad(
-      getSidewaysUrl(curLocale, xpstrid),
-      "sidewaysView",
-      function (json) {
-        setMenuFromData(regionalVariantsWrapper, json, cacheKey);
-      }
-    );
+    reallyFetch(regionalVariantsWrapper, xpstrid, cacheKey);
   }, fetchDelayMilliseconds);
   fetchDelayMilliseconds = USUAL_DELAY_MILLISECONDS;
 }
 
+function fetchAndLoadMenu(regionalVariantsWrapper, xpstrid, cacheKey) {
+  if (!LOAD_ON_DEMAND) {
+    fetchAfterDelay(regionalVariantsWrapper, xpstrid, cacheKey);
+  } else {
+    regionalVariantsWrapper.setClickToLoad(() => {
+      regionalVariantsWrapper.setLoading();
+      reallyFetch(regionalVariantsWrapper, xpstrid, cacheKey);
+    });
+  }
+}
+
 function clearMyTimeout() {
   if (sidewaysShowTimeoutId != -1) {
     // https://www.w3schools.com/jsref/met_win_clearinterval.asp

tools/cldr-apps/js/src/views/InfoRegionalVariants.vue

@@ -25,6 +25,9 @@
         </option>
       </select>
     </div>
+    <div v-else-if="clickToLoad">
+      <button @click="clickClickToLoad">Check Regional Variants…</button>
+    </div>
   </div>
 </template>
 
@@ -41,30 +44,50 @@ export default {
       label: null,
       loading: false,
       loadingMessage: null,
+      clickToLoad: null,
     };
   },
 
   methods: {
+    clear() {
+      this.label = this.items = this.chosenLocale = this.curLocale = null;
+      this.loading = false;
+    },
+
     setLoading() {
+      this.clear();
+      this.clickToLoad = null;
       if (!this.loadingMessage) {
         this.loadingMessage = cldrText.get("sideways_loading1");
       }
       this.loading = true;
-      this.label = this.items = this.chosenLocale = this.curLocale = null;
     },
 
     setData(localeId, d) {
+      this.clickToLoad = null;
       this.chosenLocale = this.curLocale = localeId;
       this.label = d?.label || null;
       this.items = d?.items || null;
       this.loading = false;
     },
 
     goToLocale() {
+      this.clickToLoad = null;
       if (this.chosenLocale !== this.curLocale) {
         cldrSideways.goToLocale(this.chosenLocale);
       }
     },
+
+    setClickToLoad(fn) {
+      this.clear();
+      this.clickToLoad = fn;
+    },
+
+    clickClickToLoad() {
+      if (this.clickToLoad) {
+        this.clickToLoad();
+      }
+    },
   },
 };
 </script>