Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 4d5ba6afdb79669631f3e15e5241a2cc65be2ed8 @tj tj committed May 4, 2012
Showing with 202 additions and 0 deletions.
  1. +3 −0 .gitignore
  2. +1 −0 .npmignore
  3. +8 −0 Makefile
  4. +31 −0 Readme.md
  5. +16 −0 overlay.css
  6. +1 −0 overlay.html
  7. +92 −0 overlay.js
  8. +18 −0 package.json
  9. +32 −0 test/index.html
@@ -0,0 +1,3 @@
+node_modules
+test/*.js
+test/*.css
@@ -0,0 +1 @@
+test
@@ -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
@@ -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.
@@ -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;
+}
@@ -0,0 +1 @@
+<div id="overlay" class="hide"></div>
@@ -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;
+};
@@ -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"
+ }
+ }
+}
@@ -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>

0 comments on commit 4d5ba6a

Please sign in to comment.