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/distros/spark/apps/studio/js/edit.js

@@ -0,0 +1,193 @@
+/*global AutoTheme, Color, Navigation, Storage */
+
+(function(exports) {
+  'use strict';
+
+  var currentTheme = null;
+  var currentSection = null;
+  var currentKey = null;
+
+  var groupName = null;
+  var sectionName = null;
+
+  var Edit = {
+    panel: document.getElementById('edit'),
+    header: document.querySelector('#edit gaia-header'),
+    title: document.querySelector('#edit gaia-header h1'),
+    list: document.querySelector('#edit-list'),
+    editColor: document.querySelector('#edit-color'),
+    picker: document.querySelector('#edit-color gaia-color-picker'),
+    iframe: document.querySelector('#edit iframe'),
+    autotheme: document.querySelector('#edit-color .autotheme-palette'),
+
+    prepareForDisplay: function(params) {
+      var defer = new Defer();
+
+      currentTheme = params.theme;
+
+      this.title.textContent = params.group + ' / ' + params.section;
+      this.header.setAttr('action', 'back');
+      AutoTheme.showPalette(this.autotheme);
+
+      this.picker.addEventListener('change', this.onPickerChange.bind(this));
+
+      var currentList = this.list.querySelector('gaia-list');
+      if (currentList) {
+        this.list.removeChild(currentList);
+      }
+
+      var list = document.createElement('gaia-list');
+      currentSection = currentTheme.groups[params.group][params.section];
+
+      groupName = params.group;
+      sectionName = params.section;
+
+      this.iframe.src = params.section + '-preview.html';
+      this.iframe.onload = () => {
+        Object.keys(currentSection).forEach((key) => {
+          var body = this.iframe.contentDocument.body;
+          body.style.setProperty(key, currentSection[key]);
+        });
+
+        defer.resolve();
+      };
+
+      Object.keys(currentSection).forEach((key) => {
+        var link = document.createElement('a');
+        link.classList.add('edit');
+        link.dataset.key = key;
+
+        var label = document.createElement('label');
+        label.classList.add('l-flex');
+        label.classList.add('l-flex-grow');
+
+        var title = document.createElement('h3');
+        title.textContent = key;
+        label.appendChild(title);
+
+        link.appendChild(label);
+
+        var valueElt = document.createElement('div');
+        var value = currentSection[key];
+        valueElt.setAttribute('aria-label', value);
+        valueElt.dataset.id = key;
+        valueElt.className = 'palette-item';
+        valueElt.style.backgroundColor = value;
+
+        link.appendChild(valueElt);
+
+        list.appendChild(link);
+      });
+
+      this.list.appendChild(list);
+      this.list.scrollTop = 0;
+
+      return defer.promise.then(() => this.panel);
+    },
+
+    pick: function(key) {
+      currentKey = key;
+      this.picker.value = currentSection[key];
+      this.editColor.classList.add('editing');
+      this.picker.resize();
+    },
+
+    onPickerChange() {
+      if (!currentKey) {
+        return;
+      }
+      var value = this.picker.value;
+      this.iframe.contentDocument.body.style.setProperty(currentKey, value);
+    }
+  };
+
+  Edit.header.addEventListener('action', function(evt) {
+    if (evt.detail.type != 'back') {
+      return;
+    }
+
+    Navigation.pop();
+  });
+
+  Edit.panel.addEventListener('click', function(evt) {
+    var target = evt.target;
+    if (!target.classList.contains('edit')) {
+      return;
+    }
+
+    Edit.pick(target.dataset.key);
+  });
+
+  Edit.panel.addEventListener('Navigation:pop', function onPop() {
+    Edit.editColor.classList.remove('editing');
+    Edit.iframe.src = '';
+  });
+
+  Edit.editColor.addEventListener('click', function(evt) {
+    var target = evt.target;
+    var value;
+
+    if (target.classList.contains('save')) {
+      if (!currentKey) {
+        return;
+      }
+
+      value = Edit.picker.value;
+      currentSection[currentKey] = value;
+
+      var elem = Edit.list.querySelector('[data-id=' + currentKey + ']');
+      elem.setAttribute('aria-label', value);
+      elem.style.backgroundColor = value;
+
+      Storage.updateTheme(currentTheme)
+        .then(() => {
+          Edit.editColor.classList.remove('editing');
+          currentKey = null;
+        })
+        .then(() => {
+          if (!currentTheme.manifestURL) {
+            return Promise.resolve();
+          }
+
+          // Updating the installed theme
+          return Generation.installTheme(currentTheme.id, false)
+                 .then(Storage.fetchTheme.bind(null, currentTheme.id))
+                 .then((theme) => {
+                   // Refresh
+                   currentTheme = theme;
+                   currentSection =
+                     currentTheme.groups[groupName][sectionName];
+                 });
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+
+      return;
+    }
+
+    if (!target.classList.contains('cancel')) {
+      return;
+    }
+
+    if (currentKey) {
+      value = currentSection[currentKey];
+      Edit.iframe.contentDocument.body.style.setProperty(currentKey, value);
+    }
+
+    Edit.editColor.classList.remove('editing');
+    currentKey = null;
+  });
+
+  Edit.autotheme.addEventListener('click', function(e) {
+    if (!e.target.classList.contains('palette-item')) {
+      return;
+    }
+
+    var color = Color.fromJSONString(e.target.dataset.color);
+    Edit.picker.value = color.toHexString();
+    Edit.onPickerChange();
+  });
+
+  exports.Edit = Edit;
+})(window);