Changeset 38327 for main/trunk/greenstone3

Timestamp:

2023-10-24T14:28:05+13:00 (8 months ago)

Author:

kjdon

Message:

some more commits for facets. changed the buttons to use a sorting icon. uses scroll plus see more/less in case you want to expand the list

Location:

main/trunk/greenstone3/web/interfaces/default

Files:

• images/sort.png (added)
• js/facet-scripts.js (modified) (6 diffs)
• transform/pages/query.xsl (modified) (3 diffs)

main/trunk/greenstone3/web/interfaces/default/js/facet-scripts.js

@@ -1 @@
-
 var facetSortOptions = {
     valueNames: [ 'facet', 'count' ]
 }
 
+function setUpFacetList(indexname)
+{
+    var newList = new List(indexname, facetSortOptions);
+    enableMoreButtonIfNeeded(indexname);
+}
+
+function enableMoreButtonIfNeeded(indexname) {
+    var morelink = $(".expandFacetList" + indexname);
+    var tables = $(".facetTable");
+    for(var i = 0; i < tables.length; i++)
+    {
+        var $current = $(tables[i]);
+        if($current.attr("indexname") == indexname) {
+        var current = $current[0];
+        if (current.clientHeight < current.scrollHeight) {
+        morelink.css("display", "block");
+        }
+        break;
+    }
+    }
+
+}
 
 function getFacetQueryString(facetsThatAreChecked)
@@ -20 +41 @@
     var allCheckBoxes = $("#facetSelector input");
     var counts = new Array();
-//    var facetsThatAreChecked = new Set();
+
     for(var i = 0; i < allCheckBoxes.length; i++)
     {
@@ -99 +120 @@
             // only replace the facets that haven't been selected
             var $current_facets = $(".facetContainer");
+         
             for (var i=0; i<$current_facets.length; i++) {
             var $current = $($current_facets[i]);
@@ -106 +128 @@
                 var $newNode =$response.find('#'+indexName);
                 $current.replaceWith($newNode);
+                enableMoreButtonIfNeeded(indexName);
             }
             }
@@ -207 +230 @@
 
 }
-
-function expandFacetList(indexName, countSize)
+var savedFacetHeight;
+function expandFacets(indexname)
+{
+    var tables = $(".facetTable");
+    for(var i = 0; i < tables.length; i++)
+    {
+        var current = $(tables[i]);
+        if(current.attr("indexname") == indexname)
+        {
+        savedFacetHeight = current.css("max-height");
+        current.css("max-height", "none");
+        break;
+    }
+
+    }
+
+    var morelink = $(".expandFacetList" + indexname);
+    morelink.css("display", "none");
+    var lesslink = $(".collapseFacetList" + indexname);
+    lesslink.css("display", "block");
+
+
+}
+
+function collapseFacets(indexname)
+{
+    console.log("collapse "+indexname);
+    var tables = $(".facetTable");
+
+    for(var i = 0; i < tables.length; i++)
+    {
+        var current = $(tables[i]);
+        if(current.attr("indexname") == indexname)
+        {
+            current.css("max-height", savedFacetHeight);
+            break;
+    }
+
+    }
+
+    // the above code has hidden both the see more and see less links.
+    // display the see more one
+    var morelink = $(".expandFacetList" + indexname);
+    morelink.css("display", "block");
+    var lesslink = $(".collapseFacetList" + indexname);
+    lesslink.css("display", "none");
+
+}
+
+
+    
+function expandFacetListORIG(indexName, countSize)
 {
     var tables = $(".facetTable");
@@ -238 +311 @@
 }
 
