Initial commit

component · May 4, 2012 · 4d5ba6a · 4d5ba6a
commit 4d5ba6a
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+test/*.js
+test/*.css
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+test
diff --git a/Makefile b/Makefile
@@ -0,0 +1,8 @@
+
+test/out.js: overlay.js overlay.css
+	component build package.json test/out
+
+clean:
+	rm -f test/out.{js,css}
+
+.PHONY: clean
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,31 @@
+
+# Emitter
+
+  Event emitter component.
+
+## Installation
+
+```
+$ npm install emitter-component
+```
+
+## API
+
+### Emitter#on(event, fn)
+
+  Register an `event` handler `fn`.
+
+### Emitter#once(event, fn)
+
+  Register a single-shot `event` handler `fn`,
+  removed immediately after it is invoked the
+  first time.
+
+### Emitter#off(event, fn)
+
+  Remove `event` handler `fn`, or pass only the `event`
+  name to remove all handlers for `event`.
+
+### Emitter#emit(event, ...)
+
+  Emit an `event` with variable option args.
diff --git a/overlay.css b/overlay.css
@@ -0,0 +1,16 @@
+#overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.75);
+  transition: opacity 300ms;
+  z-index: 500;
+}
+
+#overlay.hide {
+  pointer-events: none;
+  opacity: 0;
+}
diff --git a/overlay.html b/overlay.html
@@ -0,0 +1 @@
+<div id="overlay" class="hide"></div>
diff --git a/overlay.js b/overlay.js
@@ -0,0 +1,92 @@
+
+/**
+ * Module dependencies.
+ */
+
+var Emitter = require('emitter')
+  , $ = require('jquery');
+
+/**
+ * Expose `overlay()`.
+ */
+
+exports = module.exports = overlay;
+
+/**
+ * Expose `Overlay`.
+ */
+
+exports.Overlay = Overlay;
+
+/**
+ * Return a new `Overlay` with the given `options`.
+ *
+ * @param {Object} options
+ * @return {Overlay}
+ * @api public
+ */
+
+function overlay(options){
+  return new Overlay(options);
+};
+
+/**
+ * Initialize a new `Overlay`.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+function Overlay(options) {
+  Emitter.call(this);
+  var self = this;
+  options = options || {};
+  this.closable = options.closable;
+  this.el = $(render('overlay'));
+  this.el.appendTo('body');
+  if (this.closable) {
+    this.el.click(function(){
+      self.hide();
+    });
+  }
+}
+
+/**
+ * Inherits from `Emitter.prototype`.
+ */
+
+Overlay.prototype.__proto__ = Emitter.prototype;
+
+/**
+ * Show the overlay.
+ *
+ * Emits "show" event.
+ *
+ * @return {Overlay} for chaining
+ * @api public
+ */
+
+Overlay.prototype.show = function(){
+  this.emit('show');
+  this.el.removeClass('hide');
+  return this;
+};
+
+/**
+ * Hide the overlay.
+ *
+ * Emits "hide" event.
+ *
+ * @return {Overlay} for chaining
+ * @api public
+ */
+
+Overlay.prototype.hide = function(){
+  var self = this;
+  this.emit('hide');
+  this.el.addClass('hide');
+  setTimeout(function(){
+    self.el.remove();
+  }, 2000);
+  return this;
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "overlay-component",
+  "description": "Page overlay component",
+  "version": "0.0.1",
+  "dependencies": {
+    "emitter-component": "*",
+    "jquery-component": "*"
+  },
+  "component": {
+    "styles": ["overlay.css"],
+    "scripts": {
+      "overlay": "overlay.js"
+    },
+    "templates": {
+      "overlay": "overlay.html"
+    }
+  }
+}
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE 5>
+<html>
+  <head>
+    <title>Overlay</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" href="out.css" />
+  </head>
+  <body>
+    <title>Overlay</title>
+    <script src="out.js"></script>
+    <script>
+    var overlay = require('overlay');
+
+    var o = overlay()
+    .show()
+    .on('hide', function(){
+      console.log('hidden');
+      setTimeout(function(){
+        overlay({ closable: true })
+        .show()
+        .on('hide', function(){
+          console.log('hidden 2');
+        });
+      }, 500);
+    });
+
+    setTimeout(function(){
+      o.hide();
+    }, 1000);
+    </script>
+  </body>
+</html>