first commit

bmcmahen · Oct 15, 2013 · b546c46 · b546c46
commit b546c46
Show file tree

Hide file tree

Showing 10 changed files with 1,840 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+components
+build
+.DS_Store
diff --git a/History.md b/History.md
diff --git a/Makefile b/Makefile
@@ -0,0 +1,11 @@
+
+build: components index.js modal.css
+	@component build --dev
+
+components: component.json
+	@component install --dev
+
+clean:
+	rm -fr build components template.js
+
+.PHONY: clean
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,53 @@
+
+# modal
+
+  A simple, bootstrap-like modal dialog written in pure Javascript.
+
+## Installation
+
+    $ component install bmcmahen/modal
+
+  or use the standalone version in the `standalone` directory, and attach the script and css to your HTML page.
+
+## Use
+
+You can use the `data-attribute` api, much like Bootstrap. The `data-modal-id` attribute directs us to the id of the modal dialog markup. You can use `data-show-overlay` to enable an overlay, and `data-modal-close` on a button within the modal to close it.
+
+```html
+
+<a href='#' tabindex='-1' data-show-overlay='true' data-modal-id='myModal'>show modal</a>
+
+<div id='myModal' class='modal-dialog' tabindex='-1' role='dialog' aria-hidden='true'>
+  <div class='modal-dialog-wrapper'>
+    <!-- content here -->
+    <a href='#' data-modal-close='true'>hide modal</a>
+  </div>
+</div>
+
+```
+
+Or you can use the Javascript API.
+
+```javascript
+var modal = require('modal');
+var myModal = modal(document.querySelector('#myModal'));
+
+myModal.overlay(); // enable the overlay
+myModal.show(); // show the modal
+myModal.hide(); // hide the modal
+
+myModal.on('showing', function(){
+  console.log('modal is in the process of showing..');
+});
+```
+
+## Events
+
+### showing(fn)
+### shown(fn)
+### hiding(fn)
+### hidden(fn)
+
+## License
+
+  MIT
diff --git a/component.json b/component.json
@@ -0,0 +1,27 @@
+{
+  "name": "modal",
+  "repo": "bmcmahen/modal",
+  "description": "a simple modal written in vanilla javscript",
+  "version": "0.0.2",
+  "keywords": [],
+  "dependencies": {
+    "component/emitter": "*",
+    "bmcmahen/overlay": "*",
+    "component/classes": "*",
+    "anthonyshort/after-transition": "*",
+    "component/events": "*",
+    "component/delegate": "*",
+    "component/domify": "*",
+    "javve/get-attribute": "*",
+    "bmcmahen/target": "*",
+    "yields/prevent": "*"
+  },
+  "development": {},
+  "license": "MIT",
+  "scripts": [
+    "index.js"
+  ],
+  "styles": [
+    "modal.css"
+  ]
+}
diff --git a/example/example.html b/example/example.html
@@ -0,0 +1,37 @@
+<html>
+<head>
+	<title></title>
+	<link rel='stylesheet' href='../build/build.css'>
+
+	<style>
+	* {
+		outline: none;
+	}
+
+	body {
+		background: #ddd;
+	}
+
+	</style>
+
+</head>
+<body>
+
+	<a href='#' tabindex='-1' data-show-overlay='className' data-modal-id='myModal'>show modal</a>
+
+	<div id='myModal' class='modal-dialog' tabindex='-1' role='dialog' aria-hidden='true'>
+		<div class='modal-dialog-wrapper'>
+			<h3>header</h3>
+			<p> Lorem ipsum Do sit aute minim id et quis amet eiusmod cillum consectetur ad in nisi do sunt consectetur Duis minim deserunt ut et consequat sed ullamco in minim. </p>
+			<a href='#' data-modal-close='true'>hide modal</a>
+		</div>
+	</div>
+
+	<script src='../build/build.js'></script>
+
+	<script>
+	require('modal');
+	</script>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,94 @@
+var Emitter = require('emitter');
+var overlay = require('overlay');
+var classes = require('classes');
+var afterTransition = require('after-transition');
+var events = require('events');
+var delegate = require('delegate');
+var prevent = require('prevent');
+var target = require('target');
+var attr = require('get-attribute');
+var domify = require('domify');
+
+/**
+ * Bind any links with [data-modal-id]. _id should direct
+ * us to the id of the modal dialog.
+ */
+
+var modalTrigger = delegate.bind(document, '[data-modal-id]', 'click', function(e){
+  prevent(e);
+  var el = target(e);
+  var _id = attr(el, 'data-modal-id');
+  var newModal = new Modal(document.getElementById(_id));
+  if (attr(el, 'data-show-overlay')) newModal.overlay();
+  newModal.show();
+});
+
+/**
+ * API
+ * @param  {Element} el
+ * @return {Modal}
+ */
+
+module.exports = function(el){
+  delegate.unbind(document, 'click', modalTrigger, false);
+  return new Modal(el);
+};
+
+/**
+ * Modal Constructor
+ * @param {Element} el
+ */
+
+function Modal(el){
+  this.el = el;
+  this.isShown = false;
+  this.bind();
+}
+
+Emitter(Modal.prototype);
+
+Modal.prototype.toggle = function(){
+  if (this.isShown) this.hide();
+  else this.show();
+  return this;
+};
+
+Modal.prototype.bind = function(){
+  this.events = events(this.el, this);
+  this.events.bind('click [data-modal-close]', 'hide');
+};
+
+Modal.prototype.overlay = function(className){
+  this._overlay = overlay(className || 'modal-dialogue');
+  return this;
+};
+
+Modal.prototype.show = function(){
+  if (this.isShown) return this;
+  this.previouslyFocused = document.activeElement;
+  this.isShown = true;
+  this.emit('showing');
+  if (this._overlay) this._overlay.show();
+  classes(this.el).add('modal-show');
+  var self = this;
+  afterTransition(this.el, function(){
+    self.emit('shown');
+  });
+  this.el.focus();
+  return this;
+};
+
+Modal.prototype.hide = function(e){
+  if (e) prevent(e);
+  if (!this.isShown) return this;
+  this.emit('hiding');
+  if (this._overlay) this._overlay.hide();
+  classes(this.el).remove('modal-show');
+  this.previouslyFocused.focus();
+  this.isShown = false;
+  var self = this;
+  afterTransition(this.el, function(){
+    self.emit('hidden');
+  });
+  return this;
+};
diff --git a/modal.css b/modal.css
@@ -0,0 +1,52 @@
+.modal-dialog {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 50%;
+	max-width: 630px;
+	min-width: 320px;
+	height: auto;
+	z-index: 2000;
+	visibility: hidden;
+	-webkit-transform-style: preserve-3d;
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	-moz-transform: translateX(-50%) translateY(-50%);
+	-o-transform: translateX(-50%) translateY(-50%);
+	-ms-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.modal-show {
+	visibility: visible;
+}
+
+.modal-dialog-wrapper {
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	-o-transition: all 0.3s;
+	-ms-transition: all 0.3s;
+	transition: all 0.3s;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	opacity: 0;
+
+	-webkit-transform: scale(0.3);
+	-moz-transform: scale(0.3);
+	-o-transform: scale(0.3);
+	-ms-transform: scale(0.3);
+	transform: scale(0.3);
+	background: white;
+}
+
+.modal-show .modal-dialog-wrapper {
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-o-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
+	opacity: 1;
+}
+
+
diff --git a/standalone/modal.css b/standalone/modal.css
@@ -0,0 +1,80 @@
+#overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.85);
+  transition: opacity 300ms;
+  -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
+  -ms-transition: opacity 300ms;
+  -o-transition: opacity 300ms;
+  z-index: 500;
+  pointer-events: none;
+  opacity: 0;
+}
+
+#overlay.show {
+  opacity: 1;
+}
+
+
+
+
+
+
+
+
+
+.modal-dialog {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 50%;
+	max-width: 630px;
+	min-width: 320px;
+	height: auto;
+	z-index: 2000;
+	visibility: hidden;
+	-webkit-backface-visibility: hidden;
+	-webkit-transform-style: preserve-3d;
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	-moz-transform: translateX(-50%) translateY(-50%);
+	-o-transform: translateX(-50%) translateY(-50%);
+	-ms-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.modal-show {
+	visibility: visible;
+}
+
+.modal-dialog-wrapper {
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	-o-transition: all 0.3s;
+	-ms-transition: all 0.3s;
+	transition: all 0.3s;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	opacity: 0;
+
+	-webkit-transform: scale(0.3);
+	-moz-transform: scale(0.3);
+	-o-transform: scale(0.3);
+	-ms-transform: scale(0.3);
+	transform: scale(0.3);
+	background: white;
+}
+
+.modal-show .modal-dialog-wrapper {
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-o-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
+	opacity: 1;
+}