Changeset 38912 for documented-examples

Timestamp:

2024-04-09T12:56:44+12:00 (3 weeks ago)

Author:

kjdon

Message:

indented this nicely. Also, we need to check whether linkEl is null - which it might be if user had previously clicked 'none'. In that case lets just rload the current page, which gets us back with all stylesheet links restored. to the default, not the one the user clicked, but never mind...

File:

• documented-examples/trunk/style-e/script/custom-script.js (modified) (2 diffs)

documented-examples/trunk/style-e/script/custom-script.js

@@ -1 +1 @@
 function replaceStyle(stylesheet) {
-    //alert("In custom-sript.js::ReplaceStyle()");
-    var body = document.getElementsByTagName('body')[0];
-    var linkEl = document.getElementById("custom-style");
-    var href = linkEl.getAttribute("href");
-    var lastSlashIndex = href.lastIndexOf("/");
-    var hrefPrefix = href.substring(0, lastSlashIndex);
+//  alert("In custom-sript.js::ReplaceStyle()");
+    var body = document.getElementsByTagName('body')[0];
+    var linkEl = document.getElementById("custom-style");
+    if (linkEl === null) {
+    // we had previously clicked null, which means all stylesheet links are removed
+    // so we can't update a link. Lets just reload the page. It won't then use the selected stylesheet, but never mind.
+    location.reload();
+    return;
 
-    href = hrefPrefix + "/" + stylesheet + ".css";
-    linkEl.setAttribute("href", href);
-
+    }
+    var href = linkEl.getAttribute("href");
+    var lastSlashIndex = href.lastIndexOf("/");
+    var hrefPrefix = href.substring(0, lastSlashIndex);
+    
+    href = hrefPrefix + "/" + stylesheet + ".css";
+    linkEl.setAttribute("href", href);
+    
+    
+    // https://techstacker.com/how-to-remove-all-css-from-site-with-javascript/
+    if(stylesheet == "") { /* gs3-style-red */
+    document
+        .querySelectorAll('style,link[rel="stylesheet"]')
+        .forEach(item => item.remove())
     
-    // https://techstacker.com/how-to-remove-all-css-from-site-with-javascript/
-    if(stylesheet == "") { /* gs3-style-red */
-        document
-        .querySelectorAll('style,link[rel="stylesheet"]')
-        .forEach(item => item.remove())
-        
-        // https://code-boxx.com/dynamically-load-replace-css/
-        //document.head.appendChild(linkEl);
-    }   
-  
-    //reloadCss(); // https://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page
+    // https://code-boxx.com/dynamically-load-replace-css/
+    //document.head.appendChild(linkEl);
+    }   
+    
+    //reloadCss(); // https://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page
 }
 
@@ -28 +35 @@
 // It changes the current stylesheet to the named one of parameter
 function SetStyle(stylename) {
-    //alert("In custom-sript.js::SetStyle()");
-  var body = document.getElementsByTagName('body')[0];
-  body.style.backgroundImage = "";
-  
-  styles = document.styleSheets;
-  var i;
-  for (i=0;i<styles.length;i++) {
-    style = styles[i];
-    if (style.title == stylename)
-      style.disabled = false;
-    else
-      style.disabled = true;
-  }
+    //alert("In custom-sript.js::SetStyle()");
+    var body = document.getElementsByTagName('body')[0];
+    body.style.backgroundImage = "";
+    
+    styles = document.styleSheets;
+    var i;
+    for (i=0;i<styles.length;i++) {
+    style = styles[i];
+    if (style.title == stylename)
+        style.disabled = false;
+    else
+        style.disabled = true;
+    }
 }