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/dashboard/js/app_widget.js

@@ -0,0 +1,44 @@
+'use strict';
+
+(function(exports) {
+  function AppWidget(config) {
+    this.manifestURL = config.manifestURL;
+    this.widget = config.widget;
+    this.launchPath = config.url;
+    this.position = config.position;
+    this.isExpanded = false;
+
+    var browser = document.createElement('iframe');
+    // XXX: Change the following property and dashboard App permission to
+    // widget-specific one after widget path bug is fixed. See bug 1167063.
+    browser.setAttribute('mozbrowser', 'true');
+    browser.setAttribute('remote', 'true');
+    browser.setAttribute('mozapp', config.manifestURL);
+    browser.src = config.url;
+
+    this.iframe = browser;
+    this.container = document.getElementById(this.position + '-panel');
+    this.container.appendChild(this.iframe);
+  }
+
+  AppWidget.prototype = {
+    _setHash: function aw_setHash(hash) {
+      // Note: The '#' should always present to prevent reload
+      this.iframe.src = this.iframe.src.split('#')[0] + '#' + hash;
+    },
+
+    toggleExpand: function aw_setExpand(value) {
+      if(typeof value !== 'undefined') {
+        this.isExpanded = ! this.isExpanded;
+      } else {
+        this.isExpanded = value;
+      }
+      this._setHash(this.isExpanded ? 'expand' : '');
+    },
+
+    focus: function aw_focus() {
+      this.iframe.focus();
+    }
+  };
+  exports.AppWidget = AppWidget;
+}(window));

gaia/tv_apps/dashboard/js/bootstrap.js

@@ -0,0 +1,4 @@
+/* globals Dashboard */
+'use strict';
+window.dashboard = new Dashboard();
+window.dashboard.init();

gaia/tv_apps/dashboard/js/dashboard.js

@@ -0,0 +1,99 @@
+'use strict';
+/* global KeyNavigationAdapter, AppWidget, DigitalClock */
+
+(function(exports) {
+
+  function Dashboard () {}
+
+  Dashboard.prototype = {
+    init: function d_init() {
+      document.body.dataset.activeDirection = '';
+
+      this.elements = {};
+      this.elements.mainSection = document.getElementById('main-section');
+
+      this.keyNavigationAdapter = new KeyNavigationAdapter();
+      this.keyNavigationAdapter.on('move', this.onMove.bind(this));
+      this.keyNavigationAdapter.on('before-move', this.onMove.bind(this));
+      this.keyNavigationAdapter.init(window, {useMozBrowserKeyEvents: true});
+      document.addEventListener(
+              'visibilitychange', this.onVisibilityChange.bind(this));
+
+      this.widgets = {};
+      this.widgets.down = new AppWidget({
+        manifestURL: 'app://weather-widget.gaiamobile.org/manifest.webapp',
+        widget: 'weather',
+        url: 'app://weather-widget.gaiamobile.org/widget.html',
+        position: 'bottom'
+      });
+
+      this.digitalClock = new DigitalClock();
+      this.digitalClock.init();
+      this.digitalClock.start();
+    },
+
+    onVisibilityChange: function d_onVisibilityChange() {
+      if (document.visibilityState !== 'visible') {
+        this._clearActiveDirection();
+        document.body.classList.remove('active');
+      } else {
+        this.digitalClock.generateGreeting();
+        document.body.classList.add('active');
+      }
+    },
+
+    onMove: function d_onMove(key) {
+      var activeDirection = document.body.dataset.activeDirection;
+
+      switch (activeDirection) {
+        case 'up':
+          if (key === 'down') {
+            this._clearActiveDirection();
+          }
+          break;
+        case 'right':
+          if (key === 'left') {
+            this._clearActiveDirection();
+          }
+          break;
+        case 'down':
+          if (key === 'up') {
+            this._clearActiveDirection();
+          }
+          break;
+        case 'left':
+          if (key === 'right') {
+            this._clearActiveDirection();
+          }
+          break;
+        default:
+          document.body.dataset.activeDirection = key;
+          if (this.widgets[key]) {
+            this.widgets[key].toggleExpand(true);
+
+            this._holdFocus();
+            // Note: Gecko refuses to change focus on a key event callback. we
+            // need to setTimeout to prevent fail.
+            setTimeout(() => this.widgets[key].focus());
+          }
+          break;
+      }
+    },
+
+    _holdFocus: function() {
+      document.activeElement.blur();
+      this.elements.mainSection.focus();
+    },
+
+    _clearActiveDirection: function() {
+      var direction = document.body.dataset.activeDirection;
+      this.widgets[direction] && this.widgets[direction].toggleExpand(false);
+      document.body.dataset.activeDirection = '';
+      this._holdFocus();
+    }
+
+  };
+
+  exports.Dashboard = Dashboard;
+
+}(window));

