Change folder structure, change demo.

Gruntfile.js

@@ -8,15 +8,21 @@ module.exports = function (grunt) {
             },
             remodal: {
                 files: {
-                    'build/jquery.remodal.min.js': ['src/jquery.remodal.js']
+                    'dist/jquery.remodal.min.js': ['src/jquery.remodal.js']
                 }
             }
         },
 
         copy: {
             remodal: {
-                src: 'src/jquery.remodal.css',
-                dest: 'build/jquery.remodal.css'
+                files: [
+                    {
+                        expand: true,
+                        cwd: 'src/',
+                        src: ['jquery.remodal.css', 'jquery.remodal.js'],
+                        dest: 'dist/'
+                    }
+                ]
             }
         }
     });

examples/index.html → demo/index.html

@@ -24,17 +24,18 @@
     <![endif]-->
 
     <!-- Add your site or application content here -->
-    <a href="#modal1">With hash tracking</a>
+    <a href="#modal">Click</a>
     <br><br>
 
-    <div class="remodal" data-remodal-id="modal1">
-        <h1>Bootstrap</h1>
-        <p>Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS
-            шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов
-            веб-интерфейсов, включая JavaScript расширения.</p>
-        <p>Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS
-            шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов
-            веб-интерфейсов, включая JavaScript расширения.</p>
+    <div class="remodal" data-remodal-id="modal">
+        <h1>Remodal</h1>
+        <p>
+            Flat, responsive, lightweight, fast, easy customizable modal window plugin
+            with declarative state notation and hash tracking.
+        </p>
+        <p>
+            Minified version size: ~4kb
+        </p>
         <br>
         <a class="remodal-cancel" href="#">Cancel</a>
         <a class="remodal-confirm" href="#">OK</a>
@@ -45,7 +46,7 @@ <h1>Bootstrap</h1>
 <script src="../src/jquery.remodal.js"></script>
 <script>
     $(document).on('open', '.remodal', function () {
-        alert('open');
+        var modal = $(this);
     });
 
     $(document).on('opened', '.remodal', function () {
@@ -60,11 +61,11 @@ <h1>Bootstrap</h1>
         alert('closed');
     });
 
