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

Enabling customizing texts for internationalization purposes #14

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

Enabling customizing texts for internationalization purposes #14

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
30 changes: 17 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,23 @@ There are currently two ways to use this component. First up is by using html5 `
select tag, but you can also provide a Javascript Object. The variable names are the same all around and can be even
mixed and matched within the select or Javascript. The current options are:

| Option | Type | Default | Description |
| ------------ | ------- | ---------- | ----------- |
| `json` | Boolean | true | Whether to download the data via a JSON request. |
| `uri` | URI | local.json | The relative or absolute URI where to receive the data from. |
| `value` | String | id | This determines what JSON field is handled as the value. |
| `text` | String | name | This determines what JSON field is handled as the text. |
| `title` | String | Example | The title of the control. |
| `horizontal` | Boolean | false | Whether the control is lay out horizontal or vertical. |
| `timeout` | UInt | 500 | Timeout when to start searching with the filter. |
| `textLength` | UInt | 45 | Maximum text length of when the element should contain title-attributes. |
| `moveAllBtn` | Boolean | true | Whether to display the move all button (from left to right or vice-versa). |
| `maxAllBtn` | UInt | 500 | Integer to determine from which length to display the warning message below. |
| `warning` | String | <...> | Warning message that is displayed when trying to move large amounts of elements. |
| Option | Type | Default | Description |
| ------------ | ------- | ---------- | ----------- |
| `json` | Boolean | true | Whether to download the data via a JSON request. |
| `uri` | URI | local.json | The relative or absolute URI where to receive the data from. |
| `value` | String | id | This determines what JSON field is handled as the value. |
| `text` | String | name | This determines what JSON field is handled as the text. |
| `title` | String | Example | The title of the control. |
| `horizontal` | Boolean | false | Whether the control is lay out horizontal or vertical. |
| `timeout` | UInt | 500 | Timeout when to start searching with the filter. |
| `textLength` | UInt | 45 | Maximum text length of when the element should contain title-attributes. |
| `moveAllBtn` | Boolean | true | Whether to display the move all button (from left to right or vice-versa). |
| `maxAllBtn` | UInt | 500 | Integer to determine from which length to display the warning message below. |
| `warning` | String | <...> | Warning message that is displayed when trying to move large amounts of elements. |
| `availableText` | String | Available | Text shown for available options |
| `selectedText` | String | Selected | Text shown for selected options |
| `showingText` | String | showing | Text shown for how many elements there are in the list |
| `filterText` | String | Filter | Filter text

## [Demo](http://geodan.github.io/duallistbox/index.html)

Expand Down
65 changes: 36 additions & 29 deletions dist/dual-list-box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,22 +34,30 @@
moveAllBtn: true, // Whether the append all button is available.
maxAllBtn: 500, // Maximum size of list in which the all button works without warning. See below.
selectClass:'form-control',
warning: 'Are you sure you want to move this many items? Doing so can cause your browser to become unresponsive.'
warning: 'Are you sure you want to move this many items? Doing so can cause your browser to become unresponsive.',
availableText: 'Available',
selectedText: 'Selected',
showingText: 'showing',
filterText: 'Filter'
};

var htmlOptions = {
element: $(this).context,
uri: $(this).data('source'),
value: $(this).data('value'),
text: $(this).data('text'),
title: $(this).data('title'),
json: $(this).data('json'),
timeout: $(this).data('timeout'),
horizontal: $(this).data('horizontal'),
textLength: $(this).data('textLength'),
moveAllBtn: $(this).data('moveAllBtn'),
maxAllBtn: $(this).data('maxAllBtn'),
selectClass:$(this).data('selectClass')
element: $(this).context,
uri: $(this).data('source'),
value: $(this).data('value'),
text: $(this).data('text'),
title: $(this).data('title'),
json: $(this).data('json'),
timeout: $(this).data('timeout'),
horizontal: $(this).data('horizontal'),
textLength: $(this).data('textLength'),
moveAllBtn: $(this).data('moveAllBtn'),
maxAllBtn: $(this).data('maxAllBtn'),
selectClass: $(this).data('selectClass'),
availableText:$(this).data('availableText'),
selectedText: $(this).data('selectedText'),
showingText: $(this).data('showingText'),
filterText: $(this).data('filterText')
};

var options = $.extend({}, defaults, htmlOptions, paramOptions);
Expand Down Expand Up @@ -185,25 +193,24 @@
/** Creates a new dual list box with the right buttons and filter. */
function createDualListBox(options) {
$(options.element).parent().attr('id', options.parent);

$(options.parentElement).addClass('row').append(
(options.horizontal == false ? ' <div class="col-md-5">' : ' <div class="col-md-6">') +
' <h4><span class="unselected-title"></span> <small>- showing <span class="unselected-count"></span></small></h4>' +
' <input class="filter form-control filter-unselected" type="text" placeholder="Filter" style="margin-bottom: 5px;">' +
(options.horizontal == false ? '' : createHorizontalButtons(1, options.moveAllBtn)) +
' <select class="unselected ' + options.selectClass + '" style="height: 200px; width: 100%;" multiple></select>' +
' </div>' +
(options.horizontal == false ? createVerticalButtons(options.moveAllBtn) : '') +
(options.horizontal == false ? ' <div class="col-md-5">' : ' <div class="col-md-6">') +
' <h4><span class="selected-title"></span> <small>- showing <span class="selected-count"></span></small></h4>' +
' <input class="filter form-control filter-selected" type="text" placeholder="Filter" style="margin-bottom: 5px;">' +
(options.horizontal == false ? '' : createHorizontalButtons(2, options.moveAllBtn)) +
' <select class="selected ' + options.selectClass + '" style="height: 200px; width: 100%;" multiple></select>' +
' </div>');
(options.horizontal == false ? ' <div class="col-md-5">' : ' <div class="col-md-6">') +
' <h4><span class="unselected-title"></span> <small>- ' + options.showingText + ' <span class="unselected-count"></span></small></h4>' +
' <input class="filter form-control filter-unselected" type="text" placeholder="' + options.filterText + '" style="margin-bottom: 5px;">' +
(options.horizontal == false ? '' : createHorizontalButtons(1, options.moveAllBtn)) +
' <select class="unselected ' + options.selectClass + '" style="height: 200px; width: 100%;" multiple></select>' +
' </div>' +
(options.horizontal == false ? createVerticalButtons(options.moveAllBtn) : '') +
(options.horizontal == false ? ' <div class="col-md-5">' : ' <div class="col-md-6">') +
' <h4><span class="selected-title"></span> <small>- ' + options.showingText + ' <span class="selected-count"></span></small></h4>' +
' <input class="filter form-control filter-selected" type="text" placeholder="' + options.filterText + '" style="margin-bottom: 5px;">' +
(options.horizontal == false ? '' : createHorizontalButtons(2, options.moveAllBtn)) +
' <select class="selected ' + options.selectClass + '" style="height: 200px; width: 100%;" multiple></select>' +
' </div>');

$(options.parentElement + ' .selected').prop('name', $(options.element).prop('name'));
$(options.parentElement + ' .unselected-title').text('Available ' + options.title);
$(options.parentElement + ' .selected-title').text('Selected ' + options.title);
$(options.parentElement + ' .unselected-title').text(options.availableText + ' ' + options.title);
$(options.parentElement + ' .selected-title').text(options.selectedText + ' ' + options.title);
}

/** Creates the buttons when the dual list box is set in horizontal mode. */
Expand Down