Skip to content

Commit

Permalink
Improve localization ability
Browse files Browse the repository at this point in the history
  • Loading branch information
@koss-lebedev
koss-lebedev committed Apr 23, 2017
1 parent f019e0c commit 1c5287f
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 106 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.idea/
node_modules/
bower_components/
bower_components/
npm-debug.log
26 changes: 26 additions & 0 deletions demo/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,17 @@

<p>Seconds: <span id="duration-label3"></span></p>
</div>

<div class="col-md-offset-3 col-md-6">
<form>
<div class="form-group">
<label>Custom translations</label>
<input type="text" class="form-control" id="duration4" value="86400">
</div>
</form>

<p>Seconds: <span id="duration-label4"></span></p>
</div>
</div>
</div>

Expand All @@ -71,6 +82,21 @@
$('#duration-label3').text(newVal);
}
});
$('#duration4').durationPicker({
lang: {
day: 'dia',
hour: 'hora',
minute: 'minuto',
second: 'segundo',
days: 'dias',
hours: 'horas',
minutes: 'minutos',
seconds: 'segundos',
},
onChanged: function (newVal) {
$('#duration-label4').text(newVal);
}
});
});
</script>

Expand Down
67 changes: 40 additions & 27 deletions dist/bootstrap-duration-picker-debug.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';

(function($) {
(function ($) {
var langs = {
en: {
day: 'day',
Expand All @@ -10,34 +10,52 @@
days: 'days',
hours: 'hours',
minutes: 'minutes',
seconds: 'seconds',
seconds: 'seconds'
},
fr: {
day: 'jour',
hour: 'heure',
minute: 'minute',
second: 'seconde',
days: 'jours',
hours: 'heures',
minutes: 'minutes',
seconds: 'secondes'
}
};

$.fn.durationPicker = function(options) {
$.fn.durationPicker = function (options) {
var defaults = {
lang: 'en',
showSeconds: false,
showDays: true
};
var settings = $.extend({}, defaults, options);

this.each(function(i, mainInput) {
this.each(function (i, mainInput) {
mainInput = $(mainInput);

if (mainInput.data('bdp') === '1') return;

var inputs = [],
labels = [],
disabled = mainInput.hasClass('disabled') ||
mainInput.attr('disabled') === 'disabled';
labels = [],
disabled = mainInput.hasClass('disabled') || mainInput.attr('disabled') === 'disabled';

function translate(key) {
if (typeof settings.lang === 'string') {
return langs[settings.lang][key];
} else {
return settings.lang[key];
}
}

function buildDisplayBlock(id, hidden, max) {
var input = $('<input>', {
class: 'form-control input-sm',
type: 'number',
min: 0,
value: 0,
disabled: disabled,
disabled: disabled
}).change(durationPickerChanged);
if (max) {
input.attr('max', max);
Expand All @@ -46,40 +64,35 @@

var label = $('<div>', {
id: 'bdp-' + id + '-label',
text: langs[settings.lang][id],
text: translate(id)
});
labels[id] = label;

return $('<div>', {
class: 'bdp-block ' + (hidden ? 'hidden' : ''),
html: [input, label],
html: [input, label]
});
}

var mainInputReplacer = $('<div>', {
class: 'bdp-input',
html: [
buildDisplayBlock('days', false),
buildDisplayBlock('hours', false, 23),
buildDisplayBlock('minutes', false, 59),
buildDisplayBlock('seconds', !settings.showSeconds, 59),
],
html: [buildDisplayBlock('days', !settings.showDays), buildDisplayBlock('hours', false, settings.showDays ? 23 : 99999), buildDisplayBlock('minutes', false, 59), buildDisplayBlock('seconds', !settings.showSeconds, 59)]
});

mainInput.after(mainInputReplacer).hide().data('bdp', '1');

var days = 0, hours = 0, minutes = 0, seconds = 0;
var days = 0,
hours = 0,
minutes = 0,
seconds = 0;

function updateWordLabel(value, label) {
var text = value === 1 ? label.substring(0, label.length - 1) : label;
labels[label].text(langs[settings.lang][text]);
labels[label].text(translate(text));
}

function updateUI() {
var total = seconds +
minutes * 60 +
hours * 60 * 60 +
days * 24 * 60 * 60;
var total = seconds + minutes * 60 + hours * 60 * 60 + days * 24 * 60 * 60;
mainInput.val(total);
mainInput.change();

Expand Down Expand Up @@ -113,14 +126,14 @@
}

function durationPickerChanged() {
days = parseInt(inputs['days'].val(), 10) || 0;
hours = parseInt(inputs['hours'].val(), 10) || 0;
minutes = parseInt(inputs['minutes'].val(), 10) || 0;
seconds = parseInt(inputs['seconds'].val(), 10) || 0;
days = parseInt(inputs.days.val(), 10) || 0;
hours = parseInt(inputs.hours.val(), 10) || 0;
minutes = parseInt(inputs.minutes.val(), 10) || 0;
seconds = parseInt(inputs.seconds.val(), 10) || 0;
updateUI();
}

init();
});
};
})(jQuery);
})(jQuery);
72 changes: 1 addition & 71 deletions dist/bootstrap-duration-picker.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 15 additions & 7 deletions src/bootstrap-duration-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@
disabled = mainInput.hasClass('disabled') ||
mainInput.attr('disabled') === 'disabled';

function translate(key) {
if (typeof settings.lang === 'string') {
return langs[settings.lang][key];
} else {
return settings.lang[key];
}
}

function buildDisplayBlock(id, hidden, max) {
const input = $('<input>', {
class: 'form-control input-sm',
Expand All @@ -55,7 +63,7 @@

const label = $('<div>', {
id: `bdp-${id}-label`,
text: langs[settings.lang][id],
text: translate(id),
});
labels[id] = label;

Expand All @@ -69,7 +77,7 @@
class: 'bdp-input',
html: [
buildDisplayBlock('days', !settings.showDays),
buildDisplayBlock('hours', false, (settings.showDays ? 23 : 99999)),
buildDisplayBlock('hours', false, settings.showDays ? 23 : 99999),
buildDisplayBlock('minutes', false, 59),
buildDisplayBlock('seconds', !settings.showSeconds, 59),
],
Expand All @@ -81,7 +89,7 @@

function updateWordLabel(value, label) {
const text = value === 1 ? label.substring(0, label.length - 1) : label;
labels[label].text(langs[settings.lang][text]);
labels[label].text(translate(text));
}

function updateUI() {
Expand Down Expand Up @@ -122,10 +130,10 @@
}

function durationPickerChanged() {
days = parseInt(inputs['days'].val(), 10) || 0;
hours = parseInt(inputs['hours'].val(), 10) || 0;
minutes = parseInt(inputs['minutes'].val(), 10) || 0;
seconds = parseInt(inputs['seconds'].val(), 10) || 0;
days = parseInt(inputs.days.val(), 10) || 0;
hours = parseInt(inputs.hours.val(), 10) || 0;
minutes = parseInt(inputs.minutes.val(), 10) || 0;
seconds = parseInt(inputs.seconds.val(), 10) || 0;
updateUI();
}

Expand Down

0 comments on commit 1c5287f

Please sign in to comment.