-function collapseFacetList(indexName, countSize)
+function collapseFacetListORIG(indexName, countSize)
 {
     var tables = $(".facetTable");

main/trunk/greenstone3/web/interfaces/default/transform/pages/query.xsl

@@ -117 +117 @@
   <xsl:template name="displayFacets">
     <script type="text/javascript" src="interfaces/{$interface_name}/js/utility_scripts.js"><xsl:text> </xsl:text></script>
-    <script type="text/javascript" src="interfaces/{$interface_name}/js/facet-scripts.js">
-      <xsl:text> </xsl:text></script>
-      <script type="text/javascript" src="interfaces/default/js/List.js">
-      <xsl:text> </xsl:text></script>
+    <script type="text/javascript" src="interfaces/{$interface_name}/js/facet-scripts.js"><xsl:text> </xsl:text></script>
+    <script type="text/javascript" src="interfaces/default/js/List.js"><xsl:text> </xsl:text></script>
     <div id="facetSelector" >
       <xsl:for-each select="/page/pageResponse/facetList/facet">
@@ -131 +129 @@
           <xsl:value-of select="@name"/>
         </xsl:variable>
-        <xsl:variable name="countSize">
-          <xsl:choose>
-        <xsl:when test="/page/pageResponse/format[@type='search']/gsf:option[@name='facetTableRows']">
-          <xsl:value-of select="/page/pageResponse/format[@type='search']/gsf:option[@name='facetTableRows']/@value"/>
-        </xsl:when>
-        <xsl:otherwise>8</xsl:otherwise>
-          </xsl:choose>
-        </xsl:variable>
-        
-        <li class="ui-widget-header" style="text-transform:capitalize; text-align:center;">
+        <div class="ui-widget-header" style="text-transform:capitalize; text-align:center;">
           <xsl:value-of select="displayItem[@name='name']"/>
-        </li>
-        <input class="search" placeholder="Search" /><button class="sort" data-sort="facet">Sort by facet</button><button class="sort" data-sort="count">Sort by count</button>
+        </div>
+        <xsl:variable name="filterText"><gsf:interfaceText name="query.facet.filter"/></xsl:variable>
+        <div class="facetControls">
+        <input class="search" placeholder="{$filterText}" /><span class="sort" data-sort="facet"><img width="15" style="width:15px;" alt="Sort" src="interfaces/{$interface_name}/images/sort.png"/><gsf:interfaceText name="query.facet.az"/>  </span><span class="sort" data-sort="count"><img width="15" style="width:15px;" alt="Sort" src="interfaces/{$interface_name}/images/sort.png"/><gsf:interfaceText name="query.facet.freq"/></span></div>
         <ul class="list facetTable"  indexName="{@name}">
         <xsl:for-each select="count">
           <li>
-        <xsl:attribute name="style">
-          <xsl:if test="position() > $countSize">display:none;<xsl:value-of select="$indexShortName"/>
-          </xsl:if>
-        </xsl:attribute>
         <input type="checkbox" onclick="performRefinedSearch();"/>
         <span class="facet"><xsl:value-of select="@name"/></span>
@@ -157 +144 @@
         </xsl:for-each>
         </ul>
-        <xsl:if test="count(count) > $countSize">
-          <li class="expandFacetList{$indexShortName}">
-        <a class="expandFacetListLink{$indexShortName}" href="javascript:expandFacetList('{$indexShortName}', {$countSize});"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'query.facet.more')"/></a>
-          </li>
-          <li class="collapseFacetList{$indexShortName}" style="display: none;">
-        <a  class="collapseFacetListLink{$indexShortName}" href="javascript:collapseFacetList('{$indexShortName}', {$countSize});"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'query.facet.less')"/></a>
-          </li>
-        </xsl:if>
+        <!-- set up see more/less buttons, hidden to start with. Will enable them with js later -->
+        <span class="expandFacetList{$indexShortName}" style="display:none">
+          <a class="expandFacetListLink{$indexShortName}" href="javascript:expandFacets('{$indexShortName}');"><gsf:interfaceText name="query.facet.more"/></a>
+        </span>
+        <span class="collapseFacetList{$indexShortName}" style="display: none;">
+          <a  class="collapseFacetListLink{$indexShortName}" href="javascript:collapseFacets('{$indexShortName}');"><gsf:interfaceText name="query.facet.less"/></a>
+        </span>
       </div>
+      
       <script type="text/javascript">
-<xsl:text disable-output-escaping="yes">var facetList</xsl:text><xsl:value-of select="@name"/><xsl:text disable-output-escaping="yes"> = new List('</xsl:text><xsl:value-of select="@name"/><xsl:text disable-output-escaping="yes">', facetSortOptions);</xsl:text>
+        <!-- this call sets up the facets as a List (for search/sorting of the list), and displays the more button if needed -->
+        <xsl:text disable-output-escaping="yes">setUpFacetList('</xsl:text><xsl:value-of select="@name"/><xsl:text disable-output-escaping="yes">');</xsl:text>
       </script>