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

Commit 58569e0

Browse files
pkempenaerspkempenaers
committed
Merge branch 'Fix-1.1.0' into Fix-1.2.0
# Conflicts: # development_index.html # pages/javascripts/pages/home/home.html # src/angularjs-dropdown-multiselect.js
2 parents d393e8a + 3e51752 commit 58569e0

File tree

4 files changed

+98
-64
lines changed

4 files changed

+98
-64
lines changed

‎development_index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html ng-app="exampleApp">
33

44
<head>
55
<meta charset='utf-8'>
66
<meta http-equiv="X-UA-Compatible" content="chrome=1">
77
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
88
<link rel="stylesheet" type="text/css" href="./pages/stylesheets/stylesheet.css" media="screen" />
9-
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
9+
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css" />
1010
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
1111
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
1212
<script>
@@ -58,14 +58,14 @@ <h2>based on Bootstrap's dropdown</h2>
5858
</div>
5959
</footer>
6060

61-
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
62-
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>
63-
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-sanitize.js"></script>
64-
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-touch.min.js"></script>
65-
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
61+
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
62+
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
63+
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.js"></script>
64+
<script type="text/javascript" src="bower_components/angular-touch/angular-touch.js"></script>
65+
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
6666
<script type="text/javascript" src="bower_components/highlightjs/highlight.pack.js"></script>
6767
<script type="text/javascript" src="bower_components/angular-highlightjs/angular-highlightjs.js"></script>
68-
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
68+
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
6969

7070
<script type="text/javascript" src="src/angularjs-dropdown-multiselect.js"></script>
7171
<!--<script type="text/javascript" src="dist/angularjs-dropdown-multiselect.min.js"></script>-->

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
'use strict';
22

