Skip to content
This repository was archived by the owner on Dec 16, 2019. It is now read-only.

Commit eaf793c

Browse files
pkempenaerspkempenaers
committed
Add the enable and disable search button:
- By setting showEnableSearchButton to true, the enable and disable search items will be added. - The text of those can be set with: texts.enableSearch and texts.disableSearch Implements issue #7
1 parent b90c3e0 commit eaf793c

File tree

3 files changed

+121
-21
lines changed

3 files changed

+121
-21
lines changed

‎pages/javascripts/pages/home/ExampleCtrl.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scope) {
44
$scope.testmodel = [];
55
$scope.testdata = [
6-
{ id: 1, label: "David", age: 23 },
7-
{ id: 2, label: "Jhon", age: 24 },
8-
{ id: 3, label: "Danny", age: 26 }];
6+
{ id: 1, label: "David"},
7+
{ id: 2, label: "Jhon"},
8+
{ id: 3, label: "Danny"}];
99
$scope.testsettings = {
10-
searchField: 'age',
11-
enableSearch: true
10+
showEnableSearchButton: true,
11+
keyboardControls: true
1212
};
1313

1414
$scope.testevents = {
@@ -219,11 +219,20 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
219219

220220
$scope.example20model = [];
221221
$scope.example20data = [
222-
{ id: 1, label: "David", age: 23 },
223-
{ id: 2, label: "Jhon", age: 24 },
224-
{ id: 3, label: "Danny", age: 26 }];
222+
{ id: 1, label: "David", age: 23 },
223+
{ id: 2, label: "Jhon", age: 24 },
224+
{ id: 3, label: "Danny", age: 26 }];
225225
$scope.example20settings = {
226226
searchField: 'age',
227227
enableSearch: true
228+
};
229+
230+
$scope.example21model = [];
231+
$scope.example21data = [
232+
{ id: 1, label: "David"},
233+
{ id: 2, label: "Jhon"},
234+
{ id: 3, label: "Danny"}];
235+
$scope.example21settings = {
236+
showEnableSearchButton: true
228237
};
229238
}]);

‎pages/javascripts/pages/home/home.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,46 @@ <h3>Code</h3>
271271
$scope.example20settings = {
272272
searchField: 'age',
273273
enableSearch: true
274+
};
275+
</div>
276+
</div>
277+
</div>
278+
</uib-accordion-group>
279+
<uib-accordion-group heading="Enable / Disable search button">
280+
<div class="row">
281+
<div class="col-xs-12">
282+
Setting showEnableSearchButton to true will add the enable/disable search button under the Select all / Deselect all buttons
283+
</div>
284+
</div>
285+
<div class="row">
286+
<div class="col-xs-12 col-sm-6">
287+
<h3>Demo</h3>
288+
<div class="well">
289+
<div>
290+
<div ng-dropdown-multiselect="" options="example21data" selected-model="example21model" extra-settings="example21settings"></div>
291+
</div>
292+
</div>
293+
</div>
294+
<div class="col-xs-12 col-sm-6">
295+
<h3>The model:</h3>
296+
<pre>{{example21model|json}}</pre>
297+
</div>
298+
</div>
299+
<div class="row">
300+
<div class="col-md-12">
301+
<h3>Code</h3>
302+
<div hljs language="javascript">
303+
// HTML
304+
<div ng-dropdown-multiselect="" options="example21data" selected-model="example21model" extra-settings="example21settings"></div>
305+
306+
// JavaScript
307+
$scope.example21model = [];
308+
$scope.example21data = [
309+
{ id: 1, label: "David"},
310+
{ id: 2, label: "Jhon"},
311+
{ id: 3, label: "Danny"}];
312+
$scope.example21settings = {
313+
showEnableSearchButton: true
274314
};
275315
</div>
276316
</div>
@@ -933,6 +973,12 @@ <h2>Settings</h2>
933973
<td>true</td>
934974
<td>Indicates if to show the "Uncheck All" item.</td>
935975
</tr>
976+
<tr>
977+
<td>showEnableSearchButton</td>
978+
<td>Boolean</td>
979+
<td>false</td>
980+
<td>Indicates if to show the "Enable search / Disable search" item.</td>
981+
</tr>
936982
<tr>
937983
<td>closeOnSelect</td>
938984
<td>Boolean</td>
@@ -1065,6 +1111,16 @@ <h2>Translation Texts</h2>
10651111
<td>Uncheck All</td>
10661112
<td>"Uncheck All" item's text.</td>
10671113
</tr>
1114+
<tr>
1115+
<td>enableSearch</td>
1116+
<td>Enable search</td>
1117+
<td>"enable search" item's text.</td>
1118+
</tr>
1119+
<tr>
1120+
<td>disableSearch</td>
1121+
<td>Disable search</td>
1122+
<td>"disable search" item's text.</td>
1123+
</tr>
10681124
<tr>
10691125
<td>selectionCount</td>
10701126
<td>checked</td>

