Skip to content

Commit

Permalink
Merge pull request #75 from visionappscz/feature/localize-loaders
Browse files Browse the repository at this point in the history 
Feature/localize loaders, fixes #41
  • Loading branch information
@adamkudrna
adamkudrna authored Jun 24, 2016
2 parents d0051c6 + 572d7d5 commit 9b435df
Show file tree
Hide file tree
Showing 9 changed files with 149 additions and 78 deletions.
3 changes: 2 additions & 1 deletion .jshintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"jQuery": false,
"$": false,
"QUnit": false,
"sinon": false
"sinon": false,
"moment": false
}
}
6 changes: 6 additions & 0 deletions src/js/ckeditor-loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,15 @@
// 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 (language) {
confObj.language = language;
}

if (confValue) {
if (typeof confValue === 'object') {
confObj = confValue;
Expand Down
54 changes: 35 additions & 19 deletions src/js/datetimepicker-loader.js
View file
Original file line number Diff line number Diff line change
@@ -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));
3 changes: 3 additions & 0 deletions src/js/tests/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
<!-- jQuery -->
<script src="../../../bower_components/jquery/dist/jquery.min.js"></script>

<!-- moment.sj -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>

<!-- QUnit -->
<link rel="stylesheet" href="../../../bower_components/qunit/qunit/qunit.css" media="screen" />
<script src="../../../bower_components/qunit/qunit/qunit.js"></script>
Expand Down
107 changes: 58 additions & 49 deletions src/js/tests/unit/ckeditor-loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $(function () {

teardown: function () {
delete jQuery.fn.ckeditor;
$('html').attr('lang', null);
},
});

Expand All @@ -16,53 +17,61 @@ $(function () {

// Data-api tests
// ======================
QUnit.test('should call the ckeditor() method on the textarea on page load with no attribute',
function () {
var $textarea = $('<textarea data-onload-ckeditor>Some text</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.test('should call the ckeditor() method on the textarea on page load with string attribute',
function () {
var $textarea = $('<textarea data-onload-ckeditor="/path/to/config.js">Some text</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({ customConfig: '/path/to/config.js' }),
'Should init the ckeditor with proper custom config file specified'
);
}
);

QUnit.test('should call the ckeditor() method on the textarea on page load with json attribute',
function () {
var $textarea = $(
'<textarea data-onload-ckeditor=\'{"option": "value"}\'>Some text</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({ option: 'value' }),
'Should init the ckeditor with proper config object'
);
}
);
QUnit.test('should init ckeditor on page load with no attribute', function () {
var $textarea = $('<textarea data-onload-ckeditor></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.test('should init ckeditor on page load with string attribute', function () {
var $textarea = $('<textarea data-onload-ckeditor="/path/to/config.js"></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({ 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 = $('<textarea data-onload-ckeditor=\'{"option": "value"}\'></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({ option: 'value' }),
'Should init the ckeditor with proper config object'
);
});

QUnit.test('should init ckeditor on page load with correct language settings', function () {
var $textarea = $('<textarea data-onload-ckeditor></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'
);
});

});
41 changes: 38 additions & 3 deletions src/js/tests/unit/datetimepicker-loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

},
});

Expand All @@ -17,30 +24,36 @@ $(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 = $('<input type="text" data-onload-datetimepicker />');
$('#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 = $(
'<input type="text" data-onload-datetimepicker=\'{"option": "optionValue"}\' />'
);
$('#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');
Expand All @@ -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 = $('<input type="text" data-onload-datetimepicker />');

$('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'
);
});

});
4 changes: 2 additions & 2 deletions src/less/components/javascript/ckeditor-loader.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<html>` element the CKEditor is localized accordingly.
#### Data-API
Expand Down
5 changes: 3 additions & 2 deletions src/less/components/javascript/datetimepicker-loader.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@ Initializes [Bootstrap Datetimepicker](http://eonasdan.github.io/bootstrap-datet
<div class="panel panel-danger">
<div class="panel-heading"><h4 class="panel-title">JavaScript Required</h4></div>
<div class="panel-body">
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.
</div>
</div>
### 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 `<html>` element the datetimepicker is localized accordingly.
#### Data-API
Expand Down
4 changes: 2 additions & 2 deletions src/less/components/javascript/select2-loader.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 9b435df

Please sign in to comment.