Bug 1122431 - merge pull request #29286 from sean2449:Bug_1122431-dia…

…log-box to mozilla-b2g:master

tv_apps/smart-system/bower.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "evt": "gaia-components/evt#~0.4.0",
     "smart-button": "gaia-components/smart-button",
-    "smart-banner": "gaia-components/smart-banner"
+    "smart-banner": "gaia-components/smart-banner",
+    "smart-bubbles": "smart-components/smart-bubbles",
+    "smart-dialog": "smart-components/smart-dialog"
   }
 }

tv_apps/smart-system/bower_components/smart-bubbles/.bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "smart-bubbles",
+  "homepage": "https://github.com/smart-components/smart-bubbles",
+  "main": "script.js",
+  "license": "MPL",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "examples",
+    "LICENSE",
+    "README.md"
+  ],
+  "_release": "600518ce80",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "600518ce807d8f8cddc0d0553f61738698df98b8"
+  },
+  "_source": "git://github.com/smart-components/smart-bubbles.git",
+  "_target": "*",
+  "_originalSource": "smart-components/smart-bubbles",
+  "_direct": true
+}

tv_apps/smart-system/bower_components/smart-bubbles/bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "smart-bubbles",
+  "version": "0.0.0",
+  "homepage": "https://github.com/smart-components/smart-bubbles",
+  "main": "script.js",
+  "license": "MPL",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "examples",
+    "LICENSE",
+    "README.md"
+  ]
+}

tv_apps/smart-system/bower_components/smart-bubbles/script.js

@@ -0,0 +1,74 @@
+'use strict';
+
+window.SmartBubbles = (function(win) {
+
+  var DEFAULT_INTERVAL = 100;
+
+  // Extend from the HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  proto.fireEvent = function(event, detail) {
+    var evtObject = new CustomEvent(event, {
+                                      bubbles: false,
+                                      detail: detail || this
+                                    });
+    this.dispatchEvent(evtObject);
+  };
+
+  proto.handleEvent = function(evt) {
+    switch(evt.type) {
+      case 'animationend':
+        evt.currentTarget.classList.remove('smart-bubble-playing');
+        evt.currentTarget.classList.add('smart-bubble-stopped');
+        window.getComputedStyle(evt.currentTarget).animationName;
+        evt.currentTarget.classList.remove('smart-bubble-stopped');
+        window.getComputedStyle(evt.currentTarget).animationName;
+
+        this.fireEvent('item-bubbled', ++this._finishedAnimationCount);
+        if (this._targetAnimationCount === this._finishedAnimationCount) {
+          this.playing = false;
+          this._elements = null;
+          this.fireEvent('all-items-bubbled');
+        }
+        evt.currentTarget.removeEventListener('animationend', this);
+        break;
+    }
+  };
+
+  proto.play = function(elements) {
+    this.stopImmediately();
+    this._elements = elements;
+    this._finishedAnimationCount = 0;
+    this._targetAnimationCount = 0;
+    var interval = parseInt(this.getAttribute('interval'), 10) ||
+                   DEFAULT_INTERVAL;
+    [].forEach.call(elements, function(elem) {
+      this._targetAnimationCount++;
+      var delay = this._targetAnimationCount * interval / 1000;
+      elem.classList.add('smart-bubble-playing');
+      elem.style.animationDelay = delay + 's';
+      elem.addEventListener('animationend', this);
+    }.bind(this));
+    this.playing = true;
+  };
+
+  proto.stopImmediately = function() {
+    if (!this.playing || !this._elements) {
+      return;
+    }
+    [].forEach.call(this._elements, function(elem) {
+      elem.classList.remove('smart-bubble-playing');
+      elem.classList.add('smart-bubble-stopped');
+      elem.removeEventListener('animationend', this);
+      // use getComputedStyle to force flushing re-style
+      window.getComputedStyle(elem).animationName;
+      elem.classList.remove('smart-bubble-stopped');
+    }.bind(this));
+    this._elements = null;
+    this.playing = false;
+    this.fireEvent('all-items-stopped');
+  };
+
+  // Register and return the constructor
+  return document.registerElement('smart-bubbles', { prototype: proto });
+})(window);

tv_apps/smart-system/bower_components/smart-bubbles/style.css

@@ -0,0 +1,18 @@
+*[smart-bubbles="true"] .smart-bubble-playing {
+  transition-property: none;
+  transform: none;
+  animation: bubble-animation .5s cubic-bezier(0.25, 0, 0, 1);
+  animation-fill-mode: backwards;
+}
+
+*[smart-bubbles="true"] .smart-bubble-stopped {
+  transition-property: none;
+  transform: none;
+  animation: none;
+}
+
+@keyframes bubble-animation {
+  0%   {opacity: 0; transform: translateY(8rem);}
+  50%  {opacity: 1;}
+  100% {transform: translateY(0);}
+}

