Merge pull request #65 from ninmonkey/Initialize-Download-Links-OnLoad

Initialize download links on page load. Fixes (#64)
2bitdesigns · May 13, 2024 · 207dac9 · 207dac9
2 parents 0c85909 + 5ffce6d
commit 207dac9
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 51 deletions.
diff --git a/docs/_includes/PaletteSelector.html b/docs/_includes/PaletteSelector.html
@@ -1,4 +1,4 @@
-<div class="flexRow centered centeredText wholeWidth">        
+<div class="flexRow centered centeredText wholeWidth">
     <select id="schemeSelector" onchange="SetColorScheme(document.getElementById('schemeSelector').value); ">
     </select>
   </div>
@@ -9,15 +9,36 @@
       var opt = document.createElement("option")
       opt.value = colorSchemes[colorScheme];
       opt.innerHTML = colorSchemes[colorScheme];
-      schemeSelector.append(opt);            
-    }                
+      schemeSelector.append(opt);
+    }
   </script>
   {% if page.colorSchemeName %}
-  <script type="text/javascript" />
-  SetColorScheme("{{page.colorSchemeFileName}}");
+  <script type="text/javascript" >
+
+    function InitOnDomLoad() {
+        // ensure download links have valid initial values
+        // alternatively, calling random also works:  feelingLucky(document.getElementById('themeSelector'))
+        SetColorScheme("{{page.colorSchemeFileName}}");
+    }
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", InitOnDomLoad)
+    } else {
+        InitOnDomLoad()
+    }
   </script>
   {% else %}
-  <script type="text/javascript" />
-  SetColorScheme("Konsolas");
-  </script>
-  {% endif %}  
+  <script type="text/javascript">
+
+    function InitOnDomLoad() {
+        // ensure download links have valid initial values
+        // alternatively, calling random also works:  feelingLucky(document.getElementById('themeSelector'))
+        SetColorScheme("Konsolas")
+    }
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", InitOnDomLoad)
+    } else {
+        InitOnDomLoad()
+    }
+</script>
+  {% endif %}
+
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -32,7 +32,7 @@
     {% endif %}
     {% if page.description %}
     <meta content="{{ page.description }}" property="og:description" />
-    <meta name="description" content="{{ page.description }}" />    
+    <meta name="description" content="{{ page.description }}" />
     {% elsif site.description %}
     <meta content="{{ site.description }}" property="og:description" />
     {% endif %}
@@ -48,34 +48,34 @@
     {% if page.image %}
       <meta content="{{ page.image }}" property="og:image" />
       <meta content="{{ page.image }}" property="twitter:image" />
-    {% endif %}    
+    {% endif %}
     <style>
       .monospace {
         font-family: 'Courier New', Courier, monospace;
         white-space: pre;
         max-width: 90%;
       }
-      
+
       .flexible {
         display: flex;
       }
       .centeredFlex {
-        justify-content: center;    
+        justify-content: center;
       }
-    
+
       .centered {
         margin-left: auto;
         margin-right: auto;
       }
-      
+
       .padded {
         padding: 1em;
       }
 
       .centeredText {
         text-align:center;
       }
-    
+
       .flexRow {
         flex-direction: row;
       }
@@ -85,20 +85,20 @@
       .halfWidth {
         width: 50%;
       }
-    
+
       .halfOrWholeWidth {
         width: 50%;
       }
-    
+
       .collapsible {
         visibility: visible;
       }
-      
-    
+
+
       .rowOrColumn {
         flex-direction: row;
       }
-    
+
       @media (max-width: 960px) {
         .collapsible {
             visibility: collapse;
@@ -110,20 +110,20 @@
           width: 100%;
         }
       }
-    
-    
+
+
       body {
         width: 100%;
         height: 100%;
         font-family: 'Righteous';
         letter-spacing: 0.15em;
       }
-    
+
       pre, code {
         font-family: monospace;
-        letter-spacing: normal;    
+        letter-spacing: normal;
       }
-    
+
       a {
         text-decoration: none;
       }
@@ -136,13 +136,13 @@
       tr, th {
         text-align: center;
       }
-    
+
     </style>
   </head>
