X-Git-Url: https://gerrit.onap.org/r/gitweb?p=portal.git;a=blobdiff_plain;f=ecomp-portal-FE-common%2Fclient%2Fapp%2Fdirectives%2Fmultiple-select%2Fmultiple-select.directive.js;h=f73793bef9f1bdf8e13c127744c198fa6492f80c;hp=fb56d438790a4d6d0d9901f135e20874ea25bc71;hb=627badaf69987c01811c477219fd943757a635f5;hpb=ba838f2e13f1e8050c75e68bd3733d56d8f416d5 diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js index fb56d438..f73793be 100644 --- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js @@ -1,113 +1,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; - }; - } - }; - }); +/*- + * ================================================================================ + * 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; + }; + } + }; + });