Merge pull request #19479 from EverythingMe/gaia-menu-component

Bug 1013842 - Create gaia-menu Web Component [r=kgrandon]
mozilla-b2g · May 21, 2014 · 786c7d0 · 786c7d0
2 parents fda2537 + 2c7455a
commit 786c7d0
Show file tree

Hide file tree

Showing 18 changed files with 502 additions and 0 deletions.
diff --git a/apps/sharedtest/test/unit/elements/gaia_menu/gaia_menu_test.js b/apps/sharedtest/test/unit/elements/gaia_menu/gaia_menu_test.js
@@ -0,0 +1,40 @@
+'use strict';
+
+require('/shared/elements/gaia_menu/script.js');
+
+suite('GaiaMenu', function() {
+  setup(function() {
+    this.container = document.createElement('div');
+    this.container.innerHTML =
+      '<gaia-menu>' +
+        '<header>title</header>' +
+        '<button>button1</button>'+
+        '<button>button2</button>'+
+      '</gaia-menu>';
+    this.element = this.container.firstElementChild;
+  });
+
+  test('Content is populated', function() {
+
+    // Validate header
+    var headers = this.element.querySelectorAll('header');
+    assert.equal(headers.length, 1);
+    assert.equal(headers[0].textContent, 'title');
+
+    // Validate button
+    var buttons = this.element.querySelectorAll('button');
+    assert.equal(buttons.length, 2);
+
+    // Validate a 'cancel' button was added
+    var cancelButton = this.element.shadowRoot.querySelector('button');
+    assert.equal(cancelButton.textContent, 'Cancel');
+  });
+
+  test('Cancel event is dispatched', function(done) {
+    this.element.addEventListener('gaiamenu-cancel', function(e) {
+      done();
+    });
+
+    this.element.shadowRoot.querySelector('button').click();
+  });
+});
diff --git a/shared/elements/gaia_menu/examples/example.js b/shared/elements/gaia_menu/examples/example.js
@@ -0,0 +1,8 @@
+'use strict';
+
+(function() {
+  var menu = document.getElementById('menu');
+  menu.addEventListener('gaiamenu-cancel', function () {
+    alert('Cancelled');
+  });
+})();
diff --git a/shared/elements/gaia_menu/examples/index.html b/shared/elements/gaia_menu/examples/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GaiaMenu Demo</title>
+  <meta name="description" content="Demo app for gaia-menu">
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+    }
+  </style>
+  <script>window.GaiaMenuBaseurl = '../';</script>
+  <script src="../script.js"></script>
+  <script defer src="example.js"></script>
+</head>
+<body role="application">
+  <gaia-menu id="menu">
+    <header>Gaia Menu Header</header>
+    <button>Button 1</button>
+    <button>Button 2</button>
+    <button>Button 3</button>
+  </gaia-menu>
+</body>
+</html>
diff --git a/shared/elements/gaia_menu/images/icons/back.png b/shared/elements/gaia_menu/images/icons/back.png
diff --git a/shared/elements/gaia_menu/images/icons/back@1.5x.png b/shared/elements/gaia_menu/images/icons/back@1.5x.png
diff --git a/shared/elements/gaia_menu/images/icons/back@2.25x.png b/shared/elements/gaia_menu/images/icons/back@2.25x.png
diff --git a/shared/elements/gaia_menu/images/icons/back@2x.png b/shared/elements/gaia_menu/images/icons/back@2x.png
diff --git a/shared/elements/gaia_menu/images/icons/close.png b/shared/elements/gaia_menu/images/icons/close.png
diff --git a/shared/elements/gaia_menu/images/icons/close@1.5x.png b/shared/elements/gaia_menu/images/icons/close@1.5x.png
diff --git a/shared/elements/gaia_menu/images/icons/close@2.25x.png b/shared/elements/gaia_menu/images/icons/close@2.25x.png
diff --git a/shared/elements/gaia_menu/images/icons/close@2x.png b/shared/elements/gaia_menu/images/icons/close@2x.png
diff --git a/shared/elements/gaia_menu/images/ui/alpha.png b/shared/elements/gaia_menu/images/ui/alpha.png
diff --git a/shared/elements/gaia_menu/images/ui/default.png b/shared/elements/gaia_menu/images/ui/default.png
diff --git a/shared/elements/gaia_menu/images/ui/gradient.png b/shared/elements/gaia_menu/images/ui/gradient.png
diff --git a/shared/elements/gaia_menu/images/ui/pattern.png b/shared/elements/gaia_menu/images/ui/pattern.png
diff --git a/shared/elements/gaia_menu/images/ui/separator.png b/shared/elements/gaia_menu/images/ui/separator.png
diff --git a/shared/elements/gaia_menu/script.js b/shared/elements/gaia_menu/script.js
@@ -0,0 +1,48 @@
+'use strict';
+
+window.GaiaMenu = (function(win) {
+  // Extend from HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  // Allow baseurl to be overridden (used for demo page)
+  var baseurl = window.GaiaMenuBaseurl ||
+    'shared/elements/gaia_menu/';
+
+  proto.createdCallback = function () {
+    var shadow = this.createShadowRoot();
+    this._template = template.content.cloneNode(true);
+    this._styleHack();
+
+    var cancelButton = this._template.querySelector('.gaia-menu-cancel');
+
+    cancelButton.addEventListener('click', function () {
+      this.dispatchEvent(new CustomEvent('gaiamenu-cancel'));
+    }.bind(this));
+
+    shadow.appendChild(this._template);
+  };
+
+  proto._styleHack = function() {
+    var style = this._template.querySelector('style');
+    this.appendChild(style.cloneNode(true));
+  };
+
+  var stylesheet = baseurl + 'style.css';
+  var template = document.createElement('template');
+
+  template.innerHTML =
+    '<style scoped>' +
+      '@import url(' + stylesheet + ');' +
+    '</style>' +
+    '<form role="dialog" data-type="action">' +
+      '<content select="header"></content>' +
+      '<menu>' +
+        '<content select="button"></content>' +
+        '<button data-l10n="cancel" class="gaia-menu-cancel">Cancel</button>' +
+      '</menu>' +
+    '</form>';
+
+  // Register and return the constructor
+  return document.registerElement('gaia-menu', { prototype: proto });
+
+})(window);