Ignore:
Timestamp:
2023-09-18T14:39:07+12:00 (9 months ago)
Author:
kjdon
Message:

working on facets. added List.js - a simple list javascript file which adds sorting and searching functionality to any list. I'm using this on the facet lists. some updates to facets - need to update the matchdocs parts, and the next/prev buttons. Also all other facet lists, other than the ones which have been selected, need to be updated.

Location:
main/trunk/greenstone3/web/interfaces/default
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed

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

    r33544 r38152  
     1
     2var facetSortOptions = {
     3    valueNames: [ 'facet', 'count' ]
     4}
     5
     6
     7function getFacetQueryString(facetsThatAreChecked)
     8{
     9
     10    // if we have come here from eg next/prev page buttons, we won't have options selected in the
     11    // facet list, we need to use the cgi param s1.facetQueries
     12    if (gs.cgiParams.s1_facetQueries !== undefined) {
     13    var facets = gs.cgiParams.s1_facetQueries;
     14    // for some reason, we end up with " in here. Replace these back, so then we can call
     15    // makeURLComponentSafe, and get back to the same encoded value we had originally
     16    facets = facets.replace(/"/g, "\"");
     17    return "s1.facetQueries="+makeURLComponentSafe(facets, 0)+"&";
     18    }
     19
     20    var allCheckBoxes = $("#facetSelector input");
     21    var counts = new Array();
     22//    var facetsThatAreChecked = new Set();
     23    for(var i = 0; i < allCheckBoxes.length; i++)
     24    {
     25    var current = $(allCheckBoxes[i]);
     26    if(current.prop("checked"))
     27    {
     28        counts.push(current.parent().parent().attr("indexName") + ":(\"" + current.siblings("span").first().html() + "\")");
     29        if (facetsThatAreChecked !== undefined) {
     30        facetsThatAreChecked.add(current.parent().parent().attr("indexName"));
     31        }
     32    }
     33    }
     34
     35    var countsString = "s1.facetQueries=";
     36    if(counts.length > 0)
     37    {
     38    var countsStringBuffer = "[";
     39    for(var i = 0; i < counts.length; i++)
     40    {
     41        // escape any apostrophes in facet query terms
     42        // (ext/solr's Greenstone3SearchHandler does the other half of handling them)
     43        //countsStringBuffer += "\"" + encodeURI(counts[i]).replace(/'/g, "%2527") + "\"";
     44        // calling makeURLSafe() here will ensure percent signs are escaped away too
     45        // by the end of makeURLComponentSafe() call below
     46        // Note that apostrophe's in URLs should get encoded, https://www.techwalla.com/articles/how-to-encode-an-apostrophe-in-a-url
     47        // though the apostrophe is not in that other list of invalid and unsafe chars in urls dealt with in utility_scripts.js         
     48        countsStringBuffer += "\"" + makeURLSafe(counts[i]).replace(/'/g, "%2527") + "\"";
     49        if(i < counts.length - 1)
     50        {
     51        countsStringBuffer += ", ";
     52        }
     53    }
     54   
     55    countsStringBuffer += "]";
     56    // We need to ensure that the *value* of s1.facetQueries (so everything after
     57    // s1.facetQueries= and before the connecting &) are safe, which requires escaping,
     58    // and are further also escaped to not be mistaken for their reserved meaning.
     59    // : is a reserved character in URLs, [] are unsafe characters. All need escaping.
     60    // So call makeURLComponentSafe(), not makeURLSafe()
     61    countsString = countsString + makeURLComponentSafe(countsStringBuffer, 1);
     62    }
     63   
     64    countsString += "&";
     65    return countsString;
     66}
     67
    168function performRefinedSearch()
     69{
     70    var allCheckBoxes = $("#facetSelector input");
     71    var facetsThatAreChecked = new Set();
     72    var facetQueryString = getFacetQueryString(facetsThatAreChecked);
     73
     74    var searchString = "";
     75    for(var key in gs.cgiParams)
     76    {
     77        if (gs.cgiParams.hasOwnProperty(key))
     78        {
     79        // reset the startPage to 1, as we can't keep the previous value as we are changing the search results list
     80        if (key == "s1_startPage") {
     81            searchString += "s1.startPage=1&";
     82        } else {
     83            searchString += key.replace(/_/g, ".") + "=" + makeURLComponentSafe(gs.cgiParams[key]) + "&";
     84        }
     85//      console.log("PARAM FOR key " + key + ":" + gs.cgiParams[key]);
     86//      console.log("SAFE PARAM FOR " + key + ":" + makeURLComponentSafe(gs.cgiParams[key]));
     87        }
     88    }
     89 
     90    $.ajax(gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/search/" + gs.cgiParams.s + "?" + searchString + facetQueryString + "excerptid=gs_content")
     91    .done(function(response)
     92            {
     93            var $response = $(response);
     94            $("#resultsArea").replaceWith($response.find('#resultsArea'));
     95            $("#matchdocs").replaceWith($response.find('#matchdocs'));
     96            // the term lists don't need to be updated, as we don't get back any term freq info
     97            // for facet terms
     98
     99            // only replace the facets that haven't been selected
     100            var $current_facets = $(".facetContainer");
     101            for (var i=0; i<$current_facets.length; i++) {
     102            var $current = $($current_facets[i]);
     103            var indexName = $current.attr("indexName");
     104           
     105            if (!facetsThatAreChecked.has(indexName)) {
     106                var $newNode =$response.find('#'+indexName);
     107                $current.replaceWith($newNode);
     108            }
     109            }
     110
     111            if(gs.cgiParams.favouritebasket == "on") {
     112            // this will highlight the stars on the docs that are in favourites
     113            favouritesCheckout();
     114            }
     115              if(typeof mapEnabled !== 'undefined') {                 
     116                 
     117                  facetedMapSearch(gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/search/" + gs.cgiParams.s + "?" + searchString + facetQueryString);
     118                 
     119              }
     120        });
     121
     122}
     123
     124function updateNextPrevLinks(facetQueryString) {
     125
     126    if (facetQueryString === undefined) {
     127    facetQueryString = getFacetQueryString();
     128    }
     129
     130    $("#nextTD,#nextArrowTD,#prevTD,#prevArrowTD").children("a").each(function() {
     131    $(this).attr("href", $(this).attr("href") + "&"+facetQueryString);
     132    });
     133
     134}
     135
     136function performRefinedSearchORIG()
    2137{
    3138    var allCheckBoxes = $("#facetSelector input");
    4139    var counts = new Array();
    5     for(var i = 0; i < allCheckBoxes.length; i++)
     140    for(var i = 0; i < allCheckBoxes.length; i++)
    6141    {
    7142        var current = $(allCheckBoxes[i]);
    8143        if(current.prop("checked"))
    9144        {
    10             counts.push(current.parent().parent().attr("indexName") + ":(\"" + current.siblings("span").first().html() + "\")");
     145            counts.push(current.parent().parent().attr("indexName") + ":(\"" + current.siblings("span").first().html() + "\")");
    11146        }
    12147    }
    … …  
    54189   
    55190    countsString += "&";
    56     //console.log("STRING IS " + countsString);
     191    console.log("STRING IS " + countsString);
    57192   
    58193    $.ajax(gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/search/" + gs.cgiParams.s + "?" + searchString + countsString + "excerptid=resultsArea")
    … …  
    61196            $("#resultsArea").html("");
    62197            $("#resultsArea").html(response.substring(response.indexOf(">") + 1, response.lastIndexOf("<")));
    63             if(gs.cgiParams.berrybasket == "on") {
    64                     berryCheckout(); // called to add back in berries (if berrybasket active)
    65             }
    66198            if(gs.cgiParams.favouritebasket == "on") {
    67199                    favouritesCheckout(); // called to add back in favourites icons (if favouritebasket active)
    … …  
    73205              }
    74206        });
     207
    75208}
    76209
    … …  
    99232    var morelink = $(".expandFacetList" + indexName);
    100233    morelink.css("display", "none");
     234    var lesslink = $(".collapseFacetList" + indexName);
     235    lesslink.css("display", "block");
     236
    101237
    102238}
    … …  
    129265    var morelink = $(".expandFacetList" + indexName);
    130266    morelink.css("display", "block");
    131 
    132 }
    133 
     267    var lesslink = $(".collapseFacetList" + indexName);
     268    lesslink.css("display", "none");
     269
     270}
     271

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

    r38084 r38152  
    118118    <script type="text/javascript" src="interfaces/{$interface_name}/js/utility_scripts.js"><xsl:text> </xsl:text></script>
    119119    <script type="text/javascript" src="interfaces/{$interface_name}/js/facet-scripts.js">
    120       <xsl:text> </xsl:text>
    121     </script>
    122 
     120      <xsl:text> </xsl:text></script>
     121      <script type="text/javascript" src="interfaces/default/js/List.js">
     122      <xsl:text> </xsl:text></script>
    123123    <div id="facetSelector" >
    124124      <xsl:for-each select="/page/pageResponse/facetList/facet">
    125125    <xsl:if test="count(count) > 0">
    126       <ul class="facetTable ui-widget-content" indexName="{@name}">
     126      <div class="facetContainer ui-widget-content" indexName="{@name}" id="{@name}">
    127127        <xsl:variable name="serviceName">
    128128          <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's']/@value"/>
    … …  
    143143          <xsl:value-of select="displayItem[@name='name']"/>
    144144        </li>
     145        <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>
     146        <ul class="list facetTable"  indexName="{@name}">
    145147        <xsl:for-each select="count">
    146148          <li>
    … …  
    150152        </xsl:attribute>
    151153        <input type="checkbox" onclick="performRefinedSearch();"/>
    152         <span>
    153           <xsl:value-of select="@name"/>
    154           </span>(<xsl:value-of select="."/>)
     154        <span class="facet"><xsl:value-of select="@name"/></span>
     155        <span class="count">  (<xsl:value-of select="."/>)</span>
    155156          </li>
    156157        </xsl:for-each>
     158        </ul>
    157159        <xsl:if test="count(count) > $countSize">
    158160          <li class="expandFacetList{$indexShortName}">
    … …  
    163165          </li>
    164166        </xsl:if>
    165       </ul>
     167      </div>
     168      <script type="text/javascript">
     169<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>
     170      </script>
     171
    166172    </xsl:if>
    167173      </xsl:for-each>
    … …  
    439445     
    440446      <xsl:for-each select="/page/pageResponse/termList/term">
     447        <xsl:if test="@freq != -1">
    441448        <xsl:variable name="levelText">
    442449          <!-- this gets document, section, documents, sections, depending on level and number -->
    … …  
    481488        </span>
    482489        <br/>
     490        </xsl:if>
    483491      </xsl:for-each>
    484492    </xsl:when>
    485493    <xsl:otherwise>
    486494      <xsl:for-each select="/page/pageResponse/termList/term">
     495        <xsl:if test="@freq != -1">
    487496        <span style="font-style:italic;">
    488497          <xsl:value-of select="@name"/>
    489498          </span> (<xsl:value-of select="@freq"/>)
     499        </xsl:if>
    490500      </xsl:for-each>
    491501    </xsl:otherwise>
    … …  
    549559      <xsl:variable name="startPageName">
    550560      <xsl:if test="$usesS1 = 'true'">s1.</xsl:if>startPage</xsl:variable>
    551 
     561      <xsl:variable name="queryLink"><xsl:value-of select="$library_name"/>?a=q&amp;sa=<xsl:value-of select="/page/pageRequest/@subaction"/>&amp;c=<xsl:value-of select="$collName"/>&amp;s=<xsl:value-of select="/page/pageResponse/service/@name"/>&amp;rt=rd&amp;qs=<xsl:value-of select="/page/pageRequest/paramList/param[@name='qs']/@value"/></xsl:variable>
    552562      <!-- Previous button -->
    553563      <td id="prevArrowTD">
    554564        <xsl:if test="$currentPage != 1">
    555           <a href="{$library_name}?a=q&amp;sa={/page/pageRequest/@subaction}&amp;c={$collName}&amp;s={/page/pageResponse/service/@name}&amp;rt=rd&amp;{$startPageName}={$currentPage - 1}&amp;qs={/page/pageRequest/paramList/param[@name='qs']/@value}">
     565          <a href="{$queryLink}&amp;{$startPageName}={$currentPage - 1}">
    556566        <xsl:call-template name="previousArrowImage"/>
    557567          </a>
    … …  
    560570      <td id="prevTD">
    561571        <xsl:if test="$currentPage != 1">
    562           <a href="{$library_name}?a=q&amp;sa={/page/pageRequest/@subaction}&amp;c={$collName}&amp;s={/page/pageResponse/service/@name}&amp;rt=rd&amp;{$startPageName}={$currentPage - 1}&amp;qs={/page/pageRequest/paramList/param[@name='qs']/@value}"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'query.results.previous')"/></a>
     572          <a href="{$queryLink}&amp;{$startPageName}={$currentPage - 1}"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'query.results.previous')"/></a>
    563573        </xsl:if>
    564574      </td>
    … …  
    597607      <td id="nextTD">
    598608        <xsl:if test="$docsPerPage &gt; 0 and ($currentPage * $docsPerPage) &lt; $docMax">
    599           <a href="{$library_name}?a=q&amp;sa={/page/pageRequest/paramList/param[@name = 'sa']/@value}&amp;c={$collName}&amp;s={/page/pageResponse/service/@name}&amp;rt=rd&amp;{$startPageName}={$currentPage + 1}&amp;qs={/page/pageRequest/paramList/param[@name='qs']/@value}"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'query.results.next')"/></a>
     609          <a href="{$queryLink}&amp;{$startPageName}={$currentPage + 1}"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'query.results.next')"/></a>
    600610        </xsl:if>
    601611      </td>
    602612      <td id="nextArrowTD">
    603613        <xsl:if test="$docsPerPage &gt; 0 and ($currentPage * $docsPerPage) &lt; $docMax">
    604           <a href="{$library_name}?a=q&amp;sa={/page/pageRequest/paramList/param[@name = 'sa']/@value}&amp;c={$collName}&amp;s={/page/pageResponse/service/@name}&amp;rt=rd&amp;{$startPageName}={$currentPage + 1}&amp;qs={/page/pageRequest/paramList/param[@name='qs']/@value}">
     614          <a href="{$queryLink}&amp;{$startPageName}={$currentPage + 1}">
    605615        <xsl:call-template name="nextArrowImage"/>
    606616          </a>
    … …  
    609619    </tr>
    610620      </table>
     621      <xsl:if test="/page/pageResponse/facetList/facet/count">
     622    <script type="text/javascript">
     623      <xsl:text disable-output-escaping="yes">
     624        updateNextPrevLinks();
     625      </xsl:text>
     626    </script>
     627      </xsl:if>
    611628    </xsl:if>
    612629  </xsl:template>
Note: See TracChangeset for help on using the changeset viewer.