-    $(document).on('confirm', '[data-remodal-id=modal1]', function () {
+    $(document).on('confirm', '.remodal', function () {
         alert('confirm');
     });
 
-    $(document).on('cancel', '[data-remodal-id=modal1]', function () {
+    $(document).on('cancel', '.remodal', function () {
         alert('cancel');
     });
 </script>

dist/jquery.remodal.js

@@ -0,0 +1,300 @@
+/*! Remodal - v0.9 - 2014-02-14
+ * https://github.com/VodkaBears/remodal
+ * Copyright (c) 2014 VodkaBears; */
+;(function ($) {
+	"use strict";
+
+	/**
+	 * Remodal settings
+	 */
+	var pluginName = "remodal",
+		defaults = {
+			hashTracking: true
+		};
+
+	/**
+	 * Instances of modal windows.
+	 * @type {Array}
+	 */
+	var instances = [];
+
+	/**
+	 * Current modal
+	 */
+	var current;
+
+	/**
+	 * Get transition duration in ms
+	 * @return {Number}
+	 */
+	var getTransitionDuration = function ($elem) {
+		var duration = $elem.css('transitionDuration') ||
+			$elem.css('webkitTransitionDuration') ||
+			$elem.css('mozTransitionDuration') ||
+			$elem.css('oTransitionDuration') ||
+			$elem.css('msTransitionDuration') ||
+			0;
+        var delay = $elem.css('transitionDelay') ||
+            $elem.css('webkitTransitionDelay') ||
+            $elem.css('mozTransitionDelay') ||
+            $elem.css('oTransitionDelay') ||
+            $elem.css('msTransitionDelay') ||
+            0;
+
+		return (parseFloat(duration) + parseFloat(delay)) * 1000;
+	};
+
+    var getScrollbarWidth = function () {
+        var outer = document.createElement("div");
+        outer.style.visibility = "hidden";
+        outer.style.width = "100px";
+        document.body.appendChild(outer);
+
+        var widthNoScroll = outer.offsetWidth;
+        // force scrollbars
+        outer.style.overflow = "scroll";
+
+        // add innerdiv
+        var inner = document.createElement("div");
+        inner.style.width = "100%";
+        outer.appendChild(inner);
+
+        var widthWithScroll = inner.offsetWidth;
+
+        // remove divs
+        outer.parentNode.removeChild(outer);
+
+        return widthNoScroll - widthWithScroll;
+    };
+
+	/**
+	 * Remodal constructor
+	 */
+	function Remodal (modal, options) {
+		this.settings = $.extend({}, defaults, options);
+		this.modal = modal;
+		this.buildDOM();
+		this.addEventListeners();
+		this.index = instances.push(this) - 1;
+		this.busy = false;
+
+        this.open();
+	}
+
+	/**
+	 * Build required DOM
+	 */
+	Remodal.prototype.buildDOM = function () {
+        this.body = $(document.body);
+        this.bg = $("." + pluginName + "-bg");
+		this.modalClose = $("<a href='#'>").addClass(pluginName + "-close");
+		this.overlay = $("<div>").addClass(pluginName + "-overlay");
+        if (!this.modal.hasClass(pluginName)) {
+            this.modal.addClass(pluginName);
+        }
+
+        this.modal.append(this.modalClose);
+		this.overlay.append(this.modal);
+		this.body.append(this.overlay);
+
+        this.confirm = this.modal.find("." + pluginName + "-confirm");
+        this.cancel = this.modal.find("." + pluginName + "-cancel");
+
+        var tdOverlay = getTransitionDuration(this.overlay),
+            tdModal = getTransitionDuration(this.modal),
+            tdBg = getTransitionDuration(this.bg);
+        this.td = tdModal > tdOverlay ? tdModal : tdOverlay;
+        this.td = tdBg > this.td ? tdBg : this.td;
+	};
+
+	/**
+	 * Add event listeners to the current modal window
+	 */
+	Remodal.prototype.addEventListeners = function () {
+		this.modalClose.bind("click." + pluginName, function (e) {
+			e.preventDefault();
+			this.close();
+		}.bind(this));
+
+        this.cancel.bind("click." + pluginName, function (e) {
+            e.preventDefault();
+            this.modal.trigger("cancel");
+            this.close();
+        }.bind(this));
+
+        this.confirm.bind("click." + pluginName, function (e) {
+            e.preventDefault();
+            this.modal.trigger("confirm");
+            this.close();
+        }.bind(this));
+
+		$(document).bind('keyup.' + pluginName, function(e){
+			if (e.keyCode === 27) {
+				this.close();
+			}
+		}.bind(this));
+
+		this.overlay.bind("click." + pluginName, function (e) {
+			var $target = $(e.target);
+			if (!$target.hasClass(pluginName + "-overlay")) {
+				return;
+			}
+
+			this.close();
+		}.bind(this));
+	};
+
+    /**
+     * Lock screen
+     */
+    Remodal.prototype.lockScreen = function () {
+        $("html, body").addClass(pluginName + "_lock");
+        this.body.css("padding-right", "+=" + getScrollbarWidth());
+    };
+
+    /**
+     * Unlock screen
+     */
+    Remodal.prototype.unlockScreen = function () {
+        $("html, body").removeClass(pluginName + "_lock");
+        this.body.css("padding-right", "-=" + getScrollbarWidth());
+    };
+
+	/**
+	 * Open modal window
+	 */
+	Remodal.prototype.open = function () {
+        // check if animation is complete
+		if (this.busy) {
+			return;
+		}
+		this.busy = true;
+
+        this.modal.trigger("open");
+
+        var id = this.modal.attr("data-" + pluginName + "-id");
+		if (id && this.settings.hashTracking) {
+			location.hash = id;
+		}
+
+		if (current && current !== this) {
+			current.overlay.hide();
+            current.body.removeClass(pluginName + "_active");
+		}
+		current = this;
+
+        this.lockScreen();
+        this.overlay.show();
+        setTimeout(function () {
+            this.body.addClass(pluginName + "_active");
+
+            setTimeout(function () {
+                this.busy = false;
+                this.modal.trigger("opened");
+            }.bind(this), this.td + 50);
+        }.bind(this), 25);
+	};
+
+	/**
+	 * Close modal window
+	 */
+	Remodal.prototype.close = function () {
+        // check if animation is complete
+		if (this.busy) {
+			return;
+		}
+		this.busy = true;
+
+        this.modal.trigger("close");
+
+        if(this.settings.hashTracking &&
+			this.modal.attr("data-" + pluginName + "-id") === location.hash.substr(1)) {
+			// save current scroll position
+			location.hash = "";
+		}
+
+        this.body.removeClass(pluginName + "_active");
+
+		setTimeout(function () {
+			this.overlay.hide();
+            this.unlockScreen();
+
+			this.busy = false;
+            this.modal.trigger("closed");
+        }.bind(this), this.td + 50);
+	};
+
+	if ($) {
+		$["fn"][pluginName] = function (opts) {
+			return this["each"](function (i, e) {
+				var $e = $(e);
+				if(!$e.data(pluginName) || !$e.data(pluginName).open) {
+					var instance = new Remodal($e, opts);
+					$e.data(pluginName, instance);
+				}
+			});
+		};
+	}
+
+	/**
+	 * data-remodal-target opens a modal window with a special id without hash change.
+	 */
+	$(document).on("click", "[data-" + pluginName + "-target]", function (e) {
+		e.preventDefault();
+
+		var elem = e.currentTarget,
+			id = elem.getAttribute("data-" + pluginName + "-target"),
+			$target = $("[data-" + pluginName + "-id=" + id + "]");
+
+		$target.data(pluginName).open();
+	});
+
+	/**
+	 * Auto initialization of modal windows.
+	 * They should have the 'data-remodal' attribute.
+	 * Also you can pass params into the modal throw the data-remodal-options attribute.
+	 * data-remodal-options must be a JSON string without brackets.
+	 */
+	$(document).find("." + pluginName).each(function (i, container) {
+		var $container = $(container),
+			options = $container.data(pluginName + "-options");
+
+		if (!options) {
+			options = {};
+		}
+
+		$container[pluginName](options);
+	});
+
+	/**
+	 * Hashchange handling to show a modal with a special id.
+	 */
+	var hashHandler = function (e, closeOnEmptyHash) {
+		var id = location.hash.replace("#", "");
+
+		if (typeof closeOnEmptyHash === "undefined") {
+			closeOnEmptyHash = true;
+		}
+
+		if (!id) {
+			if (closeOnEmptyHash) {
+				// check if we have currently opened modal and animation is complete
+				if (current && !current.busy && current.settings.hashTracking) {
+					current.close();
+				}
+			}
+		} else {
+            var $elem = $("[data-" + pluginName + "-id=" + id + "]");
+
+			if ($elem.length) {
+                var data = $elem.data(pluginName);
+                if (data && data.settings.hashTracking) {
+                    data.open();
+                }
+            }
+
+		}
+	};
+	$(window).bind("hashchange." + pluginName, hashHandler);
+	hashHandler(null, false);
+})(window["jQuery"]);