diff options
Diffstat (limited to 'xstatic/pkg')
-rw-r--r-- | xstatic/pkg/magic_search/__init__.py | 2 | ||||
-rw-r--r-- | xstatic/pkg/magic_search/data/magic_search.html | 5 | ||||
-rw-r--r-- | xstatic/pkg/magic_search/data/magic_search.js | 83 | ||||
-rw-r--r-- | xstatic/pkg/magic_search/data/magic_search.scss | 51 |
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; + } } |