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/customizer/js/views/append_child.js

@@ -0,0 +1,67 @@
+define(["exports"], function (exports) {
+  "use strict";
+
+  var _extends = function (child, parent) {
+    child.prototype = Object.create(parent.prototype, {
+      constructor: {
+        value: child,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    child.__proto__ = parent;
+  };
+
+  /* global View */
+
+  var appendChildViewTemplate = "\n<style scoped>\n.shadow-host {\n  z-index: 10000001;\n}\n</style>\n<gaia-dialog-prompt>Enter new element name, e.g. \"div\"</gaia-dialog-prompt>\n";
+
+  var AppendChildView = (function (View) {
+    var AppendChildView = function AppendChildView(options) {
+      View.call(this, options);
+
+      this.el.className = "fxos-customizer-append-child-view";
+
+      this.render();
+    };
+
+    _extends(AppendChildView, View);
+
+    AppendChildView.prototype.init = function (controller) {
+      var _this = this;
+      View.prototype.init.call(this, controller);
+
+      this.dialog = this.$("gaia-dialog-prompt");
+
+      // Automatically set focus to the input box when the
+      // <gaia-dialog-prompt> is opened.
+      this.dialog.addEventListener("opened", function () {
+        _this.dialog.els.input.focus();
+      });
+
+      // Reset the <gaia-dialog-prompt> value when closed.
+      this.dialog.addEventListener("closed", function () {
+        _this.dialog.els.input.value = "";
+      });
+
+      // Submit the new element tag name when the
+      // <gaia-dialog-prompt> is submitted.
+      this.dialog.els.submit.addEventListener("click", function () {
+        _this.controller.submit(_this.dialog.els.input.value);
+      });
+    };
+
+    AppendChildView.prototype.template = function () {
+      return appendChildViewTemplate;
+    };
+
+    AppendChildView.prototype.open = function () {
+      this.dialog.open();
+    };
+
+    return AppendChildView;
+  })(View);
+
+  exports["default"] = AppendChildView;
+});

gaia/distros/spark/apps/customizer/js/views/copy_move.js

@@ -0,0 +1,66 @@
+define(["exports"], function (exports) {
+  "use strict";
+
+  var _extends = function (child, parent) {
+    child.prototype = Object.create(parent.prototype, {
+      constructor: {
+        value: child,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    child.__proto__ = parent;
+  };
+
+  /* global View */
+
+  var copyMoveViewTemplate = "<gaia-modal>\n  <gaia-header>\n    <button type=\"button\" data-action=\"cancel\">Cancel</button>\n    <h1>Copy/Move</h1>\n    <button type=\"button\" data-action=\"select\">Select</button>\n  </gaia-header>\n  <gaia-tabs selected=\"0\">\n    <a href=\"#\" data-mode=\"Copy\">Copy</a>\n    <a href=\"#\" data-mode=\"Move\">Move</a>\n  </gaia-tabs>\n  <section>\n    <gaia-dom-tree></gaia-dom-tree>\n  </section>\n  <gaia-dialog>\n    <button type=\"button\" data-action=\"before\">Insert Before</button>\n    <button type=\"button\" data-action=\"after\">Insert After</button>\n    <button type=\"button\" data-action=\"prepend\">Prepend</button>\n    <button type=\"button\" data-action=\"append\">Append</button>\n    <button type=\"button\" on-click=\"close\">Cancel</button>\n  </gaia-dialog>\n</gaia-modal>";
+
+  var CopyMoveView = (function (View) {
+    var CopyMoveView = function CopyMoveView(options) {
+      View.call(this, options);
+
+      this.el.className = "fxos-customizer-copy-move-view";
+
+      this.render();
+    };
+
+    _extends(CopyMoveView, View);
+
+    CopyMoveView.prototype.init = function (controller) {
+      View.prototype.init.call(this, controller);
+
+      this.modal = this.$("gaia-modal");
+      this.tabs = this.$("gaia-tabs");
+      this.domTree = this.$("gaia-dom-tree");
+      this.dialog = this.$("gaia-dialog");
+
+      this.tabs.addEventListener("change", this._handleModeChange.bind(this));
+
+      this.on("click", "button", this._handleClick.bind(this));
+      this.on("contextmenu", "gaia-dom-tree", function (evt) {
+        evt.stopPropagation();
+      });
+    };
+
+    CopyMoveView.prototype.template = function () {
+      return copyMoveViewTemplate;
+    };
+
+    CopyMoveView.prototype._handleModeChange = function (evt) {
+      this.controller.setMode(this.tabs.selectedChild.dataset.mode);
+    };
+
+    CopyMoveView.prototype._handleClick = function (evt) {
+      var action = this.controller[evt.target.dataset.action];
+      if (typeof action === "function") {
+        action.call(this.controller, evt.target.dataset);
+      }
+    };
+
+    return CopyMoveView;
+  })(View);
+
+  exports["default"] = CopyMoveView;
+});

gaia/distros/spark/apps/customizer/js/views/edit.js

@@ -0,0 +1,171 @@
+define(["exports"], function (exports) {
+  "use strict";
+
+  var _extends = function (child, parent) {
+    child.prototype = Object.create(parent.prototype, {
+      constructor: {
+        value: child,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    child.__proto__ = parent;
+  };
+
+  /* global View */
+
+  /* global esprima */
+  /* global html_beautify */
+
+  var editViewTemplate = "<gaia-modal>\n  <style scoped>\n    .gaia-modal {\n      background: var(--background, #fff);\n      display: none;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n    .gaia-modal.active {\n      display: block;\n    }\n    .tab-pane {\n      box-sizing: border-box;\n      display: none;\n      position: absolute;\n      top: 96px;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n    .tab-pane.active {\n      display: block;\n    }\n    textarea,\n    input {\n      -moz-user-select: text !important;\n    }\n    textarea,\n    gaia-tabs,\n    .tab-pane {\n      background: #000;\n      color: #fff;\n    }\n    fxos-code-editor {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    .errors {\n      background: #e51e1e;\n      color: #fff;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 20px;\n      overflow: hidden;\n      z-index: 2;\n      opacity: 0;\n      transition: opacity 0.2s ease;\n      pointer-events: none;\n    }\n    .errors.active {\n      opacity: 1;\n    }\n    .errors.active + fxos-code-editor {\n      height: calc(100% - 20px);\n    }\n  </style>\n  <gaia-header>\n    <button aria-hidden=\"true\" data-action=\"cancel\" data-icon=\"close\"></button>\n    <h1>Edit</h1>\n    <button data-action=\"save\">Save</button>\n  </gaia-header>\n  <gaia-tabs selected=\"0\">\n    <a href=\"#\">HTML</a>\n    <a href=\"#\">Script</a>\n    <a href=\"#\">Properties</a>\n  </gaia-tabs>\n  <section class=\"tab-pane active\" data-id=\"html\">\n    <fxos-code-editor></fxos-code-editor>\n  </section>\n  <section class=\"tab-pane\" data-id=\"script\">\n    <div class=\"errors\"></div>\n    <fxos-code-editor></fxos-code-editor>\n  </section>\n  <section class=\"tab-pane\" data-id=\"properties\">\n    <fxos-inspector></fxos-inspector>\n  </section>\n</gaia-modal>";
+
+  var EditView = (function (View) {
+    var EditView = function EditView(options) {
+      View.call(this, options);
+
+      this.el.className = "fxos-customizer-edit-view";
+
+      this.render();
+    };
+
+    _extends(EditView, View);
+
+    EditView.prototype.init = function (controller) {
+      var _this = this;
+      View.prototype.init.call(this, controller);
+
+      this.modal = this.$("gaia-modal");
+      this.header = this.$("gaia-header");
+      this.tabs = this.$("gaia-tabs");
+
+      this.htmlCodeEditor = this.$("section[data-id=\"html\"] > fxos-code-editor");
+      this.scriptCodeEditor = this.$("section[data-id=\"script\"] > fxos-code-editor");
+      this.propertyInspector = this.$("section[data-id=\"properties\"] > fxos-inspector");
+
+      this.scriptErrors = this.$("section[data-id=\"script\"] > .errors");
+
+      this.tabPanes = [].slice.apply(this.$$(".tab-pane"));
+
+      this.on("click", "button[data-action=\"cancel\"]", function () {
+        _this.controller.close();
+      });
+
+      this.on("click", "button[data-action=\"save\"]", function () {
+        _this.controller.save();
+      });
+
+      this.tabs.addEventListener("change", function () {
+        _this.tabPanes.forEach(function (tabPane, index) {
+          if (index === _this.tabs.selected) {
+            tabPane.classList.add("active");
+          } else {
+            tabPane.classList.remove("active");
+          }
+        });
+      });
+
+      this.htmlCodeEditor.addEventListener("change", function () {
+        _this.controller.changes.innerHTML = _this.htmlCodeEditor.value;
+      });
+
+      this.scriptCodeEditor.addEventListener("change", function () {
+        _this.controller.changes.script = _this.scriptCodeEditor.value;
+
+        clearTimeout(_this.validateScriptTimeout);
+        _this.validateScriptTimeout = setTimeout(_this.validateScript.bind(_this), 2000);
+      });
+
+      this.scriptCodeEditor.addEventListener("touchstart", function () {
+        clearTimeout(_this.validateScriptTimeout);
+      });
+
+      this.scriptCodeEditor.addEventListener("touchend", function () {
+        clearTimeout(_this.validateScriptTimeout);
+        _this.validateScriptTimeout = setTimeout(_this.validateScript.bind(_this), 2000);
+      });
+
+      this.propertyInspector.addEventListener("createattribute", function (evt) {
+        var detail = JSON.parse(evt.detail);
+
+        _this.controller.changes.createAttributes = _this.controller.changes.createAttributes || {};
+        _this.controller.changes.createAttributes[detail.expression] = detail.name;
+      });
+
+      this.propertyInspector.addEventListener("removeattribute", function (evt) {
+        var detail = JSON.parse(evt.detail);
+
+        _this.controller.changes.removeAttributes = _this.controller.changes.removeAttributes || {};
+        _this.controller.changes.removeAttributes[detail.expression] = detail.name;
+      });
+
+      this.propertyInspector.addEventListener("save", function (evt) {
+        var detail = JSON.parse(evt.detail);
+
+        _this.controller.changes.properties = _this.controller.changes.properties || {};
+        _this.controller.changes.properties[detail.expression] = detail.value;
+      });
+
+      this.el.addEventListener("contextmenu", function (evt) {
+        evt.stopPropagation();
+      });
+    };
+
+    EditView.prototype.template = function () {
+      return editViewTemplate;
+    };
+
+    EditView.prototype.open = function () {
+      this.modal.open();
+    };
+
+    EditView.prototype.close = function () {
+      this.modal.close();
+    };
+
+    EditView.prototype.setTarget = function (target) {
+      var _this2 = this;
+      var clonedTarget = target.cloneNode(true);
+      var html = clonedTarget.innerHTML.trim();
+
+      this.htmlCodeEditor.value = "Loading...";
+
+      setTimeout(function () {
+        html = html_beautify(html, {
+          indent_size: 2
+        });
+
+        _this2.htmlCodeEditor.value = html;
+      }, 1);
+
+      this.scriptCodeEditor.value = "/**\n * You can edit a script to be inserted\n * in the generated add-on here.\n *\n * Globals:\n *   selector [String]\n *   el       [HTMLElement]\n *   mo       [MutationObserver]\n */\n\n//el.addEventListener('click', function(evt) {\n//  alert('Clicked!');\n//});\n";
+
+      this.propertyInspector.setRootTarget(clonedTarget);
+    };
+
+    EditView.prototype.validateScript = function () {
+      var error;
+
+      try {
+        var syntax = esprima.parse(this.controller.changes.script);
+        if (syntax.errors && syntax.errors.length > 0) {
+          error = syntax.errors[0];
+        }
+      } catch (e) {
+        error = e;
+      }
+
+      if (error) {
+        this.scriptErrors.textContent = error.message;
+        this.scriptErrors.classList.add("active");
+      } else {
+        this.scriptErrors.textContent = "";
+        this.scriptErrors.classList.remove("active");
+      }
+    };
+
+    return EditView;
+  })(View);
+
+  exports["default"] = EditView;
+});

gaia/distros/spark/apps/customizer/js/views/view_source.js

@@ -0,0 +1,69 @@
+define(["exports"], function (exports) {
+  "use strict";
+
+  var _extends = function (child, parent) {
+    child.prototype = Object.create(parent.prototype, {
+      constructor: {
+        value: child,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    child.__proto__ = parent;
+  };
+
+  /* global View */
+
+  var viewSourceViewTemplate = "\n<style scoped>\ngaia-modal {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\ngaia-header {\n  height: 40px;\n  border-bottom: solid white 1px;\n}\npre {\n  background: #000;\n  color: #fff;\n  font-family: Consolas,Monaco,\"Andale Mono\",monospace;\n  font-size: 14px;\n  line-height: 1.2em;\n  position: absolute;\n  top: 50px;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 50px);\n  overflow: scroll;\n  padding: 5px;\n}\n</style>\n<gaia-modal>\n  <gaia-header>\n    <button data-action=\"close\">Close</button>\n    <h1>Source View</h1>\n  </gaia-header>\n  <pre>\n  </pre>\n</gaia-modal>";
+
+  var ViewSourceView = (function (View) {
+    var ViewSourceView = function ViewSourceView(options) {
+      View.call(this, options);
+      this.el.className = "fxos-customizer-view-source-view";
+      this.render();
+    };
+
+    _extends(ViewSourceView, View);
+
+    ViewSourceView.prototype.init = function (controller) {
+      var _this = this;
+      View.prototype.init.call(this, controller);
+
+      this.modal = this.$("gaia-modal");
+      this.title = this.$("h1");
+      this.pre = this.$("pre");
+
+      this.on("click", "button", function (evt) {
+        var action = _this.controller[evt.target.dataset.action];
+        if (typeof action === "function") {
+          action.call(_this.controller, evt.target.dataset);
+        }
+      });
+    };
+
+    ViewSourceView.prototype.template = function () {
+      return viewSourceViewTemplate;
+    };
+
+    ViewSourceView.prototype.setTitle = function (title) {
+      this.title.textContent = title;
+    };
+
+    ViewSourceView.prototype.setSource = function (source) {
+      this.pre.textContent = source;
+    };
+
+    ViewSourceView.prototype.open = function () {
+      this.modal.open();
+    };
+
+    ViewSourceView.prototype.close = function () {
+      this.modal.close();
+    };
+
+    return ViewSourceView;
+  })(View);
+
+  exports["default"] = ViewSourceView;
+});