33
angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scope) {
4-
$scope.example1model = [];
4+
$scope.testmodel = {};
5+
$scope.testdata = [
6+
{ id: 1, label: "David" },
7+
{ id: 2, label: "Jhon" },
8+
{ id: 3, label: "Danny" }];
9+
$scope.testsettings = {
10+
closeOnDeselect: true,
11+
selectionLimit: 1
12+
};
13+
14+
$scope.example1model = [];
515
$scope.example1data = [
616
{id: 1, label: "David"},
717
{id: 2, label: "Jhon"},

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

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,29 @@ <h2 style="margin-bottom: 0">Download</h2>
2222
</ol>
2323
</div>
2424
</div>
25-
<accordion close-others="true">
26-
<accordion-group heading="Basic Usage Example" is-open="true">
25+
<uib-accordion close-others="true">
26+
<!--<uib-accordion-group heading="test Settings Example">
27+
<div class="row">
28+
<div class="col-xs-12">
29+
test
30+
</div>
31+
</div>
32+
<div class="row">
33+
<div class="col-xs-12 col-sm-6">
34+
<h3>Demo</h3>
35+
<div class="well">
36+
<div>
37+
<div ng-dropdown-multiselect options="testdata" selected-model="testmodel" extra-settings="testsettings"></div>
38+
</div>
39+
</div>
40+
</div>
41+
<div class="col-xs-12 col-sm-6">
42+
<h3>The model:</h3>
43+
<pre>{{testmodel|json}}</pre>
44+
</div>
45+
</div>
46+
</uib-accordion-group>-->
47+
<uib-accordion-group heading="Basic Usage Example" is-open="true">
2748
<div class="row">
2849
<div class="col-xs-12 col-sm-6">
2950
<h3>Demo</h3>
@@ -49,8 +70,8 @@ <h3>Code</h3>
4970
</div>
5071
</div>
5172
</div>
52-
</accordion-group>
53-
<accordion-group heading="Basic Settings Example">
73+
</uib-accordion-group>
74+
<uib-accordion-group heading="Basic Settings Example">
5475
<div class="row">
5576
<div class="col-xs-12">
5677
This example shows the ability to select the property to display as text label.
@@ -82,8 +103,8 @@ <h3>Code</h3>
82103
</div>
83104
</div>
84105
</div>
85-
</accordion-group>
86-
<accordion-group heading="Smart Button Text">
106+
</uib-accordion-group>
107+
<uib-accordion-group heading="Smart Button Text">
87108
<div class="row">
88109
<div class="col-xs-12">
89110
You can use the feature in order to show which items are selected instead the items count.<br />
@@ -135,8 +156,8 @@ <h3>Code</h3>
135156
</div>
136157
</div>
137158
</div>
138-
</accordion-group>
139-
<accordion-group heading="Scrollable List">
159+
</uib-accordion-group>
160+
<uib-accordion-group heading="Scrollable List">
140161
<div class="row">
141162
<div class="col-xs-12">
142163
You can use the feature in order to make the list of items scrollable. Useful when you deal with a lot of items.
@@ -185,8 +206,8 @@ <h3>Code</h3>
185206
</div>
186207
</div>
187208
</div>
188-
</accordion-group>
189-
<accordion-group heading="Enabling Search">
209+
</uib-accordion-group>
210+
<uib-accordion-group heading="Enabling Search">
190211
<div class="row">
191212
<div class="col-xs-12 col-sm-6">
192213
<h3>Demo</h3>
@@ -212,8 +233,8 @@ <h3>Code</h3>
212233
</div>
213234
</div>
214235
</div>
215-
</accordion-group>
216-
<accordion-group heading="Selection Limit">
236+
</uib-accordion-group>
237+
<uib-accordion-group heading="Selection Limit">
217238
<div class="row">
218239
<div class="col-xs-12">
219240
By default, there is no limit on the maximum selected items.
@@ -257,8 +278,8 @@ <h3>Code</h3>
257278
</div>
258279
</div>
259280
</div>
260-
</accordion-group>
261-
<accordion-group heading="Single Selection Limit">
281+
</uib-accordion-group>
282+
<uib-accordion-group heading="Single Selection Limit">
262283
<div class="row">
263284
<div class="col-xs-12">
264285
Please read the notes in the "Selection Limit" example.
@@ -297,8 +318,8 @@ <h3>Code</h3>
297318
</div>
298319
</div>
299320
</div>
300-
</accordion-group>
301-
<accordion-group heading="Group Items By Property">
321+
</uib-accordion-group>
322+
<uib-accordion-group heading="Group Items By Property">
302323
<div class="row">
303324
<div class="col-xs-12">
304325
You can also group the items by propery that you want, in order to to that, provide the "group-by" attribute.
@@ -335,8 +356,8 @@ <h3>Code</h3>
335356
</div>
336357
</div>
337358
</div>
338-
</accordion-group>
339-
<accordion-group heading="Custom ID property">
359+
</uib-accordion-group>
360+
<uib-accordion-group heading="Custom ID property">
340361
<div class="row">
341362
<div class="col-xs-12">
342363
By default, the directive tries to find "id" property for each object to identify it as unique.
@@ -371,8 +392,8 @@ <h3>Code</h3>
371392
</div>
372393
</div>
373394
</div>
374-
</accordion-group>
375-
<accordion-group heading="Model Custom Property">
395+
</uib-accordion-group>
396+
<uib-accordion-group heading="Model Custom Property">
376397
<div class="row">
377398
<div class="col-xs-12">
378399
By default, the model of the selected items will contain the objects with "id" property with the value of the idProp settings.
@@ -404,8 +425,8 @@ <h3>Code</h3>
404425
</div>
405426
</div>
406427
</div>
407-
</accordion-group>
408-
<accordion-group heading="Custom Button Text">
428+
</uib-accordion-group>
429+
<uib-accordion-group heading="Custom Button Text">
409430
<div class="row">
410431
<div class="col-xs-12">
411432
You can select your own text of the button using the "defaultText" in settings.
@@ -436,8 +457,8 @@ <h3>Code</h3>
436457
</div>
437458
</div>
438459
</div>
439-
</accordion-group>
440-
<accordion-group heading="Pre-selected Values">
460+
</uib-accordion-group>
461+
<uib-accordion-group heading="Pre-selected Values">
441462
<div class="row">
442463
<div class="col-xs-12">
443464
This example shows a demostration of using a pre-setted model.
@@ -470,8 +491,8 @@ <h3>Code</h3>
470491
</div>
471492
</div>
472493
</div>
473-
</accordion-group>
474-
<accordion-group heading="Full Object as model">
494+
</uib-accordion-group>
495+
<uib-accordion-group heading="Full Object as model">
475496
<div class="row">
476497
<div class="col-xs-12">
477498
This example shows a demostration of using full object as a model.
@@ -505,8 +526,8 @@ <h3>Code</h3>
505526
</div>
506527
</div>
507528
</div>
508-
</accordion-group>
509-
<accordion-group heading="External Search Filter">
529+
</uib-accordion-group>
530+
<uib-accordion-group heading="External Search Filter">
510531
<div class="row">
511532
<div class="col-xs-12">
512533
This example shows a demostration of access and set the search filter from outside the directive.
@@ -553,8 +574,8 @@ <h3>Code</h3>
553574
</div>
554575
</div>
555576
</div>
556-
</accordion-group>
557-
<accordion-group heading="Checkboxes List">
577+
</uib-accordion-group>
578+
<uib-accordion-group heading="Checkboxes List">
558579
<div class="row">
559580
<div class="col-xs-12">
560581
You can also use a checkboxes list by adding "checkboxes" attribute to your element!
@@ -585,8 +606,8 @@ <h3>Code</h3>
585606
</div>
586607
</div>
587608
</div>
588-
</accordion-group>
589-
<accordion-group heading="Style active items">
609+
</uib-accordion-group>
610+
<uib-accordion-group heading="Style active items">
590611
<div class="row">
591612
<div class="col-xs-12 col-sm-6">
592613
<h3>Demo</h3>
@@ -614,8 +635,8 @@ <h3>Code</h3>
614635
</div>
615636
</div>
616637
</div>
617-
</accordion-group>
618-
<accordion-group heading="Keyboard controls">
638+
</uib-accordion-group>
639+
<uib-accordion-group heading="Keyboard controls">
619640
<div class="row">
620641
<div class="col-xs-12 col-sm-6">
621642
<h3>Demo</h3>
@@ -643,8 +664,8 @@ <h3>Code</h3>
643664
</div>
644665
</div>
645666
</div>
646-
</accordion-group>
647-
<accordion-group heading="Keyboard controls with single selection and search">
667+
</uib-accordion-group>
668+
<uib-accordion-group heading="Keyboard controls with single selection and search">
648669
<div class="row">
649670
<div class="col-xs-12 col-sm-6">
650671
<h3>Demo</h3>
@@ -684,8 +705,8 @@ <h3>Code</h3>
684705
</div>
685706
</div>
686707
</div>
687-
</accordion-group>
688-
</accordion>
708+
</uib-accordion-group>
709+
</uib-accordion>
689710
<h1>Full API Documentation</h1>
690711
<h2>Attributes</h2>
691712
<p>List of allowed attributes, you can find more information about them in the usage examples above.</p>
@@ -835,7 +856,7 @@ <h2>Settings</h2>
835856
<td>closeOnDeselect</td>
836857
<td>Boolean</td>
837858
<td>false</td>
838-
<td>Indicates if to close the dropdown after unchecking an item on the list.</td>
859+
<td>Indicates if to close the dropdown after unchecking an item on the list. With selectionLimit = 1 setting this to true does the same as setting closeOnSelect to true.</td>
839860
</tr>
840861
<tr>
841862
<td>buttonClasses</td>

‎src/angularjs-dropdown-multiselect.js‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
2222

2323
var template = '<div class="multiselect-parent btn-group dropdown-multiselect">';
2424
template += '<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}&nbsp;<span class="caret"></span></button>';
25-
template += '<ul class="dropdown-menu dropdown-menu-form" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: auto" >';
25+
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" >';
2626
template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span> {{texts.checkAll}}</a>';
2727
template += '<li ng-show="settings.showUncheckAll"><a data-ng-click="deselectAll();" tabindex="-1" id="deselectAll"><span class="glyphicon glyphicon-remove"></span> {{texts.uncheckAll}}</a></li>';
2828
template += '<li ng-hide="(!settings.showCheckAll || settings.selectionLimit > 0) && !settings.showUncheckAll" class="divider"></li>';
@@ -186,22 +186,24 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
186186

187187
if ($scope.settings.closeOnBlur) {
188188
$document.on('click', function (e) {
189-
var target = e.target.parentElement;
190-
var parentFound = false;
191-
192-
while (angular.isDefined(target) && target !== null && !parentFound) {
193-
if (contains(target.className.split(' '), 'multiselect-parent') && !parentFound) {
194-
if(target === $dropdownTrigger) {
195-
parentFound = true;
189+
if ($scope.open) {
190+
var target = e.target.parentElement;
191+
var parentFound = false;
192+
193+
while (angular.isDefined(target) && target !== null && !parentFound) {
194+
if (!!target.className.split && contains(target.className.split(' '), 'multiselect-parent') && !parentFound) {
195+
if(target === $dropdownTrigger) {
196+
parentFound = true;
197+
}
196198
}
199+
target = target.parentElement;
197200
}
198-
target = target.parentElement;
199-
}
200201

201-
if (!parentFound) {
202-
$scope.$apply(function () {
203-
$scope.open = false;
204-
});
202+
if (!parentFound) {
203+
$scope.$apply(function () {
204+
$scope.open = false;
205+
});
206+
}
205207
}
206208
});
207209
}
@@ -299,7 +301,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
299301
clearObject($scope.selectedModel);
300302
angular.extend($scope.selectedModel, finalObj);
301303
$scope.externalEvents.onItemSelect(finalObj);
302-
if ($scope.settings.closeOnSelect) $scope.open = false;
304+
if ($scope.settings.closeOnSelect || $scope.settings.closeOnDeselect) $scope.open = false;
303305

304306
return;
305307
}
@@ -311,11 +313,12 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
311313
if (!dontRemove && exists) {
312314
$scope.selectedModel.splice(findIndex($scope.selectedModel, findObj), 1);
313315
$scope.externalEvents.onItemDeselect(findObj);
316+
if ($scope.settings.closeOnDeselect) $scope.open = false;
314317
} else if (!exists && ($scope.settings.selectionLimit === 0 || $scope.selectedModel.length < $scope.settings.selectionLimit)) {
315318
$scope.selectedModel.push(finalObj);
316319
$scope.externalEvents.onItemSelect(finalObj);
320+
if ($scope.settings.closeOnSelect) $scope.open = false;
317321
}
318-
if ($scope.settings.closeOnSelect) $scope.open = false;
319322
};
320323

321324
$scope.isChecked = function (id) {

0 commit comments

Comments
 (0)