Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allows customization of icons #442

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Allows customization of icons #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions doc/views/configs-options.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,27 @@ <h5>translation</h5> <span class="label label-warning">New! v3.0.0</span>
reset : "Undo all",
search : "Type here to search...",
nothingSelected : "Nothing is selected" //default-label is deprecated and replaced with this.
}</code></pre>
</p>

<h5>custom-icon</h5> <span class="label label-warning">New! v4.0.0</span>
<p>
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.
</p>
<p>
<span class="inlineTitle">Type</span>: $scope object<br />
<span class="inlineTitle">Default value</span>: N/A<br />
<span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... custom-icon="myIconData"&gt;&lt;/div&gt;</code>.
</p>
<p>
In your controller:
<pre ><code>$scope.myIconData = {
selectAll : "", // Don't use an icon, just text
selectNone : "&lt;strong&gt;X&lt;/strong&gt;", // Default html entity is replaced with bold capital 'X'
reset : "", // Don't use an icon, just text
tickMark : "&amp;#xE5CA" // Default tick mark is replaced with slightly different one
}</code></pre>
</p>

Expand Down
54 changes: 40 additions & 14 deletions isteven-multi-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'
onSelectAll : '&',
onSelectNone : '&',

// i18n
// i18n and visual customization
customIcon : '=',
translation : '='
},

Expand Down Expand Up @@ -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 = '&#10003;'; // a tick icon
$scope.icon.selectNone = '&times;'; // x icon
$scope.icon.reset = '&#8630;'; // undo icon
// this one is for the selected items
$scope.icon.tickMark = '&#10003;'; // 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 = '&#10003;'; // a tick icon
$scope.icon.selectNone = '&times;'; // x icon
$scope.icon.reset = '&#8630;'; // undo icon
$scope.icon.tickMark = '&#10003;'; // 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 + '&nbsp;&nbsp;';
}

// 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 + '&nbsp;&nbsp;' + $scope.translation.selectAll );
$scope.lang.selectNone = $sce.trustAsHtml( $scope.icon.selectNone + '&nbsp;&nbsp;' + $scope.translation.selectNone );
$scope.lang.reset = $sce.trustAsHtml( $scope.icon.reset + '&nbsp;&nbsp;' + $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 + '&nbsp;&nbsp;Select All' );
$scope.lang.selectNone = $sce.trustAsHtml( $scope.icon.selectNone + '&nbsp;&nbsp;Select None' );
$scope.lang.reset = $sce.trustAsHtml( $scope.icon.reset + '&nbsp;&nbsp;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
Expand Down