tv_apps/smart-system/bower_components/smart-dialog/.bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "smart-dialog",
+  "homepage": "https://github.com/smart-components/smart-dialog",
+  "main": "script.js",
+  "license": "MPL",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "examples",
+    "LICENSE",
+    "README.md"
+  ],
+  "_release": "8910d99b8f",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "8910d99b8fb7c624b32ac494fea63c0898e886df"
+  },
+  "_source": "git://github.com/smart-components/smart-dialog.git",
+  "_target": "*",
+  "_originalSource": "smart-components/smart-dialog",
+  "_direct": true
+}

tv_apps/smart-system/bower_components/smart-dialog/bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "smart-dialog",
+  "version": "0.0.0",
+  "homepage": "https://github.com/smart-components/smart-dialog",
+  "main": "script.js",
+  "license": "MPL",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "examples",
+    "LICENSE",
+    "README.md"
+  ]
+}

tv_apps/smart-system/bower_components/smart-dialog/script.js

@@ -0,0 +1,120 @@
+/**
+ * Smart-Dialog
+ *   - Event:
+ *       1. will-open
+ *       2. opened
+ *       3. will-close
+ *       4. closed
+ *   - API:
+ *       1. open - open a smart-dialog: closed -> opening -> opened
+ *       2. close - close a smart-dialog: opened -> closing -> closed
+ *   - Attribute:
+ *       1. title - title of the smart-dialog
+ *       2. esc-close - close dialog when ESC key is clicked (default true).
+ * Default scale: 1920x1080 (2*sqrt(960*960 + 1080*1080) / 20 = 144.5)
+ */
+
+window.SmartDialog = (function(win) {
+  'use strict';
+
+  // The value of openDuration and closeDuration should be the same as
+  // transitionDuration in opening and closing css class.
+  const openDuration = 1000;
+  const closeDuration = 650;
+
+  // Extend from the HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  proto.createdCallback = function sd_createdCallback() {
+    this.addEventListener('transitionend', this);
+    document.addEventListener('keyup', this);
+    this.transitionTimer = null;
+    this.classList.add('closed');
+    if (this.hasAttribute('background-color')) {
+      this.style.backgroundColor = this.getAttribute('background-color');
+    }
+  };
+
+  proto._onOpened = function sd_onOpened() {
+    this.classList.remove('opening');
+    this.classList.add('opened');
+    this.fireEvent('opened');
+  };
+
+  proto._onClosed = function sd_onClosed() {
+    this.classList.remove('closing');
+    this.classList.add('closed');
+    this.fireEvent('closed');
+  };
+
+  proto.open = function sd_open() {
+    if (this.classList.contains('opened') ||
+        this.classList.contains('opening')) {
+      return;
+    }
+    this.fireEvent('will-open');
+    this.classList.remove('closing');
+    this.classList.remove('closed');
+    this.classList.add('opening');
+    // handle the case when transitionend event is not fired
+    clearTimeout(this.transitionTimer);
+    this.transitionTimer = setTimeout(function() {
+      this._onOpened();
+      this.transitionTimer = null;
+    }.bind(this), openDuration);
+  };
+
+  proto.close = function sd_close() {
+    if (this.classList.contains('closed') ||
+        this.classList.contains('closing')) {
+      return;
+    }
+    this.fireEvent('will-close');
+    this.classList.remove('opening');
+    this.classList.remove('opened');
+    this.classList.add('closing');
+    // handle the case when transitionend event is not fired
+    clearTimeout(this.transitionTimer);
+    this.transitionTimer = setTimeout(function() {
+      this._onClosed();
+      this.transitionTimer = null;
+    }.bind(this), closeDuration);
+  };
+
+  proto.handleEvent = function sd_handleEvent(evt) {
+
+    switch(evt.type) {
+      case 'transitionend':
+        if (evt.target === this && this.transitionTimer) {
+          if (this.classList.contains('opening')) {
+            this._onOpened();
+          } else if (this.classList.contains('closing')) {
+            this._onClosed();
+          }
+          clearTimeout(this.transitionTimer);
+          this.transitionTimer = null;
+        }
+        break;
+      case 'keyup':
+        // close dialog when ESC is clicked
+        if (this.getAttribute('esc-close') != 'false' &&
+            (evt.keyCode === 27 || evt.key === 'Esc') &&
+            this.classList.contains('opened')) {
+          this.close();
+        }
+        break;
+    }
+  };
+
+
+  proto.fireEvent = function sd_fireEvent(event, detail) {
+    var evtObject = new CustomEvent(event, {
+                                      bubbles: false,
+                                      detail: detail || this
+                                    });
+    this.dispatchEvent(evtObject);
+  };
+
+  // Register and return the constructor
+  return document.registerElement('smart-dialog', { prototype: proto });
+})(window);