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/tv_apps/weather-widget/bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "weather-widgets",
+  "version": "0.0.0",
+  "homepage": "https://github.com/mozilla-b2g/gaia/tree/master/tv_apps/weather-widget",
+  "description": "Weather Widget for Smart Dashboard",
+  "main": "widget.html",
+  "license": "MPL",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "smart-icons": "smart-components/smart-icons"
+  }
+}

gaia/tv_apps/weather-widget/bower_components/smart-icons/.bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "smart-icons",
+  "homepage": "https://github.com/smart-components/smart-icons",
+  "description": "Icon font for smart-screen",
+  "license": "MPL",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "templates",
+    "images",
+    "test",
+    "tests",
+    "index.html",
+    "Gruntfile.js",
+    "README.md",
+    "package.json"
+  ],
+  "_release": "2f16605d7c",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "2f16605d7c965c5d801149b9fed6598621342c54"
+  },
+  "_source": "git://github.com/smart-components/smart-icons.git",
+  "_target": "*",
+  "_originalSource": "smart-components/smart-icons"
+}

gaia/tv_apps/weather-widget/bower_components/smart-icons/bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "smart-icons",
+  "version": "0.0.0",
+  "homepage": "https://github.com/smart-components/smart-icons",
+  "description": "Icon font for smart-screen",
+  "license": "MPL",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "templates",
+    "images",
+    "test",
+    "tests",
+    "index.html",
+    "Gruntfile.js",
+    "README.md",
+    "package.json"
+  ]
+}

gaia/tv_apps/weather-widget/bower_components/smart-icons/smart-icons.css

@@ -0,0 +1,25 @@
+/* Generated by grunt-webfont */
+/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
+
+
+@font-face {
+  font-family: "smart-icons";
+  src: url("fonts/smart-icons.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+
+[data-icon]:before,
+.ligature-icons {
+  font-family: "smart-icons";
+  content: attr(data-icon);
+  display: inline-block;
+  font-weight: 500;
+  font-style: normal;
+  text-decoration: inherit;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  font-size: 30px;
+  -webkit-font-smoothing: antialiased;
+}

gaia/tv_apps/weather-widget/js/weather-widget.js

@@ -0,0 +1,37 @@
+/* globals SmartWeather, WeatherWidget */
+'use strict';
+(function(exports) {
+
+function WeatherWidget() {}
+
+WeatherWidget.prototype = {
+  elements: {},
+  clocks: [],
+  init: function sc_init() {
+    this.elements.panel = document.getElementById('panel');
+    this.clocks.push(new SmartWeather());
+    this.clocks.push(new SmartWeather());
+    this.clocks.forEach(function(clock) {
+      this.elements.panel.appendChild(clock);
+    }.bind(this));
+    this.elements.panel.dataset.count = this.clocks.length;
+
+    // XXX: we leave a focusable element here for determining focus issues.
+    // This wiget has no focusable element by design, but we need to test
+    // dashboard ability on setting focus. These lines should be removed after
+    // other widgets are landed.
+    this.clocks[0].tabIndex = 1;
+    this.clocks[0].focus();
+
+    window.onhashchange = function(evt) {
+      document.body.classList.toggle(
+                                  'expand', window.location.hash === '#expand');
+    };
+  }
+};
+
+exports.WeatherWidget = WeatherWidget;
+})(window);
+
+var weatherWidget = new WeatherWidget();
+weatherWidget.init();

gaia/tv_apps/weather-widget/manifest.webapp

@@ -0,0 +1,19 @@
+{
+  "name": "Weather Widget",
+  "type": "certified",
+  "launch_path": "/widget.html",
+  "role": "widget",
+  "widgets": {
+    "weather": {
+      "name": "Weather Widget",
+      "launch_path": "/widget.html",
+      "description": "widget for showing weather and world clock"
+    }
+  },
+  "widgetPages": [
+    "/widget.html"
+  ],
+  "icons": {
+    "128": "/style/icons/Blank.png"
+  }
+}

gaia/tv_apps/weather-widget/style/weather-widget.css

@@ -0,0 +1,89 @@
+/* Height: preview area 12rem; full size 44rem */
+
+html {
+  font-size: 10px;
+  /* We have Fira Sans as default font in real device. But it isn't default in
+   * browser. That's the main reason this line is here.*/
+  font-family: "Fira Sans";
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+#panel {
+  width: 32.6rem;
+  height: 44.2rem;
+  margin: 0 auto;
+  padding: 0 2.8rem 0 2.8rem;
+  position: relative;
+  box-sizing: border-box;
+}
+
+#panel[data-count="1"] {
+  width: 32.6rem;
+}
+
+#panel[data-count="2"] {
+  width: 59.6rem;
+}
+
+#panel[data-count="3"] {
+  width: 86.6rem;
+}
+
+#panel[data-count="4"] {
+  width: 113.6rem;
+}
+
+#panel[data-count="5"] {
+  width: 140.6rem;
+}
+
+.weather-icon-panel {
+  position: absolute;
+  left: 0;
+  top: 17.8rem;
+  height: 26.4rem;
+  width: 5.4rem;
+  color: white;
+}
+
+.weather-icon-panel > div {
+  width: 5.4rem;
+  height: 5.4rem;
+  margin-bottom: 1.2rem;
+}
+
+.weather-icon-panel > div:before {
+  font-size: 5.4rem;
+}
+
+smart-weather > .weather-detail,
+.weather-icon-panel {
+  transform: translateY(30px);
+  opacity: 0;
+  transition: transform 0.01s cubic-bezier(0.5, 0.0, 0.0, 1.0) 0.95s,
+              opacity 0.01s ease-in 0.95s;
+}
+
+.expand smart-weather > .weather-detail,
+.expand .weather-icon-panel {
+  transform: translateY(0);
+  opacity: 1;
+  transition-delay: 0s, 0s;
+  transition-duration: 1s, 0.8s;
+}
+
+/* XXX: we leave a focusable element here for determining focus issues.
+   This wiget has no focusable element by design, but we need to test
+   dashboard ability on setting focus. These lines should be removed after
+   other widgets are landed. */
+smart-weather:focus {
+  background-color: rgba(255,255,255, 0.1);
+  outline: none;
+}

