113 lines
3 KiB
JavaScript
Executable file
113 lines
3 KiB
JavaScript
Executable file
define(function(require, exports, module) {
|
|
'use strict';
|
|
|
|
/**
|
|
* Dependencies
|
|
*/
|
|
|
|
var debug = require('debug')('view:setting');
|
|
var bind = require('lib/bind');
|
|
var View = require('view');
|
|
|
|
var settingFallbacks = {
|
|
'self-timer': ['Self-Timer', 'Minuteur'],
|
|
'self-timer-off': ['Off', 'Désactivé'],
|
|
'self-timer-2-seconds': ['2 seconds', '2 secondes'],
|
|
'self-timer-5-seconds': ['5 seconds', '5 secondes'],
|
|
'self-timer-10-seconds': ['10 seconds', '10 secondes'],
|
|
grid: ['Grid Lines', 'Quadrillage'],
|
|
'grid-off': ['Off', 'Désactivée'],
|
|
'grid-on': ['On', 'Activé']
|
|
};
|
|
|
|
function fallbackText(key) {
|
|
var values = settingFallbacks[key];
|
|
if (!values) { return key; }
|
|
var locale = (document.documentElement.lang || navigator.language || 'en')
|
|
.toLowerCase();
|
|
return values[locale.indexOf('fr') === 0 ? 1 : 0];
|
|
}
|
|
|
|
/**
|
|
* Exports
|
|
*/
|
|
|
|
module.exports = View.extend({
|
|
tag: 'li',
|
|
name: 'setting',
|
|
|
|
initialize: function(options) {
|
|
this.l10n = options.l10n || document.l10n;
|
|
this.model = options.model;
|
|
this.model.on('change', this.render);
|
|
this.on('destroy', this.onDestroy);
|
|
this.el.dataset.icon = this.model.get('icon');
|
|
this.el.classList.add('test-' + this.model.get('title') + '-setting');
|
|
bind(this.el, 'click', this.onClick);
|
|
},
|
|
|
|
onClick: function() {
|
|
this.emit('click', this);
|
|
},
|
|
|
|
onDestroy: function() {
|
|
this.model.off('change', this.render);
|
|
},
|
|
|
|
render: function() {
|
|
var data = this.model.get();
|
|
data.selected = this.model.selected();
|
|
data.value = data.selected && data.selected.title;
|
|
this.el.setAttribute('role', 'option');
|
|
|
|
|
|
var localizedValue;
|
|
if (data.optionsLocalizable === false) {
|
|
localizedValue = Promise.resolve(data.value);
|
|
} else {
|
|
localizedValue = this.l10n.formatValue(data.value);
|
|
}
|
|
|
|
localizedValue.then(valueString => {
|
|
valueString = valueString || fallbackText(data.value);
|
|
this.l10n.setAttributes(
|
|
this.el,
|
|
'setting-option-' + data.title,
|
|
{ value: valueString }
|
|
);
|
|
this.el.innerHTML = this.template({
|
|
titleL10n: 'data-l10n-id="' + data.title + '"',
|
|
valueL10n: data.optionsLocalizable !== false ? 'data-l10n-id="' +
|
|
data.value + '"' : '',
|
|
valueText: data.optionsLocalizable === false ? data.value : '',
|
|
});
|
|
|
|
var title = this.el.querySelector('.setting_title');
|
|
if (title && !title.textContent) {
|
|
title.textContent = fallbackText(data.title);
|
|
}
|
|
var value = this.el.querySelector('.setting_value');
|
|
if (value && !value.textContent) {
|
|
value.textContent = valueString;
|
|
}
|
|
|
|
// Clean up
|
|
delete this.template;
|
|
|
|
debug('rendered (item %s)', data.key);
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
template: function(data) {
|
|
return '<div class="setting_text">' +
|
|
'<h4 class="setting_title" ' + data.titleL10n + '></h4>' +
|
|
'<h5 class="setting_value" ' + data.valueL10n + '>' +
|
|
data.valueText +
|
|
'</h5>' +
|
|
'</div>';
|
|
},
|
|
});
|
|
|
|
});
|