-<body class="background foreground">    
+<body class="background foreground">
     <div style="position: fixed; margin-top: 1%; margin-right: 1%; right:3%; top:3%">
     <a href='https://github.com/2bitdesigns/4bitcss'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" class="ansi6-stroke" /></svg></a></div>
-    <div class="centered halfOrWholeWidth flexible centered centeredFlex" style="margin-top:-5%">      
+    <div class="centered halfOrWholeWidth flexible centered centeredFlex" style="margin-top:-5%">
       <svg viewbox='0 0 200 200' width='33%' height='33%' class='centered'><a href='/'><?xml version="1.0" encoding="utf-8"?>
 <!-- Generated with PSSVG 0.2.10 <https://github.com/StartAutomating/PSSVG> -->
 <svg viewBox="0 0 400 400" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
@@ -166,6 +166,6 @@ <h1 class="centered halfOrWholeWidth flexible centered centeredFlex">{{ page.tit
       <div class="flexRow">
         {{ content }}
       </div>
-    </div>    
+    </div>
 </body>
 </html>
diff --git a/docs/_layouts/default.ps.html b/docs/_layouts/default.ps.html
@@ -32,7 +32,7 @@
     {% endif %}
     {% if page.description %}
     <meta content="{{ page.description }}" property="og:description" />
-    <meta name="description" content="{{ page.description }}" />    
+    <meta name="description" content="{{ page.description }}" />
     {% elsif site.description %}
     <meta content="{{ site.description }}" property="og:description" />
     {% endif %}
@@ -48,34 +48,34 @@
     {% if page.image %}
       <meta content="{{ page.image }}" property="og:image" />
       <meta content="{{ page.image }}" property="twitter:image" />
-    {% endif %}    
+    {% endif %}
     <style>
       .monospace {
         font-family: 'Courier New', Courier, monospace;
         white-space: pre;
         max-width: 90%;
       }
-      
+
       .flexible {
         display: flex;
       }
       .centeredFlex {
-        justify-content: center;    
+        justify-content: center;
       }
-    
+
       .centered {
         margin-left: auto;
         margin-right: auto;
       }
-      
+
       .padded {
         padding: 1em;
       }
 
       .centeredText {
         text-align:center;
       }
-    
+
       .flexRow {
         flex-direction: row;
       }
@@ -85,20 +85,20 @@
       .halfWidth {
         width: 50%;
       }
-    
+
       .halfOrWholeWidth {
         width: 50%;
       }
-    
+
       .collapsible {
         visibility: visible;
       }
-      
-    
+
+
       .rowOrColumn {
         flex-direction: row;
       }
-    
+
       @media (max-width: 960px) {
         .collapsible {
             visibility: collapse;
@@ -110,20 +110,20 @@
           width: 100%;
         }
       }
-    
-    
+
+
       body {
         width: 100%;
         height: 100%;
         font-family: 'Righteous';
         letter-spacing: 0.15em;
       }
-    
+
       pre, code {
         font-family: monospace;
-        letter-spacing: normal;    
+        letter-spacing: normal;
       }
-    
+
       a {
         text-decoration: none;
       }
@@ -136,10 +136,10 @@
       tr, th {
         text-align: center;
       }
-    
+
     </style>
   </head>
-<body class="background foreground">    
+<body class="background foreground">
     <div style="position: fixed; margin-top: 1%; margin-right: 1%; right:3%; top:3%">
     <!--{
 $gitHubIcon = Invoke-RestMethod -Uri https://raw.githubusercontent.com/feathericons/feather/master/icons/github.svg
@@ -149,7 +149,7 @@
 ) + "</a>"
       }-->
     </div>
-    <div class="centered halfOrWholeWidth flexible centered centeredFlex" style="margin-top:-5%">      
+    <div class="centered halfOrWholeWidth flexible centered centeredFlex" style="margin-top:-5%">
       <!--{
 "<svg viewbox='0 0 200 200' width='33%' height='33%' class='centered'><a href='/'>" + $(
 $path = Split-Path $pwd |
@@ -166,6 +166,6 @@ <h1 class="centered halfOrWholeWidth flexible centered centeredFlex">{{ page.tit
       <div class="flexRow">
         {{ content }}
       </div>
-    </div>    
+    </div>
 </body>
 </html>