[mod] oscar: get bootstrap and typeahead from NPM

3 files changed, 181 insertions, 13 deletions

diff --git a/searx/static/themes/oscar/src/js/autocompleter.js b/searx/static/themes/oscar/src/js/autocompleter.js
index 26d567507..56293f4f3 100644
--- a/searx/static/themes/oscar/src/js/autocompleter.js
+++ b/searx/static/themes/oscar/src/js/autocompleter.js
@@ -15,31 +15,42 @@
  * (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at>
  */
 
-if(searx.autocompleter) {
-    searx.searchResults = new Bloodhound({
-        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-        queryTokenizer: Bloodhound.tokenizers.whitespace,
-        remote: './autocompleter?q=%QUERY'
-    });
-    searx.searchResults.initialize();
-}
-
 $(document).ready(function(){
     var original_search_value = '';
     if(searx.autocompleter) {
-		$("#q").on('keydown', function(e) {
+        var searchResults = new Bloodhound({
+            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            remote: {
+                url: './autocompleter?q=%QUERY',
+                wildcard: '%QUERY'
+            }
+        });
+        searchResults.initialize();
+
+        $("#q").on('keydown', function(e) {
 			if(e.which == 13) {
                 original_search_value = $('#q').val();
 			}
 		});
-        $('#q').typeahead(null, {
+        $('#q').typeahead({
             name: 'search-results',
+            highlight: false,
+            hint: true,
             displayKey: function(result) {
                 return result;
             },
-            source: searx.searchResults.ttAdapter()
+            classNames: {
+                input: 'tt-input',
+                hint: 'tt-hint',
+                menu: 'tt-dropdown-menu',
+                dataset: 'tt-dataset-search-results',
+            },
+        }, {
+            name: 'autocomplete',
+            source: searchResults,
         });
-        $('#q').bind('typeahead:selected', function(ev, suggestion) {
+        $('#q').bind('typeahead:select', function(ev, suggestion) {
             if(original_search_value) {
                 $('#q').val(original_search_value);
             }
diff --git a/searx/static/themes/oscar/src/less/bootstrap/bootstrap.less b/searx/static/themes/oscar/src/less/bootstrap/bootstrap.less
new file mode 100644
index 000000000..d6145eb00
--- /dev/null
+++ b/searx/static/themes/oscar/src/less/bootstrap/bootstrap.less
@@ -0,0 +1,3 @@
+@import "../../../node_modules/bootstrap/less/bootstrap.less";
+
+@import "typeahead.less";
diff --git a/searx/static/themes/oscar/src/less/bootstrap/typeahead.less b/searx/static/themes/oscar/src/less/bootstrap/typeahead.less
new file mode 100644
index 000000000..de1c6ef05
--- /dev/null
+++ b/searx/static/themes/oscar/src/less/bootstrap/typeahead.less
@@ -0,0 +1,154 @@
+/*
+ * typehead.js-bootstrap3.less
+ * @version 0.2.3
+ * https://github.com/hyspace/typeahead.js-bootstrap3.less
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+//custom mixin for .form-control-validation
+.typeahead-form-control(@border-color: #ccc;) {
+    border-color: @border-color;
+    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+    &:focus {
+      border-color: darken(@border-color, 10%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      .box-shadow(@shadow);
+    }
+  }
+  
+  //main styles for control
+  .tt-input,
+  .tt-hint {
+    .twitter-typeahead &{
+      //validation states
+      .has-warning &{
+        .typeahead-form-control(@state-warning-text);
+      }
+      .has-error &{
+        .typeahead-form-control(@state-danger-text);
+      }
+      .has-success &{
+        .typeahead-form-control(@state-success-text);
+      }
+    }
+  
+    //border
+    .input-group .twitter-typeahead:first-child &{
+      .border-left-radius(@border-radius-base);
+    }
+    .input-group .twitter-typeahead:last-child &{
+      .border-right-radius(@border-radius-base);
+    }
+  
+    //sizing - small:size and border
+    .input-group.input-group-sm .twitter-typeahead &{
+      .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+    }
+    .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) &{
+      border-radius: 0;
+    }
+    .input-group.input-group-sm .twitter-typeahead:first-child &{
+      .border-left-radius(@border-radius-small);
+      .border-right-radius(0);
+    }
+    .input-group.input-group-sm .twitter-typeahead:last-child &{
+      .border-left-radius(0);
+      .border-right-radius(@border-radius-small);
+    }
+  
+    //sizing - large:size and border
+    .input-group.input-group-lg .twitter-typeahead &{
+      .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+    }
+    .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) &{
+      border-radius: 0;
+    }
+    .input-group.input-group-lg .twitter-typeahead:first-child &{
+      .border-left-radius(@border-radius-large);
+      .border-right-radius(0);
+    }
+    .input-group.input-group-lg .twitter-typeahead:last-child &{
+      .border-left-radius(0);
+      .border-right-radius(@border-radius-large);
+    }
+  }
+  
+  //for wrapper
+  .twitter-typeahead {
+    width: 100%;
+    .input-group &{
+      //overwrite `display:inline-block` style
+      display: table-cell!important;
+      float: left;
+    }
+  }
+  
+  //particular style for each other
+  .twitter-typeahead .tt-hint {
+    color: @text-muted;//color - hint
+  }
+  .twitter-typeahead .tt-input {
+    z-index: 2;
+    //disabled status
+    //overwrite inline styles of .tt-query
+    &[disabled],
+    &[readonly],
+    fieldset[disabled] & {
+      cursor: not-allowed;
+      //overwirte inline style
+      background-color: @input-bg-disabled!important;
+    }
+  }
+  
+  //dropdown styles
+  .tt-dropdown-menu {
+    //dropdown menu
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: @zindex-dropdown;
+    min-width: 160px;
+    width: 100%;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    list-style: none;
+    font-size: @font-size-base;
+    background-color: @dropdown-bg;
+    border: 1px solid @dropdown-fallback-border;
+    border: 1px solid @dropdown-border;
+    border-radius: @border-radius-base;
+    .box-shadow(0 6px 12px rgba(0,0,0,.175));
+    background-clip: padding-box;
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+  
+    .tt-suggestion {
+      //item
+      display: block;
+      padding: 3px 20px;
+      clear: both;
+      font-weight: normal;
+      line-height: @line-height-base;
+      color: @dropdown-link-color;
+      white-space: nowrap;
+      text-align: left;
+      cursor: pointer !important;
+      &.tt-cursor {
+        //item selected
+        text-decoration: none;
+        outline: 0;
+        background-color: @dropdown-link-hover-bg;
+        color: @dropdown-link-hover-color;
+        a {
+          //link in item selected
+          color: @dropdown-link-hover-color;
+        }
+      }
+      p {
+        margin: 0;
+      }
+    }
+  }
+  
\ No newline at end of file