gaia/tv_apps/weather-widget/web_components/smart-weather.css

@@ -0,0 +1,63 @@
+
+smart-weather {
+  width: 17rem;
+  height: 44.2rem;
+  overflow: visible;
+  position: relative;
+  margin: 0 5rem;
+  padding-top: 2rem;
+  content: ' ';
+  display: inline-block;
+}
+
+smart-weather > .clock {
+  margin: 0 4.7rem 2rem 4.7rem;
+  width: 7.4rem;
+  height: 7.4rem;
+  border-radius: 3.7rem;
+  background: white;
+  position: relative;
+}
+
+smart-weather .hour-hand, smart-weather .minute-hand {
+  width: 0.2rem;
+  position: absolute;
+  background-color: #323232;
+  left: calc(50% - 0.1rem);
+  top: 0;
+  transform-origin: 0.1rem calc(100% - 0.3rem);
+  outline: 1px solid transparent;
+}
+
+smart-weather .hour-hand {
+  height: 2.8rem;
+  top: 1.2rem;
+  transform-origin: 0.1rem calc(100% - 0.3rem);
+}
+
+smart-weather .minute-hand {
+  height: 3.4rem;
+  top: 0.8rem;
+  transform-origin: 0.1rem calc(100% - 0.5rem);
+}
+
+smart-weather > .city {
+  font-size: 2.8rem;
+  color: #ffffff;
+  text-align: center;
+  height: 4.6rem;
+}
+
+smart-weather > .weather-detail {
+  text-align: center;
+  color: #ffffff;
+  font-size: 2.2rem;
+  font-weight: 300;
+  border-top: 0.1rem solid #ffffff;
+}
+
+smart-weather > .weather-detail > div {
+  height: 2.4rem;
+  margin-top: 3.4rem;
+  margin-bottom: 4.2rem;
+}

gaia/tv_apps/weather-widget/web_components/smart-weather.js

