From 63909e9080964acbd222724dc7a06a86f392c933 Mon Sep 17 00:00:00 2001 From: dev1 Date: Sun, 22 Dec 2013 12:54:26 -0600 Subject: [PATCH 1/7] Added ability to create custom animations for the overlay-background. --- index.html | 7 +++++++ jquery.popupoverlay.js | 6 +++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 0213979..9ea4eed 100644 --- a/index.html +++ b/index.html @@ -143,6 +143,13 @@

Options

Enables background cover.
Disabled for tooltips. + + backgroundclass + string (CSS selector) + + Adds a class to the background of the overlay to enable custom animations for it.
+ Disabled for tooltips. + color string (CSS color) diff --git a/jquery.popupoverlay.js b/jquery.popupoverlay.js index cdc51bf..042e6e9 100644 --- a/jquery.popupoverlay.js +++ b/jquery.popupoverlay.js @@ -125,6 +125,10 @@ left: 0 }); + if (options.backgroundclass) { + $background.addClass(options.backgroundclass); + } + if (options.setzindex && !options.autozindex) { $background.css('z-index', '2000'); } @@ -222,7 +226,7 @@ methods._init(el); } $el.attr('data-popup-initialized', 'true'); - + var $body = $('body'); var options = $el.data('popupoptions'); var $wrapper = $('#' + el.id + '_wrapper'); From ad1ba2faf5a381ec58893160fc86634379738cb3 Mon Sep 17 00:00:00 2001 From: dev1 Date: Sun, 22 Dec 2013 15:38:46 -0600 Subject: [PATCH 2/7] Added event system folowing standard jQuery .on and .trigger methods. --- jquery.popupoverlay.js | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/jquery.popupoverlay.js b/jquery.popupoverlay.js index 042e6e9..e09afe7 100644 --- a/jquery.popupoverlay.js +++ b/jquery.popupoverlay.js @@ -208,6 +208,18 @@ } else { $wrapper.hide(); } + + // Bind callbacks + if (typeof options.beforeopen == 'function') + $el.on("jquery-popup-overlay.beforeopen", options.beforeopen) + if (typeof options.onopen == 'function') + $el.on("jquery-popup-overlay.onopen", options.onopen) + if (typeof options.onclose == 'function') + $el.on("jquery-popup-overlay.onclose", options.onclose) + if (typeof options.opentransitionend == 'function') + $el.on("jquery-popup-overlay.opentransitionend", options.opentransitionend) + if (typeof options.closetransitionend == 'function') + $el.on("jquery-popup-overlay.closetransitionend", options.closetransitionend) }, /** @@ -233,7 +245,7 @@ var $background = $('#' + el.id + '_background'); // `beforeopen` callback event - callback(el, ordinal, options.beforeopen); + callback(el, ordinal, "beforeopen"); // Remember last clicked place lastclicked[el.id] = ordinal; @@ -408,10 +420,10 @@ $el.attr('aria-hidden', false); $wrapper.one('transitionend', function() { - callback(el, ordinal, options.opentransitionend); + callback(el, ordinal, "opentransitionend"); }); - callback(el, ordinal, options.onopen); + callback(el, ordinal, "onopen"); }, /** @@ -502,7 +514,7 @@ } if (!options.notransitiondetach) { - callback(el, lastclicked[el.id], options.closetransitionend); + callback(el, lastclicked[el.id], "closetransitionend"); } }); @@ -521,7 +533,7 @@ $el.attr('aria-hidden', true); // `onclose` callback event - callback(el, lastclicked[el.id], options.onclose); + callback(el, lastclicked[el.id], "onclose"); }, /** @@ -615,14 +627,12 @@ * * @param {object} el - popup instance DOM node * @param {number} ordinal - order number of an `open` element - * @param {function} func - callback function + * @param {string} event - event name */ - var callback = function (el, ordinal, func) { + var callback = function (el, ordinal, event) { var openelement = (options.openelement) ? options.openelement : ('.' + el.id + opensuffix); var elementclicked = $(openelement + '[data-popup-ordinal="' + ordinal + '"]'); - if (typeof func == 'function') { - func(elementclicked); - } + $(el).trigger("jquery-popup-overlay." + event, [elementclicked]); }; /** From cb534cb505ea73e58ab2bd4ef407d774752bcc00 Mon Sep 17 00:00:00 2001 From: Sean Templeton Date: Tue, 31 Dec 2013 18:18:42 -0600 Subject: [PATCH 3/7] Added ability to set transitions to off to allow callbacks on browsers that either do not set transitions or do not support it. Should be tied together with Modernizer.csstransitions. --- jquery.popupoverlay.js | 1155 ++++++++++++++++++++-------------------- 1 file changed, 585 insertions(+), 570 deletions(-) diff --git a/jquery.popupoverlay.js b/jquery.popupoverlay.js index e09afe7..d039188 100644 --- a/jquery.popupoverlay.js +++ b/jquery.popupoverlay.js @@ -1,511 +1,535 @@ /*! - * jQuery Popup Overlay - * - * @version 1.6.0 - * @requires jQuery v1.7.1+ - * @link http://vast-eng.github.com/jquery-popup-overlay/ - */ -(function ($) { - - var $window = $(window); - var options = {}; - var zindexvalues = []; - var lastclicked = []; - var onevisible = false; - var oneormorevisible = false; - var scrollbarwidth; - var focushandler = null; - var blurhandler = null; - var escapehandler = null; - var bodymarginright = null; - var opensuffix = '_open'; - var closesuffix = '_close'; - var focusedelementbeforepopup = null; - - var methods = { - - _init: function (el) { - var $el = $(el); - var options = $el.data('popupoptions'); - lastclicked[el.id] = false; - zindexvalues[el.id] = 0; - - if (!$el.data('popup-initialized')) { - $el.attr('data-popup-initialized', 'true'); - methods._initonce(el); - } - - if (options.autoopen) { - setTimeout(function() { - methods.show(el, 0); - }, 0); - } - }, - - _initonce: function (el) { - var $body = $('body'); - var $wrapper; - var options = $el.data('popupoptions'); - bodymarginright = parseInt($body.css('margin-right'), 10); - - if (options.type == 'tooltip') { - options.background = false; - options.scrolllock = false; - } - - if (options.scrolllock) { - // Calculate the browser's scrollbar width dynamically - var parent; - var child; - if (typeof scrollbarwidth === 'undefined') { - parent = $('
').appendTo('body'); - child = parent.children(); - scrollbarwidth = child.innerWidth() - child.height(99).innerWidth(); - parent.remove(); + * jQuery Popup Overlay + * + * @version 1.6.0 + * @requires jQuery v1.7.1+ + * @link http://vast-eng.github.com/jquery-popup-overlay/ + */ + (function ($) { + + var $window = $(window), + options = {}, + zindexvalues = [], + lastclicked = [], + onevisible = false, + oneormorevisible = false, + scrollbarwidth, + focushandler = null, + blurhandler = null, + escapehandler = null, + bodymarginright = null, + opensuffix = '_open', + closesuffix = '_close', + focusedelementbeforepopup = null, + visibleScrollLocks = 0; + + var methods = { + + _init: function (el) { + var $el = $(el); + var options = $el.data('popupoptions'); + lastclicked[el.id] = false; + zindexvalues[el.id] = 0; + + if (!$el.data('popup-initialized')) { + $el.attr('data-popup-initialized', 'true'); + methods._initonce(el); } - } - - if (!$el.attr('id')) { - $el.attr('id', 'j-popup-' + parseInt(Math.random() * 100000000)); - } - - $el.addClass('popup_content'); - - $body.prepend(el); - $el.wrap('