Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/camera/js/views/setting-options.js

@@ -0,0 +1,108 @@
+define(function(require, exports, module) {
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var debug = require('debug')('view:setting-options');
+var attach = require('attach');
+var View = require('view');
+
+/**
+ * Exports
+ */
+
+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');
+
+    // we need to pass a boolean flag indicating if the
+    // options should be localized
+    var localizable = data.optionsLocalizable === false ? false : true;
+    data.options.forEach(this.renderOption.bind(this, localizable));
+
+    // Clean up
+    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);
+    // The settings options list is a listbox (list of actionable items) thus
+    // each iteam must have an 'option' role.
+    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');
+      // Make sure selected semantics is conveyed to the screen reader.
+      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>';
+  }
+});
+
+});