From 22858762da8f5ba514530342b9f8fa10f3884693 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 03:08:39 -0500 Subject: [PATCH 01/12] Added emitting of open/close events to modal_id Simply added namespaced open and close events via jQuery trigger method. Nothing more, nothing less. --- jquery.leanModal.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/jquery.leanModal.js b/jquery.leanModal.js index facf07e..f26e721 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -52,6 +52,8 @@ }); $(modal_id).fadeTo(200,1); + + $(modal_id).trigger('open.leanModal'); e.preventDefault(); @@ -64,10 +66,12 @@ $("#lean_overlay").fadeOut(200); $(modal_id).css({ 'display' : 'none' }); + + $(modal_id).trigger('close.leanModal'); } } }); -})(jQuery); \ No newline at end of file +})(jQuery); From 63afec30a21769f1bb16965bf9c83d82ed629f7b Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 03:18:01 -0500 Subject: [PATCH 02/12] Added e.preventDefault() to closeButton click event This keeps the close button link from executing and putting nasty little hashes on the end of the URL for the current page. Nothing more, nothing less. --- jquery.leanModal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jquery.leanModal.js b/jquery.leanModal.js index f26e721..ed77fb4 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -28,8 +28,9 @@ close_modal(modal_id); }); - $(o.closeButton).click(function() { + $(o.closeButton).click(function(e) { close_modal(modal_id); + e.preventDefault(); }); var modal_height = $(modal_id).outerHeight(); From ad3c72c763bc616308dc70a8c55c9fc7bc9ca869 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 03:33:47 -0500 Subject: [PATCH 03/12] Spacing and quote style and valid HTML tag quoting I took the liberty to reformat the spacing and indentation, as well as make the use of single and double quotes consistent and where single quotes were used in HTML tags, double quotes replaced them. Nothing more, nothing less. --- jquery.leanModal.js | 100 ++++++++++++++++++++------------------------ 1 file changed, 46 insertions(+), 54 deletions(-) diff --git a/jquery.leanModal.js b/jquery.leanModal.js index ed77fb4..82edc20 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -1,78 +1,70 @@ -(function($){ - +(function($) { $.fn.extend({ - leanModal: function(options) { - var defaults = { top: 100, overlay: 0.5, closeButton: null } - - var overlay = $("
"); - - $("body").append(overlay); - - options = $.extend(defaults, options); - + + var overlay = $('
'); + + $('body').append(overlay); + + options = $.extend(defaults, options); + return this.each(function() { - var o = options; - + $(this).click(function(e) { - - var modal_id = $(this).attr("href"); + var modal_id = $(this).attr('href'); - $("#lean_overlay").click(function() { - close_modal(modal_id); - }); - - $(o.closeButton).click(function(e) { - close_modal(modal_id); - e.preventDefault(); - }); - - var modal_height = $(modal_id).outerHeight(); - var modal_width = $(modal_id).outerWidth(); + $('#lean_overlay').click(function() { + close_modal(modal_id); + }); - $('#lean_overlay').css({ 'display' : 'block', opacity : 0 }); + $(o.closeButton).click(function(e) { + close_modal(modal_id); + e.preventDefault(); + }); - $('#lean_overlay').fadeTo(200,o.overlay); + var modal_height = $(modal_id).outerHeight(); + var modal_width = $(modal_id).outerWidth(); - $(modal_id).css({ - - 'display' : 'block', - 'position' : 'fixed', - 'opacity' : 0, - 'z-index': 11000, - 'left' : 50 + '%', - 'margin-left' : -(modal_width/2) + "px", - 'top' : o.top + "px" - - }); + $('#lean_overlay').css({ + 'display': 'block', + 'opacity': 0 + }); - $(modal_id).fadeTo(200,1); - - $(modal_id).trigger('open.leanModal'); + $('#lean_overlay').fadeTo(200, o.overlay); - e.preventDefault(); - - }); - - }); + $(modal_id).css({ + 'display': 'block', + 'position': 'fixed', + 'opacity': 0, + 'z-index': 11000, + 'left': 50 + '%', + 'margin-left': -(modal_width/2) + 'px', + 'top': o.top + 'px' + }); + + $(modal_id).fadeTo(200,1); - function close_modal(modal_id){ + $(modal_id).trigger('open.leanModal'); - $("#lean_overlay").fadeOut(200); + e.preventDefault(); + }); + }); - $(modal_id).css({ 'display' : 'none' }); + function close_modal(modal_id) { + $('#lean_overlay').fadeOut(200); + + $(modal_id).css({ + 'display': 'none' + }); $(modal_id).trigger('close.leanModal'); - - } - + } } }); - })(jQuery); From afbf619788283b589d5c6414f2aab8e5c5253606 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 03:52:15 -0500 Subject: [PATCH 04/12] Added how to, including events Added the "how to" from the website to the README, along with the new event features, change log and authors info. --- README | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/README b/README index 997e6b3..4d9859b 100644 --- a/README +++ b/README @@ -1,3 +1,68 @@ +# leanModal.js A super simple JQuery plugin for modal windows. works with your CSS. -Built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn't apply any styles to the target element, other than for displaying and positioning. \ No newline at end of file +Built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn't apply any styles to the target element, other than for displaying and positioning. + +## How To Use + +### Step 1 + +Together with JQuery, include jquery.leanModal.min.js in your page, thusly: + + + +### Step 2 + +Rather than call another stylesheet, simply include the following overlay style block in your existing stylesheet. Additionally, be sure to hide your modal element with 'display: none;' (although that probably goes without saying). + + #lean_overlay { + position: fixed; + z-index:100; + top: 0px; + left: 0px; + height:100%; + width:100%; + background: #000; + display: none; + } + +### Step 3 + +Call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element. + + $("#trigger_id").leanModal(); + +...or, if you want more than one modal window on the same page, simply add the 'rel' attribute to your triggers, and call the function by attribute, like so: + + $("a[rel*=leanModal]").leanModal(); + +## Options + +In the spirit of keeping things simple, there are only three options involved: vertical position of the modal element in relation to the document body (default is 100px from the top), the overlay opacity (default is 0.5), and a close button option (default null). You can override these defaults by passing your desired values to the function, like so: + + $("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" }); + +## Events + +Additionally, there are two namespaced events available to bind event handlers to. An "open" and "close" event. + + $('#modal_id').on('open.leanModal', function(e) { alert('The modal is now open.') }); + +and... + + $('#modal_id').on('close.leanModal', function(e) { alert('The modal is now closed.') }); + +Simple, and sweet. + +## Licensing +Available under the MIT and GPL licenses. See LICENSE file for more information. + +## Change Log +Feb 2012: v1.1 - added a closeButton option. Fixed multiple spawn of #lean_overlay. +Oct 2013: v1.2 - added open/close events + +## Author +@finelysliced + +## Contributors +@mitzip From 26def60e6b74b223b46e64f2dbf6b5c828d8d951 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 03:54:01 -0500 Subject: [PATCH 05/12] renamed README to display markdown in github --- README => README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename README => README.md (100%) diff --git a/README b/README.md similarity index 100% rename from README rename to README.md From a204493d83f072f4473994277822d37d5ae9be9d Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 04:02:01 -0500 Subject: [PATCH 06/12] added Github Flavored Markdown fenced code blocks --- README.md | 52 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 33 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 4d9859b..573f5ad 100644 --- a/README.md +++ b/README.md @@ -9,57 +9,71 @@ Built for all the short dialogs, alerts, panels and such associated with an app, Together with JQuery, include jquery.leanModal.min.js in your page, thusly: - +```html + +``` ### Step 2 Rather than call another stylesheet, simply include the following overlay style block in your existing stylesheet. Additionally, be sure to hide your modal element with 'display: none;' (although that probably goes without saying). - #lean_overlay { - position: fixed; - z-index:100; - top: 0px; - left: 0px; - height:100%; - width:100%; - background: #000; - display: none; - } +```css +#lean_overlay { + position: fixed; + z-index:100; + top: 0px; + left: 0px; + height:100%; + width:100%; + background: #000; + display: none; +} +``` ### Step 3 Call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element. - $("#trigger_id").leanModal(); +```javascript +$("#trigger_id").leanModal(); +``` ...or, if you want more than one modal window on the same page, simply add the 'rel' attribute to your triggers, and call the function by attribute, like so: - $("a[rel*=leanModal]").leanModal(); +```javascript +$("a[rel*=leanModal]").leanModal(); +``` ## Options In the spirit of keeping things simple, there are only three options involved: vertical position of the modal element in relation to the document body (default is 100px from the top), the overlay opacity (default is 0.5), and a close button option (default null). You can override these defaults by passing your desired values to the function, like so: - $("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" }); +```javascript +$("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" }); +``` ## Events Additionally, there are two namespaced events available to bind event handlers to. An "open" and "close" event. - $('#modal_id').on('open.leanModal', function(e) { alert('The modal is now open.') }); +```javascript +$('#modal_id').on('open.leanModal', function(e) { alert('The modal is now open.') }); +``` and... - $('#modal_id').on('close.leanModal', function(e) { alert('The modal is now closed.') }); - +```javascript +$('#modal_id').on('close.leanModal', function(e) { alert('The modal is now closed.') }); +``` + Simple, and sweet. ## Licensing Available under the MIT and GPL licenses. See LICENSE file for more information. ## Change Log -Feb 2012: v1.1 - added a closeButton option. Fixed multiple spawn of #lean_overlay. -Oct 2013: v1.2 - added open/close events +*Feb 2012: v1.1 - added a closeButton option. Fixed multiple spawn of #lean_overlay. +*Oct 2013: v1.2 - added open/close events ## Author @finelysliced From 0cabf12b0720c501808da62ad355d975c185d658 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 04:05:07 -0500 Subject: [PATCH 07/12] fixed some formatting and added some Github Flavored Markdown specific syntax --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 573f5ad..9db18ea 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ $("a[rel*=leanModal]").leanModal(); ## Options -In the spirit of keeping things simple, there are only three options involved: vertical position of the modal element in relation to the document body (default is 100px from the top), the overlay opacity (default is 0.5), and a close button option (default null). You can override these defaults by passing your desired values to the function, like so: +In the spirit of keeping things simple, there are only ~~two~~ three options involved: vertical position of the modal element in relation to the document body (default is 100px from the top), the overlay opacity (default is 0.5), and a close button option (default null). You can override these defaults by passing your desired values to the function, like so: ```javascript $("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" }); @@ -72,8 +72,8 @@ Simple, and sweet. Available under the MIT and GPL licenses. See LICENSE file for more information. ## Change Log -*Feb 2012: v1.1 - added a closeButton option. Fixed multiple spawn of #lean_overlay. -*Oct 2013: v1.2 - added open/close events +- Feb 2012: v1.1 - added a closeButton option. Fixed multiple spawn of #lean_overlay. +- Oct 2013: v1.2 - added open/close events ## Author @finelysliced From 50c9a9e2870f4b45d78b1d1e5c577bf2843b85b9 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 04:16:15 -0500 Subject: [PATCH 08/12] added LICENSE file containing MIT and GPL licenses --- LICENSE | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9e33560 --- /dev/null +++ b/LICENSE @@ -0,0 +1,41 @@ +leanModal.js is dual licensed under the MIT and GPL. + +Copyright 2013 Finely Sliced and other contributors +http://leanmodal.finelysliced.com.au/ + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +*********************************************************************** + +Copyright (C) 2013 Finely Sliced and other contributors +http://leanmodal.finelysliced.com.au/ + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see From 16e4ad9ceeac8cc3dc0c2eeae7a204dd71803e69 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 04:21:42 -0500 Subject: [PATCH 09/12] bug fix to prevent multiple overlays from being created --- jquery.leanModal.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/jquery.leanModal.js b/jquery.leanModal.js index 82edc20..14d44f8 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -1,5 +1,5 @@ (function($) { - $.fn.extend({ + $.fn.extend({ leanModal: function(options) { var defaults = { top: 100, @@ -9,7 +9,9 @@ var overlay = $('
'); - $('body').append(overlay); + if (!$("#lean_overlay").length) { + $("body").append(overlay); + } options = $.extend(defaults, options); @@ -19,12 +21,12 @@ $(this).click(function(e) { var modal_id = $(this).attr('href'); - $('#lean_overlay').click(function() { + $('#lean_overlay').click(function() { close_modal(modal_id); }); - $(o.closeButton).click(function(e) { - close_modal(modal_id); + $(o.closeButton).click(function(e) { + close_modal(modal_id); e.preventDefault(); }); @@ -32,7 +34,7 @@ var modal_width = $(modal_id).outerWidth(); $('#lean_overlay').css({ - 'display': 'block', + 'display': 'block', 'opacity': 0 }); @@ -58,11 +60,11 @@ function close_modal(modal_id) { $('#lean_overlay').fadeOut(200); - + $(modal_id).css({ 'display': 'none' }); - + $(modal_id).trigger('close.leanModal'); } } From 7fa027f7ef1026b6eede9d3488560abfae04ca97 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 04:25:04 -0500 Subject: [PATCH 10/12] fixed spacing from github --- jquery.leanModal.js | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/jquery.leanModal.js b/jquery.leanModal.js index 14d44f8..d28b88d 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -21,7 +21,7 @@ $(this).click(function(e) { var modal_id = $(this).attr('href'); - $('#lean_overlay').click(function() { + $('#lean_overlay').click(function() { close_modal(modal_id); }); @@ -31,42 +31,42 @@ }); var modal_height = $(modal_id).outerHeight(); - var modal_width = $(modal_id).outerWidth(); + var modal_width = $(modal_id).outerWidth(); - $('#lean_overlay').css({ - 'display': 'block', - 'opacity': 0 + $('#lean_overlay').css({ + 'display': 'block', + 'opacity': 0 }); - $('#lean_overlay').fadeTo(200, o.overlay); + $('#lean_overlay').fadeTo(200, o.overlay); - $(modal_id).css({ - 'display': 'block', - 'position': 'fixed', - 'opacity': 0, - 'z-index': 11000, - 'left': 50 + '%', - 'margin-left': -(modal_width/2) + 'px', + $(modal_id).css({ + 'display': 'block', + 'position': 'fixed', + 'opacity': 0, + 'z-index': 11000, + 'left': 50 + '%', + 'margin-left': -(modal_width/2) + 'px', 'top': o.top + 'px' - }); + }); - $(modal_id).fadeTo(200,1); + $(modal_id).fadeTo(200,1); - $(modal_id).trigger('open.leanModal'); + $(modal_id).trigger('open.leanModal'); e.preventDefault(); }); }); function close_modal(modal_id) { - $('#lean_overlay').fadeOut(200); + $('#lean_overlay').fadeOut(200); - $(modal_id).css({ - 'display': 'none' + $(modal_id).css({ + 'display': 'none' }); - $(modal_id).trigger('close.leanModal'); - } + $(modal_id).trigger('close.leanModal'); + } } }); })(jQuery); From 4f1d625f63f2fca5260bf8c8f7ba36444785bf63 Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 04:26:06 -0500 Subject: [PATCH 11/12] made compatiable with jQuery 1.8+ --- jquery.leanModal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.leanModal.js b/jquery.leanModal.js index d28b88d..5eeaaa9 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -30,8 +30,8 @@ e.preventDefault(); }); - var modal_height = $(modal_id).outerHeight(); - var modal_width = $(modal_id).outerWidth(); + var modal_height = $(modal_id).outerHeight(false); + var modal_width = $(modal_id).outerWidth(false); $('#lean_overlay').css({ 'display': 'block', From ae9a92e57d52cf028e2a6ad1f831df49be40821e Mon Sep 17 00:00:00 2001 From: mitzip Date: Thu, 31 Oct 2013 04:29:11 -0500 Subject: [PATCH 12/12] added preventDefault to overlay click --- jquery.leanModal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jquery.leanModal.js b/jquery.leanModal.js index 5eeaaa9..e82ccc6 100644 --- a/jquery.leanModal.js +++ b/jquery.leanModal.js @@ -21,8 +21,9 @@ $(this).click(function(e) { var modal_id = $(this).attr('href'); - $('#lean_overlay').click(function() { + $('#lean_overlay').click(function(e) { close_modal(modal_id); + e.preventDefault(); }); $(o.closeButton).click(function(e) {