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_pin_card/examples/example.js

@@ -0,0 +1,17 @@
+/* globals GaiaPinCard */
+
+'use strict';
+
+(function() {
+  var pinCard = new GaiaPinCard();
+  pinCard.background = {
+    src: '../images/default_icon.png'
+  };
+  pinCard.title = 'Long pin title lorem ipsum lorem ipsum lorem ipsum';
+  document.body.appendChild(pinCard);
+
+  var pinCard2 = new GaiaPinCard();
+  pinCard2.title = 'Long pin title lorem ipsum lorem ipsum lorem ipsum';
+  pinCard2.description = 'Long pin description lorem ipsum lorem ipsum';
+  document.body.appendChild(pinCard2);
+})();

gaia/shared/elements/gaia_pin_card/examples/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GaiaPinCard Demo</title>
+  <meta name="description" content="Demo app for gaia-menu">
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+    }
+
+    body > * {
+      float: left;
+      margin: 1rem 1rem;
+    }
+  </style>
+  <script src="../../../js/component_utils.js"></script>
+  <script>window.GaiaPinCardBaseurl = '../';</script>
+  <script src="../script.js"></script>
+  <script defer src="example.js"></script>
+</head>
+<body role="application">
+</body>
+</html>

gaia/shared/elements/gaia_pin_card/script.js

@@ -0,0 +1,143 @@
+/* global ComponentUtils */
+
+/**
+ * The GaiaPinCard component is a helper to include
+ * pinned pages on any view inside gaia
+ */
+window.GaiaPinCard = (function(win) {
+  'use strict';
+
+  // Extend from the HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  var DEFAULT_COLOR = [77, 77, 77];
+
+  // Allow baseurl to be overridden (used for demo page)
+  var baseurl = window.GaiaPinCardBaseurl ||
+    '/shared/elements/gaia_pin_card/';
+
+  proto.createdCallback = function(test) {
+    var shadow = this.createShadowRoot();
+
+    this._template = template.content.cloneNode(true);
+    this.container = this._template.querySelector('.pin-card');
+    this.bgElement = this._template.querySelector('.background');
+    this.descElement = this._template.querySelector('.description');
+    this.titleElement = this._template.querySelector('header');
+    this.iconElement = this._template.querySelector('i');
+    this._background = {};
+
+    shadow.appendChild(this._template);
+
+    ComponentUtils.style.call(this, baseurl);
+  };
+
+  Object.defineProperty(proto, 'background', {
+    get: function() {
+      return this._background;
+    },
+    set: function(background) {
+      var bgSrc = background.src ? 'url(' + background.src + ')' : '';
+      this._background = background;
+      this.bgElement.style.backgroundImage = bgSrc;
+      this.bgElement.style.backgroundColor = background.themeColor || '#4d4d4d';
+      var opacity = background.themeColor ? '0.30' : '0.15';
+      var computedStyle = window.getComputedStyle(this.bgElement);
+      var colorCodes;
+
+      try {
+        colorCodes = getColorCodes(computedStyle.backgroundColor);
+      } catch (error) {
+        colorCodes = DEFAULT_COLOR;
+        opacity = 0.15;
+      }
+
+      // Adding opacity to the background color
+      var rgbaColor = colorCodes.slice(1).join(',') + ', ' + opacity;
+      var bgColorRgba = 'rgba(' + rgbaColor + ')';
+      var computedWidth = computedStyle.width;
+      var width = computedWidth === 'auto' ? '140px' : computedWidth;
+      var shadow = 'inset 0 0 0 ' + width;
+      this.bgElement.style.boxShadow = shadow + ' ' + bgColorRgba;
+    }
+  });
+
+  Object.defineProperty(proto, 'meta', {
+    get: function() {
+      return this._meta;
+    },
+    set: function(meta) {
+      this._meta = meta;
+      this.renderCard();
+    }
+  });
+
+  Object.defineProperty(proto, 'title', {
+    get: function() {
+      return this.titleElement.textContent;
+    },
+    set: function(title) {
+      this.titleElement.textContent = title;
+    }
+  });
+
+  Object.defineProperty(proto, 'icon', {
+    get: function() {
+      return this.iconElement.style.backgroundImage;
+    },
+    set: function(icon) {
+      this.iconElement.style.backgroundImage = icon;
+    }
+  });
+
+  proto.renderCard = function() {
+    var description = getDescription(this._meta);
+    if (description) {
+      this.descElement.appendChild(description);
+      this.container.classList.remove('no-content');
+    }
+
+    var background = getBackgroundBlob(this._meta);
+    if (background) {
+      this.background = {
+        src: URL.createObjectURL(background),
+        themeColor: this._meta['theme-color'] || null
+      };
+    }
+  };
+
+  var template = document.createElement('template');
+  template.innerHTML =
+    `<article class="pin-card no-content">
+      <div class="icon-container">
+        <i></i>
+      </div>
+      <div class="background"></div>
+      <div class="content">
+        <header></header>
+        <section class="description"></section>
+      </div>
+    </article>`;
+
+  function getColorCodes(color) {
+    var colorCodes = /rgb\((\d+), (\d+), (\d+)\)/.exec(color);
+    return colorCodes;
+  }
+
+  function getDescription(meta) {
+    if (!meta['og:description']) {
+      return false;
+    }
+
+    var desc = document.createElement('p');
+    desc.textContent = meta['og:description'];
+    return desc;
+  }
+
+  function getBackgroundBlob(meta) {
+    return meta['og:image'] || meta.screenshot;
+  }
+
+  // Register and return the constructor
+  return document.registerElement('gaia-pin-card', { prototype: proto });
+})(window);

gaia/shared/elements/gaia_pin_card/style.css

@@ -0,0 +1,99 @@
+.pin-card {
+  position: relative;
+  box-sizing: border-box;
+  background-color: #fff;
+  background-size: cover;
+  color: #000;
+  font-weight: 500;
+  font-family: sans-serif;
+  line-height: normal;
+  white-space: normal;
+  font-size: 1.2rem;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+}
+
+.pin-card > * {
+  pointer-events: none;
+}
+
+.pin-card .background {
+  position: relative;
+  width: 100%;
+  height: 47%;
+  opacity: 0.7;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  background-size: cover;
+}
+
+.pin-card i {
+  position: absolute;
+  top: .15rem;
+  left: .15rem;
+  width: 3.03rem;
+  height: 3.03rem;
+  background: url(images/default_icon.png);
+  background-size: 3.5rem 3.5rem;
+  background-position: center center;
+  border-radius: 50%;
+}
+
+.icon-container {
+  position: absolute;
+  top: 4.8rem;
+  display: block;
+  overflow: hidden;
+  left: calc(50% - 1.65rem);
+  width: 3.33rem;
+  height: 3.33rem;
+  border-radius: 50%;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  background-color: white;
+  z-index: 1;
+}
+
+.pin-card .content {
+  position: relative;
+  height: 53%;
+  width: 100%;
+}
+
+.pin-card header {
+  position: relative;
+  height: 1.6rem;
+  color: #5f5f5f;
+  font-size: 1.4rem;
+  font-style: italic;
+  padding: 0 0.8rem;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+  top: 1.5rem;
+}
+
+.pin-card.no-content header {
+  top: 2.5rem;
+}
+
+.pin-card.no-content .description {
+  display: none;
+}
+
+.pin-card .description p {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  text-align: left;
+  height: 3rem;
+  line-height: 1.4rem;
+  font-size: 1.2rem;
+  font-weight: 300;
+  color: #5f5f5f;
+  padding: 0 0.8rem;
+  margin: 2rem 0;
+}
+