1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
/*-
* ================================================================================
* ECOMP Portal
* ================================================================================
* Copyright (C) 2017 AT&T Intellectual Property
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ================================================================================
*/
/**
* Created by nnaffar on 12/21/15.+
*/
angular.module('ecompApp')
.directive('multipleSelect', function ($window) {
return {
restrict: 'E',
templateUrl: 'app/directives/multiple-select/multiple-select.tpl.html',
scope: {
onChange: '&',
nameAttr: '@',
valueAttr: '@',
ngModel: '=',
placeholder: '@',
uniqueData: '@?',
onDropdownClose: '&?'
},
link: function(scope, elm, attrs){
scope.isExpanded = false;
scope.isDisabled = !scope.ngModel || !scope.ngModel.length;
scope.$watch('ngModel', function(newVal){
scope.isDisabled = !newVal || !newVal.length;
});
let startListening = () => {
console.log('listening on $window!');
angular.element($window).on('click', function () {
stopListening();
});
angular.element('multiple-select').on('click', function(e) {
if($(e.target).closest('multiple-select')[0].attributes['unique-data'].value === attrs.uniqueData){
console.log('ignored that..:', attrs.uniqueData);
e.stopPropagation();
}else{
console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);
scope.isExpanded = false;
scope.$applyAsync();
}
});
};
let stopListening = function() {
if(scope.onDropdownClose){
scope.onDropdownClose();
}
scope.isExpanded = false;
scope.$applyAsync();
console.log('stop listening on $window and multiple-element!');
angular.element($window).off('click');
angular.element('multiple-select').off('click');
};
scope.showCheckboxes = function(){
scope.isExpanded = !scope.isExpanded;
if(scope.isExpanded){
startListening();
}else{
stopListening();
if(scope.onDropdownClose){
scope.onDropdownClose();
}
}
};
scope.onCheckboxClicked = function() {
console.log('checkbox clicked; unique data: ',attrs.uniqueData);
if(scope.onChange) {
scope.onChange();
}
}
scope.getTitle = function(){
var disp = '';
if(!scope.ngModel || !scope.ngModel.length) {
return disp;
}
scope.ngModel.forEach(function(item){
if(item[scope.valueAttr]){
disp+=item[scope.nameAttr] + ',';
}
});
if(disp!==''){
disp = disp.slice(0,disp.length-1);
}else{
disp = scope.placeholder;
}
return disp;
};
}
};
});
|
