b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
76 lines
No EOL
3.2 KiB
JavaScript
76 lines
No EOL
3.2 KiB
JavaScript
define([
|
|
'require',
|
|
'exports',
|
|
'module',
|
|
'debug',
|
|
'attach',
|
|
'view'
|
|
], function (require, exports, module) {
|
|
'use strict';
|
|
var debug = require('debug')('view:setting-options');
|
|
var attach = require('attach');
|
|
var View = require('view');
|
|
module.exports = View.extend({
|
|
name: 'setting-options',
|
|
initialize: function (options) {
|
|
this.model = options.model;
|
|
this.l10n = options.l10n || document.l10n;
|
|
this.on('destroy', this.onDestroy);
|
|
attach(this.el, 'click', 'li', this.onOptionClick);
|
|
attach(this.el, 'click', '.js-back', this.firer('click:back'));
|
|
this.model.on('change:selected', this.onSelectedChange);
|
|
debug('initialized');
|
|
},
|
|
onDestroy: function () {
|
|
this.model.off('change:selected', this.onSelectedChange);
|
|
},
|
|
onOptionClick: function (event, el) {
|
|
var key = el.getAttribute('data-key');
|
|
this.emit('click:option', key, this.model);
|
|
},
|
|
onSelectedChange: function (key) {
|
|
var next = this.els[key];
|
|
this.els.selected.classList.remove('selected');
|
|
next.classList.add('selected');
|
|
this.els.selected = next;
|
|
},
|
|
render: function () {
|
|
var data = this.model.get();
|
|
this.selectedKey = data.selected;
|
|
this.el.innerHTML = this.template(data);
|
|
this.els.ul = this.find('.js-list');
|
|
var localizable = data.optionsLocalizable === false ? false : true;
|
|
data.options.forEach(this.renderOption.bind(this, localizable));
|
|
delete this.template;
|
|
debug('rendered');
|
|
return this;
|
|
},
|
|
renderOption: function (localizable, option) {
|
|
var li = document.createElement('li');
|
|
var isSelected = option.key === this.selectedKey;
|
|
if (localizable) {
|
|
li.setAttribute('data-l10n-id', option.title);
|
|
this.l10n.formatValue(option.title).then(title => {
|
|
li.setAttribute('aria-label', title);
|
|
});
|
|
} else {
|
|
li.textContent = option.title;
|
|
li.setAttribute('aria-label', option.title);
|
|
}
|
|
li.setAttribute('data-key', option.key);
|
|
li.setAttribute('role', 'option');
|
|
li.className = 'setting-option';
|
|
li.dataset.icon = 'tick';
|
|
this.els.ul.appendChild(li);
|
|
this.els[option.key] = li;
|
|
if (isSelected) {
|
|
li.classList.add('selected');
|
|
li.setAttribute('aria-selected', true);
|
|
this.els.selected = li;
|
|
}
|
|
},
|
|
template: function (data) {
|
|
return '<div class="inner">' + '<div class="settings_header">' + '<div class="settings-back-btn js-back" ' + 'data-icon="left" role="button" data-l10n-id="back-button"></div>' + '<h2 aria-level="1" class="settings_title" data-l10n-id="' + data.header + '"></h2>' + '</div>' + '<div class="settings_items">' + '<ul role="listbox" class="inner js-list"></ul>' + '</div>' + '</div>';
|
|
}
|
|
});
|
|
}); |