') + $scope.writeLabel( value, 'buttonLabel' );
- }
- ctr++;
- }
- });
-
- if ( $scope.more === true ) {
- // https://github.com/isteven/angular-multi-select/pull/16
- if (tempMaxLabels > 0) {
- $scope.varButtonLabel += ', ... ';
- }
- $scope.varButtonLabel += '(' + $scope.outputModel.length + ')';
- }
- }
- // $scope.varButtonLabel = $sce.trustAsHtml( $scope.varButtonLabel + '
' );
- $scope.varButtonLabel = $sanitize($scope.varButtonLabel + '
');
- }
-
- // Check if a checkbox is disabled or enabled. It will check the granular control (disableProperty) and global control (isDisabled)
- // Take note that the granular control has higher priority.
- $scope.itemIsDisabled = function( item ) {
-
- if ( typeof attrs.disableProperty !== 'undefined' && item[ attrs.disableProperty ] === true ) {
- return true;
- }
- else {
- if ( $scope.isDisabled === true ) {
- return true;
- }
- else {
- return false;
- }
- }
-
- }
-
- // A simple function to parse the item label settings. Used on the buttons and checkbox labels.
- $scope.writeLabel = function( item, type ) {
- // type is either 'itemLabel' or 'buttonLabel'
- var temp = attrs[ type ].split( ' ' );
- var label = '';
-
- angular.forEach( temp, function( value ) {
- item[ value ] && ( label += ' ' + value.split( '.' ).reduce( function( prev, current ) {
- return prev[ current ];
- }, item ));
- });
-
- if ( type.toUpperCase() === 'BUTTONLABEL' ) {
- return label;
- }
- // return $sce.trustAsHtml( label );
- return $sanitize(label);
- }
-
- // UI operations to show/hide checkboxes based on click event..
- $scope.toggleCheckboxes = function( ) {
-
- // We grab the button
- var clickedEl = element.children()[0];
-
- // Just to make sure.. had a bug where key events were recorded twice
- angular.element( document ).off( 'click', $scope.externalClickListener );
- angular.element( document ).off( 'keydown', $scope.keyboardListener );
-
- // The idea below was taken from another multi-select directive - https://github.com/amitava82/angular-multiselect
- // His version is awesome if you need a more simple multi-select approach.
-
- // close
- if ( angular.element( checkBoxLayer ).hasClass( 'show' )) {
-
- angular.element( checkBoxLayer ).removeClass( 'show' );
- angular.element( clickedEl ).removeClass( 'buttonClicked' );
- angular.element( document ).off( 'click', $scope.externalClickListener );
- angular.element( document ).off( 'keydown', $scope.keyboardListener );
-
- // clear the focused element;
- $scope.removeFocusStyle( $scope.tabIndex );
- if ( typeof formElements[ $scope.tabIndex ] !== 'undefined' ) {
- formElements[ $scope.tabIndex ].blur();
- }
-
- // close callback
- $timeout( function() {
- $scope.onClose();
- }, 0 );
-
- // set focus on button again
- element.children().children()[ 0 ].focus();
- }
- // open
- else
- {
- // clear filter
- $scope.inputLabel.labelFilter = '';
- $scope.updateFilter();
-
- helperItems = [];
- helperItemsLength = 0;
-
- angular.element( checkBoxLayer ).addClass( 'show' );
- angular.element( clickedEl ).addClass( 'buttonClicked' );
-
- // Attach change event listener on the input filter.
- // We need this because ng-change is apparently not an event listener.
- angular.element( document ).on( 'click', $scope.externalClickListener );
- angular.element( document ).on( 'keydown', $scope.keyboardListener );
-
- // to get the initial tab index, depending on how many helper elements we have.
- // priority is to always focus it on the input filter
- $scope.getFormElements();
- $scope.tabIndex = 0;
-
- var helperContainer = angular.element( element[ 0 ].querySelector( '.helperContainer' ) )[0];
-
- if ( typeof helperContainer !== 'undefined' ) {
- for ( var i = 0; i < helperContainer.getElementsByTagName( 'BUTTON' ).length ; i++ ) {
- helperItems[ i ] = helperContainer.getElementsByTagName( 'BUTTON' )[ i ];
- }
- helperItemsLength = helperItems.length + helperContainer.getElementsByTagName( 'INPUT' ).length;
- }
-
- // focus on the filter element on open.
- if ( element[ 0 ].querySelector( '.inputFilter' ) ) {
- element[ 0 ].querySelector( '.inputFilter' ).focus();
- $scope.tabIndex = $scope.tabIndex + helperItemsLength - 2;
- // blur button in vain
- angular.element( element ).children()[ 0 ].blur();
- }
- // if there's no filter then just focus on the first checkbox item
- else {
- if ( !$scope.isDisabled ) {
- $scope.tabIndex = $scope.tabIndex + helperItemsLength;
- if ( $scope.inputModel.length > 0 ) {
- formElements[ $scope.tabIndex ].focus();
- $scope.setFocusStyle( $scope.tabIndex );
- // blur button in vain
- angular.element( element ).children()[ 0 ].blur();
- }
- }
- }
-
- // open callback
- $scope.onOpen();
- }
- }
-
- // handle clicks outside the button / multi select layer
- $scope.externalClickListener = function( e ) {
-
- var targetsArr = element.find( e.target.tagName );
- for (var i = 0; i < targetsArr.length; i++) {
- if ( e.target == targetsArr[i] ) {
- return;
- }
- }
-
- angular.element( checkBoxLayer.previousSibling ).removeClass( 'buttonClicked' );
- angular.element( checkBoxLayer ).removeClass( 'show' );
- angular.element( document ).off( 'click', $scope.externalClickListener );
- angular.element( document ).off( 'keydown', $scope.keyboardListener );
-
- // close callback
- $timeout( function() {
- $scope.onClose();
- }, 0 );
-
- // set focus on button again
- element.children().children()[ 0 ].focus();
- }
-
- // select All / select None / reset buttons
- $scope.select = function( type, e ) {
-
- var helperIndex = helperItems.indexOf( e.target );
- $scope.tabIndex = helperIndex;
-
- switch( type.toUpperCase() ) {
- case 'ALL':
- angular.forEach( $scope.filteredModel, function( value ) {
- if ( typeof value !== 'undefined' && value[ attrs.disableProperty ] !== true ) {
- if ( typeof value[ attrs.groupProperty ] === 'undefined' ) {
- value[ $scope.tickProperty ] = true;
- }
- }
- });
- $scope.refreshOutputModel();
- $scope.refreshButton();
- $scope.onSelectAll();
- break;
- case 'NONE':
- angular.forEach( $scope.filteredModel, function( value ) {
- if ( typeof value !== 'undefined' && value[ attrs.disableProperty ] !== true ) {
- if ( typeof value[ attrs.groupProperty ] === 'undefined' ) {
- value[ $scope.tickProperty ] = false;
- }
- }
- });
- $scope.refreshOutputModel();
- $scope.refreshButton();
- $scope.onSelectNone();
- break;
- case 'RESET':
- angular.forEach( $scope.filteredModel, function( value ) {
- if ( typeof value[ attrs.groupProperty ] === 'undefined' && typeof value !== 'undefined' && value[ attrs.disableProperty ] !== true ) {
- var temp = value[ $scope.indexProperty ];
- value[ $scope.tickProperty ] = $scope.backUp[ temp ][ $scope.tickProperty ];
- }
- });
- $scope.refreshOutputModel();
- $scope.refreshButton();
- $scope.onReset();
- break;
- case 'CLEAR':
- $scope.tabIndex = $scope.tabIndex + 1;
- $scope.onClear();
- break;
- case 'FILTER':
- $scope.tabIndex = helperItems.length - 1;
- break;
- default:
- }
- }
-
- // just to create a random variable name
- function genRandomString( length ) {
- var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
- var temp = '';
- for( var i=0; i < length; i++ ) {
- temp += possible.charAt( Math.floor( Math.random() * possible.length ));
- }
- return temp;
- }
-
- // count leading spaces
- $scope.prepareGrouping = function() {
- var spacing = 0;
- angular.forEach( $scope.filteredModel, function( value ) {
- value[ $scope.spacingProperty ] = spacing;
- if ( value[ attrs.groupProperty ] === true ) {
- spacing+=2;
- }
- else if ( value[ attrs.groupProperty ] === false ) {
- spacing-=2;
- }
- });
- }
-
- // prepare original index
- $scope.prepareIndex = function() {
- var ctr = 0;
- angular.forEach( $scope.filteredModel, function( value ) {
- value[ $scope.indexProperty ] = ctr;
- ctr++;
- });
- }
-
- // navigate using up and down arrow
- $scope.keyboardListener = function( e ) {
-
- var key = e.keyCode ? e.keyCode : e.which;
- var isNavigationKey = false;
-
- // ESC key (close)
- if ( key === 27 ) {
- e.preventDefault();
- e.stopPropagation();
- $scope.toggleCheckboxes( e );
- }
-
-
- // next element ( tab, down & right key )
- else if ( key === 40 || key === 39 || ( !e.shiftKey && key == 9 ) ) {
-
- isNavigationKey = true;
- prevTabIndex = $scope.tabIndex;
- $scope.tabIndex++;
- if ( $scope.tabIndex > formElements.length - 1 ) {
- $scope.tabIndex = 0;
- prevTabIndex = formElements.length - 1;
- }
- while ( formElements[ $scope.tabIndex ].disabled === true ) {
- $scope.tabIndex++;
- if ( $scope.tabIndex > formElements.length - 1 ) {
- $scope.tabIndex = 0;
- }
- if ( $scope.tabIndex === prevTabIndex ) {
- break;
- }
- }
- }
-
- // prev element ( shift+tab, up & left key )
- else if ( key === 38 || key === 37 || ( e.shiftKey && key == 9 ) ) {
- isNavigationKey = true;
- prevTabIndex = $scope.tabIndex;
- $scope.tabIndex--;
- if ( $scope.tabIndex < 0 ) {
- $scope.tabIndex = formElements.length - 1;
- prevTabIndex = 0;
- }
- while ( formElements[ $scope.tabIndex ].disabled === true ) {
- $scope.tabIndex--;
- if ( $scope.tabIndex === prevTabIndex ) {
- break;
- }
- if ( $scope.tabIndex < 0 ) {
- $scope.tabIndex = formElements.length - 1;
- }
- }
- }
-
- if ( isNavigationKey === true ) {
-
- e.preventDefault();
-
- // set focus on the checkbox
- formElements[ $scope.tabIndex ].focus();
- var actEl = document.activeElement;
-
- if ( actEl.type.toUpperCase() === 'CHECKBOX' ) {
- $scope.setFocusStyle( $scope.tabIndex );
- $scope.removeFocusStyle( prevTabIndex );
- }
- else {
- $scope.removeFocusStyle( prevTabIndex );
- $scope.removeFocusStyle( helperItemsLength );
- $scope.removeFocusStyle( formElements.length - 1 );
- }
- }
-
- isNavigationKey = false;
- }
-
- // set (add) CSS style on selected row
- $scope.setFocusStyle = function( tabIndex ) {
- angular.element( formElements[ tabIndex ] ).parent().parent().parent().addClass( 'multiSelectFocus' );
- }
-
- // remove CSS style on selected row
- $scope.removeFocusStyle = function( tabIndex ) {
- angular.element( formElements[ tabIndex ] ).parent().parent().parent().removeClass( 'multiSelectFocus' );
- }
-
- /*********************
- *********************
- *
- * 1) Initializations
- *
- *********************
- *********************/
-
- // attrs to $scope - attrs-$scope - attrs - $scope
- // Copy some properties that will be used on the template. They need to be in the $scope.
- $scope.groupProperty = attrs.groupProperty;
- $scope.tickProperty = attrs.tickProperty;
- $scope.directiveId = attrs.directiveId;
-
- // Unfortunately I need to add these grouping properties into the input model
- var tempStr = genRandomString( 5 );
- $scope.indexProperty = 'idx_' + tempStr;
- $scope.spacingProperty = 'spc_' + tempStr;
-
- // set orientation css
- if ( typeof attrs.orientation !== 'undefined' ) {
-
- if ( attrs.orientation.toUpperCase() === 'HORIZONTAL' ) {
- $scope.orientationH = true;
- $scope.orientationV = false;
- }
- else
- {
- $scope.orientationH = false;
- $scope.orientationV = true;
- }
- }
-
- // get elements required for DOM operation
- checkBoxLayer = element.children().children().next()[0];
-
- // set max-height property if provided
- if ( typeof attrs.maxHeight !== 'undefined' ) {
- var layer = element.children().children().children()[0];
- angular.element( layer ).attr( "style", "height:" + attrs.maxHeight + "; overflow-y:scroll;" );
- }
-
- // some flags for easier checking
- for ( var property in $scope.helperStatus ) {
- if ( $scope.helperStatus.hasOwnProperty( property )) {
- if (
- typeof attrs.helperElements !== 'undefined'
- && attrs.helperElements.toUpperCase().indexOf( property.toUpperCase() ) === -1
- ) {
- $scope.helperStatus[ property ] = false;
- }
- }
- }
- if ( typeof attrs.selectionMode !== 'undefined' && attrs.selectionMode.toUpperCase() === 'SINGLE' ) {
- $scope.helperStatus[ 'all' ] = false;
- $scope.helperStatus[ 'none' ] = false;
- }
-
- // helper button icons.. I guess you can use html tag here if you want to.
- $scope.icon = {};
- $scope.icon.selectAll = '✓'; // a tick icon
- $scope.icon.selectNone = '×'; // x icon
- $scope.icon.reset = '↶'; // undo icon
- // this one is for the selected items
- $scope.icon.tickMark = '✓'; // a tick icon
-
- // configurable button labels
- // if ( typeof attrs.translation !== 'undefined' ) {
- // $scope.lang.selectAll = $sce.trustAsHtml( $scope.icon.selectAll + ' ' + $scope.translation.selectAll );
- // $scope.lang.selectNone = $sce.trustAsHtml( $scope.icon.selectNone + ' ' + $scope.translation.selectNone );
- // $scope.lang.reset = $sce.trustAsHtml( $scope.icon.reset + ' ' + $scope.translation.reset );
- // $scope.lang.search = $scope.translation.search;
- // $scope.lang.nothingSelected = $sce.trustAsHtml( $scope.translation.nothingSelected );
- // }
- // else {
- // $scope.lang.selectAll = $sce.trustAsHtml( $scope.icon.selectAll + ' Select All' );
- // $scope.lang.selectNone = $sce.trustAsHtml( $scope.icon.selectNone + ' Select None' );
- // $scope.lang.reset = $sce.trustAsHtml( $scope.icon.reset + ' Reset' );
- // $scope.lang.search = 'Search...';
- // $scope.lang.nothingSelected = 'None Selected';
- // }
- // $scope.icon.tickMark = $sce.trustAsHtml( $scope.icon.tickMark );
- if ( typeof attrs.translation !== 'undefined' ) {
- $scope.lang.selectAll = $sanitize( $scope.icon.selectAll + ' ' + $scope.translation.selectAll );
- $scope.lang.selectNone = $sanitize( $scope.icon.selectNone + ' ' + $scope.translation.selectNone );
- $scope.lang.reset = $sanitize( $scope.icon.reset + ' ' + $scope.translation.reset );
- $scope.lang.search = $scope.translation.search;
- $scope.lang.nothingSelected = $sanitize( $scope.translation.nothingSelected );
- }
- else {
- $scope.lang.selectAll = $sanitize( $scope.icon.selectAll + ' Select All' );
- $scope.lang.selectNone = $sanitize( $scope.icon.selectNone + ' Select None' );
- $scope.lang.reset = $sanitize( $scope.icon.reset + ' Reset' );
- $scope.lang.search = 'Search...';
- $scope.lang.nothingSelected = 'None Selected';
- }
- $scope.icon.tickMark = $sanitize( $scope.icon.tickMark );
-
- // min length of keyword to trigger the filter function
- if ( typeof attrs.MinSearchLength !== 'undefined' && parseInt( attrs.MinSearchLength ) > 0 ) {
- vMinSearchLength = Math.floor( parseInt( attrs.MinSearchLength ) );
- }
-
- /*******************************************************
- *******************************************************
- *
- * 2) Logic starts here, initiated by watch 1 & watch 2
- *
- *******************************************************
- *******************************************************/
-
- // watch1, for changes in input model property
- // updates multi-select when user select/deselect a single checkbox programatically
- // https://github.com/isteven/angular-multi-select/issues/8
- $scope.$watch( 'inputModel' , function( newVal ) {
- if ( newVal ) {
- $scope.refreshOutputModel();
- $scope.refreshButton();
- }
- }, true );
-
- // watch2 for changes in input model as a whole
- // this on updates the multi-select when a user load a whole new input-model. We also update the $scope.backUp variable
- $scope.$watch( 'inputModel' , function( newVal ) {
- if ( newVal ) {
- $scope.backUp = angular.copy( $scope.inputModel );
- $scope.updateFilter();
- $scope.prepareGrouping();
- $scope.prepareIndex();
- $scope.refreshOutputModel();
- $scope.refreshButton();
- }
- });
-
- // watch for changes in directive state (disabled or enabled)
- $scope.$watch( 'isDisabled' , function( newVal ) {
- $scope.isDisabled = newVal;
- });
-
- // this is for touch enabled devices. We don't want to hide checkboxes on scroll.
- var onTouchStart = function() {
- $scope.$apply( function() {
- $scope.scrolled = false;
- });
- };
- angular.element( document ).bind( 'touchstart', onTouchStart);
- var onTouchMove = function() {
- $scope.$apply( function() {
- $scope.scrolled = true;
- });
- };
- angular.element( document ).bind( 'touchmove', onTouchMove);
-
- // unbind document events to prevent memory leaks
- $scope.$on( '$destroy', function () {
- angular.element( document ).unbind( 'touchstart', onTouchStart);
- angular.element( document ).unbind( 'touchmove', onTouchMove);
- });
- }
- }
-}]).run( [ '$templateCache' , function( $templateCache ) {
- var template =
- '
' +
- // main button
- '' +
- // overlay layer
- '' +
- // container of the helper elements
- '
' +
- // container of the first 3 buttons, select all, none and reset
- '
' +
- // select all
- ''+
- // select none
- ''+
- // reset
- '' +
- '
' +
- // the search box
- '
'+
- // textfield
- ''+
- // clear button
- ' '+
- '
'+
- '
'+
- // selection items
- '
'+
- '
'+
- // this is the spacing for grouped items
- '
'+
- '
'+
- '
'+
- ''+
- '
'+
- // the tick/check mark
- '
'+
- '
'+
- '
'+
- '
';
- $templateCache.put( 'isteven-multi-select.htm' , template );
-}]);
diff --git a/app/libraries/isteven-angular-multiselect/package.json b/app/libraries/isteven-angular-multiselect/package.json
deleted file mode 100644
index 9aa2e3960..000000000
--- a/app/libraries/isteven-angular-multiselect/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
- "name": "isteven-angular-multiselect",
- "version": "v4.0.0",
- "description": "A multi select dropdown directive for AngularJS",
- "main": [
- "isteven-multi-select.js",
- "isteven-multi-select.css"
- ],
- "repository": {
- "type": "git",
- "url": "https://github.com/isteven/angular-multi-select.git"
- },
- "keywords": [
- "angular"
- ],
- "author": "Ignatius Steven
(https://github.com/isteven)",
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/isteven/angular-multi-select/issues"
- },
- "homepage": "https://github.com/isteven/angular-multi-select"
-}
diff --git a/app/vendors.js b/app/vendors.js
index bf1f680dc..51ec8c035 100644
--- a/app/vendors.js
+++ b/app/vendors.js
@@ -12,6 +12,7 @@ import 'angular-json-tree/dist/angular-json-tree.css';
import 'angular-loading-bar/build/loading-bar.css';
import 'rdash-ui/dist/css/rdash.css';
import 'angular-moment-picker/dist/angular-moment-picker.min.css';
+import 'angular-multiselect/isteven-multi-select.css';
import angular from 'angular';
window.angular = angular;
@@ -37,3 +38,4 @@ import 'bootstrap/dist/js/bootstrap.js';
import 'js-yaml/dist/js-yaml.js'
import 'angular-ui-bootstrap';
import 'angular-moment-picker';
+import 'angular-multiselect/isteven-multi-select.js';
diff --git a/package.json b/package.json
index e1cf4fdde..a1713a5f1 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
"angular-messages": "~1.5.0",
"angular-mocks": "~1.5.0",
"angular-moment-picker": "^0.10.2",
+ "angular-multiselect": "github:portainer/angular-multi-select#semver:~v4.0.1",
"angular-resource": "~1.5.0",
"angular-sanitize": "~1.5.0",
"angular-ui-bootstrap": "~2.5.0",
diff --git a/yarn.lock b/yarn.lock
index 55fb60149..d5911ee68 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -953,6 +953,11 @@ angular-messages@~1.5.0:
resolved "https://registry.yarnpkg.com/angular-messages/-/angular-messages-1.5.11.tgz#ea99f0163594fcb0a2db701b3038339250decc90"
integrity sha1-6pnwFjWU/LCi23AbMDgzklDezJA=
+angular-mocks@1.6.1:
+ version "1.6.1"
+ resolved "https://registry.yarnpkg.com/angular-mocks/-/angular-mocks-1.6.1.tgz#2f44a1b3ac608e93751305bce176c274221d8abd"
+ integrity sha1-L0Shs6xgjpN1EwW84XbCdCIdir0=
+
angular-mocks@~1.5.0:
version "1.5.11"
resolved "https://registry.yarnpkg.com/angular-mocks/-/angular-mocks-1.5.11.tgz#a0e1dd0ea55fd77ee7a757d75536c5e964c86f81"
@@ -965,11 +970,23 @@ angular-moment-picker@^0.10.2:
angular "^1.3"
moment "^2.16.0"
+"angular-multiselect@github:portainer/angular-multi-select#semver:~v4.0.1":
+ version "4.0.0"
+ resolved "https://codeload.github.com/portainer/angular-multi-select/tar.gz/933b066e0aa9e8879967a35a9c5bf7e89c72f86d"
+ dependencies:
+ angular-mocks "1.6.1"
+ angular-sanitize "1.6.1"
+
angular-resource@~1.5.0:
version "1.5.11"
resolved "https://registry.yarnpkg.com/angular-resource/-/angular-resource-1.5.11.tgz#d93ea619184a2e0ee3ae338265758363172929f0"
integrity sha1-2T6mGRhKLg7jrjOCZXWDYxcpKfA=
+angular-sanitize@1.6.1:
+ version "1.6.1"
+ resolved "https://registry.yarnpkg.com/angular-sanitize/-/angular-sanitize-1.6.1.tgz#cacffec3199ed66297afbb1ef366ec66616b3b3f"
+ integrity sha1-ys/+wxme1mKXr7se82bsZmFrOz8=
+
angular-sanitize@~1.5.0:
version "1.5.11"
resolved "https://registry.yarnpkg.com/angular-sanitize/-/angular-sanitize-1.5.11.tgz#ebfb3f343e543f9b2ef050fb4c2e9ee048d1772f"