From 59c0bc1ecb0293bcb664e6ba6654451775fdb340 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 19 Apr 2015 03:30:10 +0300 Subject: [PATCH 01/68] Ignore .DS_Store files --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1bf4f66..542377a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.DS_Store .idea/ node_modules/ libs/ From b3a2f4a36e8bc4433f5da02ab26d080e1a6d3f70 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 19 Apr 2015 03:32:43 +0300 Subject: [PATCH 02/68] Add an exclamation point in the beginning --- 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 910e1b9..a7e3cc4 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -1,4 +1,4 @@ -(function(root, factory) { +!(function(root, factory) { if (typeof define === 'function' && define.amd) { define(['jquery'], function($) { return factory(root, $); From de6ffe69e3e1615d94bbb9ec5c80844e567b83c9 Mon Sep 17 00:00:00 2001 From: Poluektov Dmitriy Date: Thu, 9 Apr 2015 00:30:28 +0300 Subject: [PATCH 03/68] bind events by data-attributes --- dist/jquery.remodal.css | 2 -- dist/jquery.remodal.js | 8 +++++--- dist/jquery.remodal.min.js | 2 +- examples/index-zepto.html | 7 ++++--- examples/index.html | 7 ++++--- src/jquery.remodal.css | 2 -- src/jquery.remodal.js | 8 +++++--- test/remodal.html | 12 ++++++++---- 8 files changed, 27 insertions(+), 21 deletions(-) diff --git a/dist/jquery.remodal.css b/dist/jquery.remodal.css index 11a7c87..c552af3 100644 --- a/dist/jquery.remodal.css +++ b/dist/jquery.remodal.css @@ -6,8 +6,6 @@ * Made by Ilya Makarov * Under MIT License */ -@import url(//fonts.googleapis.com/css?family=Exo+2:700,400&subset=latin,cyrillic); - /* ========================================================================== Remodal necessary styles ========================================================================== */ diff --git a/dist/jquery.remodal.js b/dist/jquery.remodal.js index 28278bf..61f8dc2 100644 --- a/dist/jquery.remodal.js +++ b/dist/jquery.remodal.js @@ -242,7 +242,7 @@ } remodal.$bg = $('.' + namespace + '-bg'); - remodal.$closeButton = $('').addClass(namespace + '-close'); + remodal.$wrapper = $('
').addClass(namespace + '-wrapper'); remodal.$modal = $modal; remodal.$modal.addClass(namespace); @@ -251,8 +251,10 @@ remodal.$modal.append(remodal.$closeButton); remodal.$wrapper.append(remodal.$modal); remodal.$body.append(remodal.$wrapper); - remodal.$confirmButton = remodal.$modal.find('.' + namespace + '-confirm'); - remodal.$cancelButton = remodal.$modal.find('.' + namespace + '-cancel'); + + remodal.$closeButton = remodal.$modal.find('[data-' + namespace + '-action="close"]'); + remodal.$confirmButton = remodal.$modal.find('[data-' + namespace + '-action="confirm"]'); + remodal.$cancelButton = remodal.$modal.find('[data-' + namespace + '-action="cancel"]'); // Calculate timeouts tdOverlay = getTransitionDuration(remodal.$overlay); diff --git a/dist/jquery.remodal.min.js b/dist/jquery.remodal.min.js index cd03c70..495a9ef 100644 --- a/dist/jquery.remodal.min.js +++ b/dist/jquery.remodal.min.js @@ -6,4 +6,4 @@ * Made by Ilya Makarov * Under MIT License */ -!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery||a.Zepto)}(this,function(a,b){"use strict";function c(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 d(){if(b(document.body).height()<=b(window).height())return 0;var a,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),a=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),a-c}function e(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)||(c=b(document.body),a=parseInt(c.css("padding-right"),10)+d(),c.css("padding-right",a+"px"),e.addClass(f))}function f(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)&&(c=b(document.body),a=parseInt(c.css("padding-right"),10)-d(),c.css("padding-right",a+"px"),e.removeClass(f))}function g(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 h(a,d){var e,f,g,h=this;h.settings=b.extend({},n,d),h.$body=b(document.body),h.$overlay=b("."+m+"-overlay"),h.$overlay.length||(h.$overlay=b("
").addClass(m+"-overlay"),h.$body.append(h.$overlay)),h.$bg=b("."+m+"-bg"),h.$closeButton=b('').addClass(m+"-close"),h.$wrapper=b("
").addClass(m+"-wrapper"),h.$modal=a,h.$modal.addClass(m),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("."+m+"-confirm"),h.$cancelButton=h.$modal.find("."+m+"-cancel"),e=c(h.$overlay),f=c(h.$modal),g=c(h.$bg),h.td=Math.max(e,f,g),h.$wrapper.on("click."+m,"."+m+"-close",function(a){a.preventDefault(),h.close()}),h.$wrapper.on("click."+m,"."+m+"-cancel",function(a){a.preventDefault(),h.$modal.trigger("cancel"),h.settings.closeOnCancel&&h.close("cancellation")}),h.$wrapper.on("click."+m,"."+m+"-confirm",function(a){a.preventDefault(),h.$modal.trigger("confirm"),h.settings.closeOnConfirm&&h.close("confirmation")}),b(document).on("keyup."+m,function(a){27===a.keyCode&&h.settings.closeOnEscape&&h.close()}),h.$wrapper.on("click."+m,function(a){var c=b(a.target);c.hasClass(m+"-wrapper")&&h.settings.closeOnAnyClick&&h.close()}),h.index=b[l].lookup.push(h)-1,h.busy=!1}function i(a,c){var d,e,f=location.hash.replace("#","");if("undefined"==typeof c&&(c=!0),f){try{e=b("[data-"+l+"-id="+f.replace(new RegExp("/","g"),"\\/")+"]")}catch(g){}e&&e.length&&(d=b[l].lookup[e.data(l)],d&&d.settings.hashTracking&&d.open())}else c&&j&&!j.busy&&j.settings.hashTracking&&j.close()}var j,k,l="remodal",m=a.remodalGlobals&&a.remodalGlobals.namespace||l,n=b.extend({hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnAnyClick:!0},a.remodalGlobals&&a.remodalGlobals.defaults);h.prototype.open=function(){if(!this.busy){var a,c=this;c.busy=!0,c.$modal.trigger("open"),a=c.$modal.attr("data-"+l+"-id"),a&&c.settings.hashTracking&&(k=b(window).scrollTop(),location.hash=a),j&&j!==c&&(j.$overlay.hide(),j.$wrapper.hide(),j.$body.removeClass(m+"-is-active")),j=c,e(),c.$overlay.show(),c.$wrapper.show(),setTimeout(function(){c.$body.addClass(m+"-is-active"),c.$wrapper.scrollTop(0),setTimeout(function(){c.busy=!1,c.$modal.trigger("opened")},c.td+50)},25)}},h.prototype.close=function(a){if(!this.busy){var c=this;c.busy=!0,c.$modal.trigger({type:"close",reason:a}),c.settings.hashTracking&&c.$modal.attr("data-"+l+"-id")===location.hash.substr(1)&&(location.hash="",b(window).scrollTop(k)),c.$body.removeClass(m+"-is-active"),setTimeout(function(){c.$overlay.hide(),c.$wrapper.hide(),f(),c.busy=!1,c.$modal.trigger({type:"closed",reason:a})},c.td+50)}},b[l]={lookup:[]},b.fn[l]=function(a){var c,d;return this.each(function(e,f){d=b(f),null==d.data(l)?(c=new h(d,a),d.data(l,c.index),c.settings.hashTracking&&d.attr("data-"+l+"-id")===location.hash.substr(1)&&c.open()):c=b[l].lookup[d.data(l)]}),c},b(document).ready(function(){b(document).on("click","[data-"+l+"-target]",function(a){a.preventDefault();var c=a.currentTarget,d=c.getAttribute("data-"+l+"-target"),e=b("[data-"+l+"-id="+d+"]");b[l].lookup[e.data(l)].open()}),b(document).find("."+m).each(function(a,c){var d=b(c),e=d.data(l+"-options");e?("string"==typeof e||e instanceof String)&&(e=g(e)):e={},d[l](e)})}),b(window).bind("hashchange."+m,i)}); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery||a.Zepto)}(this,function(a,b){"use strict";function c(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 d(){if(b(document.body).height()<=b(window).height())return 0;var a,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),a=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),a-c}function e(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)||(c=b(document.body),a=parseInt(c.css("padding-right"),10)+d(),c.css("padding-right",a+"px"),e.addClass(f))}function f(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)&&(c=b(document.body),a=parseInt(c.css("padding-right"),10)-d(),c.css("padding-right",a+"px"),e.removeClass(f))}function g(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 h(a,d){var e,f,g,h=this;h.settings=b.extend({},n,d),h.$body=b(document.body),h.$overlay=b("."+m+"-overlay"),h.$overlay.length||(h.$overlay=b("
").addClass(m+"-overlay"),h.$body.append(h.$overlay)),h.$bg=b("."+m+"-bg"),h.$wrapper=b("
").addClass(m+"-wrapper"),h.$modal=a,h.$modal.addClass(m),h.$modal.css("visibility","visible"),h.$modal.append(h.$closeButton),h.$wrapper.append(h.$modal),h.$body.append(h.$wrapper),h.$closeButton=h.$modal.find("[data-"+m+'-action="close"]'),h.$confirmButton=h.$modal.find("[data-"+m+'-action="confirm"]'),h.$cancelButton=h.$modal.find("[data-"+m+'-action="cancel"]'),e=c(h.$overlay),f=c(h.$modal),g=c(h.$bg),h.td=Math.max(e,f,g),h.$wrapper.on("click."+m,"."+m+"-close",function(a){a.preventDefault(),h.close()}),h.$wrapper.on("click."+m,"."+m+"-cancel",function(a){a.preventDefault(),h.$modal.trigger("cancel"),h.settings.closeOnCancel&&h.close("cancellation")}),h.$wrapper.on("click."+m,"."+m+"-confirm",function(a){a.preventDefault(),h.$modal.trigger("confirm"),h.settings.closeOnConfirm&&h.close("confirmation")}),b(document).on("keyup."+m,function(a){27===a.keyCode&&h.settings.closeOnEscape&&h.close()}),h.$wrapper.on("click."+m,function(a){var c=b(a.target);c.hasClass(m+"-wrapper")&&h.settings.closeOnAnyClick&&h.close()}),h.index=b[l].lookup.push(h)-1,h.busy=!1}function i(a,c){var d,e,f=location.hash.replace("#","");if("undefined"==typeof c&&(c=!0),f){try{e=b("[data-"+l+"-id="+f.replace(new RegExp("/","g"),"\\/")+"]")}catch(g){}e&&e.length&&(d=b[l].lookup[e.data(l)],d&&d.settings.hashTracking&&d.open())}else c&&j&&!j.busy&&j.settings.hashTracking&&j.close()}var j,k,l="remodal",m=a.remodalGlobals&&a.remodalGlobals.namespace||l,n=b.extend({hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnAnyClick:!0},a.remodalGlobals&&a.remodalGlobals.defaults);h.prototype.open=function(){if(!this.busy){var a,c=this;c.busy=!0,c.$modal.trigger("open"),a=c.$modal.attr("data-"+l+"-id"),a&&c.settings.hashTracking&&(k=b(window).scrollTop(),location.hash=a),j&&j!==c&&(j.$overlay.hide(),j.$wrapper.hide(),j.$body.removeClass(m+"-is-active")),j=c,e(),c.$overlay.show(),c.$wrapper.show(),setTimeout(function(){c.$body.addClass(m+"-is-active"),c.$wrapper.scrollTop(0),setTimeout(function(){c.busy=!1,c.$modal.trigger("opened")},c.td+50)},25)}},h.prototype.close=function(a){if(!this.busy){var c=this;c.busy=!0,c.$modal.trigger({type:"close",reason:a}),c.settings.hashTracking&&c.$modal.attr("data-"+l+"-id")===location.hash.substr(1)&&(location.hash="",b(window).scrollTop(k)),c.$body.removeClass(m+"-is-active"),setTimeout(function(){c.$overlay.hide(),c.$wrapper.hide(),f(),c.busy=!1,c.$modal.trigger({type:"closed",reason:a})},c.td+50)}},b[l]={lookup:[]},b.fn[l]=function(a){var c,d;return this.each(function(e,f){d=b(f),null==d.data(l)?(c=new h(d,a),d.data(l,c.index),c.settings.hashTracking&&d.attr("data-"+l+"-id")===location.hash.substr(1)&&c.open()):c=b[l].lookup[d.data(l)]}),c},b(document).ready(function(){b(document).on("click","[data-"+l+"-target]",function(a){a.preventDefault();var c=a.currentTarget,d=c.getAttribute("data-"+l+"-target"),e=b("[data-"+l+"-id="+d+"]");b[l].lookup[e.data(l)].open()}),b(document).find("."+m).each(function(a,c){var d=b(c),e=d.data(l+"-options");e?("string"==typeof e||e instanceof String)&&(e=g(e)):e={},d[l](e)})}),b(window).bind("hashchange."+m,i)}); \ No newline at end of file diff --git a/examples/index-zepto.html b/examples/index-zepto.html index aeb283d..637901b 100644 --- a/examples/index-zepto.html +++ b/examples/index-zepto.html @@ -80,6 +80,7 @@

Remodal

+

Remodal

Flat, responsive, lightweight, fast, easy customizable modal window plugin @@ -89,8 +90,8 @@

Remodal

Minified version size: ~4kb


- Cancel - OK + Cancel + OK
@@ -99,7 +100,7 @@

Another one window

Hello!


- Hello! + Hello!
diff --git a/examples/index.html b/examples/index.html index d580ccf..46c74a1 100644 --- a/examples/index.html +++ b/examples/index.html @@ -80,6 +80,7 @@

Remodal

+

Remodal

Flat, responsive, lightweight, fast, easy customizable modal window plugin @@ -89,8 +90,8 @@

Remodal

Minified version size: ~4kb


- Cancel - OK + Cancel + OK
@@ -99,7 +100,7 @@

Another one window

Hello!


- Hello! + Hello!
diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 65b4bd0..3e750b5 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -1,5 +1,3 @@ -@import url(//fonts.googleapis.com/css?family=Exo+2:700,400&subset=latin,cyrillic); - /* ========================================================================== Remodal necessary styles ========================================================================== */ diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index a7e3cc4..d1c61db 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -234,7 +234,7 @@ } remodal.$bg = $('.' + namespace + '-bg'); - remodal.$closeButton = $('').addClass(namespace + '-close'); + remodal.$wrapper = $('
').addClass(namespace + '-wrapper'); remodal.$modal = $modal; remodal.$modal.addClass(namespace); @@ -243,8 +243,10 @@ remodal.$modal.append(remodal.$closeButton); remodal.$wrapper.append(remodal.$modal); remodal.$body.append(remodal.$wrapper); - remodal.$confirmButton = remodal.$modal.find('.' + namespace + '-confirm'); - remodal.$cancelButton = remodal.$modal.find('.' + namespace + '-cancel'); + + remodal.$closeButton = remodal.$modal.find('[data-' + namespace + '-action="close"]'); + remodal.$confirmButton = remodal.$modal.find('[data-' + namespace + '-action="confirm"]'); + remodal.$cancelButton = remodal.$modal.find('[data-' + namespace + '-action="cancel"]'); // Calculate timeouts tdOverlay = getTransitionDuration(remodal.$overlay); diff --git a/test/remodal.html b/test/remodal.html index 286f52c..41d0307 100644 --- a/test/remodal.html +++ b/test/remodal.html @@ -30,16 +30,20 @@ Call
- Cancel - OK + + + Cancel + OK
- Cancel - OK + + Cancel + OK
+
From 0fefd9b1931914b9f08d0fe1b323fcadeccdffa0 Mon Sep 17 00:00:00 2001 From: Poluektov Dmitriy Date: Thu, 9 Apr 2015 00:37:19 +0300 Subject: [PATCH 04/68] remove exo font-family --- src/jquery.remodal.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 3e750b5..40c6ccc 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -85,13 +85,6 @@ html.remodal-is-locked { Remodal default theme ========================================================================== */ -/* Default theme font */ - -.remodal, -.remodal * { - font-family: "Exo 2", sans-serif; -} - /* Background for effects */ .remodal-bg { From 6d7251a952891f3e6bdb238621bf9bfce597a8f3 Mon Sep 17 00:00:00 2001 From: Poluektov Dmitriy Date: Thu, 9 Apr 2015 11:52:22 +0300 Subject: [PATCH 05/68] selectors fix --- dist/jquery.remodal.css | 7 ------- dist/jquery.remodal.js | 15 +++++++-------- dist/jquery.remodal.min.js | 2 +- src/jquery.remodal.js | 15 +++++++-------- test/remodal_test.js | 14 +++++++------- 5 files changed, 22 insertions(+), 31 deletions(-) diff --git a/dist/jquery.remodal.css b/dist/jquery.remodal.css index c552af3..7b1e20c 100644 --- a/dist/jquery.remodal.css +++ b/dist/jquery.remodal.css @@ -93,13 +93,6 @@ html.remodal-is-locked { Remodal default theme ========================================================================== */ -/* Default theme font */ - -.remodal, -.remodal * { - font-family: "Exo 2", sans-serif; -} - /* Background for effects */ .remodal-bg { diff --git a/dist/jquery.remodal.js b/dist/jquery.remodal.js index 61f8dc2..925d4e8 100644 --- a/dist/jquery.remodal.js +++ b/dist/jquery.remodal.js @@ -230,6 +230,10 @@ var tdModal; var tdBg; + var closeButtonSelector = '[data-' + namespace + '-action="close"]'; + var confirmButtonSelector = '[data-' + namespace + '-action="confirm"]'; + var cancelButtonSelector = '[data-' + namespace + '-action="cancel"]'; + remodal.settings = $.extend({}, defaults, options); // Build DOM @@ -248,14 +252,9 @@ remodal.$modal.addClass(namespace); remodal.$modal.css('visibility', 'visible'); - remodal.$modal.append(remodal.$closeButton); remodal.$wrapper.append(remodal.$modal); remodal.$body.append(remodal.$wrapper); - remodal.$closeButton = remodal.$modal.find('[data-' + namespace + '-action="close"]'); - remodal.$confirmButton = remodal.$modal.find('[data-' + namespace + '-action="confirm"]'); - remodal.$cancelButton = remodal.$modal.find('[data-' + namespace + '-action="cancel"]'); - // Calculate timeouts tdOverlay = getTransitionDuration(remodal.$overlay); tdModal = getTransitionDuration(remodal.$modal); @@ -263,14 +262,14 @@ remodal.td = Math.max(tdOverlay, tdModal, tdBg); // Add the close button event listener - remodal.$wrapper.on('click.' + namespace, '.' + namespace + '-close', function(e) { + remodal.$wrapper.on('click.' + namespace, closeButtonSelector, function(e) { e.preventDefault(); remodal.close(); }); // Add the cancel button event listener - remodal.$wrapper.on('click.' + namespace, '.' + namespace + '-cancel', function(e) { + remodal.$wrapper.on('click.' + namespace, cancelButtonSelector, function(e) { e.preventDefault(); remodal.$modal.trigger('cancel'); @@ -281,7 +280,7 @@ }); // Add the confirm button event listener - remodal.$wrapper.on('click.' + namespace, '.' + namespace + '-confirm', function(e) { + remodal.$wrapper.on('click.' + namespace, confirmButtonSelector, function(e) { e.preventDefault(); remodal.$modal.trigger('confirm'); diff --git a/dist/jquery.remodal.min.js b/dist/jquery.remodal.min.js index 495a9ef..7d9098f 100644 --- a/dist/jquery.remodal.min.js +++ b/dist/jquery.remodal.min.js @@ -6,4 +6,4 @@ * Made by Ilya Makarov * Under MIT License */ -!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery||a.Zepto)}(this,function(a,b){"use strict";function c(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 d(){if(b(document.body).height()<=b(window).height())return 0;var a,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),a=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),a-c}function e(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)||(c=b(document.body),a=parseInt(c.css("padding-right"),10)+d(),c.css("padding-right",a+"px"),e.addClass(f))}function f(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)&&(c=b(document.body),a=parseInt(c.css("padding-right"),10)-d(),c.css("padding-right",a+"px"),e.removeClass(f))}function g(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 h(a,d){var e,f,g,h=this;h.settings=b.extend({},n,d),h.$body=b(document.body),h.$overlay=b("."+m+"-overlay"),h.$overlay.length||(h.$overlay=b("
").addClass(m+"-overlay"),h.$body.append(h.$overlay)),h.$bg=b("."+m+"-bg"),h.$wrapper=b("
").addClass(m+"-wrapper"),h.$modal=a,h.$modal.addClass(m),h.$modal.css("visibility","visible"),h.$modal.append(h.$closeButton),h.$wrapper.append(h.$modal),h.$body.append(h.$wrapper),h.$closeButton=h.$modal.find("[data-"+m+'-action="close"]'),h.$confirmButton=h.$modal.find("[data-"+m+'-action="confirm"]'),h.$cancelButton=h.$modal.find("[data-"+m+'-action="cancel"]'),e=c(h.$overlay),f=c(h.$modal),g=c(h.$bg),h.td=Math.max(e,f,g),h.$wrapper.on("click."+m,"."+m+"-close",function(a){a.preventDefault(),h.close()}),h.$wrapper.on("click."+m,"."+m+"-cancel",function(a){a.preventDefault(),h.$modal.trigger("cancel"),h.settings.closeOnCancel&&h.close("cancellation")}),h.$wrapper.on("click."+m,"."+m+"-confirm",function(a){a.preventDefault(),h.$modal.trigger("confirm"),h.settings.closeOnConfirm&&h.close("confirmation")}),b(document).on("keyup."+m,function(a){27===a.keyCode&&h.settings.closeOnEscape&&h.close()}),h.$wrapper.on("click."+m,function(a){var c=b(a.target);c.hasClass(m+"-wrapper")&&h.settings.closeOnAnyClick&&h.close()}),h.index=b[l].lookup.push(h)-1,h.busy=!1}function i(a,c){var d,e,f=location.hash.replace("#","");if("undefined"==typeof c&&(c=!0),f){try{e=b("[data-"+l+"-id="+f.replace(new RegExp("/","g"),"\\/")+"]")}catch(g){}e&&e.length&&(d=b[l].lookup[e.data(l)],d&&d.settings.hashTracking&&d.open())}else c&&j&&!j.busy&&j.settings.hashTracking&&j.close()}var j,k,l="remodal",m=a.remodalGlobals&&a.remodalGlobals.namespace||l,n=b.extend({hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnAnyClick:!0},a.remodalGlobals&&a.remodalGlobals.defaults);h.prototype.open=function(){if(!this.busy){var a,c=this;c.busy=!0,c.$modal.trigger("open"),a=c.$modal.attr("data-"+l+"-id"),a&&c.settings.hashTracking&&(k=b(window).scrollTop(),location.hash=a),j&&j!==c&&(j.$overlay.hide(),j.$wrapper.hide(),j.$body.removeClass(m+"-is-active")),j=c,e(),c.$overlay.show(),c.$wrapper.show(),setTimeout(function(){c.$body.addClass(m+"-is-active"),c.$wrapper.scrollTop(0),setTimeout(function(){c.busy=!1,c.$modal.trigger("opened")},c.td+50)},25)}},h.prototype.close=function(a){if(!this.busy){var c=this;c.busy=!0,c.$modal.trigger({type:"close",reason:a}),c.settings.hashTracking&&c.$modal.attr("data-"+l+"-id")===location.hash.substr(1)&&(location.hash="",b(window).scrollTop(k)),c.$body.removeClass(m+"-is-active"),setTimeout(function(){c.$overlay.hide(),c.$wrapper.hide(),f(),c.busy=!1,c.$modal.trigger({type:"closed",reason:a})},c.td+50)}},b[l]={lookup:[]},b.fn[l]=function(a){var c,d;return this.each(function(e,f){d=b(f),null==d.data(l)?(c=new h(d,a),d.data(l,c.index),c.settings.hashTracking&&d.attr("data-"+l+"-id")===location.hash.substr(1)&&c.open()):c=b[l].lookup[d.data(l)]}),c},b(document).ready(function(){b(document).on("click","[data-"+l+"-target]",function(a){a.preventDefault();var c=a.currentTarget,d=c.getAttribute("data-"+l+"-target"),e=b("[data-"+l+"-id="+d+"]");b[l].lookup[e.data(l)].open()}),b(document).find("."+m).each(function(a,c){var d=b(c),e=d.data(l+"-options");e?("string"==typeof e||e instanceof String)&&(e=g(e)):e={},d[l](e)})}),b(window).bind("hashchange."+m,i)}); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery||a.Zepto)}(this,function(a,b){"use strict";function c(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 d(){if(b(document.body).height()<=b(window).height())return 0;var a,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),a=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),a-c}function e(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)||(c=b(document.body),a=parseInt(c.css("padding-right"),10)+d(),c.css("padding-right",a+"px"),e.addClass(f))}function f(){var a,c,e=b("html"),f=m+"-is-locked";e.hasClass(f)&&(c=b(document.body),a=parseInt(c.css("padding-right"),10)-d(),c.css("padding-right",a+"px"),e.removeClass(f))}function g(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 h(a,d){var e,f,g,h=this,i="[data-"+m+'-action="close"]',j="[data-"+m+'-action="confirm"]',k="[data-"+m+'-action="cancel"]';h.settings=b.extend({},n,d),h.$body=b(document.body),h.$overlay=b("."+m+"-overlay"),h.$overlay.length||(h.$overlay=b("
").addClass(m+"-overlay"),h.$body.append(h.$overlay)),h.$bg=b("."+m+"-bg"),h.$wrapper=b("
").addClass(m+"-wrapper"),h.$modal=a,h.$modal.addClass(m),h.$modal.css("visibility","visible"),h.$wrapper.append(h.$modal),h.$body.append(h.$wrapper),e=c(h.$overlay),f=c(h.$modal),g=c(h.$bg),h.td=Math.max(e,f,g),h.$wrapper.on("click."+m,i,function(a){a.preventDefault(),h.close()}),h.$wrapper.on("click."+m,k,function(a){a.preventDefault(),h.$modal.trigger("cancel"),h.settings.closeOnCancel&&h.close("cancellation")}),h.$wrapper.on("click."+m,j,function(a){a.preventDefault(),h.$modal.trigger("confirm"),h.settings.closeOnConfirm&&h.close("confirmation")}),b(document).on("keyup."+m,function(a){27===a.keyCode&&h.settings.closeOnEscape&&h.close()}),h.$wrapper.on("click."+m,function(a){var c=b(a.target);c.hasClass(m+"-wrapper")&&h.settings.closeOnAnyClick&&h.close()}),h.index=b[l].lookup.push(h)-1,h.busy=!1}function i(a,c){var d,e,f=location.hash.replace("#","");if("undefined"==typeof c&&(c=!0),f){try{e=b("[data-"+l+"-id="+f.replace(new RegExp("/","g"),"\\/")+"]")}catch(g){}e&&e.length&&(d=b[l].lookup[e.data(l)],d&&d.settings.hashTracking&&d.open())}else c&&j&&!j.busy&&j.settings.hashTracking&&j.close()}var j,k,l="remodal",m=a.remodalGlobals&&a.remodalGlobals.namespace||l,n=b.extend({hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnAnyClick:!0},a.remodalGlobals&&a.remodalGlobals.defaults);h.prototype.open=function(){if(!this.busy){var a,c=this;c.busy=!0,c.$modal.trigger("open"),a=c.$modal.attr("data-"+l+"-id"),a&&c.settings.hashTracking&&(k=b(window).scrollTop(),location.hash=a),j&&j!==c&&(j.$overlay.hide(),j.$wrapper.hide(),j.$body.removeClass(m+"-is-active")),j=c,e(),c.$overlay.show(),c.$wrapper.show(),setTimeout(function(){c.$body.addClass(m+"-is-active"),c.$wrapper.scrollTop(0),setTimeout(function(){c.busy=!1,c.$modal.trigger("opened")},c.td+50)},25)}},h.prototype.close=function(a){if(!this.busy){var c=this;c.busy=!0,c.$modal.trigger({type:"close",reason:a}),c.settings.hashTracking&&c.$modal.attr("data-"+l+"-id")===location.hash.substr(1)&&(location.hash="",b(window).scrollTop(k)),c.$body.removeClass(m+"-is-active"),setTimeout(function(){c.$overlay.hide(),c.$wrapper.hide(),f(),c.busy=!1,c.$modal.trigger({type:"closed",reason:a})},c.td+50)}},b[l]={lookup:[]},b.fn[l]=function(a){var c,d;return this.each(function(e,f){d=b(f),null==d.data(l)?(c=new h(d,a),d.data(l,c.index),c.settings.hashTracking&&d.attr("data-"+l+"-id")===location.hash.substr(1)&&c.open()):c=b[l].lookup[d.data(l)]}),c},b(document).ready(function(){b(document).on("click","[data-"+l+"-target]",function(a){a.preventDefault();var c=a.currentTarget,d=c.getAttribute("data-"+l+"-target"),e=b("[data-"+l+"-id="+d+"]");b[l].lookup[e.data(l)].open()}),b(document).find("."+m).each(function(a,c){var d=b(c),e=d.data(l+"-options");e?("string"==typeof e||e instanceof String)&&(e=g(e)):e={},d[l](e)})}),b(window).bind("hashchange."+m,i)}); \ No newline at end of file diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index d1c61db..7a82a5c 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -222,6 +222,10 @@ var tdModal; var tdBg; + var closeButtonSelector = '[data-' + namespace + '-action="close"]'; + var confirmButtonSelector = '[data-' + namespace + '-action="confirm"]'; + var cancelButtonSelector = '[data-' + namespace + '-action="cancel"]'; + remodal.settings = $.extend({}, defaults, options); // Build DOM @@ -240,14 +244,9 @@ remodal.$modal.addClass(namespace); remodal.$modal.css('visibility', 'visible'); - remodal.$modal.append(remodal.$closeButton); remodal.$wrapper.append(remodal.$modal); remodal.$body.append(remodal.$wrapper); - remodal.$closeButton = remodal.$modal.find('[data-' + namespace + '-action="close"]'); - remodal.$confirmButton = remodal.$modal.find('[data-' + namespace + '-action="confirm"]'); - remodal.$cancelButton = remodal.$modal.find('[data-' + namespace + '-action="cancel"]'); - // Calculate timeouts tdOverlay = getTransitionDuration(remodal.$overlay); tdModal = getTransitionDuration(remodal.$modal); @@ -255,14 +254,14 @@ remodal.td = Math.max(tdOverlay, tdModal, tdBg); // Add the close button event listener - remodal.$wrapper.on('click.' + namespace, '.' + namespace + '-close', function(e) { + remodal.$wrapper.on('click.' + namespace, closeButtonSelector, function(e) { e.preventDefault(); remodal.close(); }); // Add the cancel button event listener - remodal.$wrapper.on('click.' + namespace, '.' + namespace + '-cancel', function(e) { + remodal.$wrapper.on('click.' + namespace, cancelButtonSelector, function(e) { e.preventDefault(); remodal.$modal.trigger('cancel'); @@ -273,7 +272,7 @@ }); // Add the confirm button event listener - remodal.$wrapper.on('click.' + namespace, '.' + namespace + '-confirm', function(e) { + remodal.$wrapper.on('click.' + namespace, confirmButtonSelector, function(e) { e.preventDefault(); remodal.$modal.trigger('confirm'); diff --git a/test/remodal_test.js b/test/remodal_test.js index c14d631..48e0720 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -83,8 +83,8 @@ }); QUnit.asyncTest('events', function(assert) { - var $confirmButton = $inst1.$confirmButton; - var $cancelButton = $inst1.$cancelButton; + var $confirmButton = $inst1.$body.find('[data-remodal-action="confirm"]'); + var $cancelButton = $inst1.$body.find('[data-remodal-action="cancel"]'); $document.one('open', '[data-remodal-id=modal]', function() { assert.ok(true, 'opening'); @@ -125,7 +125,7 @@ }); QUnit.asyncTest('Confirm button click', function(assert) { - var $confirmButton = $inst1.$confirmButton; + var $confirmButton = $inst1.$body.find('[data-remodal-action="confirm"]'); $document.one('opened', '[data-remodal-id=modal]', function() { $confirmButton.click(); @@ -143,7 +143,7 @@ }); QUnit.asyncTest('Cancel button click', function(assert) { - var $cancelButton = $inst1.$cancelButton; + var $cancelButton = $inst1.$body.find('[data-remodal-action="cancel"]'); $document.one('opened', '[data-remodal-id=modal]', function() { $cancelButton.click(); @@ -161,7 +161,7 @@ }); QUnit.asyncTest('Close button click', function(assert) { - var $closeButton = $inst1.$closeButton; + var $closeButton = $inst1.$body.find('[data-remodal-action="close"]'); $document.one('opened', '[data-remodal-id=modal]', function() { $closeButton.click(); @@ -274,7 +274,7 @@ }, $inst2.td + 100); }); - $inst2.$confirmButton.click(); - $inst2.$cancelButton.click(); + $inst2.$body.find('[data-remodal-action="confirm"]').click(); + $inst2.$body.find('[data-remodal-action="cancel"]').click(); }); }(window.jQuery || window.Zepto, location, document)); From 0edf24a2e0116515864738342dba1f12a0a28b3b Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Fri, 10 Apr 2015 19:48:33 +0300 Subject: [PATCH 06/68] Remove font-size --- src/jquery.remodal.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 40c6ccc..bfa557c 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -70,17 +70,6 @@ html.remodal-is-locked { display: inline-block; } -/* Anti-zoom. Font-size should be >= 16px. */ - -.remodal select, -.remodal textarea, -.remodal input, -.remodal select:focus, -.remodal textarea:focus, -.remodal input:focus { - font-size: 16px; -} - /* ========================================================================== Remodal default theme ========================================================================== */ From 184fd97327f7e9bd987220b0f327536670f664d2 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 19 Apr 2015 22:09:08 +0300 Subject: [PATCH 07/68] Use constants --- README.md | 6 +-- examples/index-zepto.html | 6 +-- examples/index.html | 6 +-- src/jquery.remodal.js | 89 ++++++++++++++++++++------------------- 4 files changed, 55 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index c8e5e46..da334dd 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,9 @@ Or: ```html ``` -#### namespace +#### NAMESPACE Base HTML class for your modals. CSS theme will need to be updated to reflect this. -#### defaults +#### DEFAULTS Extends default settings. @@ -179,11 +179,21 @@ Get the instance of the modal and call a method: ```js var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')]; -// open the modal +/** + * Open the modal window + */ inst.open(); -// close the modal +/** + * Close the modal window + */ inst.close(); + +/** + * Get a current state of the modal + * @returns {'closed'|'closing'|'opened'|'opening'} + */ +inst.getState(); ``` ## License From bc1e73d9d51136b7e7905c2223c88bec874c4e15 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 19 Apr 2015 23:39:16 +0300 Subject: [PATCH 12/68] Update tests --- test/remodal_test.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/test/remodal_test.js b/test/remodal_test.js index 48e0720..536a574 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -191,13 +191,21 @@ }); QUnit.asyncTest('methods', function(assert) { + $document.one('open', '[data-remodal-id=modal]', function() { + assert.equal($inst1.getState(), 'opening'); + }); + $document.one('opened', '[data-remodal-id=modal]', function() { - assert.ok(true, 'opening'); + assert.equal($inst1.getState(), 'opened'); $inst1.close(); }); + $document.one('close', '[data-remodal-id=modal]', function() { + assert.equal($inst1.getState(), 'closing'); + }); + $document.one('closed', '[data-remodal-id=modal]', function() { - assert.ok(true, 'closed'); + assert.equal($inst1.getState(), 'closed'); QUnit.start(); }); From 8a4bfc4178d9fb34ff6849d410fbd89343add247 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Mon, 20 Apr 2015 01:58:01 +0300 Subject: [PATCH 13/68] :lipstick: refine examples --- examples/index-zepto.html | 28 ++++++++++++++-------------- examples/index.html | 28 ++++++++++++++-------------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/examples/index-zepto.html b/examples/index-zepto.html index 7a755b7..40f9902 100644 --- a/examples/index-zepto.html +++ b/examples/index-zepto.html @@ -106,7 +106,7 @@

Another one window

diff --git a/examples/index.html b/examples/index.html index 3f7d7f8..31da586 100644 --- a/examples/index.html +++ b/examples/index.html @@ -106,7 +106,7 @@

Another one window

From 1bb4149b50b6be15460cc4ab06f5fb239b42353d Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Mon, 20 Apr 2015 02:11:28 +0300 Subject: [PATCH 14/68] Disable auto-resizing of text --- src/jquery.remodal.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index bfa557c..6cfa11c 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -70,6 +70,14 @@ html.remodal-is-locked { display: inline-block; } +body.remodal-is-active .remodal { + + /* Disable text resizing */ + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; +} + /* ========================================================================== Remodal default theme ========================================================================== */ From 69a6fda05560240b60e3af25b7efd0b153c54e49 Mon Sep 17 00:00:00 2001 From: Ilya Makarov Date: Tue, 21 Apr 2015 16:34:35 +0300 Subject: [PATCH 15/68] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c8e5e46..a2df148 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ Flat, responsive, lightweight, fast, easy customizable modal window plugin with #IMPORTANT! **v0.4.0 has incompatible changes.** +**v0.7.0 will have incompatible changes...a lot of incompatible changes. Old versions won't be supported.** ## Notes * All modern browsers are supported. From 036528e3d43259e5da97488432efc17ba6f5c917 Mon Sep 17 00:00:00 2001 From: Ilya Makarov Date: Tue, 21 Apr 2015 17:05:39 +0300 Subject: [PATCH 16/68] Perfect README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e3a07c8..4f499fd 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ Flat, responsive, lightweight, fast, easy customizable modal window plugin with #IMPORTANT! **v0.4.0 has incompatible changes.** + **v0.7.0 will have incompatible changes...a lot of incompatible changes. Old versions won't be supported.** ## Notes From 44c7fb54ea6b8c5705047b71900309e62cebf8e2 Mon Sep 17 00:00:00 2001 From: Ilya Makarov Date: Wed, 22 Apr 2015 03:46:10 +0300 Subject: [PATCH 17/68] Add NPM badge --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 4f499fd..8353182 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +[![NPM version](https://img.shields.io/npm/v/remodal.svg?style=flat)](https://npmjs.org/package/remodal) [![Bower version](https://badge.fury.io/bo/remodal.svg)](http://badge.fury.io/bo/remodal) [![Travis](https://travis-ci.org/VodkaBears/Remodal.svg?branch=master)](https://travis-ci.org/VodkaBears/Remodal) [![devDependency Status](https://david-dm.org/vodkabears/remodal/dev-status.svg)](https://david-dm.org/vodkabears/remodal#info=devDependencies) From f5318d8dba1c34936a64c9b10500809738d44144 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 22 Apr 2015 14:37:29 +0300 Subject: [PATCH 18/68] Use backface-visibility instead of translateZ --- 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 6cfa11c..eabb24d 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -59,7 +59,8 @@ html.remodal-is-locked { .remodal-overlay, .remodal-wrapper { - -webkit-transform: translateZ(0px); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } /* Necessary styles of the modal dialog */ From 1f6cf373e447476f32246794afcf7d7ee3fea3c4 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 22 Apr 2015 14:39:28 +0300 Subject: [PATCH 19/68] Use 2 spaces in CSS --- .csscomb.json | 2 +- src/jquery.remodal.css | 291 ++++++++++++++++++++--------------------- 2 files changed, 146 insertions(+), 147 deletions(-) diff --git a/.csscomb.json b/.csscomb.json index b191cd3..354403b 100644 --- a/.csscomb.json +++ b/.csscomb.json @@ -2,7 +2,7 @@ "remove-empty-rulesets": true, "always-semicolon": true, "color-case": "lower", - "block-indent": " ", + "block-indent": " ", "color-shorthand": true, "element-case": "lower", "eof-newline": true, diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index eabb24d..86bdd7c 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -5,78 +5,77 @@ /* Hide scroll bar */ html.remodal-is-locked { - overflow: hidden; + overflow: hidden; } /* Anti FOUC */ .remodal, [data-remodal-id] { - visibility: hidden; + visibility: hidden; } /* Necessary styles of the overlay */ .remodal-overlay { - position: fixed; - z-index: 9999; - top: -5000px; - right: -5000px; - bottom: -5000px; - left: -5000px; - - display: none; + 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; - right: 0; - bottom: 0; - left: 0; + position: fixed; + z-index: 10000; + top: 0; + right: 0; + bottom: 0; + left: 0; - display: none; - overflow: auto; + display: none; + overflow: auto; - text-align: center; + text-align: center; - -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: touch; } .remodal-wrapper:after { - display: inline-block; + display: inline-block; - height: 100%; - margin-left: -0.05em; + height: 100%; + margin-left: -0.05em; - content: ""; + content: ""; } /* Fix iPad, iPhone glitches */ .remodal-overlay, .remodal-wrapper { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } /* Necessary styles of the modal dialog */ .remodal { - position: relative; + position: relative; - display: inline-block; + display: inline-block; } body.remodal-is-active .remodal { - - /* Disable text resizing */ - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - text-size-adjust: 100%; + /* Disable text resizing */ + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; } /* ========================================================================== @@ -86,217 +85,217 @@ body.remodal-is-active .remodal { /* Background for effects */ .remodal-bg { - -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; + -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 { - -webkit-filter: blur(3px); - -ms-filter: blur(3px); - filter: blur(3px); - -moz-filter: blur(3px); - -o-filter: blur(3px); + -webkit-filter: blur(3px); + -ms-filter: blur(3px); + filter: blur(3px); + -moz-filter: blur(3px); + -o-filter: blur(3px); } /* Default theme styles of the overlay */ .remodal-overlay { - -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; + -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); + opacity: 0; + background: rgba(33, 36, 46, 0.95); } body.remodal-is-active .remodal-overlay { - opacity: 1; + opacity: 1; } /* Default theme styles of the modal dialog */ .remodal { - font-size: 16px; - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - min-height: 100%; - padding: 35px; - - -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; + font-size: 16px; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + min-height: 100%; + padding: 35px; + + -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; } body.remodal-is-active .remodal { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); - opacity: 1; + opacity: 1; } /* Vertical align of the modal dialog */ .remodal, .remodal-wrapper:after { - vertical-align: middle; + vertical-align: middle; } /* Close button */ .remodal-close { - position: absolute; - top: 5px; - left: 5px; + position: absolute; + top: 5px; + left: 5px; - width: 28px; - height: 28px; + width: 28px; + height: 28px; - -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; + -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; - -webkit-border-radius: 50%; - border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; } .remodal-close:after { - font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; - font-size: 28px; - line-height: 28px; + font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; + font-size: 28px; + line-height: 28px; - display: block; + display: block; - content: "×"; - cursor: pointer; - -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; + content: "×"; + cursor: pointer; + -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; + color: #3e5368; } .remodal-close:hover, .remodal-close:active { - background: #3e5368; + background: #3e5368; } .remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after { - color: #f4f4f4; + color: #f4f4f4; } /* Dialog buttons */ .remodal-confirm, .remodal-cancel { - font-size: 10pt; + font-size: 10pt; - display: inline-block; + display: inline-block; - width: 120px; - margin: 0 0 5px 0; - padding: 9px 0; + width: 120px; + margin: 0 0 5px 0; + padding: 9px 0; - cursor: pointer; - -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; + cursor: pointer; + -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: 6px; - border-radius: 6px; - background-clip: padding-box; + -webkit-border-radius: 6px; + border-radius: 6px; + background-clip: padding-box; } .remodal-confirm { - color: #16a085; - border: 2px solid #16a085; - background: #f4f4f4; + color: #16a085; + border: 2px solid #16a085; + background: #f4f4f4; } .remodal-confirm:hover, .remodal-confirm:active { - color: #f4f4f4; - background: #16a085; + color: #f4f4f4; + background: #16a085; } .remodal-cancel { - color: #c0392b; - border: 2px solid #c0392b; - background: #f4f4f4; + color: #c0392b; + border: 2px solid #c0392b; + background: #f4f4f4; } .remodal-cancel:hover, .remodal-cancel:active { - color: #f4f4f4; - background: #c0392b; + color: #f4f4f4; + background: #c0392b; } /* Media queries ========================================================================== */ @media only screen and (min-width: 641px) { - .remodal { - max-width: 700px; - min-height: 0; - margin: 20px auto; - - -webkit-border-radius: 6px; - border-radius: 6px; - } + .remodal { + max-width: 700px; + min-height: 0; + margin: 20px auto; + + -webkit-border-radius: 6px; + border-radius: 6px; + } } /* IE8 ========================================================================== */ .lt-ie9 .remodal-overlay { - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F021242E, endColorstr=#F021242E); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F021242E, endColorstr=#F021242E); } .lt-ie9 .remodal { - width: 700px; - min-height: 0; - margin: 20px auto; + width: 700px; + min-height: 0; + margin: 20px auto; } .lt-ie9 .remodal-close:after { - margin: auto; + margin: auto; - text-align: center; + text-align: center; } .lt-ie9 .remodal-close:hover, .lt-ie9 .remodal-close:active { - background: transparent; + background: transparent; } .lt-ie9 .remodal-close:hover.remodal-close:after, .lt-ie9 .remodal-close:active.remodal-close:after { - color: #3e5368; + color: #3e5368; } From 5f5f79fe4fe643e8d63830f9130ab769cce52400 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 22 Apr 2015 18:35:12 +0300 Subject: [PATCH 20/68] Add Autoprefixer --- Gruntfile.js | 16 ++++++++++++++-- package.json | 1 + src/jquery.remodal.css | 38 -------------------------------------- 3 files changed, 15 insertions(+), 40 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 630da69..15af2cc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -17,6 +17,16 @@ module.exports = function(grunt) { ' */\n' }, + autoprefixer: { + dist: { + src: 'dist/jquery.remodal.css' + }, + options: { + browsers: ['> 0.1%'], + cascade: false + } + }, + connect: { server: { options: { @@ -55,7 +65,8 @@ module.exports = function(grunt) { csscomb: { all: { files: { - 'src/jquery.remodal.css': 'src/jquery.remodal.css' + 'src/jquery.remodal.css': 'src/jquery.remodal.css', + 'dist/jquery.remodal.css': 'dist/jquery.remodal.css' } } }, @@ -114,6 +125,7 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-csscomb'); grunt.loadNpmTasks('grunt-githooks'); grunt.loadNpmTasks('grunt-jscs'); @@ -122,6 +134,6 @@ module.exports = function(grunt) { grunt.registerTask('lint', ['jshint', 'jscs']); grunt.registerTask('test', ['connect', 'lint', 'qunit']); grunt.registerTask('default', [ - 'connect', 'csscomb', 'jshint', 'jscs', 'qunit', 'concat', 'uglify', 'githooks' + 'connect', 'jshint', 'jscs', 'qunit', 'concat', 'autoprefixer', 'csscomb', 'uglify', 'githooks' ]); }; diff --git a/package.json b/package.json index eec0c05..bf62d13 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "devDependencies": { "bower": "^1.4.1", "grunt": "^0.4.5", + "grunt-autoprefixer": "^3.0.0", "grunt-cli": "^0.1.13", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-connect": "^0.10.1", diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 86bdd7c..4bbccd4 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -59,7 +59,6 @@ html.remodal-is-locked { .remodal-overlay, .remodal-wrapper { - -webkit-backface-visibility: hidden; backface-visibility: hidden; } @@ -73,8 +72,6 @@ html.remodal-is-locked { body.remodal-is-active .remodal { /* Disable text resizing */ - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @@ -85,26 +82,16 @@ body.remodal-is-active .remodal { /* Background for effects */ .remodal-bg { - -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 { - -webkit-filter: blur(3px); - -ms-filter: blur(3px); filter: blur(3px); - -moz-filter: blur(3px); - -o-filter: blur(3px); } /* Default theme styles of the overlay */ .remodal-overlay { - -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; @@ -120,21 +107,12 @@ body.remodal-is-active .remodal-overlay { .remodal { font-size: 16px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; min-height: 100%; padding: 35px; - -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; @@ -144,10 +122,6 @@ body.remodal-is-active .remodal-overlay { } 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; @@ -170,13 +144,9 @@ body.remodal-is-active .remodal { width: 28px; height: 28px; - -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; - -webkit-border-radius: 50%; border-radius: 50%; } @@ -189,9 +159,6 @@ body.remodal-is-active .remodal { content: "×"; cursor: pointer; - -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; @@ -221,14 +188,10 @@ body.remodal-is-active .remodal { padding: 9px 0; cursor: pointer; - -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: 6px; border-radius: 6px; background-clip: padding-box; } @@ -266,7 +229,6 @@ body.remodal-is-active .remodal { min-height: 0; margin: 20px auto; - -webkit-border-radius: 6px; border-radius: 6px; } } From 5a446ef5c05613cb52bc6a6fdbebd0134bc01ae7 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 22 Apr 2015 18:40:35 +0300 Subject: [PATCH 21/68] Add grunt tasks --- Gruntfile.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 15af2cc..13af2e3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -133,7 +133,6 @@ module.exports = function(grunt) { // Tasks. grunt.registerTask('lint', ['jshint', 'jscs']); grunt.registerTask('test', ['connect', 'lint', 'qunit']); - grunt.registerTask('default', [ - 'connect', 'jshint', 'jscs', 'qunit', 'concat', 'autoprefixer', 'csscomb', 'uglify', 'githooks' - ]); + grunt.registerTask('build', ['concat', 'autoprefixer', 'csscomb', 'uglify', 'githooks']); + grunt.registerTask('default', ['test', 'build']); }; From fccb6d006aa55fb153e2a06625aa3fd8ac469503 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 22 Apr 2015 20:23:13 +0300 Subject: [PATCH 22/68] Add grunt watch --- Gruntfile.js | 16 +++++++++++++++- examples/index-zepto.html | 4 ++-- examples/index.html | 4 ++-- package.json | 1 + 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 13af2e3..02402a5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -117,6 +117,19 @@ module.exports = function(grunt) { options: { command: 'node_modules/.bin/grunt' } + }, + + watch: { + src: { + files: ['src/**/*', 'test/**/*', 'examples/**/*'], + tasks: ['build'] + }, + options: { + spawn: false, + + // Use browser extensions of LiveReload + livereload: true + } } }); @@ -125,12 +138,13 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-csscomb'); grunt.loadNpmTasks('grunt-githooks'); grunt.loadNpmTasks('grunt-jscs'); - // Tasks. + // Tasks grunt.registerTask('lint', ['jshint', 'jscs']); grunt.registerTask('test', ['connect', 'lint', 'qunit']); grunt.registerTask('build', ['concat', 'autoprefixer', 'csscomb', 'uglify', 'githooks']); diff --git a/examples/index-zepto.html b/examples/index-zepto.html index 40f9902..befc1a9 100644 --- a/examples/index-zepto.html +++ b/examples/index-zepto.html @@ -6,7 +6,7 @@ Remodal example - +
@@ -118,7 +118,7 @@

Another one window

- + - + "); + // Get any lib=___ param from the query string. + var library = location.search.match(/[?&]lib=(.*?)(?=&|$)/); + /* jshint -W060 */ + if (library) { + document.write(''); + } else { + document.write(''); + } }()); diff --git a/test/remodal.html b/test/remodal.html index 41d0307..6d4fe7b 100644 --- a/test/remodal.html +++ b/test/remodal.html @@ -3,25 +3,27 @@ Remodal Test Suite - + - + - + diff --git a/test/remodal_test.js b/test/remodal_test.js index 536a574..3fab334 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -1,4 +1,5 @@ !(function($, location, document) { + /* ======== A Handy Little QUnit Reference ======== http://api.qunitjs.com/ @@ -21,37 +22,22 @@ */ var $document = $(document); - var index1; - var index2; - var $inst1; - var $inst2; - - QUnit.begin(function() { - index1 = $('[data-remodal-id=modal]').data('remodal'); - index2 = $('[data-remodal-id=modal2]').data('remodal'); - $inst1 = $.remodal.lookup[index1]; - $inst2 = $.remodal.lookup[index2]; - }); - QUnit.test('Auto-initialization', function() { - equal(index1, 0); - equal(index2, 1); - ok($inst1); - ok($inst2); - }); + QUnit.test('Auto-initialization', function(assert) { + var $elem1 = $('[data-remodal-id=modal]'); + var $elem2 = $('[data-remodal-id=modal2]'); - QUnit.test('JS-initialization', function() { - var $inst3 = $('[data-remodal-id=modal3]').remodal(); - - ok($inst3); - equal($inst3.index, 2); + assert.equal($elem1.data('remodal'), 0, 'index is right'); + assert.equal($elem2.data('remodal'), 1, 'index is right'); + assert.ok($elem1.remodal(), 'instance exists'); + assert.ok($elem2.remodal(), 'instance exists'); }); - QUnit.test('Re-initialization', function() { - var $inst3 = $('[data-remodal-id=modal3]').remodal(); + QUnit.test('JS-initialization', function(assert) { + var $elem = $('[data-remodal-id=modal3]'); - ok($inst3); - equal($inst3.index, 2); + assert.ok($elem.remodal(), 'instance exists'); + assert.equal($elem.data('remodal'), 2, 'index is right'); }); QUnit.asyncTest('Hash tracking', function(assert) { @@ -68,7 +54,7 @@ location.hash = '#modal'; }); - QUnit.asyncTest('Opening with the `data-remodal-target` directive', function(assert) { + QUnit.asyncTest('`data-remodal-target` directive', function(assert) { $document.one('opened', '[data-remodal-id=modal]', function() { assert.ok(true, 'the modal is opened'); location.hash = '#'; @@ -82,11 +68,12 @@ $('[data-remodal-target=modal]').click(); }); - QUnit.asyncTest('events', function(assert) { - var $confirmButton = $inst1.$body.find('[data-remodal-action="confirm"]'); - var $cancelButton = $inst1.$body.find('[data-remodal-action="cancel"]'); + QUnit.asyncTest('Events', function(assert) { + var remodal = $('[data-remodal-id=modal]').remodal(); + var $confirmButton = $('[data-remodal-id=modal] [data-remodal-action=confirm]'); + var $cancelButton = $('[data-remodal-id=modal] [data-remodal-action=cancel]'); - $document.one('open', '[data-remodal-id=modal]', function() { + $document.one('opening', '[data-remodal-id=modal]', function() { assert.ok(true, 'opening'); }); @@ -95,25 +82,24 @@ $confirmButton.click(); }); - $document.one('confirm', '[data-remodal-id=modal]', function() { + $document.one('confirmation', '[data-remodal-id=modal]', function() { assert.ok(true, 'confirmed'); - $confirmButton.click(); }); - $document.one('close', '[data-remodal-id=modal]', function() { + $document.one('closing', '[data-remodal-id=modal]', function() { assert.ok(true, 'closing'); }); $document.one('closed', '[data-remodal-id=modal]', function() { assert.ok(true, 'closed'); - $inst1.open(); + remodal.open(); $document.one('opened', '[data-remodal-id=modal]', function() { $cancelButton.click(); }); }); - $document.one('cancel', '[data-remodal-id=modal]', function() { + $document.one('cancellation', '[data-remodal-id=modal]', function() { assert.ok(true, 'canceled'); $document.one('closed', '[data-remodal-id=modal]', function() { @@ -124,59 +110,69 @@ location.hash = '#modal'; }); - QUnit.asyncTest('Confirm button click', function(assert) { - var $confirmButton = $inst1.$body.find('[data-remodal-action="confirm"]'); + QUnit.asyncTest('Click on the confirmation button', function(assert) { + var $confirmButton = $('[data-remodal-id=modal] [data-remodal-action=confirm]'); $document.one('opened', '[data-remodal-id=modal]', function() { $confirmButton.click(); }); - $document.one('confirm', '[data-remodal-id=modal]', function() { - assert.ok(true, 'confirm button works'); + $document.one('confirmation', '[data-remodal-id=modal]', function() { + assert.ok(true, 'confirmation event is triggered'); }); - $document.one('closed', '[data-remodal-id=modal]', function() { + $document.one('closing', '[data-remodal-id=modal]', function(e) { + assert.equal(e.reason, 'confirmation', 'reason is right'); + }); + + $document.one('closed', '[data-remodal-id=modal]', function(e) { + assert.equal(e.reason, 'confirmation', 'reason is right'); QUnit.start(); }); location.hash = '#modal'; }); - QUnit.asyncTest('Cancel button click', function(assert) { - var $cancelButton = $inst1.$body.find('[data-remodal-action="cancel"]'); + QUnit.asyncTest('Click on the cancel button', function(assert) { + var $cancelButton = $('[data-remodal-id=modal] [data-remodal-action=cancel]'); $document.one('opened', '[data-remodal-id=modal]', function() { $cancelButton.click(); }); - $document.one('cancel', '[data-remodal-id=modal]', function() { - assert.ok(true, 'cancel button works'); + $document.one('cancellation', '[data-remodal-id=modal]', function() { + assert.ok(true, 'cancellation event is triggered'); }); - $document.one('closed', '[data-remodal-id=modal]', function() { + $document.one('closing', '[data-remodal-id=modal]', function(e) { + assert.equal(e.reason, 'cancellation', 'reason is right'); + }); + + $document.one('closed', '[data-remodal-id=modal]', function(e) { + assert.equal(e.reason, 'cancellation', 'reason is right'); QUnit.start(); }); location.hash = '#modal'; }); - QUnit.asyncTest('Close button click', function(assert) { - var $closeButton = $inst1.$body.find('[data-remodal-action="close"]'); + QUnit.asyncTest('Click on the close button', function(assert) { + var $closeButton = $('[data-remodal-id=modal] [data-remodal-action=close]'); $document.one('opened', '[data-remodal-id=modal]', function() { $closeButton.click(); }); $document.one('closed', '[data-remodal-id=modal]', function() { - assert.ok(true, 'Close button works'); + assert.ok(true, 'close button works'); QUnit.start(); }); location.hash = '#modal'; }); - QUnit.asyncTest('Wrapper click', function(assert) { - var $wrapper = $inst1.$wrapper; + QUnit.asyncTest('Click on the wrapper', function(assert) { + var $wrapper = $('[data-remodal-id=modal]').parent(); $document.one('opened', '[data-remodal-id=modal]', function() { $wrapper.click(); @@ -190,65 +186,69 @@ location.hash = '#modal'; }); - QUnit.asyncTest('methods', function(assert) { - $document.one('open', '[data-remodal-id=modal]', function() { - assert.equal($inst1.getState(), 'opening'); + QUnit.asyncTest('#open, #close, #getState', function(assert) { + var remodal = $('[data-remodal-id=modal]').remodal(); + + $document.one('opening', '[data-remodal-id=modal]', function() { + assert.equal(remodal.getState(), 'opening', 'state is "opening"'); }); $document.one('opened', '[data-remodal-id=modal]', function() { - assert.equal($inst1.getState(), 'opened'); - $inst1.close(); + assert.equal(remodal.getState(), 'opened', 'state is "opened"'); + remodal.close(); }); - $document.one('close', '[data-remodal-id=modal]', function() { - assert.equal($inst1.getState(), 'closing'); + $document.one('closing', '[data-remodal-id=modal]', function() { + assert.equal(remodal.getState(), 'closing', 'state is "closing"'); }); $document.one('closed', '[data-remodal-id=modal]', function() { - assert.equal($inst1.getState(), 'closed'); + assert.equal(remodal.getState(), 'closed', 'state is "closed"'); QUnit.start(); }); - $inst1.open(); + remodal.open(); }); - QUnit.test('animation timeout', function() { + QUnit.asyncTest('Lock/unlock the scroll bar', function(assert) { + var $html = $('html'); + var $body = $(document.body); + var remodal = $('[data-remodal-id=modal]').remodal(); - // Check animation timeout - equal(~~$inst1.td, 300); - }); - - QUnit.asyncTest('lock/unlock the scroll bar', function(assert) { - $(document.body).css('height', '10000px'); + $body.css('height', '10000px'); $document.one('opened', '[data-remodal-id=modal]', function() { - assert.ok($('html, body').hasClass('remodal-is-locked')); - assert.ok(parseInt($(document.body).css('padding-right')) > 0); - $inst1.close(); + assert.ok($html.hasClass('remodal-is-locked'), 'page is locked'); + assert.ok(parseInt($body.css('padding-right')) >= 0, 'padding-right is added'); + remodal.close(); }); $document.one('closed', '[data-remodal-id=modal]', function() { - assert.ok(!$('html, body').hasClass('remodal-is-locked')); - assert.ok(parseInt($(document.body).css('padding-right')) === 0); + assert.ok(!$html.hasClass('remodal-is-locked'), 'page isn\'t locked'); + assert.equal(parseInt($body.css('padding-right')), 0, 'padding-right equals 0'); QUnit.start(); }); location.hash = '#modal'; }); - QUnit.asyncTest('do not lock/unlock the scroll bar twice', function(assert) { - $('html').addClass('remodal-is-locked'); - $(document.body).css('height', '10000px').css('padding-right', '20px'); + QUnit.asyncTest('Do not lock/unlock the scroll bar twice', function(assert) { + var $html = $('html'); + var $body = $(document.body); + var remodal = $('[data-remodal-id=modal]').remodal(); + + $html.addClass('remodal-is-locked'); + $body.css('height', '10000px').css('padding-right', '20px'); $document.one('opened', '[data-remodal-id=modal]', function() { - assert.ok($('html').hasClass('remodal-is-locked')); - assert.ok(parseInt($(document.body).css('padding-right')) === 20); - $inst1.close(); + assert.ok($html.hasClass('remodal-is-locked'), 'page is locked'); + assert.equal(parseInt($body.css('padding-right')), 20, 'padding-right equals 20'); + remodal.close(); }); $document.one('closed', '[data-remodal-id=modal]', function() { - assert.ok(!$('html').hasClass('remodal-is-locked')); - assert.ok(parseInt($(document.body).css('padding-right')) < 20); + assert.ok(!$html.hasClass('remodal-is-locked'), 'page isn\'t locked'); + assert.ok(parseInt($body.css('padding-right')) <= 20, 'padding-right is correct'); QUnit.start(); }); @@ -256,33 +256,39 @@ }); QUnit.test('Options parsing', function() { - propEqual($inst2.settings, { + var remodal = $('[data-remodal-id=modal2]').remodal(); + + propEqual(remodal.settings, { hashTracking: false, closeOnConfirm: false, closeOnCancel: false, closeOnEscape: true, closeOnAnyClick: true - }); + }, 'options are correctly parsed'); }); QUnit.asyncTest('Options', function(assert) { - $inst2.open(); - assert.ok(!location.hash, 'hashTracking is disabled'); + var $wrapper = $('[data-remodal-id=modal2]').parent(); + var remodal = $wrapper.children().remodal(); - $document.one('confirm', '[data-remodal-id=modal2]', function() { + remodal.open(); + assert.ok(!location.hash, 'hash tracking is disabled'); + + $document.one('confirmation', '[data-remodal-id=modal2]', function() { setTimeout(function() { - assert.ok($inst2.$wrapper.css('display') === 'block'); - }, $inst2.td + 100); + assert.equal($wrapper.css('display'), 'block', 'wrapper is visible'); + }, 50); }); - $document.one('cancel', '[data-remodal-id=modal2]', function() { + $document.one('cancellation', '[data-remodal-id=modal2]', function() { setTimeout(function() { - assert.ok($inst2.$wrapper.css('display') === 'block'); + assert.equal($wrapper.css('display'), 'block', 'wrapper is visible'); QUnit.start(); - }, $inst2.td + 100); + }, 50); }); - $inst2.$body.find('[data-remodal-action="confirm"]').click(); - $inst2.$body.find('[data-remodal-action="cancel"]').click(); + $wrapper.find('[data-remodal-action=confirm]').click(); + $wrapper.find('[data-remodal-action=cancel]').click(); }); + }(window.jQuery || window.Zepto, location, document)); From 51137a40a168a13024c55e4dce79f7bde56b50ff Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 29 Apr 2015 16:00:11 +0300 Subject: [PATCH 30/68] Improve event handlers --- src/jquery.remodal.js | 96 ++++++++++++++++++++----------------------- 1 file changed, 44 insertions(+), 52 deletions(-) diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index fbee9c3..501b385 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -353,6 +353,42 @@ return obj; } + /** + * Hashchange event handler + * @private + */ + function handleHashChangeEvent() { + var id = location.hash.replace('#', ''); + var instance; + var $elem; + + if (!id) { + + // Check if we have currently opened modal and animation was completed + if (current && current.state === STATES.OPENED && current.settings.hashTracking) { + current.close(); + } + } else { + + // Catch syntax error if your hash is bad + try { + $elem = $( + '[data-' + PLUGIN_NAME + '-id=' + + id.replace(new RegExp('/', 'g'), '\\/') + ']' + ); + } catch (err) {} + + if ($elem && $elem.length) { + instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)]; + + if (instance && instance.settings.hashTracking) { + instance.open(); + } + } + + } + } + /** * Remodal constructor * @param {jQuery} $modal @@ -413,13 +449,6 @@ } }); - // Add the keyboard event listener - $(document).on('keyup.' + NAMESPACE, function(e) { - if (e.keyCode === 27 && remodal.settings.closeOnEscape && remodal.state === STATES.OPENED) { - remodal.close(); - } - }); - // Add the overlay event listener remodal.$wrapper.on('click.' + NAMESPACE, function(e) { var $target = $(e.target); @@ -579,52 +608,15 @@ $container[PLUGIN_NAME](options); }); - }); - /** - * Hashchange handler - * @private - * @param {Event} e - * @param {Boolean} [closeOnEmptyHash=true] - */ - function hashHandler(e, closeOnEmptyHash) { - var id = location.hash.replace('#', ''); - var instance; - var $elem; - - if (typeof closeOnEmptyHash === 'undefined') { - closeOnEmptyHash = true; - } - - if (!id) { - if (closeOnEmptyHash) { - - // Check if we have currently opened modal and animation was completed - if (current && current.state === STATES.OPENED && current.settings.hashTracking) { - current.close(); - } - } - } else { - - // Catch syntax error if your hash is bad - try { - $elem = $( - '[data-' + PLUGIN_NAME + '-id=' + - id.replace(new RegExp('/', 'g'), '\\/') + ']' - ); - } catch (err) {} - - if ($elem && $elem.length) { - instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)]; - - if (instance && instance.settings.hashTracking) { - instance.open(); - } + // Handle keyup event + $(document).on('keyup.' + NAMESPACE, function(e) { + if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) { + current.close(); } + }); - } - } - - $(window).bind('hashchange.' + NAMESPACE, hashHandler); - + // Handle hashchange event + $(window).on('hashchange.' + NAMESPACE, handleHashChangeEvent); + }); }); From 8aa24914b2147f0158926c80d2dba00e45a9d58b Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 29 Apr 2015 16:11:01 +0300 Subject: [PATCH 31/68] Add test for the esc key --- test/remodal_test.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/test/remodal_test.js b/test/remodal_test.js index 3fab334..3d43484 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -186,6 +186,19 @@ location.hash = '#modal'; }); + QUnit.asyncTest('Esc key up', function(assert) { + $document.one('opened', '[data-remodal-id=modal]', function() { + $document.trigger($.Event('keyup', { keyCode: 27 })); + }); + + $document.one('closed', '[data-remodal-id=modal]', function() { + assert.ok(true, 'Esc key works'); + QUnit.start(); + }); + + location.hash = '#modal'; + }); + QUnit.asyncTest('#open, #close, #getState', function(assert) { var remodal = $('[data-remodal-id=modal]').remodal(); From 1d2c30977984026d48a09de21043a236c2af5d93 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 29 Apr 2015 18:21:20 +0300 Subject: [PATCH 32/68] Add the '#destroy' method(resolves #112) --- src/jquery.remodal.js | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 501b385..3498430 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -308,11 +308,16 @@ * @param {Remodal} instance */ function halt(instance) { + if (instance.state === STATES.CLOSED) { + return; + } + instance.$overlay.off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); instance.$modal.off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); instance.$overlay.hide(); instance.$wrapper.hide(); - setState(current, STATES.CLOSED, true); + unlockScreen(); + setState(instance, STATES.CLOSED, true); } /** @@ -540,6 +545,32 @@ return this.state; }; + /** + * Destroy a modal + * @public + */ + Remodal.prototype.destroy = function() { + var lookup = $[PLUGIN_NAME].lookup; + var instanceCount; + + halt(this); + this.$wrapper.remove(); + + delete lookup[this.index]; + instanceCount = $.grep(lookup, function(instance) { + return !!instance; + }).length; + + if (instanceCount === 0) { + this.$overlay.remove(); + this.$bg.removeClass( + NAMESPACE + '-is-' + STATES.CLOSING + ' ' + + NAMESPACE + '-is-' + STATES.OPENING + ' ' + + NAMESPACE + '-is-' + STATES.CLOSED + ' ' + + NAMESPACE + '-is-' + STATES.OPENED); + } + }; + /** * Special plugin object for instances. * @public From 33168b207384785e45dad7636dcc4ea8581be39b Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Wed, 29 Apr 2015 20:25:29 +0300 Subject: [PATCH 33/68] Add test for '#destroy' --- test/remodal_test.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/test/remodal_test.js b/test/remodal_test.js index 3d43484..47c8b2b 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -223,6 +223,28 @@ remodal.open(); }); + QUnit.test('#destroy', function(assert) { + var remodal = $('
') + .appendTo($(document.body)) + .remodal(); + + var instanceCount = $.remodal.lookup.filter(function(instance) { + return !!instance; + }).length; + + assert.equal($('[data-remodal-id=modal4]').length, 1, 'modal exists'); + assert.equal(instanceCount, 4, 'count of instances is right'); + + remodal.destroy(); + + instanceCount = $.remodal.lookup.filter(function(instance) { + return !!instance; + }).length; + + assert.equal($('[data-remodal-id=modal4]').length, 0, 'modal does not exist'); + assert.equal(instanceCount, 3, 'count of instances is right'); + }); + QUnit.asyncTest('Lock/unlock the scroll bar', function(assert) { var $html = $('html'); var $body = $(document.body); From 71008b53b617c9c97819ff8313395090a12f57b5 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Thu, 30 Apr 2015 03:38:04 +0300 Subject: [PATCH 34/68] Allow to use CSS mixes(resolves #117) --- examples/index.html | 21 +++++++++++++++++++-- src/jquery.remodal.js | 14 +++++++++----- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/examples/index.html b/examples/index.html index 0cbc44b..f72313c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -7,10 +7,25 @@ +
- Click + Modal №1
+ Modal №2

Remodal

@@ -159,7 +174,9 @@

Another one window

// }); // Or init in this way: - var inst = $('[data-remodal-id=modal2]').remodal(); + var inst = $('[data-remodal-id=modal2]').remodal({ + modifier: 'with-red-theme' + }); // inst.open(); diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 3498430..fd85908 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -55,7 +55,8 @@ closeOnConfirm: true, closeOnCancel: true, closeOnEscape: true, - closeOnAnyClick: true + closeOnAnyClick: true, + modifier: '' }, global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.DEFAULTS); /** @@ -314,7 +315,8 @@ instance.$overlay.off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); instance.$modal.off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); - instance.$overlay.hide(); + instance.$bg.removeClass(instance.settings.modifier); + instance.$overlay.removeClass(instance.settings.modifier).hide(); instance.$wrapper.hide(); unlockScreen(); setState(instance, STATES.CLOSED, true); @@ -419,7 +421,7 @@ remodal.$bg = $('.' + NAMESPACE + '-bg'); remodal.$wrapper = $('
').addClass(NAMESPACE + '-wrapper'); remodal.$modal = $modal; - remodal.$modal.addClass(NAMESPACE); + remodal.$modal.addClass(NAMESPACE + ' ' + remodal.settings.modifier); remodal.$modal.css('visibility', 'visible'); remodal.$wrapper.append(remodal.$modal); @@ -494,7 +496,8 @@ current = remodal; lockScreen(); - remodal.$overlay.show(); + remodal.$bg.addClass(remodal.settings.modifier); + remodal.$overlay.addClass(remodal.settings.modifier).show(); remodal.$wrapper.show().scrollTop(0); callAfterAnimation(function() { @@ -526,7 +529,8 @@ } callAfterAnimation(function() { - remodal.$overlay.hide(); + remodal.$bg.removeClass(remodal.settings.modifier); + remodal.$overlay.removeClass(remodal.settings.modifier).hide(); remodal.$wrapper.hide(); unlockScreen(); From 4dbbee5cd6973241b51b618dad305caa2ddc2048 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Thu, 30 Apr 2015 04:06:20 +0300 Subject: [PATCH 35/68] Add test for the 'modifier' option --- test/remodal.html | 10 +++++++--- test/remodal_test.js | 28 +++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/test/remodal.html b/test/remodal.html index 6d4fe7b..cd123cb 100644 --- a/test/remodal.html +++ b/test/remodal.html @@ -28,9 +28,11 @@ -
+
+
+ Call +
-Call
@@ -38,7 +40,9 @@ OK
-
+
+ Cancel OK diff --git a/test/remodal_test.js b/test/remodal_test.js index 47c8b2b..3fcc6c3 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -298,7 +298,8 @@ closeOnConfirm: false, closeOnCancel: false, closeOnEscape: true, - closeOnAnyClick: true + closeOnAnyClick: true, + modifier: 'with-test-class1 with-test-class2' }, 'options are correctly parsed'); }); @@ -326,4 +327,29 @@ $wrapper.find('[data-remodal-action=cancel]').click(); }); + QUnit.asyncTest('"modifier" option', function(assert) { + var $modal = $('[data-remodal-id=modal2]'); + var $overlay = $('.remodal-overlay'); + var $bg = $('.remodal-bg'); + var remodal = $modal.remodal(); + + $document.one('opened', '[data-remodal-id=modal2]', function() { + assert.ok($bg.hasClass('with-test-class1 with-test-class2'), 'bg has the modifier'); + assert.ok($overlay.hasClass('with-test-class1 with-test-class2'), 'overlay has the modifier'); + assert.ok($modal.hasClass('with-test-class1 with-test-class2'), 'modal has the modifier'); + + remodal.close(); + }); + + $document.one('closed', '[data-remodal-id=modal2]', function() { + assert.ok(!$bg.hasClass('with-test-class1 with-test-class2'), 'bg hasn\'t the modifier'); + assert.ok(!$overlay.hasClass('with-test-class1 with-test-class2'), 'overlay has\'t the modifier'); + assert.ok($modal.hasClass('with-test-class1 with-test-class2'), 'modal still has the modifier'); + + QUnit.start(); + }); + + remodal.open(); + }); + }(window.jQuery || window.Zepto, location, document)); From efa7efd903420abe1220f7704d3bbcd8b070dd6f Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Thu, 30 Apr 2015 05:44:04 +0300 Subject: [PATCH 36/68] Make tests refactoring --- bower.json | 2 +- test/remodal.html | 4 +- test/remodal_test.js | 92 +++++++++++++++++++++++++++++++++++++------- 3 files changed, 82 insertions(+), 16 deletions(-) diff --git a/bower.json b/bower.json index 2b65cc2..0e5dace 100644 --- a/bower.json +++ b/bower.json @@ -41,7 +41,7 @@ "jquery": "*" }, "devDependencies": { - "qunit": "~1.15.0", + "qunit": "~1.18.0", "jquery": "jquery#^1.11.1", "jquery2": "jquery#^2.1.1", "zepto": "~1.1.4" diff --git a/test/remodal.html b/test/remodal.html index cd123cb..834affd 100644 --- a/test/remodal.html +++ b/test/remodal.html @@ -41,7 +41,9 @@
+ data-remodal-options="hashTracking: false, + closeOnConfirm:false,closeOnCancel: false, closeOnEscape: false , closeOnAnyClick: false, + modifier : with-test-class1 with-test-class2"> Cancel diff --git a/test/remodal_test.js b/test/remodal_test.js index 3fcc6c3..fa078d9 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -259,7 +259,7 @@ }); $document.one('closed', '[data-remodal-id=modal]', function() { - assert.ok(!$html.hasClass('remodal-is-locked'), 'page isn\'t locked'); + assert.notOk($html.hasClass('remodal-is-locked'), 'page isn\'t locked'); assert.equal(parseInt($body.css('padding-right')), 0, 'padding-right equals 0'); QUnit.start(); }); @@ -282,7 +282,7 @@ }); $document.one('closed', '[data-remodal-id=modal]', function() { - assert.ok(!$html.hasClass('remodal-is-locked'), 'page isn\'t locked'); + assert.notOk($html.hasClass('remodal-is-locked'), 'page isn\'t locked'); assert.ok(parseInt($body.css('padding-right')) <= 20, 'padding-right is correct'); QUnit.start(); }); @@ -297,34 +297,98 @@ hashTracking: false, closeOnConfirm: false, closeOnCancel: false, - closeOnEscape: true, - closeOnAnyClick: true, + closeOnEscape: false, + closeOnAnyClick: false, modifier: 'with-test-class1 with-test-class2' }, 'options are correctly parsed'); }); - QUnit.asyncTest('Options', function(assert) { + QUnit.test('"hashTracking" option', function(assert) { var $wrapper = $('[data-remodal-id=modal2]').parent(); var remodal = $wrapper.children().remodal(); remodal.open(); - assert.ok(!location.hash, 'hash tracking is disabled'); + assert.notOk(location.hash, 'hash tracking is disabled'); + remodal.close(); + }); + + QUnit.asyncTest('"closeOnConfirm" option', function(assert) { + var $wrapper = $('[data-remodal-id=modal2]').parent(); + var remodal = $wrapper.children().remodal(); + + $document.one('opened', '[data-remodal-id=modal2]', function() { + $wrapper.find('[data-remodal-action=confirm]').click(); + }); $document.one('confirmation', '[data-remodal-id=modal2]', function() { + assert.equal(remodal.getState(), 'opened', 'it is still opened'); + remodal.close(); + }); + + $document.one('closed', '[data-remodal-id=modal2]', function() { + QUnit.start(); + }); + + remodal.open(); + }); + + QUnit.asyncTest('"closeOnCancel" option', function(assert) { + var $wrapper = $('[data-remodal-id=modal2]').parent(); + var remodal = $wrapper.children().remodal(); + + $document.one('opened', '[data-remodal-id=modal2]', function() { + $wrapper.find('[data-remodal-action=cancel]').click(); + }); + + $document.one('cancellation', '[data-remodal-id=modal2]', function() { + assert.equal(remodal.getState(), 'opened', 'it is still opened'); + remodal.close(); + }); + + $document.one('closed', '[data-remodal-id=modal2]', function() { + QUnit.start(); + }); + + remodal.open(); + }); + + QUnit.asyncTest('"closeOnEscape" option', function(assert) { + var remodal = $('[data-remodal-id=modal2]').remodal(); + + $document.one('opened', '[data-remodal-id=modal2]', function() { + $document.trigger($.Event('keyup', { keyCode: 27 })); + setTimeout(function() { - assert.equal($wrapper.css('display'), 'block', 'wrapper is visible'); + assert.equal(remodal.getState(), 'opened', 'it is still opened'); + remodal.close(); }, 50); }); - $document.one('cancellation', '[data-remodal-id=modal2]', function() { + $document.one('closed', '[data-remodal-id=modal2]', function() { + QUnit.start(); + }); + + remodal.open(); + }); + + QUnit.asyncTest('"closeOnAnyClick" option', function(assert) { + var $wrapper = $('[data-remodal-id=modal2]').parent(); + var remodal = $wrapper.children().remodal(); + + $document.one('opened', '[data-remodal-id=modal2]', function() { + $wrapper.click(); + setTimeout(function() { - assert.equal($wrapper.css('display'), 'block', 'wrapper is visible'); - QUnit.start(); + assert.equal(remodal.getState(), 'opened', 'it is still opened'); + remodal.close(); }, 50); }); - $wrapper.find('[data-remodal-action=confirm]').click(); - $wrapper.find('[data-remodal-action=cancel]').click(); + $document.one('closed', '[data-remodal-id=modal2]', function() { + QUnit.start(); + }); + + remodal.open(); }); QUnit.asyncTest('"modifier" option', function(assert) { @@ -342,8 +406,8 @@ }); $document.one('closed', '[data-remodal-id=modal2]', function() { - assert.ok(!$bg.hasClass('with-test-class1 with-test-class2'), 'bg hasn\'t the modifier'); - assert.ok(!$overlay.hasClass('with-test-class1 with-test-class2'), 'overlay has\'t the modifier'); + assert.notOk($bg.hasClass('with-test-class1 with-test-class2'), 'bg hasn\'t the modifier'); + assert.notOk($overlay.hasClass('with-test-class1 with-test-class2'), 'overlay has\'t the modifier'); assert.ok($modal.hasClass('with-test-class1 with-test-class2'), 'modal still has the modifier'); QUnit.start(); From 28d507f49899b31db72218622ed8227d7c5888b6 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Thu, 30 Apr 2015 14:57:49 +0300 Subject: [PATCH 37/68] Remove $body from the object --- src/jquery.remodal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index fd85908..9f7fd3a 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -403,6 +403,7 @@ * @constructor */ function Remodal($modal, options) { + var $body = $(document.body); var remodal = this; remodal.settings = $.extend({}, DEFAULTS, options); @@ -410,12 +411,11 @@ remodal.state = STATES.CLOSED; // Build DOM - remodal.$body = $(document.body); remodal.$overlay = $('.' + NAMESPACE + '-overlay'); if (!remodal.$overlay.length) { remodal.$overlay = $('
').addClass(NAMESPACE + '-overlay'); - remodal.$body.append(remodal.$overlay); + $body.append(remodal.$overlay); } remodal.$bg = $('.' + NAMESPACE + '-bg'); @@ -425,7 +425,7 @@ remodal.$modal.css('visibility', 'visible'); remodal.$wrapper.append(remodal.$modal); - remodal.$body.append(remodal.$wrapper); + $body.append(remodal.$wrapper); // Add the close button event listener remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + NAMESPACE + '-action="close"]', function(e) { From 6ca3d50a84e743d078a1ae5755a1df5355ef99bf Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Thu, 30 Apr 2015 17:07:38 +0300 Subject: [PATCH 38/68] Update examples --- examples/index-zepto.html | 226 ++++++++++++++++++++++++++++++-------- examples/index.html | 182 ++++++++++++++++++++++++------ 2 files changed, 325 insertions(+), 83 deletions(-) diff --git a/examples/index-zepto.html b/examples/index-zepto.html index 4e54449..0b352e0 100644 --- a/examples/index-zepto.html +++ b/examples/index-zepto.html @@ -7,74 +7,199 @@ +
- Click + Modal №1
+ Modal №2

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


@@ -82,23 +207,20 @@

Remodal

-

Remodal

+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin + Responsive, lightweight, fast, fully customizable modal window plugin with declarative state notation and hash tracking.

-

- Minified version size: ~4kb -


- +
-

Another one window

+

Another one window

Hello!

@@ -116,50 +238,58 @@

Another one window

// closeOnConfirm: true, // closeOnCancel: true, // closeOnEscape: true, - // closeOnAnyClick: true + // closeOnAnyClick: true, + // modifier: '' // } // }; - + + diff --git a/examples/index.html b/examples/index.html index f72313c..6c34629 100644 --- a/examples/index.html +++ b/examples/index.html @@ -30,66 +30,176 @@

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.

+
+ +

Remodal

- Minified version size: ~4kb + Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking.


@@ -97,14 +207,11 @@

Remodal

-

Remodal

+

Remodal

- Flat, responsive, lightweight, fast, easy customizable modal window plugin + Responsive, lightweight, fast, fully customizable modal window plugin with declarative state notation and hash tracking.

-

- Minified version size: ~4kb -


@@ -113,7 +220,7 @@

Remodal

-

Another one window

+

Another one window

Hello!

@@ -131,12 +238,13 @@

Another one window

// closeOnConfirm: true, // closeOnCancel: true, // closeOnEscape: true, - // closeOnAnyClick: true + // closeOnAnyClick: true, + // modifier: '' // } // }; - + @@ -166,18 +274,22 @@

Another one window

console.log('cancellation'); }); -// You can open or close it like this: -// $(function () { -// var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')]; +// Usage: +// $(function() { +// +// // In this case the initialization function returns the already created instance +// var inst = $('[data-remodal-id=modal]').remodal(); +// // inst.open(); // inst.close(); +// inst.getState(); +// inst.destroy(); // }); - // Or init in this way: - var inst = $('[data-remodal-id=modal2]').remodal({ + // The second way to initialize: + $('[data-remodal-id=modal2]').remodal({ modifier: 'with-red-theme' }); - // inst.open(); From 91d3fc440b2f70c1199debfe8b407cc4e4b05e2c Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Thu, 30 Apr 2015 17:38:26 +0300 Subject: [PATCH 39/68] :lipstick: JSDoc --- src/jquery.remodal.js | 54 +++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 9f7fd3a..233fd4c 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -98,7 +98,7 @@ var scrollTop; /** - * Get an animation duration + * Returns an animation duration * @private * @param {jQuery} $elem * @return {Number} @@ -147,7 +147,7 @@ } /** - * Get a scrollbar width + * Returns a scrollbar width * @private * @return {Number} */ @@ -183,7 +183,7 @@ } /** - * Lock the screen + * Locks the screen * @private */ function lockScreen() { @@ -204,7 +204,7 @@ } /** - * Unlock the screen + * Unlocks the screen * @private */ function unlockScreen() { @@ -225,7 +225,7 @@ } /** - * Set state for an instance + * Sets a state for an instance * @private * @param {Remodal} instance * @param {STATES} state @@ -265,7 +265,7 @@ } /** - * Call a function after the animation + * Calls a function after the animation * @private * @param {Function} fn * @param {Remodal} instance @@ -304,7 +304,7 @@ } /** - * Close immediately + * Closes immediately * @private * @param {Remodal} instance */ @@ -323,7 +323,7 @@ } /** - * Parse a string with options + * Parses a string with options * @private * @param str * @returns {Object} @@ -361,8 +361,9 @@ } /** - * Hashchange event handler + * Handles the hashchange event * @private + * @listens hashchange */ function handleHashChangeEvent() { var id = location.hash.replace('#', ''); @@ -398,9 +399,9 @@ /** * Remodal constructor + * @constructor * @param {jQuery} $modal * @param {Object} options - * @constructor */ function Remodal($modal, options) { var $body = $(document.body); @@ -410,7 +411,6 @@ remodal.index = $[PLUGIN_NAME].lookup.push(remodal) - 1; remodal.state = STATES.CLOSED; - // Build DOM remodal.$overlay = $('.' + NAMESPACE + '-overlay'); if (!remodal.$overlay.length) { @@ -427,14 +427,14 @@ remodal.$wrapper.append(remodal.$modal); $body.append(remodal.$wrapper); - // Add the close button event listener + // Add the event listener for the close button remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + NAMESPACE + '-action="close"]', function(e) { e.preventDefault(); remodal.close(); }); - // Add the cancel button event listener + // Add the event listener for the cancel button remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + NAMESPACE + '-action="cancel"]', function(e) { e.preventDefault(); @@ -445,7 +445,7 @@ } }); - // Add the confirm button event listener + // Add the event listener for the confirm button remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + NAMESPACE + '-action="confirm"]', function(e) { e.preventDefault(); @@ -456,7 +456,7 @@ } }); - // Add the overlay event listener + // Add the event listener for the overlay remodal.$wrapper.on('click.' + NAMESPACE, function(e) { var $target = $(e.target); @@ -471,7 +471,7 @@ } /** - * Open a modal window + * Opens a modal window * @public */ Remodal.prototype.open = function() { @@ -508,7 +508,7 @@ }; /** - * Close a modal window + * Closes a modal window * @public * @param {String} reason */ @@ -541,7 +541,7 @@ }; /** - * Return a current state of a modal + * Returns a current state of a modal * @public * @returns {STATES} */ @@ -550,7 +550,7 @@ }; /** - * Destroy a modal + * Destroys a modal * @public */ Remodal.prototype.destroy = function() { @@ -576,7 +576,7 @@ }; /** - * Special plugin object for instances. + * Special plugin object for instances * @public * @type {Object} */ @@ -586,9 +586,9 @@ /** * Plugin constructor + * @constructor * @param {Object} options * @returns {JQuery} - * @constructor */ $.fn[PLUGIN_NAME] = function(opts) { var instance; @@ -617,7 +617,7 @@ $(document).ready(function() { - // data-remodal-target opens a modal window with the special Id. + // data-remodal-target opens a modal window with the special Id $(document).on('click', '[data-' + PLUGIN_NAME + '-target]', function(e) { e.preventDefault(); @@ -628,9 +628,9 @@ $[PLUGIN_NAME].lookup[$target.data(PLUGIN_NAME)].open(); }); - // Auto initialization of modal windows. - // They should have the 'remodal' class attribute. - // Also you can write `data-remodal-options` attribute to pass params into the modal. + // Auto initialization of modal windows + // They should have the 'remodal' class attribute + // Also you can write the `data-remodal-options` attribute to pass params into the modal $(document).find('.' + NAMESPACE).each(function(i, container) { var $container = $(container); var options = $container.data(PLUGIN_NAME + '-options'); @@ -644,14 +644,14 @@ $container[PLUGIN_NAME](options); }); - // Handle keyup event + // Handles the keyup event $(document).on('keyup.' + NAMESPACE, function(e) { if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) { current.close(); } }); - // Handle hashchange event + // Handles the hashchange event $(window).on('hashchange.' + NAMESPACE, handleHashChangeEvent); }); }); From 68b49ea6a06f7f63af18afa1a1627b9a38217356 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Fri, 1 May 2015 23:16:50 +0300 Subject: [PATCH 40/68] Update docs --- README.md | 243 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 148 insertions(+), 95 deletions(-) diff --git a/README.md b/README.md index 8353182..75e7193 100644 --- a/README.md +++ b/README.md @@ -4,37 +4,39 @@ [![devDependency Status](https://david-dm.org/vodkabears/remodal/dev-status.svg)](https://david-dm.org/vodkabears/remodal#info=devDependencies) Remodal ======= -Flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking. +Responsive, lightweight, fast, fully customizable modal window plugin +with declarative configuration and hash tracking. #IMPORTANT! -**v0.4.0 has incompatible changes.** - -**v0.7.0 will have incompatible changes...a lot of incompatible changes. Old versions won't be supported.** +**v1.0.0 has a lot of incompatible changes. Old versions won't be supported.** ## Notes * All modern browsers are supported. -* Only webkit browsers have a blur effect in the default css theme. If you want a blur for other browsers, use this: https://github.com/Schepp/CSS-Filters-Polyfill, but it's not fast like a native css3 blur. -* IE8+. To enable IE8 styles add `lt-ie9` class to the `html` element, as modernizr does. -* Zepto support. +* IE8+. To enable IE8 styles add the `lt-ie9` class to the `html` element, as modernizr does. +* jQuery, jQuery2, Zepto support. +* Browserify support. ## Start -That's very simple to start using Remodal. - -[Download it](https://github.com/VodkaBears/Remodal/releases/latest). You can use bower: `bower install remodal`. +Download the latest version from [GitHub](https://github.com/VodkaBears/Remodal/releases/latest +) or via package managers: +``` +npm install remodal +bower install remodal +``` -Add this in the head section: +Include the CSS file from the dist folder in the head section: ```html - + ``` -Add this before the `` or in the head: +Include the JS file from the dist folder before the ``: ```html - + ``` -Define the background container for the modal(for effects like a blur). It can be any simple content wrapper: +You can define the background container for the modal(for effects like a blur). It can be any simple content wrapper: ```html
...Page content... @@ -44,17 +46,20 @@ Define the background container for the modal(for effects like a blur). It can b And now create the modal dialog: ```html
-

Remodal

-

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. -

-
- Cancel - OK + +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +
``` +Don't use the `id` attribute, if you want to avoid the anchor jump, use `data-remodal-id`. + So, now you can call it with the hash: ```html Call the modal with data-remodal-id="modal" @@ -64,141 +69,189 @@ Or: Call the modal with data-remodal-id="modal" ``` -## Globals - -```html - - -``` - -#### NAMESPACE - -Base HTML class for your modals. CSS theme will need to be updated to reflect this. - -#### DEFAULTS - -Extends default settings. - ## Options -You can pass additional options by the `data-remodal-options` attribute. +You can pass additional options with the `data-remodal-options` attribute. ```html
-

Remodal

-

- Flat, responsive, lightweight, fast, easy customizable modal window plugin - with declarative state notation and hash tracking. -

-
- Cancel - OK + data-remodal-options="hashTracking: false, closeOnAnyClick: false"> + + +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
+ +
``` #### hashTracking `Default: true` -To open the modal without the hash, use `data-remodal-target` attribute. +To open the modal without the hash, use the `data-remodal-target` attribute. ```html -Call the modal with data-remodal-id="modal" +Call the modal with data-remodal-id="modal" ``` #### closeOnConfirm `Default: true` -If set to true, closes a modal window after clicking confirm button. +If true, closes the modal window after clicking the confirm button. #### closeOnCancel `Default: true` -If set to true, closes a modal window after clicking cancel button. +If true, closes the modal window after clicking the cancel button. #### closeOnEscape `Default: true` -If set to true, closes a modal window after pressing ESC button. +If true, closes the modal window after pressing the ESC key. #### closeOnAnyClick `Default: true` -If set to true, closes a modal window by clicking anywhere on the page. - -## Events +If true, closes the modal window by clicking anywhere on the page. -```js -$(document).on('open', '.remodal', function () { - console.log('open'); -}); +#### modifier +`Default: ''` -$(document).on('opened', '.remodal', function () { - console.log('opened'); -}); +Modifier CSS classes for the modal that is added to the overlay, modal and background (see [CSS](#css)). -$(document).on('close', '.remodal', function (e) { - console.log('close'); +## Globals - // "confirmation", or "cancellation", or undefined - console.log(e.reason); -}); +```html + + +``` -$(document).on('closed', '.remodal', function (e) { - console.log('closed'); +#### NAMESPACE - // "confirmation", or "cancellation", or undefined - console.log(e.reason); -}); +Base HTML class for your modals. CSS theme should be updated to reflect this. -$(document).on('confirm', '.remodal', function () { - console.log('confirm'); -}); +#### DEFAULTS -$(document).on('cancel', '.remodal', function () { - console.log('cancel'); -}); -``` +Extends the default settings. -## Cool bro! But i don't like declarative style! +## Initialization with JavaScript -Ok, don't set the class attribute and write something like this: +Do not set the 'remodal' class, if you prefer a JS initialization. ```html +
+ +

Remodal

+

+ Responsive, lightweight, fast, fully customizable modal window plugin + with declarative configuration and hash tracking. +

+
``` -Don't use `id` attribute, if you want to avoid the anchor jump. ## Methods Get the instance of the modal and call a method: ```js -var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')]; +var inst = $('[data-remodal-id=modal]').remodal(); /** - * Open the modal window + * Opens the modal window */ inst.open(); /** - * Close the modal window + * Closes the modal window */ inst.close(); /** - * Get a current state of the modal + * Returns a current state of the modal * @returns {'closed'|'closing'|'opened'|'opening'} */ inst.getState(); + +/** + * Destroys the modal window + */ +inst.destroy(); +``` + +## Events + +```js +$(document).on('opening', '.remodal', function () { + console.log('Modal is opening'); +}); + +$(document).on('opened', '.remodal', function () { + console.log('Modal is opened'); +}); + +$(document).on('closing', '.remodal', function (e) { + + // Reason: 'confirmation', 'cancellation' + console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : '')); +}); + +$(document).on('closed', '.remodal', function (e) { + + // Reason: 'confirmation', 'cancellation' + console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : '')); +}); + +$(document).on('confirmation', '.remodal', function () { + console.log('Confirmation button is clicked'); +}); + +$(document).on('cancellation', '.remodal', function () { + console.log('Cancel button is clicked'); +}); ``` +## CSS + +#### Classes + +`.remodal` – the default class of modal dialogs + +`.remodal-wrapper` – the additional wrapper for the `.remodal`, it is not the overlay and used for the alignment + +`.remodal-overlay` – the overlay of modal dialogs + +`.remodal-bg` – the background of modal dialogs, it is under the overlay and usually it is the wrapper of your content. You should add it on your own. + +The `remodal` prefix can be changed in the global settings. See [the `NAMESPACE` option](#namespace). + +#### States + +States are added to the `.remodal`, `.remodal-overlay`, `.remodal-bg` classes. + +List: +``` +.remodal-is-opening +.remodal-is-opened +.remodal-is-closing +.remodal-is-closed +``` + +#### Modifier + +A modifier that is specified in the [options](#options) is added to the `.remodal`, `.remodal-overlay`, `.remodal-bg` classes. + ## License ``` From 3d31e9720e55956c0275854c3ec0a603d87a92ec Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 2 May 2015 02:10:22 +0300 Subject: [PATCH 41/68] Update the description --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 0e5dace..658edd0 100644 --- a/bower.json +++ b/bower.json @@ -5,7 +5,7 @@ "authors": [ "Ilya Makarov " ], - "description": "Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.", + "description": "Responsive, lightweight, fast, fully customizable modal window plugin with declarative configuration and hash tracking.", "main": [ "dist/jquery.remodal.js", "dist/jquery.remodal.css" diff --git a/package.json b/package.json index f36ebb1..14015f0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "remodal", "version": "0.6.4", - "description": "Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.", + "description": "Responsive, lightweight, fast, fully customizable modal window plugin with declarative configuration and hash tracking.", "keywords": [ "jquery-plugin", "jquery", From 460ec56c029d58786801f00755f02cd043b2f515 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sun, 3 May 2015 19:13:22 +0300 Subject: [PATCH 42/68] Fix synchronization of CSS animation --- src/jquery.remodal.js | 173 +++++++++++++++++++++++++++++------------- test/remodal.html | 14 ++-- test/remodal_test.js | 14 ++-- 3 files changed, 136 insertions(+), 65 deletions(-) diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 233fd4c..19cf9cf 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -13,36 +13,50 @@ 'use strict'; /** - * Animationend event with vendor prefixes + * Name of the plugin * @private * @const * @type {String} */ - var ANIMATIONEND_EVENTS = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; + var PLUGIN_NAME = 'remodal'; /** - * Animationstart event with vendor prefixes + * Namespace for CSS and events * @private * @const * @type {String} */ - var ANIMATIONSTART_EVENTS = 'animationstart webkitAnimationStart MSAnimationStart oAnimationStart'; + var NAMESPACE = global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.NAMESPACE || PLUGIN_NAME; /** - * Name of the plugin + * Animationstart event with vendor prefixes * @private * @const * @type {String} */ - var PLUGIN_NAME = 'remodal'; + var ANIMATIONSTART_EVENTS = $.map( + ['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart'], + + function(eventName) { + return eventName + '.' + NAMESPACE; + } + + ).join(' '); /** - * Namespace for CSS and events + * Animationend event with vendor prefixes * @private * @const * @type {String} */ - var NAMESPACE = global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.NAMESPACE || PLUGIN_NAME; + var ANIMATIONEND_EVENTS = $.map( + ['animationend', 'webkitAnimationEnd', 'MSAnimationEnd', 'oAnimationEnd'], + + function(eventName) { + return eventName + '.' + NAMESPACE; + } + + ).join(' '); /** * Default settings @@ -83,6 +97,22 @@ CANCELLATION: 'cancellation' }; + /** + * Is animation supported? + * @private + * @const + * @type {Boolean} + */ + var IS_ANIMATION = (function() { + var style = document.createElement('div').style; + + return style.animationName !== undefined || + style.WebkitAnimationName !== undefined || + style.MozAnimationName !== undefined || + style.msAnimationName !== undefined || + style.OAnimationName !== undefined; + })(); + /** * Current modal * @private @@ -101,9 +131,20 @@ * Returns an animation duration * @private * @param {jQuery} $elem - * @return {Number} + * @returns {Number} */ function getAnimationDuration($elem) { + if ( + IS_ANIMATION && + $elem.css('animation-name') === 'none' && + $elem.css('-webkit-animation-name') === 'none' && + $elem.css('-moz-animation-name') === 'none' && + $elem.css('-o-animation-name') === 'none' && + $elem.css('-ms-animation-name') === 'none' + ) { + return 0; + } + var duration = $elem.css('animation-duration') || $elem.css('-webkit-animation-duration') || $elem.css('-moz-animation-duration') || @@ -136,7 +177,7 @@ // The 'duration' size is the same as the 'delay' size for (i = 0, len = duration.length, max = Number.NEGATIVE_INFINITY; i < len; i++) { - num = parseFloat(duration[i]) * parseInt(iterationCount[i]) + parseFloat(delay[i]); + num = parseFloat(duration[i]) * parseInt(iterationCount[i], 10) + parseFloat(delay[i]); if (num > max) { max = num; @@ -149,7 +190,7 @@ /** * Returns a scrollbar width * @private - * @return {Number} + * @returns {Number} */ function getScrollbarWidth() { if ($(document.body).height() <= $(window).height()) { @@ -265,42 +306,60 @@ } /** - * Calls a function after the animation - * @private - * @param {Function} fn + * Synchronizes with the animation + * @param {Function} doBeforeAnimation + * @param {Function} doAfterAnimation * @param {Remodal} instance */ - function callAfterAnimation(fn, instance) { + function syncWithAnimation(doBeforeAnimation, doAfterAnimation, instance) { + var runningAnimationsCount = 0; - // Element with the longest animation - var $observableElement = getAnimationDuration(instance.$modal) > getAnimationDuration(instance.$overlay) ? - instance.$modal : instance.$overlay; - var isAnimationStarted = false; + var handleAnimationStart = function(e) { + if (e.target !== this) { + return; + } - $observableElement.one(ANIMATIONSTART_EVENTS, function() { - isAnimationStarted = true; + runningAnimationsCount++; + }; - $observableElement.one(ANIMATIONEND_EVENTS, function(e) { + var handleAnimationEnd = function(e) { + if (e.target !== this) { + return; + } - // Ignore child nodes - if (e.target !== this) { - return; - } + if (--runningAnimationsCount === 0) { - fn(); - }); - }); + // Remove event listeners + $.each(['$bg', '$overlay', '$modal'], function(index, elemName) { + instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); + }); - // Check after some time if the animation is started - setTimeout(function() { - if (isAnimationStarted) { - return; + doAfterAnimation(); } + }; - // If the 'animationstart' event wasn't triggered - $observableElement.off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); - fn(); - }, 25); + $.each(['$bg', '$overlay', '$modal'], function(index, elemName) { + instance[elemName] + .on(ANIMATIONSTART_EVENTS, handleAnimationStart) + .on(ANIMATIONEND_EVENTS, handleAnimationEnd); + }); + + doBeforeAnimation(); + + // If the animation is not supported by a browser or its duration is 0 + if ( + getAnimationDuration(instance.$bg) === 0 && + getAnimationDuration(instance.$overlay) === 0 && + getAnimationDuration(instance.$modal) === 0 + ) { + + // Remove event listeners + $.each(['$bg', '$overlay', '$modal'], function(index, elemName) { + instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); + }); + + doAfterAnimation(); + } } /** @@ -313,8 +372,10 @@ return; } - instance.$overlay.off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); - instance.$modal.off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); + $.each(['$bg', '$overlay', '$modal'], function(index, elemName) { + instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS); + }); + instance.$bg.removeClass(instance.settings.modifier); instance.$overlay.removeClass(instance.settings.modifier).hide(); instance.$wrapper.hide(); @@ -500,11 +561,16 @@ remodal.$overlay.addClass(remodal.settings.modifier).show(); remodal.$wrapper.show().scrollTop(0); - callAfterAnimation(function() { - setState(remodal, STATES.OPENED); - }, remodal); + syncWithAnimation( + function() { + setState(remodal, STATES.OPENING); + }, + + function() { + setState(remodal, STATES.OPENED); + }, - setState(remodal, STATES.OPENING); + remodal); }; /** @@ -528,16 +594,21 @@ $(window).scrollTop(scrollTop); } - callAfterAnimation(function() { - remodal.$bg.removeClass(remodal.settings.modifier); - remodal.$overlay.removeClass(remodal.settings.modifier).hide(); - remodal.$wrapper.hide(); - unlockScreen(); + syncWithAnimation( + function() { + setState(remodal, STATES.CLOSING, false, reason); + }, + + function() { + remodal.$bg.removeClass(remodal.settings.modifier); + remodal.$overlay.removeClass(remodal.settings.modifier).hide(); + remodal.$wrapper.hide(); + unlockScreen(); - setState(remodal, STATES.CLOSED, false, reason); - }, remodal); + setState(remodal, STATES.CLOSED, false, reason); + }, - setState(remodal, STATES.CLOSING, false, reason); + remodal); }; /** diff --git a/test/remodal.html b/test/remodal.html index 834affd..72c7c2f 100644 --- a/test/remodal.html +++ b/test/remodal.html @@ -16,12 +16,12 @@ @@ -43,7 +43,7 @@
+ modifier : without-animation with-test-class"> Cancel diff --git a/test/remodal_test.js b/test/remodal_test.js index fa078d9..b08de30 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -299,7 +299,7 @@ closeOnCancel: false, closeOnEscape: false, closeOnAnyClick: false, - modifier: 'with-test-class1 with-test-class2' + modifier: 'without-animation with-test-class' }, 'options are correctly parsed'); }); @@ -398,17 +398,17 @@ var remodal = $modal.remodal(); $document.one('opened', '[data-remodal-id=modal2]', function() { - assert.ok($bg.hasClass('with-test-class1 with-test-class2'), 'bg has the modifier'); - assert.ok($overlay.hasClass('with-test-class1 with-test-class2'), 'overlay has the modifier'); - assert.ok($modal.hasClass('with-test-class1 with-test-class2'), 'modal has the modifier'); + assert.ok($bg.hasClass('without-animation with-test-class'), 'bg has the modifier'); + assert.ok($overlay.hasClass('without-animation with-test-class'), 'overlay has the modifier'); + assert.ok($modal.hasClass('without-animation with-test-class'), 'modal has the modifier'); remodal.close(); }); $document.one('closed', '[data-remodal-id=modal2]', function() { - assert.notOk($bg.hasClass('with-test-class1 with-test-class2'), 'bg hasn\'t the modifier'); - assert.notOk($overlay.hasClass('with-test-class1 with-test-class2'), 'overlay has\'t the modifier'); - assert.ok($modal.hasClass('with-test-class1 with-test-class2'), 'modal still has the modifier'); + assert.notOk($bg.hasClass('without-animation with-test-class'), 'bg hasn\'t the modifier'); + assert.notOk($overlay.hasClass('without-animation with-test-class'), 'overlay has\'t the modifier'); + assert.ok($modal.hasClass('without-animation with-test-class'), 'modal still has the modifier'); QUnit.start(); }); From 237a0a41d77a760e948e7e409644422e321a54a7 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Tue, 12 May 2015 03:32:17 +0300 Subject: [PATCH 43/68] Fix tests for IE8 --- test/remodal_test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/remodal_test.js b/test/remodal_test.js index b08de30..70a4713 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -228,7 +228,7 @@ .appendTo($(document.body)) .remodal(); - var instanceCount = $.remodal.lookup.filter(function(instance) { + var instanceCount = $.grep($.remodal.lookup, function(instance) { return !!instance; }).length; @@ -237,7 +237,7 @@ remodal.destroy(); - instanceCount = $.remodal.lookup.filter(function(instance) { + instanceCount = $.grep($.remodal.lookup, function(instance) { return !!instance; }).length; From 35fb0145869b2c1f7e311f169bb56f35f9def3d8 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 16 May 2015 14:50:01 +0300 Subject: [PATCH 44/68] Make a redesign for small screens (Solves #122) --- src/jquery.remodal.css | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index b9c0ea9..7df3bfc 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -1,5 +1,5 @@ /* ========================================================================== - Remodal necessary styles + Remodal's necessary styles ========================================================================== */ /* Hide scroll bar */ @@ -76,7 +76,7 @@ html.remodal-is-locked { } /* ========================================================================== - Remodal default theme + Remodal's default mobile first theme ========================================================================== */ /* Default theme styles of the overlay */ @@ -91,11 +91,17 @@ html.remodal-is-locked { } .remodal-overlay.remodal-is-opening { - animation: remodal-overlay-open-keyframes 0.2s; + animation: remodal-overlay-opening-keyframes 0.2s; } .remodal-overlay.remodal-is-closing { - animation: remodal-overlay-close-keyframes 0.2s; + animation: remodal-overlay-closing-keyframes 0.2s; +} + +/* Default theme styles of the wrapper */ + +.remodal-wrapper { + padding: 10px 10px 0; } /* Default theme styles of the modal dialog */ @@ -103,7 +109,7 @@ html.remodal-is-locked { .remodal { box-sizing: border-box; width: 100%; - min-height: 100%; + margin-bottom: 10px; padding: 35px; color: #182a3c; @@ -116,11 +122,11 @@ html.remodal-is-locked { } .remodal.remodal-is-opening { - animation: remodal-open-keyframes 0.2s; + animation: remodal-opening-keyframes 0.2s; } .remodal.remodal-is-closing { - animation: remodal-close-keyframes 0.2s; + animation: remodal-closing-keyframes 0.2s; } /* Vertical align of the modal dialog */ @@ -185,7 +191,7 @@ html.remodal-is-locked { display: inline-block; overflow: visible; - min-width: 120px; + min-width: 110px; margin: 0; padding: 12px 0; @@ -229,7 +235,7 @@ html.remodal-is-locked { /* Keyframes ========================================================================== */ -@keyframes remodal-open-keyframes { +@keyframes remodal-opening-keyframes { from { transform: scale(1.05); @@ -242,7 +248,7 @@ html.remodal-is-locked { } } -@keyframes remodal-close-keyframes { +@keyframes remodal-closing-keyframes { from { transform: scale(1); @@ -255,7 +261,7 @@ html.remodal-is-locked { } } -@keyframes remodal-overlay-open-keyframes { +@keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } @@ -264,7 +270,7 @@ html.remodal-is-locked { } } -@keyframes remodal-overlay-close-keyframes { +@keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } @@ -280,7 +286,6 @@ html.remodal-is-locked { .remodal { max-width: 700px; min-height: 0; - margin: 20px auto; } /* Background for effects */ From 4d7516434f5a868227fb435497cdbfbc9fa2adcd Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 16 May 2015 16:35:08 +0300 Subject: [PATCH 45/68] Do not use inline styles (Solves #123) --- src/jquery.remodal.css | 7 ++++++- src/jquery.remodal.js | 32 ++++++++++++++++++++------------ test/remodal_test.js | 3 +++ 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css index 7df3bfc..56758a0 100644 --- a/src/jquery.remodal.css +++ b/src/jquery.remodal.css @@ -24,7 +24,9 @@ html.remodal-is-locked { right: -5000px; bottom: -5000px; left: -5000px; +} +.remodal-overlay.remodal-is-closed { display: none; } @@ -38,7 +40,6 @@ html.remodal-is-locked { bottom: 0; left: 0; - display: none; overflow: auto; text-align: center; @@ -46,6 +47,10 @@ html.remodal-is-locked { -webkit-overflow-scrolling: touch; } +.remodal-wrapper.remodal-is-closed { + display: none; +} + .remodal-wrapper:after { display: inline-block; diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js index 19cf9cf..c6da991 100644 --- a/src/jquery.remodal.js +++ b/src/jquery.remodal.js @@ -290,6 +290,14 @@ NAMESPACE + '-is-' + STATES.OPENED) .addClass(NAMESPACE + '-is-' + state); + instance.$wrapper + .removeClass( + NAMESPACE + '-is-' + STATES.CLOSING + ' ' + + NAMESPACE + '-is-' + STATES.OPENING + ' ' + + NAMESPACE + '-is-' + STATES.CLOSED + ' ' + + NAMESPACE + '-is-' + STATES.OPENED) + .addClass(NAMESPACE + '-is-' + state); + instance.$modal .removeClass( NAMESPACE + '-is-' + STATES.CLOSING + ' ' + @@ -377,8 +385,7 @@ }); instance.$bg.removeClass(instance.settings.modifier); - instance.$overlay.removeClass(instance.settings.modifier).hide(); - instance.$wrapper.hide(); + instance.$overlay.removeClass(instance.settings.modifier); unlockScreen(); setState(instance, STATES.CLOSED, true); } @@ -475,17 +482,19 @@ remodal.$overlay = $('.' + NAMESPACE + '-overlay'); if (!remodal.$overlay.length) { - remodal.$overlay = $('
').addClass(NAMESPACE + '-overlay'); + remodal.$overlay = $('
').addClass(NAMESPACE + '-overlay ' + NAMESPACE + '-is-' + STATES.CLOSED); $body.append(remodal.$overlay); } - remodal.$bg = $('.' + NAMESPACE + '-bg'); - remodal.$wrapper = $('
').addClass(NAMESPACE + '-wrapper'); + remodal.$bg = $('.' + NAMESPACE + '-bg').addClass(NAMESPACE + '-is-' + STATES.CLOSED); remodal.$modal = $modal; - remodal.$modal.addClass(NAMESPACE + ' ' + remodal.settings.modifier); + remodal.$modal.addClass(NAMESPACE + ' ' + remodal.settings.modifier + ' ' + NAMESPACE + '-is-' + STATES.CLOSED); remodal.$modal.css('visibility', 'visible'); - - remodal.$wrapper.append(remodal.$modal); + remodal.$wrapper = $('
') + .addClass( + NAMESPACE + '-wrapper ' + remodal.settings.modifier + ' ' + + NAMESPACE + '-is-' + STATES.CLOSED) + .append(remodal.$modal); $body.append(remodal.$wrapper); // Add the event listener for the close button @@ -558,8 +567,8 @@ current = remodal; lockScreen(); remodal.$bg.addClass(remodal.settings.modifier); - remodal.$overlay.addClass(remodal.settings.modifier).show(); - remodal.$wrapper.show().scrollTop(0); + remodal.$overlay.addClass(remodal.settings.modifier); + remodal.$wrapper.scrollTop(0); syncWithAnimation( function() { @@ -601,8 +610,7 @@ function() { remodal.$bg.removeClass(remodal.settings.modifier); - remodal.$overlay.removeClass(remodal.settings.modifier).hide(); - remodal.$wrapper.hide(); + remodal.$overlay.removeClass(remodal.settings.modifier); unlockScreen(); setState(remodal, STATES.CLOSED, false, reason); diff --git a/test/remodal_test.js b/test/remodal_test.js index 70a4713..bc86e3c 100644 --- a/test/remodal_test.js +++ b/test/remodal_test.js @@ -394,12 +394,14 @@ QUnit.asyncTest('"modifier" option', function(assert) { var $modal = $('[data-remodal-id=modal2]'); var $overlay = $('.remodal-overlay'); + var $wrapper = $modal.parent(); var $bg = $('.remodal-bg'); var remodal = $modal.remodal(); $document.one('opened', '[data-remodal-id=modal2]', function() { assert.ok($bg.hasClass('without-animation with-test-class'), 'bg has the modifier'); assert.ok($overlay.hasClass('without-animation with-test-class'), 'overlay has the modifier'); + assert.ok($wrapper.hasClass('without-animation with-test-class'), 'wrapper has the modifier'); assert.ok($modal.hasClass('without-animation with-test-class'), 'modal has the modifier'); remodal.close(); @@ -408,6 +410,7 @@ $document.one('closed', '[data-remodal-id=modal2]', function() { assert.notOk($bg.hasClass('without-animation with-test-class'), 'bg hasn\'t the modifier'); assert.notOk($overlay.hasClass('without-animation with-test-class'), 'overlay has\'t the modifier'); + assert.ok($wrapper.hasClass('without-animation with-test-class'), 'wrapper still has the modifier'); assert.ok($modal.hasClass('without-animation with-test-class'), 'modal still has the modifier'); QUnit.start(); From 2a840f95fdbb8c904cabaf4797efebf7e4459da5 Mon Sep 17 00:00:00 2001 From: VodkaBears Date: Sat, 16 May 2015 17:56:22 +0300 Subject: [PATCH 46/68] Separete base and theme styles (Solves #124) --- Gruntfile.js | 11 +- examples/index-zepto.html | 1 + examples/index.html | 1 + src/jquery.remodal-default-theme.css | 233 ++++++++++++++++++++++++++ src/jquery.remodal.css | 234 --------------------------- test/remodal.html | 1 + 6 files changed, 243 insertions(+), 238 deletions(-) create mode 100644 src/jquery.remodal-default-theme.css diff --git a/Gruntfile.js b/Gruntfile.js index 1ddc295..8b565cb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -14,12 +14,12 @@ module.exports = function(grunt) { ' *\n' + ' * Made by <%= pkg.author.name %>\n' + ' * Under <%= pkg.license %> License\n' + - ' */\n' + ' */\n\n' }, autoprefixer: { dist: { - src: 'dist/jquery.remodal.css' + src: 'dist/**/*.css' }, options: { browsers: ['> 0.1%'], @@ -43,7 +43,8 @@ module.exports = function(grunt) { dist: { files: { 'dist/jquery.remodal.js': 'src/jquery.remodal.js', - 'dist/jquery.remodal.css': 'src/jquery.remodal.css' + 'dist/jquery.remodal.css': 'src/jquery.remodal.css', + 'dist/jquery.remodal-default-theme.css': 'src/jquery.remodal-default-theme.css' }, options: { banner: '<%= meta.banner %>' @@ -63,7 +64,9 @@ module.exports = function(grunt) { all: { files: { 'src/jquery.remodal.css': 'src/jquery.remodal.css', - 'dist/jquery.remodal.css': 'dist/jquery.remodal.css' + 'src/jquery.remodal-default-theme.css': 'src/jquery.remodal-default-theme.css', + 'dist/jquery.remodal.css': 'dist/jquery.remodal.css', + 'dist/jquery.remodal-default-theme.css': 'dist/jquery.remodal-default-theme.css' } } }, diff --git a/examples/index-zepto.html b/examples/index-zepto.html index 0b352e0..e840452 100644 --- a/examples/index-zepto.html +++ b/examples/index-zepto.html @@ -7,6 +7,7 @@ +