rework search filters to allow for easy un-/checking of items, closes #…

…327 (#331) * select or deselect all filter checkboxes * checkboxes are checked (marked active) by default * use <span> in checkbox label * better label for filter checkbox * required catalogue entries * weitere Arbeit: funktionierender Code, Refresh-Button... (#327) * collapsible filters * range slider labels inside div * "apply filters" * styling, v.a. sidebar * update expected results
Edirom · Dec 2, 2019 · 49c04fc · 49c04fc
1 parent 1e79ba5
commit 49c04fc
Show file tree

Hide file tree

Showing 859 changed files with 39,078 additions and 37,089 deletions.
diff --git a/catalogues/dictionary_de.xml b/catalogues/dictionary_de.xml
@@ -468,7 +468,9 @@
     <entry xml:id="wordOfTheDay">Zitat des Tages</entry>
     <entry xml:id="responsibilities">Verantwortlichkeiten</entry>
     <entry xml:id="identifier">Kennung</entry>
-    <entry xml:id="all">Alle</entry>
+    <entry xml:id="all">alle</entry>
+    <entry xml:id="none">keine</entry>
+    <entry xml:id="only">nur</entry>
     <entry xml:id="all_diaries">Alle Tagebücher</entry>
     <entry xml:id="all_writings">Alle Schriften</entry>
     <entry xml:id="all_letters">Alle Briefe</entry>
@@ -591,4 +593,6 @@
     <entry xml:id="gnd-beacon">GND Beacon Links</entry>
     <entry xml:id="definition">Definition</entry>
     <entry xml:id="linewrap">Zeilenumbruch</entry>
+    <entry xml:id="facetsFilterLabel">Anwählen, um "%1" im Text zu markieren.</entry>
+    <entry xml:id="applyFilter">Filter anwenden</entry>
 </dictionary>
diff --git a/catalogues/dictionary_en.xml b/catalogues/dictionary_en.xml
@@ -438,7 +438,9 @@
     <entry xml:id="wordOfTheDay">Word of the day</entry>
     <entry xml:id="responsibilities">Responsibilities</entry>
     <entry xml:id="identifier">Identifier</entry>
-    <entry xml:id="all">All</entry>
+    <entry xml:id="all">ll</entry>
+    <entry xml:id="none">none</entry>
+    <entry xml:id="only">only</entry>
     <entry xml:id="all_diaries">All Diaries</entry>
     <entry xml:id="all_writings">All Writings</entry>
     <entry xml:id="all_letters">All Letters</entry>
@@ -561,4 +563,6 @@
     <entry xml:id="gnd-beacon">GND Beacon Links</entry>
     <entry xml:id="definition">Definition</entry>
     <entry xml:id="linewrap">line wrap</entry>
+    <entry xml:id="facetsFilterLabel">Check to mark "%1" in the transcription.</entry>
+    <entry xml:id="applyFilter">Apply filters</entry>
 </dictionary>
diff --git a/modules/app.xqm b/modules/app.xqm
@@ -1704,22 +1704,23 @@ declare
         return 
             for $docType in $search:wega-docTypes
             let $class := 
-                if($docType = $selected-docTypes) then normalize-space($node/@class) || ' active'
+                if($docType = $selected-docTypes or empty($selected-docTypes)) then normalize-space($node/@class) || ' active'
                 else normalize-space($node/@class)
             let $displayTitle := lang:get-language-string($docType, $lang)
             order by $displayTitle
-            return
-                element {name($node)} {
-                    $node/@*[not(name(.) = 'class')],
-                    attribute class {$class},
-                    element input {
-                        $node/xhtml:input/@*[not(name(.) = 'value')],
-                        attribute value {$docType},
-                        if($docType = $selected-docTypes) then attribute checked {'checked'}
-                        else ()
-                    },
-                    $displayTitle
-                }
+            return                
+             element {name($node)} {
+                 $node/@*[not(name(.) = 'class')],
+                 attribute class {$class},
+                 element input {
+                     $node/xhtml:input/@*[not(name(.) = 'value')],
+                     attribute value {$docType},
+                     if($docType = $selected-docTypes or empty($selected-docTypes)) then attribute checked {'checked'}
+                     else ()
+                 },
+                 <span>{$displayTitle}</span>,
+                 <a href="#" class="checkbox-only">{lang:get-language-string("only",$lang)}</a>
+             }
 };
 
 (:~

diff --git a/modules/facets.xqm b/modules/facets.xqm
@@ -192,10 +192,10 @@ declare function facets:filter-value($node as node(), $model as map(*)) as eleme
     }
 };
 
