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/shared/elements/gaia_textinput/examples/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>GaiaInput Demo</title>
+  <meta name="description" content="Demo app for gaia-textinput" />
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+    section {
+      text-align: center;
+    }
+  </style>
+  <script>window.GaiaTextinputBaseurl = '../';</script>
+  <script src="../script.js"></script>
+</head>
+<body role="application">
+  <section>
+    <gaia-textinput placeholder="Here is a placeholder."></gaia-input>
+  </section>
+  <section>
+    <gaia-textinput value="Clear me." reset></gaia-input>
+  </section>
+</body>
+</html>

gaia/shared/elements/gaia_textinput/script.js

@@ -0,0 +1,71 @@
+window.GaiaTextinput = (function(win) {
+  'use strict';
+
+  // Extend from the HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  // Allow baseurl to be overridden (used for demo page)
+  var baseurl = window.GaiaTextinputBaseurl ||
+    '/shared/elements/gaia-textinput/';
+
+  proto.createdCallback = function() {
+    var shadow = this.createShadowRoot();
+    this._template = template.content.cloneNode(true);
+    this._input = this._template.getElementById('input');
+
+    if (this.getAttribute('value') !== null) {
+      this._input.value = this.getAttribute('value');
+    }
+
+    if (this.getAttribute('placeholder') !== null) {
+      this._input.placeholder = this.getAttribute('placeholder');
+    }
+
+    if (this.getAttribute('required')) {
+      this._input.required = '';
+    }
+
+    if (this.getAttribute('reset') !== null) {
+      var reset = document.createElement('button');
+      reset.id = 'input-reset';
+      reset.type = 'reset';
+      reset.textContent = 'Clear';
+      this._template.getElementById('gaia-text-input').appendChild(reset);
+
+      // Don't take focus from the input field
+      reset.addEventListener('mousedown', function(e) {
+        e.preventDefault();
+      });
+
+      reset.addEventListener('click', this.resetInput.bind(this));
+    }
+
+    shadow.appendChild(this._template);
+  };
+
+  proto.resetInput = function(e) {
+    e.target.previousElementSibling.value = '';
+    e.preventDefault();
+  };
+
+  // HACK: Create a <template> in memory at runtime.
+  // When the custom-element is created we clone
+  // this template and inject into the shadow-root.
+  // Prior to this we would have had to copy/paste
+  // the template into the <head> of every app that
+  // wanted to use <gaia-textinput>, this would make
+  // markup changes complicated, and could lead to
+  // things getting out of sync. This is a short-term
+  // hack until we can import entire custom-elements
+  // using HTML Imports (bug 877072).
+  var stylesheet = baseurl + 'style.css';
+  var template = document.createElement('template');
+  template.innerHTML = `<style scoped>
+    @import url(${stylesheet});</style>
+    <p id="gaia-text-input">
+      <input id="input" type="text">
+    </p>`;
+
+  // Register and return the constructor
+  return document.registerElement('gaia-textinput', { prototype: proto });
+})(window);

gaia/shared/elements/gaia_textinput/style.css

@@ -0,0 +1,95 @@
+/* ----------------------------------
+ * TEXT INPUT
+ * ---------------------------------- */
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+input[type="date"],
+textarea {
+  -moz-box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 4rem;
+  resize: none;
+  padding: 0 1.2rem;
+  font-size: 1.8rem;
+  line-height: 4rem;
+  border: 0.1rem solid #ccc;
+  border-radius: 0.3rem;
+  box-shadow: none; /* override the box-shadow from the system (performance issue) */
+  background: #fff url(input_areas/images/ui/shadow.png) repeat-x;
+}
+
+/* fix for required inputs with wrong or empty value e.g. [type=email] */
+input:invalid,
+textarea:invalid {
+  border: 0.1rem solid #820000;
+  color: #b90000;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #858585;
+  opacity: 1;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #858585;
+  opacity: 1;
+}
+
+input:focus {
+  padding-right: 3rem;
+}
+
+input:focus + button[type="reset"],
+textarea:focus + button[type="reset"],
+input:focus + button.reset,
+textarea:focus + button.reset {
+  opacity: 1;
+  pointer-events: all;
+}
+
+input + button[type="reset"],
+textarea + button[type="reset"],
+input + button.reset,
+textarea + button.reset {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 3rem;
+  height: 4rem;
+  padding: 0;
+  border: none;
+  font-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  background: transparent url(images/clear.png) no-repeat 50% 50% / 2.4rem auto;
+}
+
+.skin-dark input + button[type="reset"],
+.skin-dark textarea + button[type="reset"],
+.skin-dark input + button.reset,
+.skin-dark textarea + button.reset {
+  background-image: url(images/clear_dark.png);
+}
+
+input + button[type="reset"],
+textarea + button[type="reset"],
+input + button.reset,
+textarea + button.reset {
+  top: 0;
+  margin: 0;
+}
+
+#gaia-text-input {
+  position: relative;
+  margin: 0;
+}
+