Added namespace option and Grunt build file

Author: i-like-robots

README.markdown

@@ -1,5 +1,5 @@
 # jQuery Modal
-Every front-end developer needs their own [modal window][1]. The plugin is performant, customisable and easy to integrate. Less than 3KB minified and 1KB with gzip compression.
+Every front-end developer needs their own [modal window][1]. The plugin is performant, tested, customisable and easy to integrate. Less than 3KB minified and 1KB gzipped.
 
 ## Dependencies
 

grunt.js

@@ -0,0 +1,26 @@
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    min: {
+      dist: {
+        src: ['js/modal.js'],
+        dest: 'js/modal.min.js'
+      }
+    },
+    lint: {
+      files: ['grunt.js', 'js/modal.js']
+    },
+    jshint: {
+      options: {
+        trailing: true,
+        browser: true
+      },
+      globals: {
+        jQuery: true
+      }
+    }
+  });
+
+  grunt.registerTask('default', 'lint min');
+
+};

index.html

@@ -26,8 +26,8 @@
 			<h1>jQuery Modal</h1>
 			<p>
 				Every front-end developer needs their own <a href="http://github.com/i-like-robots/jQuery-Modal">modal
-				window</a>. The plugin is performant, customisable and easy to integrate. Less than 3KB minified and
-				1KB with gzip compression.
+				window</a>. jQuery modal is performant, tested, customisable and easy to integrate. Less than 2.5KB
+				minified and 1KB gzipped.
 			</p>
 
 			<div id="example">
@@ -107,19 +107,37 @@ <h2>Options</h2>
 			<p>
 				Global options can be specified via the standard jQuery plugin interface.
 			</p>
+
 			<dl>
 				<dt>onopen</dt>
 				<dd>
 					Callback function to execute after modal window has opened. Default: <code>undefined</code>.
 				</dd>
-				<dt>onclose</dt>
+				<dt>onhide</dt>
 				<dd>
 					Callback function to execute after modal window has closed. Default: <code>undefined</code>.
 				</dd>
 				<dt>onupdate</dt>
 				<dd>
 					Callback function to execute when modal window content is changed. Default: <code>undefined</code>.
 				</dd>
+				<dt>fixed</dt>
+				<dd>
+					Use CSS <code>fixed</code> positioning for the modal window instead of <code>absolute</code>.
+					Default: <code>false</code>.
+				</dd>
+				<dt>overlay</dt>
+				<dd>
+					Create an overlay beneath the modal window and over the target. Default: <code>true</code>.
+				</dd>
+				<dt>blur</dt>
+				<dd>
+					Close the modal window when overlay is clicked. Default: <code>true</code>.
+				</dd>
+				<dt>escape</dt>
+				<dd>
+					Close the modal window when the escape key is pressed. Default: <code>true</code>.
+				</dd>
 				<dt>width</dt>
 				<dd>
 					Predefined width for modal window. Set to <code>auto</code> for the contents automatic flow width.
@@ -140,22 +158,9 @@ <h2>Options</h2>
 					Set CSS <code>max-height</code> relative to the modal windows parent. Set to <code>none</code> to
 					set no maximum height. Default: <code>'95%'</code>.
 				</dd>
-				<dt>fixed</dt>
-				<dd>
-					Use CSS <code>fixed</code> positioning for the modal window instead of <code>absolute</code>.
-					Default: <code>false</code>.
-				</dd>
-				<dt>overlay</dt>
-				<dd>
-					Create an overlay beneath the modal window and over the target. Default: <code>true</code>.
-				</dd>
-				<dt>blur</dt>
-				<dd>
-					Close the modal window when overlay is clicked. Default: <code>true</code>.
-				</dd>
-				<dt>escape</dt>
+				<dt>namespace</dt>
 				<dd>
-					Close the modal window when the escape key is pressed. Default: <code>true</code>.
+					Data attribute and event binding namespace. Default: <code>'modal'</code>.
 				</dd>
 			</dl>
 		</section>

js/modal.js

@@ -1,7 +1,7 @@
 /*!
  * @name        jQuery Modal
  * @author      Matt Hinchliffe <https://github.com/i-like-robots/jQuery-Modal>
- * @modified    10/12/2012
+ * @modified    2012-12-10
  * @version     1.0.0
  */
 (function( $, undefined ) {
@@ -21,7 +21,8 @@
             width: 640,
             maxWidth: '95%',
             height: 480,
-            maxHeight: '95%'
+            maxHeight: '95%',
+            namespace: 'modal'
         }, options);
 
         this.target = target;
@@ -49,7 +50,7 @@
             display: 'none'
         });
 
-        this.close = $('<span class="modal-close" data-toggle="modal">Close</span>').appendTo(this.wrapper);
+        this.close = $('<span class="modal-close" data-' + this.opts.namespace + '-close>Close</span>').appendTo(this.wrapper);
         this.content = $('<div class="modal-content">').appendTo(this.wrapper);
 
         this.wrapper.appendTo(this.target);