@@ -0,0 +1,75 @@
+/* globals Clock */
+
+'use strict';
+(function(exports) {
+
+var proto = Object.create(HTMLElement.prototype);
+
+proto.createdCallback = function sw_createdCallBack() {
+  this.hands = {};
+  this.timeouts = {};
+  this.innerHTML = this._getView();
+
+  this.hands.min = this.getElementsByClassName('minute-hand')[0];
+  this.hands.hour = this.getElementsByClassName('hour-hand')[0];
+
+  this.clock = new Clock();
+};
+
+proto.attachedCallback = function sw_attachedCallback() {
+  this.clock.start(this.updateAnalogClock.bind(this));
+};
+
+proto.detachedCallback = function sw_detachedCallback() {
+  this.clock.stop();
+};
+
+proto._getView = function sw_getView() {
+  // TODO: Change the following fake data to real weather data.
+  var view = `
+    <section class="clock">
+      <div class='hour-hand'></div>
+      <div class='minute-hand'></div>
+    </section>
+    <section class="city">New York</section>
+    <section class="weather-detail">
+      <div>Partly Cloudy</div>
+      <div>17-24°C</div>
+        <div>70 %</div>
+        <div>7 mph</div>
+      </section>
+    </section>`;
+  return view;
+};
+
+proto.updateAnalogClock = function sw_updateAnalogClock(now) {
+  var min, hour;
+  min = now.getMinutes();
+  // hours progress gradually
+  hour = (now.getHours() % 12) + min / 60;
+  this.setTransform('min', min);
+  this.setTransform('hour', hour);
+};
+
+proto.setTransform = function sw_setTransform(id, angle) {
+  var hand = this.hands[id];
+  // return correct angle for different hands
+  function conv(timeFrag) {
+    var mult;
+    // generate a conformable number to rotate about
+    // 30 degrees per hour 6 per second and minute
+    mult = id === 'hour' ? 30 : 6;
+    // we generate the angle from the fractional sec/min/hour
+    return (timeFrag * mult);
+  }
+  // Use transform rotate on the rect itself vs on a child element
+  // avoids unexpected behavior if either dur and fill are set to defaults
+  // Use translateZ to force it on its own layer, which will invoke the GPU
+  // and thus do the minimum amount of work required (reduces power usage)
+  hand.style.transform = 'rotate(' + conv(angle) + 'deg) translateZ(1px)';
+};
+
+exports.SmartWeather =
+            document.registerElement('smart-weather', {prototype: proto});
+}(window));
+

gaia/tv_apps/weather-widget/widget.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <meta charset="utf-8">
+    <title>Dashboard</title>
+
+    <link rel="stylesheet" type="text/css" href="style/weather-widget.css">
+    <link rel="stylesheet" type="text/css" href="web_components/smart-weather.css">
+    <link rel="stylesheet" type="text/css" href="bower_components/smart-icons/smart-icons.css">
+
+
+    <!-- Shared L10n libraries -->
+    <script src="shared/js/l10n.js"></script>
+    <script src="shared/js/l10n_date.js"></script>
+    <script defer src="shared/js/smart-screen/clock.js"></script>
+    <script defer src="web_components/smart-weather.js"></script>
+    <script defer src="js/weather-widget.js"></script>
+
+
+    <!-- L10n properties -->
+    <meta name="defaultLanguage" content="en-US">
+    <meta name="availableLanguages" content="en-US">
+    <link rel="localization" href="locales/dashboard.{locale}.properties"/>
+    <link rel="localization" href="shared/locales/date/date.{locale}.properties"/>
+
+  </head>
+
+  <body>
+    <article id="panel" data-count="1">
+      <section class="weather-icon-panel">
+        <!-- TODO: Change the following icons to correct ones -->
+        <div class="forecast" data-icon="keyboard"></div>
+        <div class="air-temperature" data-icon="keyboard"></div>
+        <div class="humidity" data-icon="keyboard"></div>
+        <div class="wind-velocity" data-icon="keyboard"></div>
+      </section>
+    </article>
+  </body>
+
+</html>