-declare function facets:filter-label($node as node(), $model as map(*)) as element(span) {
+declare function facets:filter-label($node as node(), $model as map(*), $lang as xs:string) as element(span) {
     element {name($node)} {
         $node/@*[not(name(.) = 'title')],
-        attribute title {$model('filterOption')('label')},
+        attribute title {lang:get-language-string("facetsFilterLabel",$model('filterOption')('label'),$lang)},
         $model('filterOption')('label')
     }
 };

diff --git a/resources/js/init.js b/resources/js/init.js
@@ -88,6 +88,7 @@ $.fn.rangeSlider = function ()
         grid: true,
         skin: "flat",
         step: 100,
+        force_edges: true,
         type: "double",
         //force_edges: true,
         grid_num: 3,
@@ -534,14 +535,43 @@ $(document).on('change', '.facet-group input', function() {
     updatePage(params);
 })
 
-/* Start search by clicking on filter button */
-$('.searchDocTypeFilter').on('change', 'label', function() {
-    /* No need to refresh the page when there's no query string */
-    if($('.query-input').val().length) {
+/* manage search filter checkboxes */
+function checkAll(that) {
+   $(that).parents(".filterGroup").find(".btn-group :checkbox").prop('checked', true);
+   $(that).parents(".filterGroup").find(".btn-group :checkbox").parent("label").addClass("active");
+}
+
+function uncheckAll(that) {
+    $(that).parents(".filterGroup").find(".btn-group :checkbox").prop('checked', false);
+    $(that).parents(".filterGroup").find(".btn-group :checkbox").parent("label").removeClass("active");
+}
+
+function checkBoxRefresh() {
+    if($('.query-input').val().length) { /* No need to refresh the page when there's no query string */
         var params = active_facets();
+        console.log(params);
         updatePage(params);
-    }
-})
+        }
+}
+
+$('.checkall').on('click', function() {
+    checkAll(this);
+    var params = active_facets();
+    console.log(params);
+});
+
+$('.uncheckall').on('click', function() {
+    uncheckAll(this);
+    var params = active_facets();
+    console.log(params);
+});
+
+$('a.checkbox-only').on('click', function() {    
+    uncheckAll(this);
+    $(this).siblings(":checkbox").prop('checked',true);
+    $(this).parents(".filterGroup").find(".btn-group :checkbox").parent("label").removeClass("active");    
+    checkBoxRefresh();
+});
 
 $('.glSchemaIDFilter').on('change', 'input', function(a) {
     self.location = '?schemaID=' + a.target.value;
@@ -1019,4 +1049,4 @@ $('#create-newID').on('click', function() {
         $('#newID-result i').hide();
         $('#newID-result span').show();
     });
-});
+});
diff --git a/resources/sass/base/_helpers.scss b/resources/sass/base/_helpers.scss
@@ -20,7 +20,7 @@
 
 .colored
 {
-    background-color: $gray-lighter;
+    background-color: $gray-lightest;
 }
 
 .info {

diff --git a/resources/sass/components/_buttons.scss b/resources/sass/components/_buttons.scss
@@ -1,8 +1,8 @@
-.btn input {
+label input, .btn input {
     display:none;
 }
 
-.btn:not(.gradient-light)
+.btn.btn-primary
 {    border-radius:0;
      padding: 9px 20px;
      &:hover { 
@@ -11,13 +11,24 @@
      }
 }
 
+.btn.btn-checkbox {
+    margin-bottom: 0px;
+    a {
+        display: none;
+        float:right; 
+        }
+        &:hover a {
+        display: inline;
+    }
+}
+
 .btn-group {
     display: block;
-    .btn {
+    .btn, label {
         color: $gray!important;
         font-size: 16px!important;
         line-height: 19px!important;
-        padding: 14px 20px;
+        /*         padding: 14px 20px; */
         margin-left: 0px!important ;
         text-align: left; 
     }
@@ -35,6 +46,7 @@
     color: #fff!important;
 }*/
 
+
 .gradient-light
 {
     background-color: $gray-lightest;
@@ -69,6 +81,6 @@ li.nav-item.gradient-light > .active, btn.gradient-light.active {
 }
 
 li.nav-item.gradient-light > .nav-link {
-    border-left:4px solid $gray-lighter;
+    border-left:4px solid $gray-light;
 }
 
diff --git a/resources/sass/components/_popover.scss b/resources/sass/components/_popover.scss
@@ -22,7 +22,7 @@
             display:none;
         }
         .item-title {
-            background-color: $gray-lighter;
+            background-color: $gray-lightest;
             padding: 8px 14px;
             border-bottom:1px solid $popover-border-color;
             margin: 0px;
@@ -93,7 +93,7 @@
     span.tei_lemma {
         margin-bottom: 6px;
         display: block;
-        border-left: 6px solid #f0f0f0;
+        border-left: 6px solid $gray-lighter;
         padding-left: 6px;
     }
     .preview {

diff --git a/resources/sass/components/_tabs.scss b/resources/sass/components/_tabs.scss
@@ -75,7 +75,7 @@ li.resp-tab-item {
 }
 
 button.resp-tab-active, li.resp-tab-active {
-    border-bottom: 3px solid #F0F0F0!important;
+    border-bottom: 3px solid $gray-lighter!important;
     border-top: 4px solid $gray;
 }
 

diff --git a/resources/sass/layout/_header.scss b/resources/sass/layout/_header.scss
@@ -12,7 +12,7 @@
 {
     margin-top: 20px;
     margin-bottom: 0px;
-    border-bottom: 4px solid $gray-lighter;
+    border-bottom: 4px solid $gray-lightest;
 }
 
 #navbarCollapse .navbar-nav {

diff --git a/resources/sass/layout/_sidebar.scss b/resources/sass/layout/_sidebar.scss
@@ -1,27 +1,46 @@
 /* filter */
 
-.searchDocTypeFilter .btn, .filtersection .btn {
-    padding-left: 40px;
+form.searchfilter {
+    display: flex;
+    width: 100%;
+}
+
+.searchDocTypeFilter label, .filtersection .btn {
+    padding-left: 30px;
     &:before {
         content: "\f096\00a0";
         font-family: "FontAwesome";
         vertical-align: text-top;
         margin-right:11px;
         position: absolute;
-        left:20px;
+        left:10px;
     }
     span {
         vertical-align: text-top;
     }
 
 }
 
-.searchDocTypeFilter .btn.active:before, .filtersection .btn.active:before {
+.searchDocTypeFilter label.active:before, .filtersection .btn.active:before {
         content: "\f14a\00a0";
         color: $primary;
         margin-right:10px;
 }
 
+
+.filterHead {
+    display:flex;
+    line-height: $line-height-base;
+    div {
+        margin-left: auto;
+        font-size: smaller;
+    }
+}
+
+a.checkbox-only {
+    font-size: smaller;
+}
+
 /* input restyling */
 .input-group.facet-group.checkbox {
     margin: 8px 0 8px 0;
@@ -35,7 +54,7 @@
 }
 
 .checkbox label {
-    margin-top: -24px;
+    color: $gray;
     position: relative;
     display: inline-block;
     margin-bottom: 0px;
@@ -44,28 +63,35 @@
 .checkbox input[type="checkbox"] + label::before {
     content: "\f096\00a0";
     font-family: "FontAwesome";
-    margin-right:11px;
+    margin-right:8px;
+    margin-left:2px;
     color: $gray;
 }
 
 .checkbox input[type="checkbox"]:checked + label::before {
     content: "\f14a\00a0";
     font-family: "FontAwesome";
-    margin-right:10px;
+    margin-right:8px;
+    margin-left:2px;
     color: $primary;
 }
 
 // allFilter sidebar
 
 .allFilter {
     margin-bottom: 30px;
+
+    &.panel-collapse {
+        padding: 10px;
+        background: $gray-lightest;
+    }
 
     .nav {
         margin-top: 0px;
     }
 
     h2 {
-        margin-bottom:10px!important;
+        margin-bottom:12px!important;
     }
 
     h4 {
@@ -76,7 +102,7 @@
         width: 100%!important;
     }
 
-    label.btn {
+    label {
         overflow:hidden;
         text-overflow:ellipsis;
     }
@@ -280,7 +306,16 @@
 }
 
 // Single Collapse Elements in Sidebar
+.filtersection .panel-collapse {
+    background: $gray-lightest;
+}
+
+.panel-collapse {
+    margin-top: -10px;
+}
+
 .panel-collapse.collapse
 {
-     margin-bottom: 30px;
+    margin-top: -4px;
+    margin-bottom: 30px;
 }
diff --git a/templates/ajax/backlinks.html b/templates/ajax/backlinks.html
@@ -1,8 +1,8 @@
 <div xmlns="http://www.w3.org/1999/xhtml" class="row" data-template="search:results" data-template-docType="backlinks">
     <div class="col-md-3 order-2 side-col">
+        <h2><a href="#allFilter" class="collapseSingle" data-toggle="collapse"><span data-template="lang:translate">filter</span></a></h2>
         <!-- Facetten Filter-->
-        <div class="allFilter">
-            <h2 data-template="lang:translate">filter</h2>
+        <div class="allFilter panel-collapse collapse show" id="allFilter">
             <!--            <h4 data-template="lang:translate">chronology</h4>-->
 
             <h4 data-template="lang:translate">docType</h4>

diff --git a/templates/ajax/biblio.html b/templates/ajax/biblio.html
@@ -1,8 +1,8 @@
 <div xmlns="http://www.w3.org/1999/xhtml" class="row" data-template="search:results" data-template-docType="biblio">
     <div class="col-md-3 order-2 side-col">
+        <h2><a href="#allFilter" class="collapseSingle" data-toggle="collapse"><span data-template="lang:translate">filter</span></a></h2>
         <!-- Facetten Filter-->
-        <div class="allFilter">
-            <h2 data-template="lang:translate">filter</h2>
+        <div class="allFilter panel-collapse collapse show" id="allFilter">
             <h4 data-template="lang:translate">chronology</h4>
             <input type="text" class="rangeSlider" name="chronology-slider" data-template="app:set-slider-range"/>
             <div class="input-group facet-group checkbox">