Changeset 36371

Timestamp:

2022-08-14T17:29:18+12:00 (20 months ago)

Author:

anupama

Message:

Updates to the GS3 style-e collection, with the new styles and changed the javascript so it's better suited for switching between styles without breaking too much.

Location:

documented-examples/trunk/style-e

Files:

• etc/collectionConfig.xml (modified) (2 diffs)
• script/custom-script.js (modified) (2 diffs)
• style/gs3-style-blue.css (added)
• style/gs3-style-default-extra.css (added)
• style/gs3-style-olive-purple.css (added)

documented-examples/trunk/style-e/etc/collectionConfig.xml

@@ -19 +19 @@
     </xsl:variable>
     <!--
-    <link href="{$httpCollection}/style/custom-style.css" rel="stylesheet" type="text/css"/>
+    <link href="{$httpCollection}/style/custom-style.css" rel="stylesheet" type="text/css"/>    
     -->
+<link rel="stylesheet" href="{$httpCollection}/style/gs3-style-default-extra.css" type="text/css" 
+   title="GS3 Style" id="custom-style" charset="UTF-8"/>
+    
 <script src="{$httpCollection}/script/custom-script.js" type="text/javascript">
 </script>
@@ -26 +29 @@
   </xsl:template>
 
+
+    <xsl:template name="create-banner">  
+    <div class="choose_style">
+        Choose a style:
+        <a href="#" onclick="replaceStyle('gs3-style-default-extra');return false;">Default Greenstone</a>,
+        <a href="#" onclick="replaceStyle('gs3-style-blue');return false;">Blue</a>,
+        <a href="#" onclick="replaceStyle('gs3-style-olive-purple');return false;">OlivePurple</a>,     
+        <a href="#" onclick="replaceStyle('');return false;">None</a>
+        </div>
+        
+    <div id="gs_banner" class="ui-widget-header ui-corner-bottom">      
+      <div id="titlesearchcontainer">
+      
+    <xsl:call-template name="page-title-area"/> 
+    <xsl:call-template name="quick-search-area"/>
+    <div style="clear:both;"><xsl:text> </xsl:text></div>   
+      </div>
+      <xsl:call-template name="browsing-tabs"/>
+        
+    
+    </div>
+  </xsl:template>
 </format>
     <search type="mgpp">

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

@@ +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);
+
+    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://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
+}
+
+
 // This function copied from extra.dm of style-e DEC collection
 // 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 = "";
@@ -15 +42 @@
   }
 }
+