Skip to content
This repository has been archived by the owner on Jun 14, 2020. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
Cleaned up modal plugin and added new "escape" button option to hide …
…modal
  • Loading branch information
Craga89 committed Apr 22, 2011
1 parent 78c2ff7 commit 94614f5
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 77 deletions.
2 changes: 1 addition & 1 deletion dist/jquery.qtip.basic.js
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Fri Apr 22 20:28:01 2011 +0100
* Date: Fri Apr 22 20:44:29 2011 +0100
*/

"use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.qtip.css
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Fri Apr 22 20:28:01 2011 +0100
* Date: Fri Apr 22 20:44:29 2011 +0100
*/

/* Fluid class for determining actual width in IE */
Expand Down
90 changes: 54 additions & 36 deletions dist/jquery.qtip.js
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Fri Apr 22 20:28:01 2011 +0100
* Date: Fri Apr 22 20:44:29 2011 +0100
*/

"use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
Expand Down Expand Up @@ -2618,7 +2618,9 @@ function Modal(api)
elems = api.elements,
tooltip = elems.tooltip,
selector = '#qtip-overlay',
namespace = '.qtipmodal',
globalNamespace = '.qtipmodal',
namespace = globalNamespace + api.id,
attr = 'is-modal-qtip',
overlay;

// Setup option set checks
Expand All @@ -2637,32 +2639,45 @@ function Modal(api)
{
// If modal is disabled... return
if(!options.on) { return self; }

// Remove previous bound events in namespace
tooltip.unbind(namespace).unbind(namespace+api.id)

// Create the overlay if needed
overlay = self.create();

// Add unique attribute so we can grab modal tooltips easily via a selector
tooltip.attr(attr, TRUE)

// Remove previous bound events in globalNamespace
.unbind(globalNamespace).unbind(namespace)

// Apply our show/hide/focus modal events
.bind('tooltipshow'+namespace+' tooltiphide'+namespace, function(event, api, duration) {
var type = event.type.replace('tooltip', '');
.bind('tooltipshow'+globalNamespace+' tooltiphide'+globalNamespace, function(event, api, duration) {
self[ event.type.replace('tooltip', '') ](duration);
})

if($.isFunction(options[type])) {
options[type].call(elems.overlay, duration, api);
}
else {
self[type](duration);
}
// Adjust modal z-index on tooltip focus
.bind('tooltipfocus'+globalNamespace, function(event, api, zIndex) {
overlay.css('z-index', zIndex - 1);
})
.bind('tooltipfocus', function(event, api, zIndex) {
overlay.css('z-index', zIndex - 1); // Adjust modal z-index on tooltip focus

// Focus any other visible modals when this one blurs
.bind('tooltipblur'+globalNamespace, function(event) {
$('[' + attr + ']:visible').not(tooltip).last().qtip('focus', event);
});

// Create the overlay if needed
self.create();
// Apply keyboard "Escape key" close handler
if(options.escape) {
$(window).unbind(namespace).bind('keydown'+namespace, function(event) {
if(event.keyCode === 27 && tooltip.hasClass(focusClass)) {
api.hide(event);
}
});
}

// Hide tooltip on overlay click if enabled and toggle cursor style
elems.overlay.css('cursor', options.blur ? 'pointer' : '');
if(options.blur === TRUE) {
elems.overlay.bind('click'+namespace+api.id, function(){ api.hide.call(api); });
// Apply click handler for blur option
if(options.blur) {
elems.overlay.unbind(namespace).bind('click'+namespace, function(event) {
if(tooltip.hasClass(focusClass)) { api.hide(event); }
});
}

return self;
Expand All @@ -2689,7 +2704,7 @@ function Modal(api)
.appendTo(document.body);

// Update position on window resize or scroll
$(window).bind('resize'+namespace, function() {
$(window).unbind(globalNamespace).bind('resize'+globalNamespace, function() {
overlay.css({
height: Math.max( $(window).height(), $(document).height() ),
width: Math.max( $(window).width(), $(document).width() )
Expand All @@ -2702,15 +2717,24 @@ function Modal(api)

toggle: function(state)
{
var effect = api.options.show.modal.effect,
var effect = options.effect,
type = state ? 'show': 'hide',
modals = $('[' + attr + ']:visible').not(tooltip),
zindex;

// Create our overlay if it isn't present already
if(!overlay) { overlay = self.create(); }

// Prevent modal from conflicting with show.solo
if(overlay.is(':animated') && !state) { return; }
if(overlay.is(':animated') && !state) { return self; }

// Make sure not to hide the backdrop if other modals are visible
if(!state && modals.length) { return self; }

// Toggle backdrop cursor style on show
else if(state) {
elems.overlay.css('cursor', options.blur ? 'pointer' : '');
}

// Setop all animations
overlay.stop(TRUE, FALSE);
Expand Down Expand Up @@ -2744,27 +2768,20 @@ function Modal(api)

if(delBlanket) {
// Check if any other modal tooltips are present
$(selector).each(function() {
var api = $(this).data('qtip');

// If another modal tooltip is present, leave overlay
if(api && api.id !== api.id && api.options.show.modal) {
return (delBlanket = FALSE);
}
});
delBlanket = $('[' + attr + ']').not(tooltip).length < 1;

// Remove overlay if needed
if(delBlanket) {
elems.overlay.remove();
$(window).unbind(namespace);
$(window).unbind(globalNamespace);
}
else {
elems.overlay.unbind(namespace+api.id);
elems.overlay.unbind(globalNamespace+api.id);
}
}

// Remove bound events
return tooltip.unbind(namespace);
return tooltip.removeAttr(attr).unbind(globalNamespace);
}
});

Expand Down Expand Up @@ -2795,7 +2812,8 @@ $.extend(TRUE, QTIP.defaults, {
modal: {
on: FALSE,
effect: TRUE,
blur: TRUE
blur: TRUE,
escape: TRUE
}
}
});/*
Expand Down
4 changes: 2 additions & 2 deletions dist/jquery.qtip.min.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/jquery.qtip.pack.js

Large diffs are not rendered by default.

88 changes: 53 additions & 35 deletions src/modal.js
Expand Up @@ -5,7 +5,9 @@ function Modal(api)
elems = api.elements,
tooltip = elems.tooltip,
selector = '#qtip-overlay',
namespace = '.qtipmodal',
globalNamespace = '.qtipmodal',
namespace = globalNamespace + api.id,
attr = 'is-modal-qtip',
overlay;

// Setup option set checks
Expand All @@ -24,32 +26,45 @@ function Modal(api)
{
// If modal is disabled... return
if(!options.on) { return self; }

// Remove previous bound events in namespace
tooltip.unbind(namespace).unbind(namespace+api.id)

// Create the overlay if needed
overlay = self.create();

// Add unique attribute so we can grab modal tooltips easily via a selector
tooltip.attr(attr, TRUE)

// Remove previous bound events in globalNamespace
.unbind(globalNamespace).unbind(namespace)

// Apply our show/hide/focus modal events
.bind('tooltipshow'+namespace+' tooltiphide'+namespace, function(event, api, duration) {
var type = event.type.replace('tooltip', '');
.bind('tooltipshow'+globalNamespace+' tooltiphide'+globalNamespace, function(event, api, duration) {
self[ event.type.replace('tooltip', '') ](duration);
})

if($.isFunction(options[type])) {
options[type].call(elems.overlay, duration, api);
}
else {
self[type](duration);
}
// Adjust modal z-index on tooltip focus
.bind('tooltipfocus'+globalNamespace, function(event, api, zIndex) {
overlay.css('z-index', zIndex - 1);
})
.bind('tooltipfocus', function(event, api, zIndex) {
overlay.css('z-index', zIndex - 1); // Adjust modal z-index on tooltip focus

// Focus any other visible modals when this one blurs
.bind('tooltipblur'+globalNamespace, function(event) {
$('[' + attr + ']:visible').not(tooltip).last().qtip('focus', event);
});

// Create the overlay if needed
self.create();
// Apply keyboard "Escape key" close handler
if(options.escape) {
$(window).unbind(namespace).bind('keydown'+namespace, function(event) {
if(event.keyCode === 27 && tooltip.hasClass(focusClass)) {
api.hide(event);
}
});
}

// Hide tooltip on overlay click if enabled and toggle cursor style
elems.overlay.css('cursor', options.blur ? 'pointer' : '');
if(options.blur === TRUE) {
elems.overlay.bind('click'+namespace+api.id, function(){ api.hide.call(api); });
// Apply click handler for blur option
if(options.blur) {
elems.overlay.unbind(namespace).bind('click'+namespace, function(event) {
if(tooltip.hasClass(focusClass)) { api.hide(event); }
});
}

return self;
Expand All @@ -76,7 +91,7 @@ function Modal(api)
.appendTo(document.body);

// Update position on window resize or scroll
$(window).bind('resize'+namespace, function() {
$(window).unbind(globalNamespace).bind('resize'+globalNamespace, function() {
overlay.css({
height: Math.max( $(window).height(), $(document).height() ),
width: Math.max( $(window).width(), $(document).width() )
Expand All @@ -89,15 +104,24 @@ function Modal(api)

toggle: function(state)
{
var effect = api.options.show.modal.effect,
var effect = options.effect,
type = state ? 'show': 'hide',
modals = $('[' + attr + ']:visible').not(tooltip),
zindex;

// Create our overlay if it isn't present already
if(!overlay) { overlay = self.create(); }

// Prevent modal from conflicting with show.solo
if(overlay.is(':animated') && !state) { return; }
if(overlay.is(':animated') && !state) { return self; }

// Make sure not to hide the backdrop if other modals are visible
if(!state && modals.length) { return self; }

// Toggle backdrop cursor style on show
else if(state) {
elems.overlay.css('cursor', options.blur ? 'pointer' : '');
}

// Setop all animations
overlay.stop(TRUE, FALSE);
Expand Down Expand Up @@ -131,27 +155,20 @@ function Modal(api)

if(delBlanket) {
// Check if any other modal tooltips are present
$(selector).each(function() {
var api = $(this).data('qtip');

// If another modal tooltip is present, leave overlay
if(api && api.id !== api.id && api.options.show.modal) {
return (delBlanket = FALSE);
}
});
delBlanket = $('[' + attr + ']').not(tooltip).length < 1;

// Remove overlay if needed
if(delBlanket) {
elems.overlay.remove();
$(window).unbind(namespace);
$(window).unbind(globalNamespace);
}
else {
elems.overlay.unbind(namespace+api.id);
elems.overlay.unbind(globalNamespace+api.id);
}
}

// Remove bound events
return tooltip.unbind(namespace);
return tooltip.removeAttr(attr).unbind(globalNamespace);
}
});

Expand Down Expand Up @@ -182,7 +199,8 @@ $.extend(TRUE, QTIP.defaults, {
modal: {
on: FALSE,
effect: TRUE,
blur: TRUE
blur: TRUE,
escape: TRUE
}
}
});

0 comments on commit 94614f5

Please sign in to comment.