[enh] add nojs support into oscar-template

6 files changed, 39 insertions, 13 deletions

diff --git a/searx/search.py b/searx/search.py
index 427da3bab..0324d4aaf 100644
--- a/searx/search.py
+++ b/searx/search.py
@@ -384,12 +384,17 @@ class Search(object):
             for pd_name, pd in self.request_data.items():
                 if pd_name.startswith('category_'):
                     category = pd_name[9:]
+
                     # if category is not found in list, skip
                     if category not in categories:
                         continue
 
-                    # add category to list
-                    self.categories.append(category)
+                    if pd != 'off':
+                        # add category to list
+                        self.categories.append(category)
+                    elif category in self.categories:
+                        # remove category from list if property is set to 'off'
+                        self.categories.remove(category)
 
             # if no category is specified for this search,
             # using user-defined default-configuration which
diff --git a/searx/static/themes/oscar/css/oscar.min.css b/searx/static/themes/oscar/css/oscar.min.css
index b8d6fba15..72be92c46 100644
--- a/searx/static/themes/oscar/css/oscar.min.css
+++ b/searx/static/themes/oscar/css/oscar.min.css
@@ -1,11 +1,14 @@
 html{position:relative;min-height:100%}
 body{margin-bottom:80px}
 .footer{position:absolute;bottom:0;width:100%;height:60px}
-input[type=checkbox]:checked~.label_hide_if_checked{display:none}
-input[type=checkbox]:not(:checked)~.label_hide_if_not_checked{display:none}
-.result_header{margin-bottom:5px;margin-top:20px}.result_header .favicon{margin-bottom:-3px}
-.result_header a{vertical-align:bottom}.result_header a .highlight{font-weight:bold}
-.result-content{margin-top:5px}.result-content .highlight{font-weight:bold}
+input[type=checkbox]:checked+.label_hide_if_checked,input[type=checkbox]:checked+.label_hide_if_not_checked+.label_hide_if_checked{display:none}
+input[type=checkbox]:not(:checked)+.label_hide_if_not_checked,input[type=checkbox]:not(:checked)+.label_hide_if_checked+.label_hide_if_not_checked{display:none}
+.result_header{margin-bottom:5px;margin-top:20px}
+.result_header .favicon{margin-bottom:-3px}
+.result_header a{vertical-align:bottom}
+.result_header a .highlight{font-weight:bold}
+.result-content{margin-top:5px}
+.result-content .highlight{font-weight:bold}
 .result-default{clear:both}
 .result-images{float:left !important}
 .img-thumbnail{margin:5px;max-height:128px;min-height:128px}
@@ -20,3 +23,4 @@ input[type=checkbox]:not(:checked)~.label_hide_if_not_checked{display:none}
 .search_categories{margin:10px 0;text-transform:capitalize}
 .cursor-text{cursor:text !important}
 .cursor-pointer{cursor:pointer !important}
+
diff --git a/searx/static/themes/oscar/less/oscar/checkbox.less b/searx/static/themes/oscar/less/oscar/checkbox.less
index 712e53d49..6428b36ed 100644
--- a/searx/static/themes/oscar/less/oscar/checkbox.less
+++ b/searx/static/themes/oscar/less/oscar/checkbox.less
@@ -1,9 +1,9 @@
 // Hide element if checkbox is checked
-input[type=checkbox]:checked ~ .label_hide_if_checked {
+input[type=checkbox]:checked + .label_hide_if_checked, input[type=checkbox]:checked + .label_hide_if_not_checked + .label_hide_if_checked {
   display:none;
 }
 
 // Hide element if checkbox is not checked
-input[type=checkbox]:not(:checked) ~ .label_hide_if_not_checked {
+input[type=checkbox]:not(:checked) + .label_hide_if_not_checked, input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not_checked {
   display:none;
 }
diff --git a/searx/templates/oscar/base.html b/searx/templates/oscar/base.html
index 466756b6f..c0393a66d 100644
--- a/searx/templates/oscar/base.html
+++ b/searx/templates/oscar/base.html
@@ -36,7 +36,8 @@
     </script>
     <noscript>
         <style type="text/css">
-            .tab-content > .active_if_nojs {display: block;}
+            .tab-content > .active_if_nojs, .active_if_nojs {display: block;}
+            .margin_top_if_nojs {margin-top: 20px;}
             .hide_if_nojs {display: none !important;overflow:none !important;}
         </style>
     </noscript>
diff --git a/searx/templates/oscar/categories.html b/searx/templates/oscar/categories.html
index 82ddcf686..f38cce5bd 100644
--- a/searx/templates/oscar/categories.html
+++ b/searx/templates/oscar/categories.html
@@ -1,6 +1,22 @@
-<div id="categories" class="btn-group btn-toggle" data-toggle="buttons">
+<!-- used if scripts are disabled -->
+<noscript>
+<div id="categories" class="btn-group btn-toggle">
+{% for category in categories %}
+    <!--<div class="checkbox">-->
+        <input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}_nojs" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />
+        <label class="btn btn-sm btn-primary active label_hide_if_not_checked" for="checkbox_{{ category|replace(' ', '_') }}_nojs">{{ _(category) }}</label>
+        <label class="btn btn-sm btn-default label_hide_if_checked" for="checkbox_{{ category|replace(' ', '_') }}_nojs">{{ _(category) }}</label>
+    <!--</div>-->
+    {% if category in selected_categories %}<input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}_dis_activation" name="category_{{ category }}" value="off" checked="checked"/>{% endif %}
+{% endfor %}
+</div>
+</noscript>
+
+<div id="categories" class="btn-group btn-toggle hide_if_nojs" data-toggle="buttons">
 {% for category in categories %}
     <label class="btn btn-sm {% if category in selected_categories %}btn-primary active{% else %}btn-default{% endif %}" data-btn-class="primary">
         <input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />{{ _(category) }}</label>
 {% endfor %}
 </div>
+
+
diff --git a/searx/templates/oscar/search_full.html b/searx/templates/oscar/search_full.html
index 673f23969..5818286ec 100644
--- a/searx/templates/oscar/search_full.html
+++ b/searx/templates/oscar/search_full.html
@@ -8,8 +8,8 @@
         </span>

     </div>

 

-    <button type="button" class="btn btn-link btn-collapse center-block collapsed" data-toggle="collapse" data-target="#search_categories" data-btn-text-collapsed="{{ _('Show search filters') }}" data-btn-text-not-collapsed="{{ _('Hide search filters') }}">{{ _('Show search filters') }}</button>

-    <div class="row collapse" id="search_categories">

+    <button type="button" class="btn btn-link btn-collapse center-block collapsed hide_if_nojs" data-toggle="collapse" data-target="#search_categories" data-btn-text-collapsed="{{ _('Show search filters') }}" data-btn-text-not-collapsed="{{ _('Hide search filters') }}">{{ _('Show search filters') }}</button>

+    <div class="row collapse active_if_nojs margin_top_if_nojs" id="search_categories">

         <div class="col-md-12 text-center">

             {% include 'oscar/categories.html' %}

         </div>