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

Commit

Permalink
Updated set() and ajax plugin to minimize redraw() calls. Also fixed …
Browse files Browse the repository at this point in the history
…redraw bug wher it wasn't fired if you updated content
  • Loading branch information
Craga89 committed Apr 8, 2011
1 parent e8715bb commit 9c26959
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 48 deletions.
38 changes: 24 additions & 14 deletions 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 8 19:32:29 2011 +0100
* Date: Fri Apr 8 19:33:04 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 @@ -335,28 +335,30 @@ function QTip(target, options, id, attr)
function detectImages(next) {
var images;

function imageLoad(event, i) {
function imageLoad(event) {
// If queue is empty after image removal, update tooltip and continue the queue
if((images = images.not(this)).length === 0) {
self.redraw();
self.reposition(cache.event);

next();
}
}

// Find all content images without dimensions, and if no images were found, continue
if((images = elem.find('img:not([height]):not([width])')).length === 0) { return imageLoad.call(images); }

// Apply the callback to img events to ensure queue continues no matter what!
images.one(['abort','error','load','unload',''].join('.qtip-image '), imageLoad)

// Apply a recursive method that polls the image for dimensions every 20ms
.each(function(i, elem) {
// Apply timer to each iamge to poll for dimensions
images.each(function(i, elem) {
(function timer(){
var timers = self.timers.img;

// When the dimensions are found, remove the image from the queue and stop timer
if(elem.height && elem.width) { return imageLoad.call(elem, NULL); }
self.timers.img[i] = setTimeout(timer, 20);
if(elem.height && elem.width) {
clearTimeout(timers[i]);
return imageLoad.call(elem);
}
timer = setTimeout(timers[i], 20);
}());
});
}
Expand Down Expand Up @@ -786,7 +788,9 @@ function QTip(target, options, id, attr)
set: function(option, value)
{
var rmove = /^position\.(my|at|adjust|target|container)|style|content|show\.ready/i,
rdraw = /^content\.(title|attr)|style/i,
reposition = FALSE,
redraw = FALSE,
checks = self.checks,
name;

Expand Down Expand Up @@ -817,9 +821,12 @@ function QTip(target, options, id, attr)
previous = obj[0][ obj[1] ];
obj[0][ obj[1] ] = 'object' === typeof value && value.nodeType ? $(value) : value;

// Set the new params for the callback and test it against reposition
// Set the new params for the callback
option[notation] = [obj[0], obj[1], value, previous];

// Also check if we need to reposition / redraw
reposition = rmove.test(notation) || reposition;
redraw = rdraw.test(notation) || redraw;
});

// Re-sanitize options
Expand All @@ -828,12 +835,15 @@ function QTip(target, options, id, attr)
/*
* Execute any valid callbacks for the set options
* Also set isPositioning/isDrawing so we don't get loads of redundant repositioning
* and redraw calls
* and redraw calls.
*/
isPositioning = isDrawing = 1; $.each(option, callback); isPositioning = isDrawing = 0;

// Update position on ANY style/position/content change if shown and rendered
if(reposition && tooltip.is(':visible') && self.rendered) { self.reposition(); }
// Update position / redraw if needed
if(tooltip.is(':visible') && self.rendered) {
if(reposition) { self.reposition(); }
if(redraw) { self.redraw(); }
}

return self;
},
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 8 19:32:29 2011 +0100
* Date: Fri Apr 8 19:33:04 2011 +0100
*/

/* Fluid class for determining actual width in IE */
Expand Down
40 changes: 25 additions & 15 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 8 19:32:29 2011 +0100
* Date: Fri Apr 8 19:33:04 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 @@ -335,28 +335,30 @@ function QTip(target, options, id, attr)
function detectImages(next) {
var images;

function imageLoad(event, i) {
function imageLoad(event) {
// If queue is empty after image removal, update tooltip and continue the queue
if((images = images.not(this)).length === 0) {
self.redraw();
self.reposition(cache.event);

next();
}
}

// Find all content images without dimensions, and if no images were found, continue
if((images = elem.find('img:not([height]):not([width])')).length === 0) { return imageLoad.call(images); }

// Apply the callback to img events to ensure queue continues no matter what!
images.one(['abort','error','load','unload',''].join('.qtip-image '), imageLoad)

// Apply a recursive method that polls the image for dimensions every 20ms
.each(function(i, elem) {
// Apply timer to each iamge to poll for dimensions
images.each(function(i, elem) {
(function timer(){
var timers = self.timers.img;

// When the dimensions are found, remove the image from the queue and stop timer
if(elem.height && elem.width) { return imageLoad.call(elem, NULL); }
self.timers.img[i] = setTimeout(timer, 20);
if(elem.height && elem.width) {
clearTimeout(timers[i]);
return imageLoad.call(elem);
}
timer = setTimeout(timers[i], 20);
}());
});
}
Expand Down Expand Up @@ -786,7 +788,9 @@ function QTip(target, options, id, attr)
set: function(option, value)
{
var rmove = /^position\.(my|at|adjust|target|container)|style|content|show\.ready/i,
rdraw = /^content\.(title|attr)|style/i,
reposition = FALSE,
redraw = FALSE,
checks = self.checks,
name;

Expand Down Expand Up @@ -817,9 +821,12 @@ function QTip(target, options, id, attr)
previous = obj[0][ obj[1] ];
obj[0][ obj[1] ] = 'object' === typeof value && value.nodeType ? $(value) : value;

// Set the new params for the callback and test it against reposition
// Set the new params for the callback
option[notation] = [obj[0], obj[1], value, previous];

// Also check if we need to reposition / redraw
reposition = rmove.test(notation) || reposition;
redraw = rdraw.test(notation) || redraw;
});

// Re-sanitize options
Expand All @@ -828,12 +835,15 @@ function QTip(target, options, id, attr)
/*
* Execute any valid callbacks for the set options
* Also set isPositioning/isDrawing so we don't get loads of redundant repositioning
* and redraw calls
* and redraw calls.
*/
isPositioning = isDrawing = 1; $.each(option, callback); isPositioning = isDrawing = 0;

// Update position on ANY style/position/content change if shown and rendered
if(reposition && tooltip.is(':visible') && self.rendered) { self.reposition(); }
// Update position / redraw if needed
if(tooltip.is(':visible') && self.rendered) {
if(reposition) { self.reposition(); }
if(redraw) { self.redraw(); }
}

return self;
},
Expand Down Expand Up @@ -1761,7 +1771,7 @@ QTIP.defaults = {
}

// Define success handler
function successHandler(content) {
function successHandler(content) {
if(selector) {
// Create a dummy div to hold the results and grab the selector element
content = $('<div/>')
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.

2 changes: 1 addition & 1 deletion src/ajax.js
Expand Up @@ -62,7 +62,7 @@ function Ajax(api)
}

// Define success handler
function successHandler(content) {
function successHandler(content) {
if(selector) {
// Create a dummy div to hold the results and grab the selector element
content = $('<div/>')
Expand Down
36 changes: 23 additions & 13 deletions src/core.js
Expand Up @@ -293,28 +293,30 @@ function QTip(target, options, id, attr)
function detectImages(next) {
var images;

function imageLoad(event, i) {
function imageLoad(event) {
// If queue is empty after image removal, update tooltip and continue the queue
if((images = images.not(this)).length === 0) {
self.redraw();
self.reposition(cache.event);

next();
}
}

// Find all content images without dimensions, and if no images were found, continue
if((images = elem.find('img:not([height]):not([width])')).length === 0) { return imageLoad.call(images); }

// Apply the callback to img events to ensure queue continues no matter what!
images.one(['abort','error','load','unload',''].join('.qtip-image '), imageLoad)

// Apply a recursive method that polls the image for dimensions every 20ms
.each(function(i, elem) {
// Apply timer to each iamge to poll for dimensions
images.each(function(i, elem) {
(function timer(){
var timers = self.timers.img;

// When the dimensions are found, remove the image from the queue and stop timer
if(elem.height && elem.width) { return imageLoad.call(elem, NULL); }
self.timers.img[i] = setTimeout(timer, 20);
if(elem.height && elem.width) {
clearTimeout(timers[i]);
return imageLoad.call(elem);
}
timer = setTimeout(timers[i], 20);
}());
});
}
Expand Down Expand Up @@ -744,7 +746,9 @@ function QTip(target, options, id, attr)
set: function(option, value)
{
var rmove = /^position\.(my|at|adjust|target|container)|style|content|show\.ready/i,
rdraw = /^content\.(title|attr)|style/i,
reposition = FALSE,
redraw = FALSE,
checks = self.checks,
name;

Expand Down Expand Up @@ -775,9 +779,12 @@ function QTip(target, options, id, attr)
previous = obj[0][ obj[1] ];
obj[0][ obj[1] ] = 'object' === typeof value && value.nodeType ? $(value) : value;

// Set the new params for the callback and test it against reposition
// Set the new params for the callback
option[notation] = [obj[0], obj[1], value, previous];

// Also check if we need to reposition / redraw
reposition = rmove.test(notation) || reposition;
redraw = rdraw.test(notation) || redraw;
});

// Re-sanitize options
Expand All @@ -786,12 +793,15 @@ function QTip(target, options, id, attr)
/*
* Execute any valid callbacks for the set options
* Also set isPositioning/isDrawing so we don't get loads of redundant repositioning
* and redraw calls
* and redraw calls.
*/
isPositioning = isDrawing = 1; $.each(option, callback); isPositioning = isDrawing = 0;

// Update position on ANY style/position/content change if shown and rendered
if(reposition && tooltip.is(':visible') && self.rendered) { self.reposition(); }
// Update position / redraw if needed
if(tooltip.is(':visible') && self.rendered) {
if(reposition) { self.reposition(); }
if(redraw) { self.redraw(); }
}

return self;
},
Expand Down

0 comments on commit 9c26959

Please sign in to comment.