diff options
Diffstat (limited to 'ecomp-portal-FE-common/client/app/directives/multiple-select')
4 files changed, 298 insertions, 298 deletions
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; + }; + } + }; + }); diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html index 3896bf2d..73136fe1 100644 --- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html @@ -1,36 +1,36 @@ -<!--
- ================================================================================
- 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.
- ================================================================================
- -->
-<div id="app-multilple-select" class="multiple-select">
- <div class="selectBox"
- id="app-select-{{getTitle()}}"
- ng-click="isDisabled || showCheckboxes()"
- title="{{getTitle()}}"
- ng-bind="getTitle()"
- ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div>
-
- <div class="checkboxes" ng-show="isExpanded">
- <div ng-repeat="item in ngModel" id="{{item[nameAttr]}}-checkbox-div">
- <label id="{{item[nameAttr]}}-checkbox-label">
- <input type="checkbox" id="{{item[nameAttr]}}-checkbox" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">
- {{item[nameAttr]}}
- </label>
- </div>
- </div>
-</div>
+<!-- + ================================================================================ + 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. + ================================================================================ + --> +<div id="app-multilple-select" class="multiple-select"> + <div class="selectBox" + id="app-select-{{getTitle()}}" + ng-click="isDisabled || showCheckboxes()" + title="{{getTitle()}}" + ng-bind="getTitle()" + ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div> + + <div class="checkboxes" ng-show="isExpanded"> + <div ng-repeat="item in ngModel" id="{{item[nameAttr].split(' ').join('-')}}-checkbox-div"> + <label id="{{item[nameAttr].split(' ').join('-')}}-checkbox-label"> + <input type="checkbox" id="{{item[nameAttr].split(' ').join('-')}}-checkbox" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()"> + {{item[nameAttr]}} + </label> + </div> + </div> +</div> diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js index e0471631..f49848ce 100644 --- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.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('multipleSelect2', function ($window) {
- return {
- restrict: 'E',
- templateUrl: 'app/directives/multiple-select/multiple-select2.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-select2').on('click', function(e) {
- if($(e.target).closest('multiple-select2')[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-select2').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('multipleSelect2', function ($window) { + return { + restrict: 'E', + templateUrl: 'app/directives/multiple-select/multiple-select2.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-select2').on('click', function(e) { + if($(e.target).closest('multiple-select2')[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-select2').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; + }; + } + }; + }); diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html index 34a6cea0..80c03cd3 100644 --- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html @@ -1,36 +1,36 @@ -<!--
- ================================================================================
- 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.
- ================================================================================
- -->
-<div id="app-multilple-select" class="multiple-select2">
- <div class="selectBox"
- id="app-select-{{getTitle()}}"
- ng-click="isDisabled || showCheckboxes()"
- title="{{getTitle()}}"
- ng-bind="getTitle()"
- ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div>
-
- <div class="checkboxes" ng-show="isExpanded" >
- <div ng-repeat="item in ngModel" id="{{item[nameAttr]}}-checkbox-div">
- <label id="{{item[nameAttr]}}-checkbox-label">
- <input type="checkbox" id="{{item[nameAttr]}}-checkbox" disabled="disabled" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">
- {{item[nameAttr]}}
- </label>
- </div>
- </div>
-</div>
+<!-- + ================================================================================ + 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. + ================================================================================ + --> +<div id="app-multilple-select" class="multiple-select2"> + <div class="selectBox" + id="app-select-{{getTitle()}}" + ng-click="isDisabled || showCheckboxes()" + title="{{getTitle()}}" + ng-bind="getTitle()" + ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div> + + <div class="checkboxes" ng-show="isExpanded" > + <div ng-repeat="item in ngModel" id="{{item[nameAttr].split(' ').join('-')}}-checkbox-div"> + <label id="{{item[nameAttr].split(' ').join('-')}}-checkbox-label"> + <input type="checkbox" id="{{item[nameAttr].split(' ').join('-')}}-checkbox" disabled="disabled" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()"> + {{item[nameAttr]}} + </label> + </div> + </div> +</div> |