From 6a52d49d717b872dcafd8e676b48d984aa46f27f Mon Sep 17 00:00:00 2001 From: Patrick Fust Date: Fri, 26 Feb 2016 11:30:12 +0100 Subject: [PATCH] Enabling customizing texts for internationalization purposes --- README.md | 30 +++++++++++--------- dist/dual-list-box.js | 65 ++++++++++++++++++++++++------------------- 2 files changed, 53 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 251877c..fa13f9d 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/dist/dual-list-box.js b/dist/dual-list-box.js index 5fdf03f..f5ef57a 100644 --- a/dist/dual-list-box.js +++ b/dist/dual-list-box.js @@ -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); @@ -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 ? '
' : '
') + - '

- showing

' + - ' ' + - (options.horizontal == false ? '' : createHorizontalButtons(1, options.moveAllBtn)) + - ' ' + - '
' + - (options.horizontal == false ? createVerticalButtons(options.moveAllBtn) : '') + - (options.horizontal == false ? '
' : '
') + - '

- showing

' + - ' ' + - (options.horizontal == false ? '' : createHorizontalButtons(2, options.moveAllBtn)) + - ' ' + - '
'); + (options.horizontal == false ? '
' : '
') + + '

- ' + options.showingText + '

' + + ' ' + + (options.horizontal == false ? '' : createHorizontalButtons(1, options.moveAllBtn)) + + ' ' + + '
' + + (options.horizontal == false ? createVerticalButtons(options.moveAllBtn) : '') + + (options.horizontal == false ? '
' : '
') + + '

- ' + options.showingText + '

' + + ' ' + + (options.horizontal == false ? '' : createHorizontalButtons(2, options.moveAllBtn)) + + ' ' + + '
'); $(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. */