[mod] oscar: get bootstrap and typeahead from NPM

This commit is contained in:
Alexandre Flament 2021-03-10 19:41:05 +01:00
parent 44407353ef
commit 86912e2272
102 changed files with 8124 additions and 8707 deletions

View file

@ -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);
}

View file

@ -0,0 +1,3 @@
@import "../../../node_modules/bootstrap/less/bootstrap.less";
@import "typeahead.less";

View file

@ -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;
}
}
}