' : '
') + $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 += '(Total: ' + $scope.selectedItems.length + ')';
}
}
$scope.varButtonLabel = $sce.trustAsHtml( $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[ $scope.disableProperty ] === true ) {
return true;
}
else {
if ( $scope.isDisabled === true ) {
return true;
}
else {
return false;
}
}
}
// A simple function to parse the item label settings
$scope.writeLabel = function( item, type ) {
var label = '';
var temp = $scope[ type ].split( ' ' );
angular.forEach( temp, function( value2, key2 ) {
if ( typeof value2 !== 'undefined' ) {
angular.forEach( item, function( value1, key1 ) {
if ( key1 == value2 ) {
label += ' ' + value1;
}
});
}
});
if ( type.toUpperCase() === 'BUTTONLABEL' ) {
return label;
}
return $sce.trustAsHtml( label );
}
// UI operations to show/hide checkboxes based on click event..
$scope.toggleCheckboxes = function( e ) {
// Just to make sure.. had a bug where key events were recorded twice
angular.element( document ).unbind( 'click', $scope.externalClickListener );
angular.element( window ).unbind( 'keydown', $scope.keyboardListener );
// clear filter
$scope.inputLabel.labelFilter = '';
$scope.updateFilter();
// close if ESC key is pressed.
if ( e.keyCode === 27 ) {
angular.element( $scope.checkBoxLayer ).removeClass( 'show' );
angular.element( clickedEl ).removeClass( 'buttonClicked' );
angular.element( document ).unbind( 'click', $scope.externalClickListener );
angular.element( window ).unbind( 'keydown', $scope.keyboardListener );
// clear the focused element;
$scope.removeFocusStyle( $scope.tabIndex );
// close callback
$scope.onClose( { data: element } );
return true;
}
// Our button accept HTML tags. Depending on browser, the click event might be intercepted by those tags instead of the button.
// Since we want the button to handle click event, we need traverse up to find the button element.
if ( e.target ) {
if ( e.target.tagName.toUpperCase() !== 'BUTTON' && e.target.className.indexOf( 'multiSelectButton' ) < 0 ) {
if ( attrs.selectionMode && $scope.selectionMode.toUpperCase() === 'SINGLE' ) {
e = $scope.findUpTag( e.target, 'div', 'checkboxLayer' );
e = e.previousSibling;
}
else {
e = $scope.findUpTag( e.target, 'button', 'multiSelectButton' );
}
}
else {
e = e.target;
}
}
clickedEl = e;
$scope.checkBoxLayer = clickedEl.nextSibling;
// 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( $scope.checkBoxLayer ).hasClass( 'show' )) {
angular.element( $scope.checkBoxLayer ).removeClass( 'show' );
angular.element( clickedEl ).removeClass( 'buttonClicked' );
angular.element( document ).unbind( 'click', $scope.externalClickListener );
angular.element( window ).unbind( 'keydown', $scope.keyboardListener );
// clear the focused element;
$scope.removeFocusStyle( $scope.tabIndex );
// close callback
$scope.onClose( { data: element } );
}
// open
else
{
helperItems = [];
helperItemsLength = 0;
angular.element( $scope.checkBoxLayer ).addClass( 'show' );
angular.element( clickedEl ).addClass( 'buttonClicked' );
angular.element( document ).bind( 'click', $scope.externalClickListener );
angular.element( window ).bind( 'keydown', $scope.keyboardListener );
// open callback
$scope.onOpen( { data: element } );
// 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 ( 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;
}
// if there's no filter then just focus on the first checkbox item
else {
$scope.formElements[ $scope.tabIndex ].focus();
}
}
}
// handle clicks outside the button / multi select layer
$scope.externalClickListener = function( e ) {
targetsArr = element.find( e.target.tagName );
for (var i = 0; i < targetsArr.length; i++) {
if ( e.target == targetsArr[i] ) {
return;
}
}
angular.element( $scope.checkBoxLayer.previousSibling ).removeClass( 'buttonClicked' );
angular.element( $scope.checkBoxLayer ).removeClass( 'show' );
angular.element( document ).unbind( 'click', $scope.externalClickListener );
angular.element( document ).unbind( 'keydown', $scope.keyboardListener );
// close callback
$scope.onClose( { data: element } );
}
// traverse up to find the button tag
// http://stackoverflow.com/questions/7332179/how-to-recursively-search-all-parentnodes
$scope.findUpTag = function ( el, tag, className ) {
while ( el.parentNode ) {
el = el.parentNode;
if ( typeof el.tagName !== 'undefined' ) {
if ( el.tagName.toUpperCase() === tag.toUpperCase() && el.className.indexOf( className ) > -1 ) {
return el;
}
}
}
return null;
}
// select All / select None / reset buttons
$scope.select = function( type, e ) {
helperIndex = helperItems.indexOf( e.target );
$scope.tabIndex = helperIndex;
switch( type.toUpperCase() ) {
case 'ALL':
angular.forEach( $scope.filteredModel, function( value, key ) {
if ( typeof value !== 'undefined' && value[ $scope.disableProperty ] !== true ) {
if ( typeof value[ $scope.groupProperty ] === 'undefined' ) {
value[ $scope.tickProperty ] = true;
}
}
});
break;
case 'NONE':
angular.forEach( $scope.filteredModel, function( value, key ) {
if ( typeof value !== 'undefined' && value[ $scope.disableProperty ] !== true ) {
if ( typeof value[ $scope.groupProperty ] === 'undefined' ) {
value[ $scope.tickProperty ] = false;
}
}
});
break;
case 'RESET':
angular.forEach( $scope.filteredModel, function( value, key ) {
if ( typeof value[ $scope.groupProperty ] === 'undefined' && typeof value !== 'undefined' && value[ $scope.disableProperty ] !== true ) {
temp = value[ $scope.indexProperty ];
value[ $scope.tickProperty ] = $scope.backUp[ temp ][ $scope.tickProperty ];
}
});
break;
case 'CLEAR':
$scope.tabIndex = $scope.tabIndex + 1;
break;
case 'FILTER':
$scope.tabIndex = helperItems.length - 1;
break;
default:
}
}
// just to create a random variable name
genRandomString = function( 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, key ) {
value[ $scope.spacingProperty ] = spacing;
if ( value[ $scope.groupProperty ] === true ) {
spacing+=2;
}
else if ( value[ $scope.groupProperty ] === false ) {
spacing-=2;
}
});
}
// prepare original index
$scope.prepareIndex = function() {
ctr = 0;
angular.forEach( $scope.filteredModel, function( value, key ) {
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 ) {
$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 > $scope.formElements.length - 1 ) {
$scope.tabIndex = 0;
prevTabIndex = $scope.formElements.length - 1;
}
while ( $scope.formElements[ $scope.tabIndex ].disabled === true ) {
$scope.tabIndex++;
if ( $scope.tabIndex > $scope.formElements.length - 1 ) {
$scope.tabIndex = 0;
}
}
}
// 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 = $scope.formElements.length - 1;
prevTabIndex = 0;
}
while ( $scope.formElements[ $scope.tabIndex ].disabled === true ) {
$scope.tabIndex--;
if ( $scope.tabIndex < 0 ) {
$scope.tabIndex = $scope.formElements.length - 1;
}
}
}
if ( isNavigationKey === true ) {
e.preventDefault();
e.stopPropagation();
// set focus on the checkbox
$scope.formElements[ $scope.tabIndex ].focus();
// css styling
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( $scope.formElements.length - 1 );
}
}
isNavigationKey = false;
}
// set (add) CSS style on selected row
$scope.setFocusStyle = function( tabIndex ) {
angular.element( $scope.formElements[ tabIndex ] ).parent().parent().parent().addClass( 'multiSelectFocus' );
}
// remove CSS style on selected row
$scope.removeFocusStyle = function( tabIndex ) {
angular.element( $scope.formElements[ tabIndex ] ).parent().parent().parent().removeClass( 'multiSelectFocus' );
}
///////////////////////////////////////////////////////
//
// Logic starts here, initiated by watch 1 & watch 2.
//
///////////////////////////////////////////////////////
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;
}
}
// 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.refreshSelectedItems();
$scope.refreshOutputModel();
$scope.refreshButton();
if ( $scope.clickedItem !== null ) {
$scope.onItemClick( { data: $scope.clickedItem } );
$scope.clickedItem = null;
}
}
}, 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.refreshSelectedItems();
$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.
angular.element( document ).bind( 'touchstart', function( e ) {
$scope.$apply( function() {
$scope.scrolled = false;
});
});
// also for touch enabled devices
angular.element( document ).bind( 'touchmove', function( e ) {
$scope.$apply( function() {
$scope.scrolled = true;
});
});
// for IE8, perhaps. Not sure if this is really executed.
if ( !Array.prototype.indexOf ) {
Array.prototype.indexOf = function(what, i) {
i = i || 0;
var L = this.length;
while (i < L) {
if(this[i] === what) return i;
++i;
}
return -1;
};
}
}
}
}]);