From b54df0ddd0c6a0372327c5aa3668e5a6458fcd64 Mon Sep 17 00:00:00 2001 From: st782s Date: Thu, 4 May 2017 07:48:42 -0400 Subject: [PORTAL-7] Rebase This rebasing includes common libraries and common overlays projects abstraction of components Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8 Signed-off-by: st782s --- .../multiple-select/multiple-select.directive.js | 113 +++++++++++++++++++++ .../multiple-select/multiple-select.less | 62 +++++++++++ .../multiple-select/multiple-select.tpl.html | 36 +++++++ .../multiple-select/multiple-select2.directive.js | 113 +++++++++++++++++++++ .../multiple-select/multiple-select2.tpl.html | 36 +++++++ .../multiple-select/mutliple-select2.less | 62 +++++++++++ 6 files changed, 422 insertions(+) create mode 100644 ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js create mode 100644 ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.less create mode 100644 ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html create mode 100644 ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js create mode 100644 ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html create mode 100644 ecomp-portal-FE-common/client/app/directives/multiple-select/mutliple-select2.less (limited to 'ecomp-portal-FE-common/client/app/directives/multiple-select') 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 new file mode 100644 index 00000000..fb56d438 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js @@ -0,0 +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; + }; + } + }; + }); diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.less b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.less new file mode 100644 index 00000000..7035a329 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.less @@ -0,0 +1,62 @@ +.multiple-select{ + position: relative; + width: 100%; + + .selectBox{ + cursor: pointer; + position: relative; + border: 1px solid @portalDGray; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 30px; + height: 30px; + padding-left: 10px; + padding-right: 10px; + + &.open::after{ + content: ''; + .arrow_up; + display: block; + position: absolute; + top: 12px; + right: 4px; + } + &.closed::after{ + content: ''; + .arrow_down; + display: block; + position: absolute; + top: 12px; + right: 4px; + } + &.disabled{ + cursor: default; + background: @portalLGray; + } + + } + + .checkboxes{ + z-index: 99999; + padding-left: 8px; + padding-right: 8px; + position: absolute; + top: 30px; + width: 100%; + background: @portalWhite; + + display: block; + border: 1px @portalLGray solid; + + label{ + cursor: pointer; + display: block; + } + input{ + cursor: pointer; + } + + + } +} \ No newline at end of file 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 new file mode 100644 index 00000000..3896bf2d --- /dev/null +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html @@ -0,0 +1,36 @@ + +
+
+ +
+
+ +
+
+
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 new file mode 100644 index 00000000..e0471631 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js @@ -0,0 +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; + }; + } + }; + }); 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 new file mode 100644 index 00000000..34a6cea0 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html @@ -0,0 +1,36 @@ + +
+
+ +
+
+ +
+
+
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/mutliple-select2.less b/ecomp-portal-FE-common/client/app/directives/multiple-select/mutliple-select2.less new file mode 100644 index 00000000..b31d00e3 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/mutliple-select2.less @@ -0,0 +1,62 @@ +.multiple-select2{ + position: relative; + width: 100%; + + .selectBox{ + cursor: pointer; + position: relative; + border: 1px solid @portalDGray; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 30px; + height: 30px; + padding-left: 10px; + padding-right: 10px; + + &.open::after{ + content: ''; + .arrow_up; + display: block; + position: absolute; + top: 12px; + right: 4px; + } + &.closed::after{ + content: ''; + .arrow_down; + display: block; + position: absolute; + top: 12px; + right: 4px; + } + &.disabled{ + cursor: default; + background: @portalLGray; + } + + } + + .checkboxes{ + z-index: 99999; + padding-left: 8px; + padding-right: 8px; + position: absolute; + top: 30px; + width: 100%; + background: @portalWhite; + + display: block; + border: 1px @portalLGray solid; + + label{ + cursor: pointer; + display: block; + } + input{ + cursor: pointer; + } + + + } +} \ No newline at end of file -- cgit 1.2.3-korg