‎src/angularjs-dropdown-multiselect.js‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,19 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
3131
var template = '<div class="multiselect-parent btn-group dropdown-multiselect">';
3232
template += '<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}&nbsp;<span class="caret"></span></button>';
3333
template += '<ul class="dropdown-menu dropdown-menu-form" ng-if="open" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: auto" >';
34-
template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a ng-keydown="keyDownLink($event)" data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span> {{texts.checkAll}}</a>';
35-
template += '<li ng-show="settings.showUncheckAll"><a ng-keydown="keyDownLink($event)" data-ng-click="deselectAll();" tabindex="-1" id="deselectAll"><span class="glyphicon glyphicon-remove"></span> {{texts.uncheckAll}}</a></li>';
36-
template += '<li ng-hide="(!settings.showCheckAll || settings.selectionLimit > 0) && !settings.showUncheckAll" class="divider"></li>';
37-
template += '<li ng-show="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control searchField" ng-keydown="keyDownSearchDefault($event); keyDownSearchSingle($event, searchFilter);" style="width: 100%;" ng-model="searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
38-
template += '<li ng-show="settings.enableSearch" class="divider"></li>';
34+
template += '<li ng-if="settings.showCheckAll && settings.selectionLimit > 0"><a ng-keydown="keyDownLink($event)" data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span> {{texts.checkAll}}</a>';
35+
template += '<li ng-if="settings.showUncheckAll"><a ng-keydown="keyDownLink($event)" data-ng-click="deselectAll();" tabindex="-1" id="deselectAll"><span class="glyphicon glyphicon-remove"></span> {{texts.uncheckAll}}</a></li>';
36+
template += '<li ng-if="settings.showEnableSearchButton && settings.enableSearch"><a ng-keydown="keyDownLink($event); keyDownToggleSearch();" ng-click="toggleSearch($event);" tabindex="-1">{{texts.disableSearch}}</a></li>';
37+
template += '<li ng-if="settings.showEnableSearchButton && !settings.enableSearch"><a ng-keydown="keyDownLink($event); keyDownToggleSearch();" ng-click="toggleSearch($event);" tabindex="-1">{{texts.enableSearch}}</a></li>';
38+
template += '<li ng-if="(settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll || settings.showEnableSearchButton" class="divider"></li>';
39+
template += '<li ng-if="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control searchField" ng-keydown="keyDownSearchDefault($event); keyDownSearchSingle($event, input.searchFilter);" style="width: 100%;" ng-model="input.searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
40+
template += '<li ng-if="settings.enableSearch" class="divider"></li>';
3941

4042
if (groups) {
41-
template += '<li ng-repeat-start="option in orderedItems | filter:getFilter(searchFilter)" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
43+
template += '<li ng-repeat-start="option in orderedItems | filter:getFilter(input.searchFilter)" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
4244
template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" ng-repeat-end role="presentation">';
4345
} else {
44-
template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" role="presentation" ng-repeat="option in options | filter:getFilter(searchFilter)">';
46+
template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" role="presentation" ng-repeat="option in options | filter:getFilter(input.searchFilter)">';
4547
}
4648

4749
template += '<a ng-keydown="keyDownLink($event)" role="menuitem" class="option" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';
@@ -108,6 +110,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
108110
selectionLimit: 0,
109111
showCheckAll: true,
110112
showUncheckAll: true,
113+
showEnableSearchButton: false,
111114
closeOnSelect: false,
112115
buttonClasses: 'btn btn-default',
113116
closeOnDeselect: false,
@@ -128,10 +131,14 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
128131
selectionOf: '/',
129132
searchPlaceholder: 'Search...',
130133
buttonDefaultText: 'Select',
131-
dynamicButtonTextSuffix: 'checked'
134+
dynamicButtonTextSuffix: 'checked',
135+
disableSearch: 'Disable search',
136+
enableSearch: 'Enable search'
132137
};
133138

134-
$scope.searchFilter = $scope.searchFilter || '';
139+
$scope.input = {
140+
searchFilter: $scope.searchFilter || ''
141+
};
135142

136143
if (angular.isDefined($scope.settings.groupBy)) {
137144
$scope.$watch('options', function (newValue) {
@@ -378,7 +385,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
378385

379386
$scope.toggleDropdown();
380387
}
381-
}
388+
};
382389

383390
$scope.keyDownSearchDefault = function(event) {
384391
var parent = event.srcElement.parentNode.parentNode;
@@ -410,7 +417,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
410417

411418
$scope.toggleDropdown();
412419
}
413-
}
420+
};
414421

415422
$scope.keyDownSearchSingle = function(event, searchFilter) {
416423
var searchResult;
@@ -425,13 +432,41 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
425432
}
426433
}
427434
}
428-
}
435+
};
429436

430437
$scope.getFilter = function(searchFilter) {
431438
var filter = {};
432439
filter[$scope.settings.searchField] = searchFilter;
433440
return filter;
434-
}
441+
};
442+
443+
$scope.toggleSearch = function($event) {
444+
if ($event) {
445+
$event.stopPropagation();
446+
}
447+
$scope.settings.enableSearch = !$scope.settings.enableSearch;
448+
if (!$scope.settings.enableSearch) {
449+
$scope.input.searchFilter = '';
450+
}
451+
};
452+
453+
$scope.keyDownToggleSearch = function() {
454+
if (!$scope.settings.keyboardControls) {
455+
return;
456+
}
457+
if (event.keyCode === 13) {
458+
$scope.toggleSearch();
459+
if ($scope.settings.enableSearch) {
460+
setTimeout(
461+
function() {
462+
angular.element($element)[0].querySelector('.searchField').focus();
463+
}, 0
464+
);
465+
} else {
466+
angular.element($element)[0].querySelector('.option').focus();
467+
}
468+
}
469+
};
435470
}
436471
};
437472
}]);

0 commit comments

Comments
 (0)