Merge branch 'feat-advanced-search-284' of https://github.com/History…

…AtState/hsg-shell into feat-advanced-search-284 * 'feat-advanced-search-284' of https://github.com/HistoryAtState/hsg-shell: refactor(search) further parametrize checkbox templates fix(search) add correct template call to search landing page refactor: modularize filter checklists; affects #284, #292
HistoryAtState · Nov 24, 2017 · 19b02f8 · 19b02f8
2 parents 4ff7644 + 533c75d
commit 19b02f8
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 84 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -42,7 +42,7 @@ var exClient = exist.createClient({
 
 var targetConfiguration = {
     target: '/db/apps/hsg-shell/',
-    html5AsBinary: true
+    html5AsBinary: false
 }
 
 gulp.task('clean', function() {
@@ -76,6 +76,7 @@ gulp.task('fonts:deploy', ['fonts:copy'], function () {
  * Image optimization task will *overwrite* an existing image
  * with its optimized version
  */
+var imagePath = 'resources/images/**/*';
 gulp.task('images:optimize', function () {
     return gulp.src('resources/images/*')
         .pipe(imagemin({optimizationLevel: 5}))
@@ -244,6 +245,7 @@ gulp.task('deploy', ['build'], function () {
             templatesPath,
             pagesPath,
             modulesPath,
+            imagePath,
             otherPath
         ], {base: './'})
         .pipe(exClient.newer(targetConfiguration))

diff --git a/modules/search.xqm b/modules/search.xqm
@@ -143,18 +143,38 @@ declare function search:load-sections($node, $model) {
         $html
 };
 
+declare
+    %templates:wrap
+function search:search-filters($node as node(), $model as map(*), $within as xs:string*, $administration as xs:string*) {
+(:  more options could be added to $filters  :)
+    let $filters := map {"within": $within, "administration": $administration}
+    return
+        map:new(($model, map {'filters': $filters}))
+};
+
+declare
+    %templates:wrap
+function search:search-section($node as node(), $model as map(*), $section as xs:string, $filter as xs:string) {
+    let $new := map {'sec': $section, 'filter': $filter}
+    return map:new(($model, $new))
+};
+
 (:~
  : Generates HTML attributes "value" and "id"
  : @return  HTML attributes
 ~:)
 declare
     %templates:wrap
-function search:section-input-attributes($node, $model) {
-    let $section-id := $model?section/id
+function search:section-input-attributes($node as node(), $model as map(*)) {
+    let $section := $model?sec
+    let $filter := $model?filter
+    let $section-id := $model($section)/id
+
     return
         (
             attribute value { $section-id },
-            attribute id { $section-id }
+            attribute id { $section-id }, 
+            if(search:section-checked($node, $model)='checked') then attribute checked {''} else ()
         )
 };
 
@@ -164,11 +184,25 @@ function search:section-input-attributes($node, $model) {
 ~:)
 declare
     %templates:wrap
-function search:section-label($node, $model) {
-    let $section-id := $model?section/id
+function search:section-label($node as node(), $model as map(*)) {
+    let $section := $model?sec
+    let $section-id := $model($section)/id
     return
         attribute for { $section-id },
-        search:section-label-string($node, $model)
+        templates:process($node/*, $model)
+};
+
+
+declare
+    %templates:wrap
+function search:section-checked($node as node(), $model as map(*)) {
+    let $section := $model?sec
+    let $filter := $model?filter
+    let $c:=console:log('sec fil ' || $section || $filter)
+    let $within := $model?filters($filter)
+    let $c:=console:log($within)
+    let $section-id := $model($section)/id
+    return if ($section-id = $within) then 'checked' else $within
 };
 
 (:~
@@ -177,8 +211,9 @@ function search:section-label($node, $model) {
 ~:)
 declare
     %templates:replace
-function search:section-label-string($node, $model) {
-    $model?section/label/string()
+function search:section-label-string($node as node(), $model as map(*)) {
+    let $section := $model?sec
+    return $model($section)/label/string()
 };
 
 declare function search:load-volumes-within($node, $model, $volume-id as xs:string*) {
@@ -224,44 +259,6 @@ function search:select-volumes-link($node, $model, $q as xs:string?, $volume-id
 
 (: ================= Administrations ================= :)
 
-(:~
- : Generates HTML attributes "value" and "id"
- : @return  HTML attributes
-~:)
-declare
-%templates:wrap
-function search:administration-input-attributes($node, $model) {
-    let $administration-id := $model?administration/id
-    return
-        (
-            attribute value { $administration-id },
-            attribute id { $administration-id }
-        )
-};
-
-(:~
- : Generates an HTML <label> attribute "for" and adds a label text
- : @return  HTML
-~:)
-declare
-%templates:wrap
-function search:administration-label($node, $model) {
-    let $administration-id := $model?administration/id
-    return
-        attribute for { $administration-id },
-        search:administration-label-string($node, $model)
-};
-
-(:~
- : The string containing the administration title
- : @return  String
-~:)
-declare
-%templates:replace
-function search:administration-label-string($node, $model) {
-    $model?administration/label/string()
-};
-
 (:~
  : Load the administrations
  :)

diff --git a/pages/search/_filter-administrations.html b/pages/search/_filter-administrations.html
@@ -3,11 +3,11 @@
     <form method="get" action="$app/search" class="filter-form main-form" id="administrationsFilter">
         <fieldset class="filter-sidebar" data-template="search:load-administrations">
             <legend class="sr-only">Select Administrations</legend>
-            <ul class="hsg-search-inputs-vertical">
+            <ul class="hsg-search-inputs-vertical" data-template="search:search-section" data-template-section="administration" data-template-filter="administration">
                 <li data-template="templates:each" data-template-from="administrations" data-template-to="administration">
-                    <input class="hsg-search-input" type="checkbox" name="administration" data-template="search:administration-input-attributes"/>
-                    <label class="hsg-search-input-label" data-template="search:administration-label">
-                        <span data-template="search:administration-label-string"/>
+                    <input class="hsg-search-input" type="checkbox" name="administration" data-template="search:section-input-attributes"/>
+                    <label class="hsg-search-input-label" data-template="search:section-label">
+                        <span data-template="search:section-label-string"/>
                     </label>
                 </li>
             </ul>

diff --git a/pages/search/_filter-sections.html b/pages/search/_filter-sections.html
@@ -3,20 +3,21 @@
     <form method="get" action="$app/search" class="filter-form main-form" id="sectionFilter">
         <fieldset data-template="search:load-sections">
             <legend class="sr-only">Select sections</legend>
-                <ul class="hsg-search-inputs-vertical">
-                    <li>
-                        <input id="entire-site-input" class="hsg-search-input global" type="checkbox" name="within" value="entire_site" checked="checked"/>
-                        <label id="entire-site-label" for="entire-site-input" class="hsg-search-input-label">Entire Office of The Historian Website</label>
+            <ul class="hsg-search-inputs-vertical">
+                <li>
+                    <input id="entire-site-input" class="hsg-search-input global" type="checkbox" name="within" value="entire_site"/>
+                    <label id="entire-site-label" for="entire-site-input" class="hsg-search-input-label">Entire Office of The Historian Website</label>
+                </li>
+                <ul class="filter-subsections" data-template="search:search-section" data-template-section="section" data-template-filter="within">
+                    <li data-template="templates:each" data-template-from="sections" data-template-to="section">
+                        <input class="hsg-search-input section" type="checkbox" name="within" data-template="search:section-input-attributes"/>
+                        <label class="hsg-search-input-label" data-template="search:section-label">
+                            <span data-template="search:section-label-string"/>
+                        </label>
                     </li>
-                    <ul class="filter-subsections">
-                        <li data-template="templates:each" data-template-from="sections" data-template-to="section">
-                            <input class="hsg-search-input section" type="checkbox" name="within" data-template="search:section-input-attributes"/>
-                            <label class="hsg-search-input-label" data-template="search:section-label">
-                                <span data-template="search:section-label-string"/>
-                            </label>
-                        </li>
-                    </ul>
                 </ul>
+            </ul>
         </fieldset>
     </form>
 </section>
+
diff --git a/pages/search/_search-bar.html b/pages/search/_search-bar.html
@@ -12,9 +12,9 @@ <h1>Search</h1>
                 <input type="search" name="q" class="form-control" id="q" data-template="templates:form-control"/>
                 <button type="submit" class="hsg-link-button search-button btn">
                     <span class="hsg-search-submit-text">Search</span>
-                    <i class="hsg-search-icon"></i>
+                    <i class="hsg-search-icon"/>
                 </button>
             </p>
         </form>
     </div>
-</div>
+</div>
diff --git a/pages/search/search-bar-include.html b/pages/search/search-bar-include.html
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<div class="row">
+    <div class="hsg-width-one-whole" data-template="app:fix-links">
+        <h1>Search</h1>
+        <section class="hsg-search-section" role="search">
+            <p>Read these <a href="$app/search/tips">tips and caveats</a> to understand the
+                limitations of this search engine and how to make the most of its scope,
+                phrase, boolean, wildcard, and proximity options.
+            </p>
+            <form method="get" action="$app/search" class="main-form" id="searchForm">
+                <p class="form-group searchbox">
+                    <label for="q" class="sr-only">Search</label>
+                    <input type="search" name="q" class="form-control" id="q" data-template="templates:form-control"/>
+                    <button type="submit" class="hsg-link-button search-button btn">
+                        <span class="hsg-search-submit-text">Search</span>
+                        <i class="hsg-search-icon"/>
+                    </button>
+                </p>
+            </form>
+        </section>
+    </div>
+</div>
diff --git a/pages/search/search-landing.html b/pages/search/search-landing.html
@@ -1,13 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<div data-template="templates:surround" data-template-with="templates/site.html"
-    data-template-at="content">
+<div data-template="templates:surround" data-template-with="templates/site.html" data-template-at="content">
     <div id="static-title" class="hidden">Search</div>
 
     <div class="row">
         <div class="hsg-breadcrumb-wrapper">
             <ol class="breadcrumb" data-template="app:fix-links">
-                <li><a href="$app">Home</a></li>
-                <li><a href="$app/search">Search</a></li>
+                <li>
+                    <a href="$app">Home</a>
+                </li>
+                <li>
+                    <a href="$app/search">Search</a>
+                </li>
             </ol>
         </div>
     </div>
@@ -16,7 +19,7 @@
 
     <div data-template="templates:include" data-template-path="pages/search/_filter-querystring.html"/>
 
-    <div class="row">
+    <div class="row" data-template="search:search-filters">
         <div class="hsg-width-one-whole" data-template="app:fix-links">
             <p>To limit your results to certain parts of the website, check the appropriate box(es), and then click “Search”:</p>
             <div data-template="templates:include" data-template-path="pages/search/_filter-sections.html"/>
@@ -34,4 +37,4 @@
             <div data-template="templates:include" data-template-path="pages/search/_submit-search-button.html"/>
         </div>
     </div>
-</div>
+</div>
diff --git a/pages/search/search-result.html b/pages/search/search-result.html
@@ -5,8 +5,12 @@
     <div class="row">
         <div class="hsg-breadcrumb-wrapper">
             <ol class="breadcrumb" data-template="app:fix-links">
-                <li><a href="$app">Home</a></li>
-                <li><a href="$app/search">Search</a></li>
+                <li>
+                    <a href="$app">Home</a>
+                </li>
+                <li>
+                    <a href="$app/search">Search</a>
+                </li>
             </ol>
         </div>
     </div>
@@ -15,7 +19,7 @@
 
     <div data-template="templates:include" data-template-path="pages/search/_filter-querystring.html"/>
 
-    <div class="row">
+    <div class="row" data-template="search:search-filters">
         <!-- filter sidebar -->
         <aside class="hsg-width-one-third">
             <h2>Filter by</h2>
@@ -37,8 +41,7 @@ <h3 class="hsg-sidebar-title">Administrations</h3>
                 <fieldset class="filter-sidebar" >
                     <h3 class="hsg-sidebar-title">Volumes</h3>
                     <div class="hsg-search-inputs-vertical">
-                        <label class="hsg-search-input-label" data-template="templates:each"
-                               data-template-from="volume" data-template-to="volumes">
+                        <label class="hsg-search-input-label" data-template="templates:each" data-template-from="volume" data-template-to="volumes">
                             <input type="checkbox" name="volumes"/>
                         </label>
                     </div>
@@ -66,12 +69,9 @@ <h2>Results for keyword search
                             </h2>
                             <p data-template="search:result-count-summary"/>
                             <nav>
-                                <ul class="pagination" data-template="search:paginate"
-                                    data-template-per-page="10" data-template-max-pages="10"
-                                    data-template-min-hits="1"/>
+                                <ul class="pagination" data-template="search:paginate" data-template-per-page="10" data-template-max-pages="10" data-template-min-hits="1"/>
                             </nav>
-                            <div class="hsg-search-result" data-template="templates:each"
-                                data-template-from="results" data-template-to="result">
+                            <div class="hsg-search-result" data-template="templates:each" data-template-from="results" data-template-to="result">
                                 <h3 class="hsg-search-result-heading">
                                     <span data-template="search:result-heading"/>
                                 </h3>
@@ -83,9 +83,7 @@ <h3 class="hsg-search-result-heading">
                                 </p>
                             </div>
                             <nav>
-                                <ul class="pagination" data-template="search:paginate"
-                                    data-template-per-page="10" data-template-max-pages="10"
-                                    data-template-min-hits="1"/>
+                                <ul class="pagination" data-template="search:paginate" data-template-per-page="10" data-template-max-pages="10" data-template-min-hits="1"/>
                             </nav>
                         </div>
                     </div>