@@ -58,7 +59,7 @@
         this.overlay = false;
 
         if ( this.opts.overlay ) {
-            this.overlay = $('<div class="modal-overlay"' + (this.opts.blur ? 'data-toggle="modal"' : '') + '>')
+            this.overlay = $('<div class="modal-overlay"' + (this.opts.blur ? 'data-' + this.opts.namespace + '-close' : '') + '>')
                 .css({
                     position: 'absolute',
                     top: 0,
@@ -113,18 +114,18 @@
         var self = this;
 
         if ( this.isBody ) {
-            this.context.on('resize.modal', function() {
+            this.context.on('resize.' + this.opts.namespace, function() {
                 self.align();
             });
 
-            this.doc.on('keyup.modal', function( e ) {
+            this.doc.on('keyup.' + this.opts.namespace, function( e ) {
                 if ( e.keyCode === 27 ) {
                     self.hide();
                 }
             });
         }
 
-        this.doc.on('click.modal', '[data-toggle="modal"]', function( e ) {
+        this.doc.on('click.modal', '[data-' + this.opts.namespace + '-close]', function( e ) {
             e.preventDefault();
             self.hide();
         });
@@ -198,7 +199,7 @@
     Modal.prototype.hide = function( callback ) {
 
         // Unbind events
-        this.doc.off('.modal');
+        this.doc.off('.' + this.opts.namespace);
 
         this.wrapper
             .add(this.overlay)

js/modal.min.js

@@ -20,36 +20,17 @@
 </head>
 <body>
 
-	<div id="container">
-
-		<section id="introduction">
-			<h1>QUnit tests</h1>
-
-			<p id="example-1" style="display:none;">
-				Rump sausage ham short loin pork. Pig venison boudin bresaola, frankfurter sirloin filet mignon pork shankle
-				capicola. Leberkas jerky ground round short loin bacon. Capicola strip steak flank meatball pork loin beef
-				ribs turducken, biltong jowl kielbasa rump shank short ribs. Beef beef ribs filet mignon frankfurter,
-				prosciutto pork chop chicken ground round short ribs tenderloin sirloin fatback brisket.
-			</p>
-
-			<p id="example-2" style="display:none;">
-				Brisket short ribs beef ribs, pork loin rump ribeye shankle meatball tri-tip tail chuck meatloaf filet
-				mignon. Pork chop filet mignon tail, chicken kielbasa salami venison ball tip rump. Tenderloin brisket
-				andouille shank pig, meatloaf filet mignon spare ribs ball tip t-bone sausage. Ribeye tail doner shank,
-				pork belly ham hock spare ribs salami pastrami cow. Meatball leberkas pork frankfurter meatloaf turkey
-				rump drumstick, spare ribs beef ribs.
-			</p>
-
-		</section>
-
-	</div>
+	<p id="example-content" style="display:none;">
+		Rump sausage ham short loin pork. Pig venison boudin bresaola, frankfurter sirloin filet mignon pork shankle
+		capicola. Leberkas jerky ground round short loin bacon. Capicola strip steak flank meatball pork loin beef
+		ribs turducken, biltong jowl kielbasa rump shank short ribs. Beef beef ribs filet mignon frankfurter,
+		prosciutto pork chop chicken ground round short ribs tenderloin sirloin fatback brisket.
+	</p>
 
 	<section id="tests" style="margin: 20px;">
-		<h2>Tests</h2>
 		<div id="qunit"></div>
 	</section>
 
-
 	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 	<script src="../js/modal.js"></script>
 	<script src="qunit-1.10.0.js"></script>
@@ -91,24 +72,22 @@ <h2>Tests</h2>
 
 			test(".open()", function() {
 
-				window.testOpen = false;
-
-				var content = $('#example-1').html()
+				var testOpen = false;
 
-				api.open( content, function() {
-					window.testOpen = true;
+				api.open('', function() {
+					testOpen = true;
 				});
 
 				equal(api.isOpen, true, "Check isOpen is correct");
-				equal(api.content.html(), content, "Check modal content was populated");
-				equal(window.testOpen, true, "Check callback was called");
+				equal(api.content.is(':visible'), true, "Check modal is hidden");
+				equal(testOpen, true, "Check callback was called");
 			});
 
 			test(".update()", function() {
 
-				window.testUpdate = false;
+				window.testOpen = false;
 
-				var content = $('#example-2').html();
+				var content = $('#example-content').html();
 
 				api.update(content, function() {
 					window.testUpdate = true;
@@ -125,15 +104,30 @@ <h2>Tests</h2>
 
 			test(".hide()", function() {
 
-				window.testHide = false;
+				var testOpen = true;
 
 				api.hide(function() {
-					window.testHide = true;
+					testOpen = false;
 				});
 
+				equal(api.isOpen, false, "Check isOpen is correct");
 				equal(api.content.is(':visible'), false, "Check modal is hidden");
+				equal(testOpen, false, "Check callback was called");
+			});
+
+			//
+			// user controls
+			//
+
+			module("User controls", lifecycle);
+
+			test("Close button", function() {
+
+				api.open();
+				api.close.trigger('click');
+
 				equal(api.isOpen, false, "Check isOpen is correct");
-				equal(window.testHide, true, "Check callback was called");
+				equal(api.content.is(':visible'), false, "Check modal is hidden");
 			});
 
 		});