gaia/tv_apps/dashboard/js/digital_clock.js

@@ -0,0 +1,138 @@
+'use strict';
+
+(function (exports) {
+
+  function DigitalClock () {
+    this.date = null;
+
+    this.timeoutId = null;
+
+    this.elements = {
+      'hours-tens-digit': document.getElementById('hours-tens-digit'),
+      'hours-units-digit': document.getElementById('hours-units-digit'),
+      'minutes-tens-digit': document.getElementById('minutes-tens-digit'),
+      'minutes-units-digit': document.getElementById('minutes-units-digit'),
+      'seconds-tens-digit': document.getElementById('seconds-tens-digit'),
+      'seconds-units-digit': document.getElementById('seconds-units-digit'),
+      'today': document.getElementById('today-is'),
+      'greeting': document.getElementById('greeting')
+    };
+  }
+
+  DigitalClock.prototype = {
+
+    init: function () {
+      this._initTime(new Date());
+    },
+
+    start: function () {
+      this._tick(this._update.bind(this));
+    },
+
+    stop: function () {
+      if (this.timeoutId) {
+        window.clearTimeout(this.timeoutId);
+        this.timeoutId = null;
+      }
+    },
+
+    /**
+     * Start ticking the clock.
+     * @param  {Function} refresh A callback to run on every tick.
+     */
+    _tick: function (refresh) {
+      var now = new Date();
+
+      refresh(now);
+
+      self.timeoutId = setTimeout(this._tick.bind(this, refresh),
+                                  1000 - now.getMilliseconds());
+    },
+
+    /**
+     * Init the time of the clock.
+     */
+    _initTime: function (date) {
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var seconds = date.getSeconds();
+
+      this.elements['hours-tens-digit'].textContent = Math.floor(hours / 10);
+      this.elements['hours-units-digit'].textContent = hours % 10;
+      this.elements['minutes-tens-digit'].textContent =
+        Math.floor(minutes / 10);
+      this.elements['minutes-units-digit'].textContent = minutes % 10;
+      this.elements['seconds-tens-digit'].textContent =
+        Math.floor(seconds / 10);
+      this.elements['seconds-units-digit'].textContent = seconds % 10;
+
+      this._changeDate(date);
+
+      this.date = date;
+    },
+
+    generateGreeting: function () {
+      var hours = this.date ? this.date.getHours() : (new Date()).getHours;
+      this.elements.greeting.dataset.l10nId = 'greeting-at-' + hours;
+    },
+
+    /**
+     * Update the display date and time.
+     * @param  {Date} date The Date to be displayed.
+     */
+    _update: function (date) {
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var seconds = date.getSeconds();
+
+      if (this.date.getHours() !== hours) {
+        this._changeTime('hours', this.date.getHours(), hours);
+      }
+
+      if (this.date.getMinutes() !== minutes) {
+        this._changeTime('minutes', this.date.getMinutes(), minutes);
+      }
+
+      this._changeTime('seconds', this.date.getSeconds(), seconds);
+
+      if (this.date.getDate() !== date.getDate()) {
+        this._changeDate(date);
+      }
+      this.date = date;
+    },
+
+    _changeTime: function(unit, oldValue, newValue) {
+      if (Math.floor(oldValue / 10) !== Math.floor(newValue / 10)) {
+        this._changeDigit(unit + '-tens-digit', Math.floor(newValue / 10));
+      }
+      this._changeDigit(unit + '-units-digit', newValue % 10);
+    },
+
+    /**
+     * Change the specified digit and handle the changing animations.
+     * @param  {String} position The position of the element.
+     * @param  {Number} digit    The number to be changed to.
+     */
+    _changeDigit: function (position, digit) {
+      // TODO: handle animations
+      this.elements[position].textContent = digit;
+    },
+
+    /**
+     * Change the display date using mozL10n.
+     * @param  {[Date} date The date to be displayed.
+     */
+    _changeDate: function (date) {
+      var dateTimeFormat = new navigator.mozL10n.DateTimeFormat();
+      navigator.mozL10n.formatValue('dateFormat').then(function (format) {
+        var formatted = dateTimeFormat.localeFormat(date, format);
+        this.elements.today.dataset.l10nArgs =
+          JSON.stringify({ 'date': formatted });
+      }.bind(this));
+    }
+
+  };
+
+  exports.DigitalClock = DigitalClock;
+
+})(window);