summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--xstatic/pkg/magic_search/__init__.py2
-rw-r--r--xstatic/pkg/magic_search/data/magic_search.html5
-rw-r--r--xstatic/pkg/magic_search/data/magic_search.js83
-rw-r--r--xstatic/pkg/magic_search/data/magic_search.scss51
4 files changed, 93 insertions, 48 deletions
diff --git a/xstatic/pkg/magic_search/__init__.py b/xstatic/pkg/magic_search/__init__.py
index 95f7fe5..edf6f44 100644
--- a/xstatic/pkg/magic_search/__init__.py
+++ b/xstatic/pkg/magic_search/__init__.py
@@ -11,7 +11,7 @@ NAME = __name__.split('.')[-1] # package name (e.g. 'foo' or 'foo_bar')
# please use a all-lowercase valid python
# package name
-VERSION = '0.2.0' # version of the packaged files, please use the upstream
+VERSION = '0.2.5' # version of the packaged files, please use the upstream
# version number
BUILD = '1' # our package build number, so we can release new builds
# with fixes for xstatic stuff.
diff --git a/xstatic/pkg/magic_search/data/magic_search.html b/xstatic/pkg/magic_search/data/magic_search.html
index e005920..1a0e6e6 100644
--- a/xstatic/pkg/magic_search/data/magic_search.html
+++ b/xstatic/pkg/magic_search/data/magic_search.html
@@ -1,5 +1,5 @@
<!--! Magic Searchbar -->
-<div class="magic-search" magic-overrides>
+<div class="magic-search" magic-overrides="">
<div class="search-bar">
<i class="fi-filter go"></i>
<div class="search-main-area">
@@ -18,7 +18,7 @@
{{ facetSelected.label[0] }}:
</span>
<div class="search-entry" is-open="isMenuOpen">
- <input class="search-input" type="text" data-dropdown="facet-drop" dropdown-toggle
+ <input class="search-input" type="text" data-dropdown="facet-drop" dropdown-toggle=""
placeholder="{{ strings.prompt }}" autocomplete="off" />
<ul id="facet-drop" class="f-dropdown dropdown-menu" data-dropdown-content="">
<li ng-repeat="facet in filteredObj" ng-show="!facetSelected">
@@ -38,6 +38,7 @@
ng-show="isMatchLabel(option.label)">
{{ option.label[0] }}<span class="match">{{ option.label[1] }}</span>{{ option.label[2] }}
</a>
+ </li>
</ul>
</div>
</div>
diff --git a/xstatic/pkg/magic_search/data/magic_search.js b/xstatic/pkg/magic_search/data/magic_search.js
index 347bb33..31f35e0 100644
--- a/xstatic/pkg/magic_search/data/magic_search.js
+++ b/xstatic/pkg/magic_search/data/magic_search.js
@@ -8,7 +8,7 @@
try{
angular.module('MagicSearch');
} catch (exception) {
- angular.module('MagicSearch', []);
+ angular.module('MagicSearch', []);
}
angular.module('MagicSearch')
@@ -23,8 +23,9 @@ angular.module('MagicSearch')
templateUrl: function (scope, elem) {
return elem.template;
},
- controller: function ($scope, $timeout) {
- $scope.promptString = $scope.strings['prompt'];
+ controller: function ($scope, $element, $timeout) {
+ var searchInput = $element.find('.search-input');
+ $scope.promptString = $scope.strings.prompt;
$scope.currentSearch = [];
$scope.initSearch = function() {
if (typeof $scope.facets_param === 'string') {
@@ -48,7 +49,7 @@ angular.module('MagicSearch')
initialFacets = initialFacets.split('&');
if (initialFacets.length > 1 || initialFacets[0].length > 0) {
$timeout(function() {
- $scope.strings['prompt'] = '';
+ $scope.strings.prompt = '';
});
}
angular.forEach(initialFacets, function(facet, idx) {
@@ -76,12 +77,18 @@ angular.module('MagicSearch')
});
});
if ($scope.textSearch !== undefined) {
- $scope.currentSearch.push({'name':'text='+$scope.textSearch, 'label':[$scope.strings['text'], $scope.textSearch]});
+ $scope.currentSearch.push({'name':'text='+$scope.textSearch, 'label':[$scope.strings.text, $scope.textSearch]});
}
$scope.filteredObj = $scope.facetsObj;
};
+ $scope.addFacets = function(facets) {
+ // add a facets javascript object to the existing list
+ for (var facet in facets) {
+ $scope.facetsObj.append(facet);
+ }
+ };
$scope.copyFacets = function(facets) {
- var ret = []
+ var ret = [];
for (var i=0; i<facets.length; i++) {
var facet = Object.create(facets[i]);
if (facets[i].options !== undefined) {
@@ -93,7 +100,7 @@ angular.module('MagicSearch')
ret.push(facet);
}
return ret;
- }
+ };
// removes a facet from the menu
$scope.deleteFacetSelection = function(facetParts) {
angular.forEach($scope.facetsObj.slice(), function(facet, idx) {
@@ -121,17 +128,17 @@ angular.module('MagicSearch')
}
});
};
- $('.search-input').on('keydown', function($event) { // handle ctrl-char input
+ searchInput.on('keydown', function($event) {
var key = $event.keyCode || $event.charCode;
if (key == 9) { // prevent default when we can.
$event.preventDefault();
}
});
- $('.search-input').on('keyup', function($event) { // handle ctrl-char input
- if ($event.metaKey == true) {
+ searchInput.on('keyup', function($event) { // handle ctrl-char input
+ if ($event.metaKey === true) {
return;
}
- var searchVal = $('.search-input').val();
+ var searchVal = searchInput.val();
var key = $event.keyCode || $event.charCode;
if (key == 9) { // tab, so select facet if narrowed down to 1
if ($scope.facetSelected === undefined) {
@@ -144,14 +151,14 @@ angular.module('MagicSearch')
$scope.resetState();
}
$timeout(function() {
- $('.search-input').val('');
+ searchInput.val('');
});
return;
}
if (key == 27) { // esc, so cancel and reset everthing
$timeout(function() {
$scope.hideMenu();
- $('.search-input').val('');
+ searchInput.val('');
});
$scope.resetState();
var textFilter = $scope.textSearch;
@@ -179,10 +186,10 @@ angular.module('MagicSearch')
$scope.currentSearch.splice(i, 1);
}
}
- $scope.currentSearch.push({'name':'text='+searchVal, 'label':[$scope.strings['text'], searchVal]});
+ $scope.currentSearch.push({'name':'text='+searchVal, 'label':[$scope.strings.text, searchVal]});
$scope.$apply();
$scope.hideMenu();
- $('.search-input').val('');
+ searchInput.val('');
$scope.$emit('textSearch', searchVal, $scope.filter_keys);
$scope.textSearch = searchVal;
}
@@ -191,15 +198,19 @@ angular.module('MagicSearch')
else {
if (searchVal === '') {
$scope.filteredObj = $scope.facetsObj;
+ $scope.$apply();
$scope.$emit('textSearch', '', $scope.filter_keys);
+ if ($scope.facetSelected && $scope.facetSelected.options === undefined) {
+ $scope.resetState();
+ }
}
else {
$scope.filterFacets(searchVal);
}
}
});
- $('.search-input').on('keypress', function($event) { // handle character input
- var searchVal = $('.search-input').val();
+ searchInput.on('keypress', function($event) { // handle character input
+ var searchVal = searchInput.val();
var key = $event.which || $event.keyCode || $event.charCode;
if (key != 8 && key != 46 && key != 13 && key != 9 && key != 27) {
searchVal = searchVal + String.fromCharCode(key).toLowerCase();
@@ -207,13 +218,17 @@ angular.module('MagicSearch')
if (searchVal == ' ') { // space and field is empty, show menu
$scope.showMenu();
$timeout(function() {
- $('.search-input').val('');
+ searchInput.val('');
});
return;
}
if (searchVal === '') {
$scope.filteredObj = $scope.facetsObj;
+ $scope.$apply();
$scope.$emit('textSearch', '', $scope.filter_keys);
+ if ($scope.facetSelected && $scope.facetSelected.options === undefined) {
+ $scope.resetState();
+ }
return;
}
if (key != 8 && key != 46) {
@@ -267,9 +282,10 @@ angular.module('MagicSearch')
}
};
// enable text entry when mouse clicked anywhere in search box
- $('.search-main-area').on("click", function($event) {
- $('.search-input').trigger("focus");
- if ($scope.facetSelected === undefined) {
+ $element.find('.search-main-area').on('click', function($event) {
+ var target = $($event.target);
+ if (target.is('.search-main-area')) {
+ searchInput.trigger('focus');
$scope.showMenu();
}
});
@@ -287,11 +303,11 @@ angular.module('MagicSearch')
$scope.showMenu();
}
$timeout(function() {
- $('.search-input').val('');
+ searchInput.val('');
});
- $scope.strings['prompt'] = '';
+ $scope.strings.prompt = '';
$timeout(function() {
- $('.search-input').focus();
+ searchInput.focus();
});
};
// when option clicked, complete facet and send event
@@ -319,11 +335,12 @@ angular.module('MagicSearch')
}
if (removed !== undefined && removed.indexOf('text') === 0) {
$scope.$emit('textSearch', '', $scope.filter_keys);
- $scope.textSearch = undefined
+ $scope.textSearch = undefined;
}
else {
$scope.$emit('searchUpdated', query);
if ($scope.currentSearch.length > 0) {
+ // prune facets as needed from menus
var newFacet = $scope.currentSearch[$scope.currentSearch.length-1].name;
var facetParts = newFacet.split('=');
angular.forEach($scope.facetsSave, function(facet, idx) {
@@ -348,10 +365,10 @@ angular.module('MagicSearch')
}
else {
$scope.resetState();
- $('.search-input').val('');
+ searchInput.val('');
}
- if ($scope.currentSearch.length == 0) {
- $scope.strings['prompt'] = $scope.promptString;
+ if ($scope.currentSearch.length === 0) {
+ $scope.strings.prompt = $scope.promptString;
}
// re-init to restore facets cleanly
$scope.facetsObj = $scope.copyFacets($scope.facetsSave);
@@ -366,24 +383,26 @@ angular.module('MagicSearch')
$scope.resetState();
$scope.$emit('searchUpdated', '');
$scope.$emit('textSearch', '', $scope.filter_keys);
- $scope.strings['prompt'] = $scope.promptString;
}
};
$scope.isMatchLabel = function(label) {
return Array.isArray(label);
};
$scope.resetState = function() {
- $('.search-input').val('');
+ searchInput.val('');
$scope.filteredObj = $scope.facetsObj;
$scope.facetSelected = undefined;
$scope.facetOptions = undefined;
- $scope.filteredOptions = undefined
+ $scope.filteredOptions = undefined;
+ if ($scope.currentSearch.length === 0) {
+ $scope.strings.prompt = $scope.promptString;
+ }
};
// showMenu and hideMenu depend on foundation's dropdown. They need
// to be modified to work with another dropdown implemenation (i.e. bootstrap)
$scope.showMenu = function() {
$timeout(function() {
- if ($('#facet-drop').hasClass('open') === false) {
+ if ($('#facet-drop').hasClass('open') === false && $scope.filteredObj.length > 0) {
$('.search-input').trigger('click');
}
});
diff --git a/xstatic/pkg/magic_search/data/magic_search.scss b/xstatic/pkg/magic_search/data/magic_search.scss
index b25cf3a..87ee4a5 100644
--- a/xstatic/pkg/magic_search/data/magic_search.scss
+++ b/xstatic/pkg/magic_search/data/magic_search.scss
@@ -3,6 +3,8 @@
/*-----------------------------------------
Colors
----------------------------------------- */
+$bordercolor: #ccc;
+$iconcolor: #6a737b;
$textcolor: #444;
$background: white;
$itembackground: #e6e7e8;
@@ -12,11 +14,13 @@ $itembackground: #e6e7e8;
----------------------------------------- */
@mixin item-list {
.item-list {
- margin-bottom: 6px;
+ position: relative;
+ //top: -0.30rem;
.item {
color: #333;
background-color: $itembackground;
- margin-right: 8px;
+ height: 1.3rem;
+ margin-right: 0.5rem;
a {
color: white;
}
@@ -24,20 +28,31 @@ $itembackground: #e6e7e8;
}
}
+@-moz-document url-prefix() {
+ .item-list {
+ .item {
+ top: -0.40rem;
+ }
+ }
+ .search-selected {
+ top: -0.40rem;
+ }
+}
+
/*-----------------------------------------
Magic Search bar
----------------------------------------- */
.search-bar {
position: relative;
- border: 1px solid black;
+ border: 1px solid $bordercolor;
background-color: $background;
margin-bottom: 0.5rem;
- padding: 4px;
+ padding: 0.25rem;
height: auto;
i.fi-filter {
- color: $textcolor;
+ color: $iconcolor;
position: absolute;
- top: 0.5rem;
+ top: 0.35rem;
left: 0.65rem;
}
.search-main-area {
@@ -47,38 +62,48 @@ $itembackground: #e6e7e8;
cursor: text;
}
@include item-list;
- .item-list {
- margin-bottom: 2px;
- }
+ //.item-list {
+ // margin-bottom: 0.125rem;
+ //}
.search-selected {
+ position: relative;
+ padding-left: 0;
+ padding-right: 0;
background-color: $background;
color: $textcolor;
}
.search-entry {
+ position: relative;
display: inline-block;
height: 1.5rem;
+ height: 1.5rem;
}
.search-input {
- width: 220px;
+ width: 17.5rem;
border: 0;
box-shadow: none;
height: 1.5rem;
- padding: 3px;
+ padding: 0.25rem;
+ margin-bottom: 0;
background-color: $background;
&:focus {
box-shadow: none;
+ background-color: $background;
}
}
.match {
font-weight: bold;
}
i.cancel {
- color: $textcolor;
+ color: $iconcolor;
&:hover {
color: darkred;
}
position: absolute;
- top: 0.5rem;
+ top: 0.35rem;
right: 0.65rem;
}
+ .f-dropdown.open {
+ left: 0 !important;
+ }
}
View Lorry Controller Status