From ee3c42bde10478f64fffaa0848aed0e308ac34df Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 6 Dec 2014 03:01:57 +0300 Subject: [PATCH 01/16] Change names of the states --- src/jquery.remodal.css | 10 +++++----- src/jquery.remodal.js | 10 +++++----- test/remodal_test.js | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index e52b113..210b265 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -6,8 +6,8 @@ /* Hide scroll bar */ -html.remodal_lock, -body.remodal_lock { +html.remodal-is-locked, +body.remodal-is-locked { overflow: hidden; } @@ -90,7 +90,7 @@ body.remodal_lock { transition: filter 0.2s linear; } -body.remodal_active .remodal-bg { +body.remodal-is-active .remodal-bg { -webkit-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); @@ -110,7 +110,7 @@ body.remodal_active .remodal-bg { background: rgba(33, 36, 46, 0.95); } -body.remodal_active .remodal-overlay { +body.remodal-is-active .remodal-overlay { opacity: 1; } @@ -143,7 +143,7 @@ body.remodal_active .remodal-overlay { box-shadow: 0 0 8px #171a24; } -body.remodal_active .remodal { +body.remodal-is-active .remodal { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index d8c518e..4ea9b86 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -91,7 +91,7 @@ paddingRight = parseInt($body.css("padding-right"), 10) + getScrollbarWidth(); $body.css("padding-right", paddingRight + "px"); - $("html, body").addClass(pluginName + "_lock"); + $("html, body").addClass(pluginName + "-is-locked"); } /** @@ -105,7 +105,7 @@ paddingRight = parseInt($body.css("padding-right"), 10) - getScrollbarWidth(); $body.css("padding-right", paddingRight + "px"); - $("html, body").removeClass(pluginName + "_lock"); + $("html, body").removeClass(pluginName + "-is-locked"); } /** @@ -256,7 +256,7 @@ if (current && current !== remodal) { current.$overlay.hide(); - current.$body.removeClass(pluginName + "_active"); + current.$body.removeClass(pluginName + "-is-active"); } current = remodal; @@ -265,7 +265,7 @@ remodal.$overlay.show(); setTimeout(function() { - remodal.$body.addClass(pluginName + "_active"); + remodal.$body.addClass(pluginName + "-is-active"); setTimeout(function() { remodal.busy = false; @@ -295,7 +295,7 @@ $(window).scrollTop(scrollTop); } - remodal.$body.removeClass(pluginName + "_active"); + remodal.$body.removeClass(pluginName + "-is-active"); setTimeout(function() { remodal.$overlay.hide(); diff --git a/test/remodal_test.js b/test/remodal_test.js index a3e8dc7..dfb4fd7 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -204,13 +204,13 @@ $(document.body).css("height", "10000px"); $document.one("opened", "[data-remodal-id=modal]", function() { - assert.ok($("html, body").hasClass("remodal_lock")); + assert.ok($("html, body").hasClass("remodal-is-locked")); assert.ok(parseInt($(document.body).css("padding-right")) > 0); $inst1.close(); }); $document.one("closed", "[data-remodal-id=modal]", function() { - assert.ok(!$("html, body").hasClass("remodal_lock")); + assert.ok(!$("html, body").hasClass("remodal-is-locked")); assert.ok(parseInt($(document.body).css("padding-right")) === 0); QUnit.start(); }); From 6dfee6100f8197100e9cf2038cedf520fa2ec8f3 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 6 Dec 2014 04:21:33 +0300 Subject: [PATCH 02/16] Add shared overlay --- src/jquery.remodal.css | 41 ++++++++++++++++++++++++++++------------- src/jquery.remodal.js | 21 ++++++++++++++++----- test/remodal_test.js | 14 +++++++------- 3 files changed, 51 insertions(+), 25 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 210b265..e589664 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -18,9 +18,22 @@ body.remodal-is-locked { visibility: hidden; } -/* Overlay necessary styles */ +/* Necessary styles of the overlay */ .remodal-overlay { + position: fixed; + z-index: 9999; + top: 0; + right: 0; + bottom: 0; + left: 0; + + display: none; +} + +/* Necessary styles of the wrapper */ + +.remodal-wrapper { position: fixed; z-index: 10000; top: 0; @@ -36,7 +49,7 @@ body.remodal-is-locked { -webkit-overflow-scrolling: touch; } -.remodal-overlay:after { +.remodal-wrapper:after { display: inline-block; height: 100%; @@ -47,11 +60,11 @@ body.remodal-is-locked { /* Fix iPad, iPhone glitches */ -.remodal-overlay { +.remodal-wrapper { -webkit-backface-visibility: hidden; } -/* Modal dialog necessary styles */ +/* Necessary styles of the modal dialog */ .remodal { position: relative; @@ -59,7 +72,7 @@ body.remodal-is-locked { display: inline-block; } -/* Remodal anti-zoom. Font-size should be >= 16px. */ +/* Anti-zoom. Font-size should be >= 16px. */ .remodal select, .remodal textarea, @@ -98,7 +111,7 @@ body.remodal-is-active .remodal-bg { -o-filter: blur(3px); } -/* Overlay default theme styles */ +/* Default theme styles of the overlay */ .remodal-overlay { -webkit-transition: opacity 0.2s linear; @@ -114,7 +127,7 @@ body.remodal-is-active .remodal-overlay { opacity: 1; } -/* Modal dialog default theme styles */ +/* Default theme styles of the modal dialog */ .remodal { font-size: 16px; @@ -126,15 +139,16 @@ body.remodal-is-active .remodal-overlay { min-height: 100%; padding: 35px; - -webkit-transition: -webkit-transform 0.2s linear; - -moz-transition: -moz-transform 0.2s linear; - -o-transition: -o-transform 0.2s linear; - transition: transform 0.2s linear; + -webkit-transition: -webkit-transform 0.2s linear, opacity 0.2s linear; + -moz-transition: -moz-transform 0.2s linear, opacity 0.2s linear; + -o-transition: -o-transform 0.2s linear, opacity 0.2s linear; + transition: transform 0.2s linear, opacity 0.2s linear; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); + opacity: 0; color: #182a3c; background: #f4f4f4; @@ -149,12 +163,13 @@ body.remodal-is-active .remodal { -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); + opacity: 1; } -/* Modal dialog vertical align */ +/* Vertical align of the modal dialog */ .remodal, -.remodal-overlay:after { +.remodal-wrapper:after { vertical-align: middle; } diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 4ea9b86..0db9c48 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -159,15 +159,23 @@ // Build DOM remodal.$body = $(document.body); + remodal.$overlay = $("." + pluginName + "-overlay"); + + if (!remodal.$overlay.length) { + remodal.$overlay = $("
").addClass(pluginName + "-overlay"); + remodal.$body.append(remodal.$overlay); + } + remodal.$bg = $("." + pluginName + "-bg"); remodal.$closeButton = $("").addClass(pluginName + "-close"); - remodal.$overlay = $("
").addClass(pluginName + "-overlay"); + remodal.$wrapper = $("
").addClass(pluginName + "-wrapper"); remodal.$modal = $modal; remodal.$modal.addClass(pluginName); remodal.$modal.css("visibility", "visible"); + remodal.$modal.append(remodal.$closeButton); - remodal.$overlay.append(remodal.$modal); - remodal.$body.append(remodal.$overlay); + remodal.$wrapper.append(remodal.$modal); + remodal.$body.append(remodal.$wrapper); remodal.$confirmButton = remodal.$modal.find("." + pluginName + "-confirm"); remodal.$cancelButton = remodal.$modal.find("." + pluginName + "-cancel"); @@ -215,10 +223,10 @@ }); // Add overlay event listener - remodal.$overlay.bind("click." + pluginName, function(e) { + remodal.$wrapper.bind("click." + pluginName, function(e) { var $target = $(e.target); - if (!$target.hasClass(pluginName + "-overlay")) { + if (!$target.hasClass(pluginName + "-wrapper")) { return; } @@ -256,6 +264,7 @@ if (current && current !== remodal) { current.$overlay.hide(); + current.$wrapper.hide(); current.$body.removeClass(pluginName + "-is-active"); } @@ -263,6 +272,7 @@ lockScreen(); remodal.$overlay.show(); + remodal.$wrapper.show(); setTimeout(function() { remodal.$body.addClass(pluginName + "-is-active"); @@ -299,6 +309,7 @@ setTimeout(function() { remodal.$overlay.hide(); + remodal.$wrapper.hide(); unlockScreen(); remodal.busy = false; diff --git a/test/remodal_test.js b/test/remodal_test.js index dfb4fd7..747c2aa 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -1,4 +1,4 @@ -(function($, location, document) { +!(function($, location, document) { /* ======== A Handy Little QUnit Reference ======== http://api.qunitjs.com/ @@ -165,15 +165,15 @@ location.hash = "#modal"; }); - QUnit.asyncTest("Overlay click", function(assert) { - var $overlay = $inst1.$overlay; + QUnit.asyncTest("Wrapper click", function(assert) { + var $wrapper = $inst1.$wrapper; $document.one("opened", "[data-remodal-id=modal]", function() { - $overlay.click(); + $wrapper.click(); }); $document.one("closed", "[data-remodal-id=modal]", function() { - assert.ok(true, "overlay click works"); + assert.ok(true, "wrapper click works"); QUnit.start(); }); @@ -234,13 +234,13 @@ $document.one("confirm", "[data-remodal-id=modal2]", function() { setTimeout(function() { - assert.ok($inst2.$overlay.css("display") === "block"); + assert.ok($inst2.$wrapper.css("display") === "block"); }, $inst2.td + 100); }); $document.one("cancel", "[data-remodal-id=modal2]", function() { setTimeout(function() { - assert.ok($inst2.$overlay.css("display") === "block"); + assert.ok($inst2.$wrapper.css("display") === "block"); QUnit.start(); }, $inst2.td + 100); }); From eadc54de55d6809f0f13b9c847c08271c0407169 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 6 Dec 2014 15:04:54 +0300 Subject: [PATCH 03/16] Change visual styles --- src/jquery.remodal.css | 55 ++++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index e589664..f439ca7 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -97,10 +97,10 @@ body.remodal-is-locked { /* Background for effects */ .remodal-bg { - -webkit-transition: -webkit-filter 0.2s linear; - -moz-transition: -moz-filter 0.2s linear; - -o-transition: -o-filter 0.2s linear; - transition: filter 0.2s linear; + -webkit-transition: -webkit-filter 0.2s ease-out; + -moz-transition: -moz-filter 0.2s ease-out; + -o-transition: -o-filter 0.2s ease-out; + transition: filter 0.2s ease-out; } body.remodal-is-active .remodal-bg { @@ -114,10 +114,10 @@ body.remodal-is-active .remodal-bg { /* Default theme styles of the overlay */ .remodal-overlay { - -webkit-transition: opacity 0.2s linear; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + -o-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; opacity: 0; background: rgba(33, 36, 46, 0.95); @@ -139,10 +139,10 @@ body.remodal-is-active .remodal-overlay { min-height: 100%; padding: 35px; - -webkit-transition: -webkit-transform 0.2s linear, opacity 0.2s linear; - -moz-transition: -moz-transform 0.2s linear, opacity 0.2s linear; - -o-transition: -o-transform 0.2s linear, opacity 0.2s linear; - transition: transform 0.2s linear, opacity 0.2s linear; + -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out; + -moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out; + -o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-out; + transition: transform 0.2s ease-out, opacity 0.2s ease-out; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); @@ -153,8 +153,6 @@ body.remodal-is-active .remodal-overlay { color: #182a3c; background: #f4f4f4; background-clip: padding-box; - -webkit-box-shadow: 0 0 8px #171a24; - box-shadow: 0 0 8px #171a24; } body.remodal-is-active .remodal { @@ -183,13 +181,12 @@ body.remodal-is-active .remodal { width: 28px; height: 28px; - -webkit-transition: background 0.2s linear; - -moz-transition: background 0.2s linear; - -o-transition: background 0.2s linear; - transition: background 0.2s linear; + -webkit-transition: background 0.2s ease-out; + -moz-transition: background 0.2s ease-out; + -o-transition: background 0.2s ease-out; + transition: background 0.2s ease-out; text-decoration: none; - border: 2px solid #3e5368; -webkit-border-radius: 50%; border-radius: 50%; } @@ -203,10 +200,10 @@ body.remodal-is-active .remodal { content: "×"; cursor: pointer; - -webkit-transition: all 0.2s linear; - -moz-transition: all 0.2s linear; - -o-transition: all 0.2s linear; - transition: all 0.2s linear; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; text-decoration: none; color: #3e5368; @@ -235,15 +232,15 @@ body.remodal-is-active .remodal { padding: 9px 0; cursor: pointer; - -webkit-transition: all 0.2s linear; - -moz-transition: all 0.2s linear; - -o-transition: all 0.2s linear; - transition: all 0.2s linear; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; text-align: center; text-decoration: none; - -webkit-border-radius: 50px; - border-radius: 50px; + -webkit-border-radius: 6px; + border-radius: 6px; background-clip: padding-box; } From aca98c5113e6a98282c6c03f4cf6825e4a71dcea Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 13 Dec 2014 02:34:46 +0300 Subject: [PATCH 04/16] Fix getTransitionDuration helper --- src/jquery.remodal.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 0db9c48..538f058 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -32,16 +32,28 @@ $elem.css("-moz-transition-duration") || $elem.css("-o-transition-duration") || $elem.css("-ms-transition-duration") || - 0, - + "0s", delay = $elem.css("transition-delay") || $elem.css("-webkit-transition-delay") || $elem.css("-moz-transition-delay") || $elem.css("-o-transition-delay") || $elem.css("-ms-transition-delay") || - 0; + "0s", + max, len, num, i; + + duration = duration.split(", "); + delay = delay.split(", "); + + // The duration length is the same as the delay length + for (i = 0, len = duration.length, max = Number.NEGATIVE_INFINITY; i < len; i++) { + num = parseFloat(duration[i]) + parseFloat(delay[i]); + + if (num > max) { + max = num; + } + } - return (parseFloat(duration) + parseFloat(delay)) * 1000; + return num * 1000; } /** From 6729df8c3c735cc3780003c7297a8a70add30679 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 13 Dec 2014 02:45:27 +0300 Subject: [PATCH 05/16] :lipstick: --- src/jquery.remodal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 538f058..09116da 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -1,4 +1,4 @@ -;(function($) { +!(function($) { "use strict"; /** From 8e303b9a6d900bb06bafec3c3f9758d888017c64 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 13 Dec 2014 22:32:14 +0300 Subject: [PATCH 06/16] Fix IE8 styles --- src/jquery.remodal.css | 29 +++++++++++++++++++---------- src/jquery.remodal.js | 2 +- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index f439ca7..e0da034 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -285,19 +285,28 @@ body.remodal-is-active .remodal { /* IE8 ========================================================================== */ -html.lt-ie9, -html.lt-ie9 body { - overflow: auto !important; +.lt-ie9 .remodal-overlay { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F021242E, endColorstr=#F021242E); +} - min-height: 100%; - margin: 0; +.lt-ie9 .remodal { + width: 700px; + min-height: 0; + margin: 20px auto; } -.lt-ie9 .remodal-overlay { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMAuyogpzwAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGHRFWHRDcmVhdGlvbiBUaW1lADA2LzEwLzIwMTSCx1nsAAAAD0lEQVQImWP4//8DAxUxACnDOpkfX95WAAAAAElFTkSuQmCC); +.lt-ie9 .remodal-close:after { + margin: auto; + + text-align: center; } -.lt-ie9 .remodal { - width: 500px; - min-height: auto; +.lt-ie9 .remodal-close:hover, +.lt-ie9 .remodal-close:active { + background: transparent; +} + +.lt-ie9 .remodal-close:hover.remodal-close:after, +.lt-ie9 .remodal-close:active.remodal-close:after { + color: #3e5368; } diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 09116da..da7a078 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -179,7 +179,7 @@ } remodal.$bg = $("." + pluginName + "-bg"); - remodal.$closeButton = $("").addClass(pluginName + "-close"); + remodal.$closeButton = $("").addClass(pluginName + "-close"); remodal.$wrapper = $("
").addClass(pluginName + "-wrapper"); remodal.$modal = $modal; remodal.$modal.addClass(pluginName); From 0d2eefc31da517c2a2679338dabdb0aae702159d Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 00:23:27 +0300 Subject: [PATCH 07/16] Fix size of the overlay on touch devices --- src/jquery.remodal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index e0da034..71a8d9f 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -25,7 +25,7 @@ body.remodal-is-locked { z-index: 9999; top: 0; right: 0; - bottom: 0; + bottom: -100px; left: 0; display: none; From 86ad9f71466b0300fc5694babe0558a94f7933f3 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 00:58:28 +0300 Subject: [PATCH 08/16] :lipstick: pathes --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index eed22ae..1544ea9 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "grunt-jscs": "^0.8.1" }, "scripts": { - "postinstall": "node_modules/.bin/bower install && node_modules/.bin/grunt githooks", - "test": "grunt test" + "postinstall": "./node_modules/.bin/bower install && ./node_modules/.bin/grunt githooks", + "test": "./node_modules/.bin/grunt test" } } From f4fdeb05cf2e887901210b002523ea723f153d69 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 01:08:26 +0300 Subject: [PATCH 09/16] Update devDependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1544ea9..79cd12a 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "grunt-contrib-uglify": "^0.6.0", "grunt-csscomb": "^3.0.0", "grunt-githooks": "^0.3.1", - "grunt-jscs": "^0.8.1" + "grunt-jscs": "^1.0.0" }, "scripts": { "postinstall": "./node_modules/.bin/bower install && ./node_modules/.bin/grunt githooks", From 8c3dd46ad0e286011d40db1372659a31e590d928 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 01:45:53 +0300 Subject: [PATCH 10/16] Stretch the overlay --- src/jquery.remodal.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 71a8d9f..f595165 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -23,10 +23,10 @@ body.remodal-is-locked { .remodal-overlay { position: fixed; z-index: 9999; - top: 0; - right: 0; - bottom: -100px; - left: 0; + top: -10000px; + right: -10000px; + bottom: -10000px; + left: -10000px; display: none; } From dff48909d3ee56f7377e99723b03887ee31aae68 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 01:49:51 +0300 Subject: [PATCH 11/16] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 22a7bc4..64a9171 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,9 @@ Remodal Flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking. #IMPORTANT! + +**v0.4.0 has incompatible changes.** + If your page body requires `height: 100%`, your page will scroll to the top([#20](https://github.com/VodkaBears/Remodal/issues/20), [#21](https://github.com/VodkaBears/Remodal/issues/21)), because remodal sets `overflow: hidden` to the html and body to hide the scrollbar. There is no problem if your content doesn't overflow your full height body container, otherwise you should do something of this: * Try to set `min-height: 100%` instead of `height: 100%`. If it doesn't help, read next. * Set `html, body { overflow: auto !important; margin: 0; }`. Your page won't be locked and will be scrollable always. From 7c70e6d6f2e4b058399dcb4688f5f5b061a7412c Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 01:54:17 +0300 Subject: [PATCH 12/16] Update CHANGELOG.md --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a23c61..20c48ab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +### 0.4.0 +This version has incompatible changes! + +* Changed CSS class names. +* Shared overlay. +* Changed visual styles. +* Improved IE8 styles. +* Updated dependencies. +* Fixes. + ### 0.3.0 * Added font-size of inputs to prevent iOs zooming. * Convert image for IE8 to base64. From 7911ed1ad76f0d68a13b1c8d3c235ab77ba99baf Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 02:38:57 +0300 Subject: [PATCH 13/16] Fix glitches on touch devices --- src/jquery.remodal.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index f595165..19c05fa 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -23,10 +23,10 @@ body.remodal-is-locked { .remodal-overlay { position: fixed; z-index: 9999; - top: -10000px; - right: -10000px; - bottom: -10000px; - left: -10000px; + top: -5000px; + right: -5000px; + bottom: -5000px; + left: -5000px; display: none; } @@ -60,8 +60,9 @@ body.remodal-is-locked { /* Fix iPad, iPhone glitches */ +.remodal-overlay, .remodal-wrapper { - -webkit-backface-visibility: hidden; + -webkit-transform: translateZ(0px); } /* Necessary styles of the modal dialog */ From fe393c8660550175bf4f287df22950360fc0affd Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 13:57:36 +0300 Subject: [PATCH 14/16] :lipstick: --- src/jquery.remodal.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 19c05fa..8b5a071 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -149,8 +149,8 @@ body.remodal-is-active .remodal-overlay { -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); - opacity: 0; + opacity: 0; color: #182a3c; background: #f4f4f4; background-clip: padding-box; @@ -162,6 +162,7 @@ body.remodal-is-active .remodal { -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); + opacity: 1; } From 0f2b4f83e1117e70a1e8f9990247faddbfa5b87e Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 14:12:47 +0300 Subject: [PATCH 15/16] Add conditional comments to the examples --- examples/index-zepto.html | 3 ++- examples/index.html | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/index-zepto.html b/examples/index-zepto.html index 7e4b261..531a740 100644 --- a/examples/index-zepto.html +++ b/examples/index-zepto.html @@ -1,5 +1,6 @@ - + + Remodal example diff --git a/examples/index.html b/examples/index.html index 5036fcf..08ac97d 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,5 +1,6 @@ - + + Remodal example From 103612a13da2814a802bdfee9fca1f342eae6b57 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 14 Dec 2014 14:22:21 +0300 Subject: [PATCH 16/16] Release v0.4.0 --- bower.json | 2 +- dist/jquery.remodal.css | 133 ++++++++++++++++++++++--------------- dist/jquery.remodal.js | 57 +++++++++++----- dist/jquery.remodal.min.js | 4 +- remodal.jquery.json | 2 +- 5 files changed, 122 insertions(+), 76 deletions(-) diff --git a/bower.json b/bower.json index 2484f99..5401a1f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "remodal", - "version": "0.3.0", + "version": "0.4.0", "homepage": "http://vodkabears.github.io/remodal/", "authors": [ "Ilya Makarov " diff --git a/dist/jquery.remodal.css b/dist/jquery.remodal.css index c30620f..e43fb37 100644 --- a/dist/jquery.remodal.css +++ b/dist/jquery.remodal.css @@ -1,5 +1,5 @@ /* - * Remodal - v0.3.0 + * Remodal - v0.4.0 * Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking. * http://vodkabears.github.io/remodal/ * @@ -14,8 +14,8 @@ /* Hide scroll bar */ -html.remodal_lock, -body.remodal_lock { +html.remodal-is-locked, +body.remodal-is-locked { overflow: hidden; } @@ -26,9 +26,22 @@ body.remodal_lock { visibility: hidden; } -/* Overlay necessary styles */ +/* Necessary styles of the overlay */ .remodal-overlay { + position: fixed; + z-index: 9999; + top: -5000px; + right: -5000px; + bottom: -5000px; + left: -5000px; + + display: none; +} + +/* Necessary styles of the wrapper */ + +.remodal-wrapper { position: fixed; z-index: 10000; top: 0; @@ -44,7 +57,7 @@ body.remodal_lock { -webkit-overflow-scrolling: touch; } -.remodal-overlay:after { +.remodal-wrapper:after { display: inline-block; height: 100%; @@ -55,11 +68,12 @@ body.remodal_lock { /* Fix iPad, iPhone glitches */ -.remodal-overlay { - -webkit-backface-visibility: hidden; +.remodal-overlay, +.remodal-wrapper { + -webkit-transform: translateZ(0px); } -/* Modal dialog necessary styles */ +/* Necessary styles of the modal dialog */ .remodal { position: relative; @@ -67,7 +81,7 @@ body.remodal_lock { display: inline-block; } -/* Remodal anti-zoom. Font-size should be >= 16px. */ +/* Anti-zoom. Font-size should be >= 16px. */ .remodal select, .remodal textarea, @@ -92,13 +106,13 @@ body.remodal_lock { /* Background for effects */ .remodal-bg { - -webkit-transition: -webkit-filter 0.2s linear; - -moz-transition: -moz-filter 0.2s linear; - -o-transition: -o-filter 0.2s linear; - transition: filter 0.2s linear; + -webkit-transition: -webkit-filter 0.2s ease-out; + -moz-transition: -moz-filter 0.2s ease-out; + -o-transition: -o-filter 0.2s ease-out; + transition: filter 0.2s ease-out; } -body.remodal_active .remodal-bg { +body.remodal-is-active .remodal-bg { -webkit-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); @@ -106,23 +120,23 @@ body.remodal_active .remodal-bg { -o-filter: blur(3px); } -/* Overlay default theme styles */ +/* Default theme styles of the overlay */ .remodal-overlay { - -webkit-transition: opacity 0.2s linear; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + -o-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; opacity: 0; background: rgba(33, 36, 46, 0.95); } -body.remodal_active .remodal-overlay { +body.remodal-is-active .remodal-overlay { opacity: 1; } -/* Modal dialog default theme styles */ +/* Default theme styles of the modal dialog */ .remodal { font-size: 16px; @@ -134,35 +148,36 @@ body.remodal_active .remodal-overlay { min-height: 100%; padding: 35px; - -webkit-transition: -webkit-transform 0.2s linear; - -moz-transition: -moz-transform 0.2s linear; - -o-transition: -o-transform 0.2s linear; - transition: transform 0.2s linear; + -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out; + -moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out; + -o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-out; + transition: transform 0.2s ease-out, opacity 0.2s ease-out; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); + opacity: 0; color: #182a3c; background: #f4f4f4; background-clip: padding-box; - -webkit-box-shadow: 0 0 8px #171a24; - box-shadow: 0 0 8px #171a24; } -body.remodal_active .remodal { +body.remodal-is-active .remodal { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); + + opacity: 1; } -/* Modal dialog vertical align */ +/* Vertical align of the modal dialog */ .remodal, -.remodal-overlay:after { +.remodal-wrapper:after { vertical-align: middle; } @@ -176,13 +191,12 @@ body.remodal_active .remodal { width: 28px; height: 28px; - -webkit-transition: background 0.2s linear; - -moz-transition: background 0.2s linear; - -o-transition: background 0.2s linear; - transition: background 0.2s linear; + -webkit-transition: background 0.2s ease-out; + -moz-transition: background 0.2s ease-out; + -o-transition: background 0.2s ease-out; + transition: background 0.2s ease-out; text-decoration: none; - border: 2px solid #3e5368; -webkit-border-radius: 50%; border-radius: 50%; } @@ -196,10 +210,10 @@ body.remodal_active .remodal { content: "×"; cursor: pointer; - -webkit-transition: all 0.2s linear; - -moz-transition: all 0.2s linear; - -o-transition: all 0.2s linear; - transition: all 0.2s linear; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; text-decoration: none; color: #3e5368; @@ -228,15 +242,15 @@ body.remodal_active .remodal { padding: 9px 0; cursor: pointer; - -webkit-transition: all 0.2s linear; - -moz-transition: all 0.2s linear; - -o-transition: all 0.2s linear; - transition: all 0.2s linear; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; text-align: center; text-decoration: none; - -webkit-border-radius: 50px; - border-radius: 50px; + -webkit-border-radius: 6px; + border-radius: 6px; background-clip: padding-box; } @@ -281,19 +295,28 @@ body.remodal_active .remodal { /* IE8 ========================================================================== */ -html.lt-ie9, -html.lt-ie9 body { - overflow: auto !important; +.lt-ie9 .remodal-overlay { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F021242E, endColorstr=#F021242E); +} - min-height: 100%; - margin: 0; +.lt-ie9 .remodal { + width: 700px; + min-height: 0; + margin: 20px auto; } -.lt-ie9 .remodal-overlay { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMAuyogpzwAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGHRFWHRDcmVhdGlvbiBUaW1lADA2LzEwLzIwMTSCx1nsAAAAD0lEQVQImWP4//8DAxUxACnDOpkfX95WAAAAAElFTkSuQmCC); +.lt-ie9 .remodal-close:after { + margin: auto; + + text-align: center; } -.lt-ie9 .remodal { - width: 500px; - min-height: auto; +.lt-ie9 .remodal-close:hover, +.lt-ie9 .remodal-close:active { + background: transparent; +} + +.lt-ie9 .remodal-close:hover.remodal-close:after, +.lt-ie9 .remodal-close:active.remodal-close:after { + color: #3e5368; } diff --git a/dist/jquery.remodal.js b/dist/jquery.remodal.js index 9b71de7..4e3003e 100644 --- a/dist/jquery.remodal.js +++ b/dist/jquery.remodal.js @@ -1,12 +1,12 @@ /* - * Remodal - v0.3.0 + * Remodal - v0.4.0 * Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ -;(function($) { +!(function($) { "use strict"; /** @@ -40,16 +40,28 @@ $elem.css("-moz-transition-duration") || $elem.css("-o-transition-duration") || $elem.css("-ms-transition-duration") || - 0, - + "0s", delay = $elem.css("transition-delay") || $elem.css("-webkit-transition-delay") || $elem.css("-moz-transition-delay") || $elem.css("-o-transition-delay") || $elem.css("-ms-transition-delay") || - 0; + "0s", + max, len, num, i; + + duration = duration.split(", "); + delay = delay.split(", "); + + // The duration length is the same as the delay length + for (i = 0, len = duration.length, max = Number.NEGATIVE_INFINITY; i < len; i++) { + num = parseFloat(duration[i]) + parseFloat(delay[i]); + + if (num > max) { + max = num; + } + } - return (parseFloat(duration) + parseFloat(delay)) * 1000; + return num * 1000; } /** @@ -99,7 +111,7 @@ paddingRight = parseInt($body.css("padding-right"), 10) + getScrollbarWidth(); $body.css("padding-right", paddingRight + "px"); - $("html, body").addClass(pluginName + "_lock"); + $("html, body").addClass(pluginName + "-is-locked"); } /** @@ -113,7 +125,7 @@ paddingRight = parseInt($body.css("padding-right"), 10) - getScrollbarWidth(); $body.css("padding-right", paddingRight + "px"); - $("html, body").removeClass(pluginName + "_lock"); + $("html, body").removeClass(pluginName + "-is-locked"); } /** @@ -167,15 +179,23 @@ // Build DOM remodal.$body = $(document.body); + remodal.$overlay = $("." + pluginName + "-overlay"); + + if (!remodal.$overlay.length) { + remodal.$overlay = $("
").addClass(pluginName + "-overlay"); + remodal.$body.append(remodal.$overlay); + } + remodal.$bg = $("." + pluginName + "-bg"); - remodal.$closeButton = $("").addClass(pluginName + "-close"); - remodal.$overlay = $("
").addClass(pluginName + "-overlay"); + remodal.$closeButton = $("").addClass(pluginName + "-close"); + remodal.$wrapper = $("
").addClass(pluginName + "-wrapper"); remodal.$modal = $modal; remodal.$modal.addClass(pluginName); remodal.$modal.css("visibility", "visible"); + remodal.$modal.append(remodal.$closeButton); - remodal.$overlay.append(remodal.$modal); - remodal.$body.append(remodal.$overlay); + remodal.$wrapper.append(remodal.$modal); + remodal.$body.append(remodal.$wrapper); remodal.$confirmButton = remodal.$modal.find("." + pluginName + "-confirm"); remodal.$cancelButton = remodal.$modal.find("." + pluginName + "-cancel"); @@ -223,10 +243,10 @@ }); // Add overlay event listener - remodal.$overlay.bind("click." + pluginName, function(e) { + remodal.$wrapper.bind("click." + pluginName, function(e) { var $target = $(e.target); - if (!$target.hasClass(pluginName + "-overlay")) { + if (!$target.hasClass(pluginName + "-wrapper")) { return; } @@ -264,16 +284,18 @@ if (current && current !== remodal) { current.$overlay.hide(); - current.$body.removeClass(pluginName + "_active"); + current.$wrapper.hide(); + current.$body.removeClass(pluginName + "-is-active"); } current = remodal; lockScreen(); remodal.$overlay.show(); + remodal.$wrapper.show(); setTimeout(function() { - remodal.$body.addClass(pluginName + "_active"); + remodal.$body.addClass(pluginName + "-is-active"); setTimeout(function() { remodal.busy = false; @@ -303,10 +325,11 @@ $(window).scrollTop(scrollTop); } - remodal.$body.removeClass(pluginName + "_active"); + remodal.$body.removeClass(pluginName + "-is-active"); setTimeout(function() { remodal.$overlay.hide(); + remodal.$wrapper.hide(); unlockScreen(); remodal.busy = false; diff --git a/dist/jquery.remodal.min.js b/dist/jquery.remodal.min.js index 63c9daa..4613bf3 100644 --- a/dist/jquery.remodal.min.js +++ b/dist/jquery.remodal.min.js @@ -1,9 +1,9 @@ /* - * Remodal - v0.3.0 + * Remodal - v0.4.0 * Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ -!function(a){"use strict";function b(a){var b=a.css("transition-duration")||a.css("-webkit-transition-duration")||a.css("-moz-transition-duration")||a.css("-o-transition-duration")||a.css("-ms-transition-duration")||0,c=a.css("transition-delay")||a.css("-webkit-transition-delay")||a.css("-moz-transition-delay")||a.css("-o-transition-delay")||a.css("-ms-transition-delay")||0;return 1e3*(parseFloat(b)+parseFloat(c))}function c(){if(a(document.body).height()<=a(window).height())return 0;var b,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),b=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),b-c}function d(){var b=a(document.body),d=parseInt(b.css("padding-right"),10)+c();b.css("padding-right",d+"px"),a("html, body").addClass(k+"_lock")}function e(){var b=a(document.body),d=parseInt(b.css("padding-right"),10)-c();b.css("padding-right",d+"px"),a("html, body").removeClass(k+"_lock")}function f(a){var b,c,d,e,f={};for(a=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,","),b=a.split(","),e=0,c=b.length;c>e;e++)b[e]=b[e].split(":"),d=b[e][1],("string"==typeof d||d instanceof String)&&(d="true"===d||("false"===d?!1:d)),("string"==typeof d||d instanceof String)&&(d=isNaN(d)?d:+d),f[b[e][0]]=d;return f}function g(c,d){var e,f,g,h=this;h.settings=a.extend({},l,d),h.$body=a(document.body),h.$bg=a("."+k+"-bg"),h.$closeButton=a("").addClass(k+"-close"),h.$overlay=a("
").addClass(k+"-overlay"),h.$modal=c,h.$modal.addClass(k),h.$modal.css("visibility","visible"),h.$modal.append(h.$closeButton),h.$overlay.append(h.$modal),h.$body.append(h.$overlay),h.$confirmButton=h.$modal.find("."+k+"-confirm"),h.$cancelButton=h.$modal.find("."+k+"-cancel"),e=b(h.$overlay),f=b(h.$modal),g=b(h.$bg),h.td=f>e?f:e,h.td=g>h.td?g:h.td,h.$closeButton.bind("click."+k,function(a){a.preventDefault(),h.close()}),h.$cancelButton.bind("click."+k,function(a){a.preventDefault(),h.$modal.trigger("cancel"),h.settings.closeOnCancel&&h.close()}),h.$confirmButton.bind("click."+k,function(a){a.preventDefault(),h.$modal.trigger("confirm"),h.settings.closeOnConfirm&&h.close()}),a(document).bind("keyup."+k,function(a){27===a.keyCode&&h.settings.closeOnEscape&&h.close()}),h.$overlay.bind("click."+k,function(b){var c=a(b.target);c.hasClass(k+"-overlay")&&h.settings.closeOnAnyClick&&h.close()}),h.index=a[k].lookup.push(h)-1,h.busy=!1}function h(b,c){var d,e,f=location.hash.replace("#","");if("undefined"==typeof c&&(c=!0),f){try{e=a("[data-"+k+"-id="+f.replace(new RegExp("/","g"),"\\/")+"]")}catch(g){}e&&e.length&&(d=a[k].lookup[e.data(k)],d&&d.settings.hashTracking&&d.open())}else c&&i&&!i.busy&&i.settings.hashTracking&&i.close()}var i,j,k="remodal",l={hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnAnyClick:!0};g.prototype.open=function(){if(!this.busy){var b,c=this;c.busy=!0,c.$modal.trigger("open"),b=c.$modal.attr("data-"+k+"-id"),b&&c.settings.hashTracking&&(j=a(window).scrollTop(),location.hash=b),i&&i!==c&&(i.$overlay.hide(),i.$body.removeClass(k+"_active")),i=c,d(),c.$overlay.show(),setTimeout(function(){c.$body.addClass(k+"_active"),setTimeout(function(){c.busy=!1,c.$modal.trigger("opened")},c.td+50)},25)}},g.prototype.close=function(){if(!this.busy){this.busy=!0,this.$modal.trigger("close");var b=this;b.settings.hashTracking&&b.$modal.attr("data-"+k+"-id")===location.hash.substr(1)&&(location.hash="",a(window).scrollTop(j)),b.$body.removeClass(k+"_active"),setTimeout(function(){b.$overlay.hide(),e(),b.busy=!1,b.$modal.trigger("closed")},b.td+50)}},a[k]={lookup:[]},a.fn[k]=function(b){var c,d;return this.each(function(e,f){d=a(f),null==d.data(k)&&(c=new g(d,b),d.data(k,c.index),c.settings.hashTracking&&d.attr("data-"+k+"-id")===location.hash.substr(1)&&c.open())}),c},a(document).ready(function(){a(document).on("click","[data-"+k+"-target]",function(b){b.preventDefault();var c=b.currentTarget,d=c.getAttribute("data-"+k+"-target"),e=a("[data-"+k+"-id="+d+"]");a[k].lookup[e.data(k)].open()}),a(document).find("."+k).each(function(b,c){var d=a(c),e=d.data(k+"-options");e?("string"==typeof e||e instanceof String)&&(e=f(e)):e={},d[k](e)})}),a(window).bind("hashchange."+k,h)}(window.jQuery||window.Zepto); \ No newline at end of file +!function(a){"use strict";function b(a){var b,c,d,e,f=a.css("transition-duration")||a.css("-webkit-transition-duration")||a.css("-moz-transition-duration")||a.css("-o-transition-duration")||a.css("-ms-transition-duration")||"0s",g=a.css("transition-delay")||a.css("-webkit-transition-delay")||a.css("-moz-transition-delay")||a.css("-o-transition-delay")||a.css("-ms-transition-delay")||"0s";for(f=f.split(", "),g=g.split(", "),e=0,c=f.length,b=Number.NEGATIVE_INFINITY;c>e;e++)d=parseFloat(f[e])+parseFloat(g[e]),d>b&&(b=d);return 1e3*d}function c(){if(a(document.body).height()<=a(window).height())return 0;var b,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),b=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),b-c}function d(){var b=a(document.body),d=parseInt(b.css("padding-right"),10)+c();b.css("padding-right",d+"px"),a("html, body").addClass(k+"-is-locked")}function e(){var b=a(document.body),d=parseInt(b.css("padding-right"),10)-c();b.css("padding-right",d+"px"),a("html, body").removeClass(k+"-is-locked")}function f(a){var b,c,d,e,f={};for(a=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,","),b=a.split(","),e=0,c=b.length;c>e;e++)b[e]=b[e].split(":"),d=b[e][1],("string"==typeof d||d instanceof String)&&(d="true"===d||("false"===d?!1:d)),("string"==typeof d||d instanceof String)&&(d=isNaN(d)?d:+d),f[b[e][0]]=d;return f}function g(c,d){var e,f,g,h=this;h.settings=a.extend({},l,d),h.$body=a(document.body),h.$overlay=a("."+k+"-overlay"),h.$overlay.length||(h.$overlay=a("
").addClass(k+"-overlay"),h.$body.append(h.$overlay)),h.$bg=a("."+k+"-bg"),h.$closeButton=a("").addClass(k+"-close"),h.$wrapper=a("
").addClass(k+"-wrapper"),h.$modal=c,h.$modal.addClass(k),h.$modal.css("visibility","visible"),h.$modal.append(h.$closeButton),h.$wrapper.append(h.$modal),h.$body.append(h.$wrapper),h.$confirmButton=h.$modal.find("."+k+"-confirm"),h.$cancelButton=h.$modal.find("."+k+"-cancel"),e=b(h.$overlay),f=b(h.$modal),g=b(h.$bg),h.td=f>e?f:e,h.td=g>h.td?g:h.td,h.$closeButton.bind("click."+k,function(a){a.preventDefault(),h.close()}),h.$cancelButton.bind("click."+k,function(a){a.preventDefault(),h.$modal.trigger("cancel"),h.settings.closeOnCancel&&h.close()}),h.$confirmButton.bind("click."+k,function(a){a.preventDefault(),h.$modal.trigger("confirm"),h.settings.closeOnConfirm&&h.close()}),a(document).bind("keyup."+k,function(a){27===a.keyCode&&h.settings.closeOnEscape&&h.close()}),h.$wrapper.bind("click."+k,function(b){var c=a(b.target);c.hasClass(k+"-wrapper")&&h.settings.closeOnAnyClick&&h.close()}),h.index=a[k].lookup.push(h)-1,h.busy=!1}function h(b,c){var d,e,f=location.hash.replace("#","");if("undefined"==typeof c&&(c=!0),f){try{e=a("[data-"+k+"-id="+f.replace(new RegExp("/","g"),"\\/")+"]")}catch(g){}e&&e.length&&(d=a[k].lookup[e.data(k)],d&&d.settings.hashTracking&&d.open())}else c&&i&&!i.busy&&i.settings.hashTracking&&i.close()}var i,j,k="remodal",l={hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnAnyClick:!0};g.prototype.open=function(){if(!this.busy){var b,c=this;c.busy=!0,c.$modal.trigger("open"),b=c.$modal.attr("data-"+k+"-id"),b&&c.settings.hashTracking&&(j=a(window).scrollTop(),location.hash=b),i&&i!==c&&(i.$overlay.hide(),i.$wrapper.hide(),i.$body.removeClass(k+"-is-active")),i=c,d(),c.$overlay.show(),c.$wrapper.show(),setTimeout(function(){c.$body.addClass(k+"-is-active"),setTimeout(function(){c.busy=!1,c.$modal.trigger("opened")},c.td+50)},25)}},g.prototype.close=function(){if(!this.busy){this.busy=!0,this.$modal.trigger("close");var b=this;b.settings.hashTracking&&b.$modal.attr("data-"+k+"-id")===location.hash.substr(1)&&(location.hash="",a(window).scrollTop(j)),b.$body.removeClass(k+"-is-active"),setTimeout(function(){b.$overlay.hide(),b.$wrapper.hide(),e(),b.busy=!1,b.$modal.trigger("closed")},b.td+50)}},a[k]={lookup:[]},a.fn[k]=function(b){var c,d;return this.each(function(e,f){d=a(f),null==d.data(k)&&(c=new g(d,b),d.data(k,c.index),c.settings.hashTracking&&d.attr("data-"+k+"-id")===location.hash.substr(1)&&c.open())}),c},a(document).ready(function(){a(document).on("click","[data-"+k+"-target]",function(b){b.preventDefault();var c=b.currentTarget,d=c.getAttribute("data-"+k+"-target"),e=a("[data-"+k+"-id="+d+"]");a[k].lookup[e.data(k)].open()}),a(document).find("."+k).each(function(b,c){var d=a(c),e=d.data(k+"-options");e?("string"==typeof e||e instanceof String)&&(e=f(e)):e={},d[k](e)})}),a(window).bind("hashchange."+k,h)}(window.jQuery||window.Zepto); \ No newline at end of file diff --git a/remodal.jquery.json b/remodal.jquery.json index cfae653..380e19e 100644 --- a/remodal.jquery.json +++ b/remodal.jquery.json @@ -14,7 +14,7 @@ "ui", "zepto" ], - "version": "0.3.0", + "version": "0.4.0", "author": { "name": "Ilya Makarov", "email": "dfrost.00@gmail.com",