diff --git a/doc/views/configs-options.htm b/doc/views/configs-options.htm index 73b38a7..a9f1643 100644 --- a/doc/views/configs-options.htm +++ b/doc/views/configs-options.htm @@ -272,6 +272,27 @@
translation
New! v3.0.0 reset : "Undo all", search : "Type here to search...", nothingSelected : "Nothing is selected" //default-label is deprecated and replaced with this. +} +

+ +
custom-icon
New! v4.0.0 +

+ Customize the "icons" for various parts of the UI. Replace the default html entities with your choice + of other entities or characters, image tags, html tags with icon font functionality, or no icons at all + by explicitly setting them empty. If you use it, you need to define ALL four icons. +

+

+ Type: $scope object
+ Default value: N/A
+ Example: <div isteven-multi-select ... custom-icon="myIconData"></div>. +

+

+ In your controller: + 

$scope.myIconData = {
+    selectAll       : "", // Don't use an icon, just text
+    selectNone      : "<strong>X</strong>", // Default html entity is replaced with bold capital 'X'
+    reset           : "", // Don't use an icon, just text
+    tickMark        : "&#xE5CA"  // Default tick mark is replaced with slightly different one
 }

diff --git a/isteven-multi-select.js b/isteven-multi-select.js index b5d3465..554ebe3 100644 --- a/isteven-multi-select.js +++ b/isteven-multi-select.js @@ -57,7 +57,8 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' onSelectAll : '&', onSelectNone : '&', - // i18n + // i18n and visual customization + customIcon : '=', translation : '=' }, @@ -940,29 +941,54 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' $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 + + $scope.icon = {}; + + if ( typeof attrs.customIcon !== 'undefined' ) { + $scope.icon.selectAll = $scope.customIcon.selectAll; + $scope.icon.selectNone = $scope.customIcon.selectNone; + $scope.icon.reset = $scope.customIcon.reset; + $scope.icon.tickMark = $scope.customIcon.tickMark; + } + else { + $scope.icon.selectAll = '✓'; // a tick icon + $scope.icon.selectNone = '×'; // x icon + $scope.icon.reset = '↶'; // undo icon + $scope.icon.tickMark = '✓'; // a tick icon (used for selected items) + } + + function rightPadWithDoubleNbsp(text) { + if (!!text) { + // In future major versions (or whenever breaking changes are allowed) these + // hardcoded spaces might be replaced by a proper css approach for the spacing + // it's supposed to create. in this version the hard coded double nbsp is kept + // for backwards compatability. + // + // If text is *anything* at all (e.g. it's set to a default) the text gets + // padded: + return text + '  '; + } + + // Falsy values, most notably empty strings, should not get padded: + return ""; + } // 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.selectAll = $sce.trustAsHtml( rightPadWithDoubleNbsp($scope.icon.selectAll) + $scope.translation.selectAll ); + $scope.lang.selectNone = $sce.trustAsHtml( rightPadWithDoubleNbsp($scope.icon.selectNone) + $scope.translation.selectNone ); + $scope.lang.reset = $sce.trustAsHtml( rightPadWithDoubleNbsp($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.selectAll = $sce.trustAsHtml( rightPadWithDoubleNbsp($scope.icon.selectAll) + 'Select All' ); + $scope.lang.selectNone = $sce.trustAsHtml( rightPadWithDoubleNbsp($scope.icon.selectNone) + 'Select None' ); + $scope.lang.reset = $sce.trustAsHtml( rightPadWithDoubleNbsp($scope.icon.reset) + 'Reset' ); $scope.lang.search = 'Search...'; $scope.lang.nothingSelected = 'None Selected'; } + $scope.icon.tickMark = $sce.trustAsHtml( $scope.icon.tickMark ); // min length of keyword to trigger the filter function