@@ -, +, @@ - Update a translation, e.g. fr-FR: > cd misc/translator > perl translate update fr-FR - Open the corresponding .po file for JavaScript strings, e.g. misc/translator/po/fr-FR-messages-js.po - Locate strings pulled from koha-tmpl/intranet-tmpl/prog/js/select2.js for translation, e.g.: msgid "No results found" msgstr "" - Edit the "msgstr" string however you want (it's just for testing). - Install the updated translation: > perl translate install fr-FR - Switch to your newly translated language in the staff client and test a Select2-styled dropdown. Test that translated strings appear. For example: - Use the filter form to search for a string which isn't found. You should see a translated version. - Make a selection in one of the dropdowns. Hover your mouse over the "X" icon which now appears. The tooltip should be a translated version. --- koha-tmpl/intranet-tmpl/prog/css/select2.css | 21 +++++++++ .../prog/en/includes/select2.inc | 44 +------------------ koha-tmpl/intranet-tmpl/prog/js/select2.js | 39 ++++++++++++++++ 3 files changed, 61 insertions(+), 43 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/select2.js --- a/koha-tmpl/intranet-tmpl/prog/css/select2.css +++ a/koha-tmpl/intranet-tmpl/prog/css/select2.css @@ -7,3 +7,24 @@ .select2-container .select2-selection--single.important_subfield_not_filled { background-color: #FFFF99; } + +.select2-container--default .select2-selection--single .select2-selection__clear { + color: #888; + font-size: 125%; + padding: 0 5px; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow { + border-left: 1px solid #EEE; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + color: #666; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow:hover { + background-color: #EEE; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow b { + border-color: #565656 transparent transparent transparent; +} --- a/koha-tmpl/intranet-tmpl/prog/en/includes/select2.inc +++ a/koha-tmpl/intranet-tmpl/prog/en/includes/select2.inc @@ -3,46 +3,4 @@ [% Asset.js("lib/select2/js/select2.min.js") | $raw %] [% Asset.css("lib/select2/css/select2.min.css") | $raw %] [% Asset.css("css/select2.css") | $raw %] - - - +[% Asset.js("js/select2.js") | $raw %] --- a/koha-tmpl/intranet-tmpl/prog/js/select2.js +++ a/koha-tmpl/intranet-tmpl/prog/js/select2.js @@ -0,0 +1,39 @@ +/* global __ */ +$.fn.select2.defaults.set("allowClear", true); +$.fn.select2.defaults.set("placeholder", ""); +$.fn.select2.defaults.set("width", "element"); + +// Internationalization +$.fn.select2.defaults.set("language", { + errorLoading:function(){ return __("The results could not be loaded"); }, + inputTooLong:function(e){ + var n = e.input.length - e.max; + return __("Please delete %d character(s)").format(n); + }, + inputTooShort:function(e){ + var n = e.min - e.input.length; + return __("Please enter %n or more characters").format(n); + }, + formatResult: function(item) { + return $('
', {title: item.element[0].title}).text(item.text); + }, + loadingMore:function(){ return __("Loading more results…"); }, + maximumSelected:function(e){ + return __("You can only select %s item(s)").format(e.max); + }, + noResults:function(){return __("No results found"); }, + searching:function(){return __("Searching…"); }, + removeAllItems:function(){return __("Remove all items"); }, + removeItem:function(){return __("Remove item"); } +}); + +$(document).ready(function(){ + $(".select2").select2(); + $(".select2").on("select2:clear", function () { + $(this).on("select2:opening.cancelOpen", function (evt) { + evt.preventDefault(); + + $(this).off("select2:opening.cancelOpen"); + }); + }); +}); --