LupusNobilis/sogo
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

(js) Allow cancelling of sgSearch

Browse source
This commit is contained in:
Francis Lachapelle 2015-07-08 14:18:13 -04:00
parent 066bdc5f3f
commit 9bdc365bf0
1 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
UI/WebServerResources/js/Common/sgSearch.directive.js
View file

@ -12,6 +12,10 @@
* @example: * @example:
<div sg-search="mailbox.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])"> <div sg-search="mailbox.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
<md-button class="sg-icon-button"
sg-search-cancel="ctrl.cancelSearch()">
<md-icon>arrow_back</md-icon>
</md-button>
<md-input-container> <md-input-container>
<input name="search" type="search"/> <input name="search" type="search"/>
</md-input-container> </md-input-container>
@ -34,7 +38,8 @@
function compile(tElement, tAttr) { function compile(tElement, tAttr) {
var mdInputEl = tElement.find('md-input-container'), var mdInputEl = tElement.find('md-input-container'),
inputEl = tElement.find('input'), inputEl = tElement.find('input'),
selectEl = tElement.find('md-select'); selectEl = tElement.find('md-select'),
buttonEl = tElement.find('md-button');
inputEl.attr('ng-model', '$sgSearchController.searchText'); inputEl.attr('ng-model', '$sgSearchController.searchText');
inputEl.attr('ng-model-options', '$sgSearchController.searchTextOptions'); inputEl.attr('ng-model-options', '$sgSearchController.searchTextOptions');
@ -43,10 +48,24 @@
selectEl.attr('ng-model', '$sgSearchController.searchField'); selectEl.attr('ng-model', '$sgSearchController.searchField');
selectEl.attr('ng-change', '$sgSearchController.onChange()'); selectEl.attr('ng-change', '$sgSearchController.onChange()');
} }
if (buttonEl && buttonEl.attr('sg-search-cancel')) {
buttonEl.attr('ng-click', buttonEl.attr('sg-search-cancel'));
buttonEl.removeAttr('sg-search-cancel');
}
else {
buttonEl = null;
}
return function postLink(scope, iElement, iAttr, controller) { return function postLink(scope, iElement, iAttr, controller) {
var compiledButtonEl = iElement.find('button');
// Associate callback to controller // Associate callback to controller
controller.doSearch = $parse(iElement.attr('sg-search')); controller.doSearch = $parse(iElement.attr('sg-search'));
// Reset the input field when cancelling the search
if (buttonEl && compiledButtonEl) {
compiledButtonEl.on('click', controller.cancelSearch);
}
} }
} }
} }
@ -73,12 +92,14 @@
*/ */
sgSearchController.$inject = ['$scope', '$element']; sgSearchController.$inject = ['$scope', '$element'];
function sgSearchController($scope, $element) { function sgSearchController($scope, $element) {
var vm = this;
// Controller variables // Controller variables
this.previous = { searchText: '', searchField: '' }; vm.previous = { searchText: '', searchField: '' };
this.searchText = null; vm.searchText = null;
// Model options // Model options
this.searchTextOptions = { vm.searchTextOptions = {
updateOn: 'default blur', updateOn: 'default blur',
debounce: { debounce: {
default: 300, default: 300,
@ -87,17 +108,22 @@
}; };
// Method to call on data changes // Method to call on data changes
this.onChange = function(value) { vm.onChange = function() {
if (this.searchText != null) { if (vm.searchText != null) {
if (this.searchText != this.previous.searchText || this.searchField != this.previous.searchField) { if (vm.searchText != vm.previous.searchText || vm.searchField != vm.previous.searchField) {
if (this.searchText.length > 2 || this.searchText.length == 0) { if (vm.searchText.length > 2 || vm.searchText.length == 0) {
// doSearch is the compiled expression of the sg-search attribute // doSearch is the compiled expression of the sg-search attribute
this.doSearch($scope, { searchText: this.searchText, searchField: this.searchField }); vm.doSearch($scope, { searchText: vm.searchText, searchField: vm.searchField });
} }
this.previous = { searchText: this.searchText, searchField: this.searchField }; vm.previous = { searchText: vm.searchText, searchField: vm.searchField };
} }
} }
}; };
// Reset input field when cancelling the search
vm.cancelSearch = function() {
vm.searchText = "";
};
} }
angular angular