From 5af049c8d38eb036d0c68963ba58a519582c1b0d Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Fri, 24 Jun 2016 14:02:08 +0200 Subject: [PATCH 1/6] Localize datetimepicker --- .jshintrc | 3 +- src/js/datetimepicker-loader.js | 54 ++++++++++++------- src/js/tests/index.html | 3 ++ src/js/tests/unit/datetimepicker-loader.js | 41 ++++++++++++-- .../javascript/datetimepicker-loader.less | 3 +- 5 files changed, 80 insertions(+), 24 deletions(-) diff --git a/.jshintrc b/.jshintrc index 8352ac84..9fdf93e7 100644 --- a/.jshintrc +++ b/.jshintrc @@ -20,6 +20,7 @@ "jQuery": false, "$": false, "QUnit": false, - "sinon": false + "sinon": false, + "moment": false } } diff --git a/src/js/datetimepicker-loader.js b/src/js/datetimepicker-loader.js index 531b312b..532cacf0 100644 --- a/src/js/datetimepicker-loader.js +++ b/src/js/datetimepicker-loader.js @@ -1,27 +1,43 @@ -;(function ($, window) { +;(function ($, moment, window) { 'use strict'; - // CKEDITOR-LOADER DATA-API - // ======================== + var DatetimePickerLoader = function ($element) { + this.$element = $element; + }; - (function ($, window) { - // We have to use $(winodow).load() as $(document).ready() can not be triggered manually - // and thus it would make it impossible to test this part of the code. - $(window).load(function () { - var initComponentFn = function (confObj, confValue) { - if (confValue) { - $.extend(confObj, confValue); - } + DatetimePickerLoader.prototype.filterLocale = function (locale) { + return moment.locale(locale); + }; - $(this).datetimepicker(confObj); + DatetimePickerLoader.prototype.init = function (confObj) { + confObj.locale = this.filterLocale(confObj.locale); + this.$element.datetimepicker(confObj); + }; + + // We have to use $(winodow).load() as $(document).ready() can not be triggered manually + // and thus it would make it impossible to test this part of the code. + $(window).load(function () { + var initComponentFn = function (inlineConf) { + var datetimePickerLoader = new DatetimePickerLoader($(this)); + var conf = { + allowInputToggle: true, + sideBySide: true, + locale: $('html').attr('lang'), }; - $('[data-onload-datetimepicker]').each(function () { - initComponentFn.call(this, { allowInputToggle: true, sideBySide: true }, $(this).data( - 'onload-datetimepicker' - )); - }); + if (inlineConf) { + $.extend(conf, inlineConf); + } + + datetimePickerLoader.init(conf); + }; + + // CKEDITOR-LOADER DATA-API + // ======================== + + $('[data-onload-datetimepicker]').each(function () { + initComponentFn.call(this, $(this).data('onload-datetimepicker')); }); - }($, window)); + }); -}(jQuery, window)); +}(jQuery, moment, window)); diff --git a/src/js/tests/index.html b/src/js/tests/index.html index a5050901..70f29020 100644 --- a/src/js/tests/index.html +++ b/src/js/tests/index.html @@ -7,6 +7,9 @@ + + + diff --git a/src/js/tests/unit/datetimepicker-loader.js b/src/js/tests/unit/datetimepicker-loader.js index f7d4c9db..d239e34d 100644 --- a/src/js/tests/unit/datetimepicker-loader.js +++ b/src/js/tests/unit/datetimepicker-loader.js @@ -4,10 +4,17 @@ $(function () { QUnit.module('datetimepicker-loader', { setup: function () { jQuery.fn.datetimepicker = function () {}; + + moment.localeOrig = moment.locale; + moment.locale = function () {}; }, teardown: function () { + moment.locale = moment.localeOrig; + $('html').attr('lang', null); + delete moment.localeOrig; delete jQuery.fn.datetimepicker; + }, }); @@ -17,23 +24,28 @@ $(function () { // Data-api tests // ====================== QUnit.test( - 'should init datetimepicker with default config on the html element on page load', + 'should init datetimepicker with default config on page load', function () { var $input = $(''); $('#qunit-fixture').append($input); sinon.spy(jQuery.fn, 'datetimepicker'); + sinon.stub(moment, 'locale').withArgs().returns('fake-locale'); $(window).trigger('load'); QUnit.ok(jQuery.fn.datetimepicker.calledOnce, 'Should init the datetimepicker'); QUnit.ok( - jQuery.fn.datetimepicker.calledWith({ allowInputToggle: true, sideBySide: true }), + jQuery.fn.datetimepicker.calledWith({ + allowInputToggle: true, + sideBySide: true, + locale: 'fake-locale', + }), 'Should init the datetimepicker with default config' ); } ); - QUnit.test('should init datetimepicker with some config option on the html element on page load', + QUnit.test('should init datetimepicker with some config option on page load', function () { var $input = $( '' @@ -41,6 +53,7 @@ $(function () { $('#qunit-fixture').append($input); sinon.spy(jQuery.fn, 'datetimepicker'); + sinon.stub(moment, 'locale').withArgs().returns('fake-locale'); $(window).trigger('load'); QUnit.ok(jQuery.fn.datetimepicker.calledOnce, 'Should init the datetimepicker'); @@ -49,9 +62,31 @@ $(function () { option: 'optionValue', allowInputToggle: true, sideBySide: true, + locale: 'fake-locale', }), 'Should init the datetimepicker with specified config object' ); } ); + + QUnit.test('should init datetimepicker with locale', function () { + var $input = $(''); + + $('html').attr('lang', 'cs'); + $('#qunit-fixture').append($input); + sinon.spy(jQuery.fn, 'datetimepicker'); + sinon.stub(moment, 'locale').withArgs('cs').returns('fake-locale'); + $(window).trigger('load'); + + QUnit.ok(jQuery.fn.datetimepicker.calledOnce, 'Should init the datetimepicker'); + QUnit.ok( + jQuery.fn.datetimepicker.calledWith({ + locale: 'fake-locale', + allowInputToggle: true, + sideBySide: true, + }), + 'Should init the datetimepicker with locale set' + ); + }); + }); diff --git a/src/less/components/javascript/datetimepicker-loader.less b/src/less/components/javascript/datetimepicker-loader.less index 8fa7a3aa..3c739b76 100644 --- a/src/less/components/javascript/datetimepicker-loader.less +++ b/src/less/components/javascript/datetimepicker-loader.less @@ -14,7 +14,8 @@ Initializes [Bootstrap Datetimepicker](http://eonasdan.github.io/bootstrap-datet ### Usage -This loader only calls the jQuery plugin defined in bootstrap-datetimepicker component. It does nothing else. +This loader only calls the jQuery plugin defined in bootstrap-datetimepicker component. +If the `lang` attribute is set on the `` element the datetimepicker is localized accordingly. #### Data-API From 673a90a040491d719a0a412d3f2d607a3e606d4e Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Fri, 24 Jun 2016 14:09:07 +0200 Subject: [PATCH 2/6] Improve docs --- src/less/components/javascript/datetimepicker-loader.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/less/components/javascript/datetimepicker-loader.less b/src/less/components/javascript/datetimepicker-loader.less index 3c739b76..2e2fde5e 100644 --- a/src/less/components/javascript/datetimepicker-loader.less +++ b/src/less/components/javascript/datetimepicker-loader.less @@ -8,7 +8,7 @@ Initializes [Bootstrap Datetimepicker](http://eonasdan.github.io/bootstrap-datet

JavaScript Required

- Scripts `datetimepicker-loader.js`, `moment.js` (this one before `bootstrap.js`) and `bootstrap-datetimepicker.js` must be included. + Scripts `datetimepicker-loader.js`, `moment.js` (optionaly with locales, before `bootstrap.js`) and `bootstrap-datetimepicker.js` must be included.
From 15b118a995d7fd1b0c3fe74be633cf9d654d81ee Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Fri, 24 Jun 2016 14:21:15 +0200 Subject: [PATCH 3/6] Improve docs --- src/less/components/javascript/select2-loader.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/less/components/javascript/select2-loader.less b/src/less/components/javascript/select2-loader.less index 8052b779..06caefb9 100644 --- a/src/less/components/javascript/select2-loader.less +++ b/src/less/components/javascript/select2-loader.less @@ -14,8 +14,8 @@ options. ### Usage -This loader only calls the jQuery plugin defined in the select2 library with appropriate arguments. It does nothing -else. +This loader only calls the jQuery plugin defined in the select2 library with appropriate arguments. +The select2 component natively uses the `lang` attribute of any parent element, so just be sure to include the correct locale file. #### Data-API From 657269b3a270dda65519f1170b8d12f415bd6332 Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Fri, 24 Jun 2016 14:42:29 +0200 Subject: [PATCH 4/6] Improve coding style --- src/js/tests/unit/ckeditor-loader.js | 78 +++++++++++++--------------- 1 file changed, 36 insertions(+), 42 deletions(-) diff --git a/src/js/tests/unit/ckeditor-loader.js b/src/js/tests/unit/ckeditor-loader.js index abf90185..f800b9ce 100644 --- a/src/js/tests/unit/ckeditor-loader.js +++ b/src/js/tests/unit/ckeditor-loader.js @@ -8,6 +8,7 @@ $(function () { teardown: function () { delete jQuery.fn.ckeditor; + $('html').attr('lang', null); }, }); @@ -16,53 +17,46 @@ $(function () { // Data-api tests // ====================== - QUnit.test('should call the ckeditor() method on the textarea on page load with no attribute', - function () { - var $textarea = $(''); - $('#qunit-fixture').append($textarea); - - sinon.spy(jQuery.fn, 'ckeditor'); - $(window).trigger('load'); + QUnit.test('should init ckeditor on page load with no attribute', function () { + var $textarea = $(''); + $('#qunit-fixture').append($textarea); + + sinon.spy(jQuery.fn, 'ckeditor'); + $(window).trigger('load'); + + QUnit.ok(jQuery.fn.ckeditor.calledOnce, 'Should init the ckeditor'); + QUnit.ok( + jQuery.fn.ckeditor.calledWithExactly({}), + 'Should init the ckeditor with no arguments' + ); + }); - QUnit.ok(jQuery.fn.ckeditor.calledOnce, 'Should init the ckeditor'); - QUnit.ok( - jQuery.fn.ckeditor.calledWithExactly({}), - 'Should init the ckeditor with no arguments' - ); - } - ); + QUnit.test('should init ckeditor on page load with string attribute', function () { + var $textarea = $(''); + $('#qunit-fixture').append($textarea); - QUnit.test('should call the ckeditor() method on the textarea on page load with string attribute', - function () { - var $textarea = $(''); - $('#qunit-fixture').append($textarea); + sinon.spy(jQuery.fn, 'ckeditor'); + $(window).trigger('load'); - sinon.spy(jQuery.fn, 'ckeditor'); - $(window).trigger('load'); + QUnit.ok(jQuery.fn.ckeditor.calledOnce, 'Should init the ckeditor'); + QUnit.ok( + jQuery.fn.ckeditor.calledWithExactly({ customConfig: '/path/to/config.js' }), + 'Should init the ckeditor with proper custom config file specified' + ); + }); - QUnit.ok(jQuery.fn.ckeditor.calledOnce, 'Should init the ckeditor'); - QUnit.ok( - jQuery.fn.ckeditor.calledWithExactly({ customConfig: '/path/to/config.js' }), - 'Should init the ckeditor with proper custom config file specified' - ); - } - ); + QUnit.test('should init ckeditor on on page load with json attribute', function () { + var $textarea = $(''); + $('#qunit-fixture').append($textarea); - QUnit.test('should call the ckeditor() method on the textarea on page load with json attribute', - function () { - var $textarea = $( - '' + - ''); - $('#qunit-fixture').append($textarea); + sinon.spy(jQuery.fn, 'ckeditor'); + $(window).trigger('load'); - sinon.spy(jQuery.fn, 'ckeditor'); - $(window).trigger('load'); + QUnit.ok(jQuery.fn.ckeditor.calledOnce, 'Should init the ckeditor'); + QUnit.ok( + jQuery.fn.ckeditor.calledWithExactly({ option: 'value' }), + 'Should init the ckeditor with proper config object' + ); + }); - QUnit.ok(jQuery.fn.ckeditor.calledOnce, 'Should init the ckeditor'); - QUnit.ok( - jQuery.fn.ckeditor.calledWithExactly({ option: 'value' }), - 'Should init the ckeditor with proper config object' - ); - } - ); }); From fd47a0d297eeee869ccb16fefb6c08b43112f159 Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Fri, 24 Jun 2016 14:44:03 +0200 Subject: [PATCH 5/6] Localize ckeditor --- src/js/ckeditor-loader.js | 6 ++++++ src/js/tests/unit/ckeditor-loader.js | 15 +++++++++++++++ .../components/javascript/ckeditor-loader.less | 4 ++-- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/js/ckeditor-loader.js b/src/js/ckeditor-loader.js index 57630b6c..2df4ed3b 100644 --- a/src/js/ckeditor-loader.js +++ b/src/js/ckeditor-loader.js @@ -9,9 +9,11 @@ // and thus it would make it impossible to test this part of the code. $(window).load(function () { $('[data-onload-ckeditor]').each(function () { + var language = $('html').attr('lang'); var confObj = {}; var $this = $(this); var confValue = $this.data('onload-ckeditor'); + if (confValue) { if (typeof confValue === 'object') { confObj = confValue; @@ -20,6 +22,10 @@ } } + if (language) { + confObj.language = language; + } + $this.ckeditor(confObj); }); }); diff --git a/src/js/tests/unit/ckeditor-loader.js b/src/js/tests/unit/ckeditor-loader.js index f800b9ce..8c2f7049 100644 --- a/src/js/tests/unit/ckeditor-loader.js +++ b/src/js/tests/unit/ckeditor-loader.js @@ -59,4 +59,19 @@ $(function () { ); }); + QUnit.test('should init ckeditor on page load with correct language settings', function () { + var $textarea = $(''); + $('#qunit-fixture').append($textarea); + + sinon.spy(jQuery.fn, 'ckeditor'); + $('html').attr('lang', 'cs'); + $(window).trigger('load'); + + QUnit.ok(jQuery.fn.ckeditor.calledOnce, 'Should init the ckeditor'); + QUnit.ok( + jQuery.fn.ckeditor.calledWithExactly({ language: 'cs' }), + 'Should init the ckeditor with proper config object' + ); + }); + }); diff --git a/src/less/components/javascript/ckeditor-loader.less b/src/less/components/javascript/ckeditor-loader.less index 92a1cfdc..471b2115 100644 --- a/src/less/components/javascript/ckeditor-loader.less +++ b/src/less/components/javascript/ckeditor-loader.less @@ -14,8 +14,8 @@ options. ### Usage -This loader only calls the jQuery plugin defined in CKEditor jQuery adapter with appropriate arguments. Id does nothing -else. +This loader only calls the jQuery plugin defined in CKEditor jQuery adapter with appropriate arguments. +If the `lang` attribute is set on the `` element the CKEditor is localized accordingly. #### Data-API From 572d7d57e51a293e47159e43fbecfb20a8f55991 Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Fri, 24 Jun 2016 14:45:13 +0200 Subject: [PATCH 6/6] Ensure inline language setting takes precedence for CKEditor --- src/js/ckeditor-loader.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/ckeditor-loader.js b/src/js/ckeditor-loader.js index 2df4ed3b..cee81bdc 100644 --- a/src/js/ckeditor-loader.js +++ b/src/js/ckeditor-loader.js @@ -14,6 +14,10 @@ var $this = $(this); var confValue = $this.data('onload-ckeditor'); + if (language) { + confObj.language = language; + } + if (confValue) { if (typeof confValue === 'object') { confObj = confValue; @@ -22,10 +26,6 @@ } } - if (language) { - confObj.language = language; - } - $this.ckeditor(confObj); }); });