Changeset 36371


Ignore:
Timestamp:
2022-08-14T17:29:18+12:00 (7 weeks 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:
3 added
2 edited

Legend:

Unmodified
Added
Removed
  • documented-examples/trunk/style-e/etc/collectionConfig.xml

    r36370 r36371  
    1919    </xsl:variable>
    2020    <!--
    21     <link href="{$httpCollection}/style/custom-style.css" rel="stylesheet" type="text/css"/>
     21    <link href="{$httpCollection}/style/custom-style.css" rel="stylesheet" type="text/css"/>   
    2222    -->
     23<link rel="stylesheet" href="{$httpCollection}/style/gs3-style-default-extra.css" type="text/css"
     24   title="GS3 Style" id="custom-style" charset="UTF-8"/>
     25   
    2326<script src="{$httpCollection}/script/custom-script.js" type="text/javascript">
    2427</script>
     
    2629  </xsl:template>
    2730
     31
     32    <xsl:template name="create-banner"> 
     33    <div class="choose_style">
     34        Choose a style:
     35        <a href="#" onclick="replaceStyle('gs3-style-default-extra');return false;">Default Greenstone</a>,
     36        <a href="#" onclick="replaceStyle('gs3-style-blue');return false;">Blue</a>,
     37        <a href="#" onclick="replaceStyle('gs3-style-olive-purple');return false;">OlivePurple</a>,     
     38        <a href="#" onclick="replaceStyle('');return false;">None</a>
     39        </div>
     40       
     41    <div id="gs_banner" class="ui-widget-header ui-corner-bottom">     
     42      <div id="titlesearchcontainer">
     43     
     44    <xsl:call-template name="page-title-area"/>
     45    <xsl:call-template name="quick-search-area"/>
     46    <div style="clear:both;"><xsl:text> </xsl:text></div>   
     47      </div>
     48      <xsl:call-template name="browsing-tabs"/>
     49       
     50   
     51    </div>
     52  </xsl:template>
    2853</format>
    2954    <search type="mgpp">
  • documented-examples/trunk/style-e/script/custom-script.js

    r36370 r36371  
     1function replaceStyle(stylesheet) {
     2    //alert("In custom-sript.js::ReplaceStyle()");
     3    var body = document.getElementsByTagName('body')[0];
     4    var linkEl = document.getElementById("custom-style");
     5    var href = linkEl.getAttribute("href");
     6    var lastSlashIndex = href.lastIndexOf("/");
     7    var hrefPrefix = href.substring(0, lastSlashIndex);
     8
     9    href = hrefPrefix + "/" + stylesheet + ".css";
     10    linkEl.setAttribute("href", href);
     11
     12   
     13    // https://techstacker.com/how-to-remove-all-css-from-site-with-javascript/
     14    if(stylesheet == "") { /* gs3-style-red */
     15        document
     16        .querySelectorAll('style,link[rel="stylesheet"]')
     17        .forEach(item => item.remove())
     18       
     19        // https://code-boxx.com/dynamically-load-replace-css/
     20        //document.head.appendChild(linkEl);
     21    }   
     22 
     23    //reloadCss(); // https://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page
     24}
     25
     26
    127// This function copied from extra.dm of style-e DEC collection
    228// It changes the current stylesheet to the named one of parameter
    329function SetStyle(stylename) {
     30    //alert("In custom-sript.js::SetStyle()");
    431  var body = document.getElementsByTagName('body')[0];
    532  body.style.backgroundImage = "";
     
    1542  }
    1643}
     44
Note: See TracChangeset for help on using the changeset viewer.