colonymech / docs / www / colonyscout / internal / jeditable / js / jquery.highlightFade.js @ f59acf11
History | View | Annotate | Download (7.33 KB)
1 |
/**
|
---|---|
2 |
* jQuery Plugin highlightFade (jquery.offput.ca/highlightFade)
|
3 |
* (c) 2006 Blair Mitchelmore (offput.ca) blair@offput.ca
|
4 |
*/
|
5 |
/**
|
6 |
* This is version 0.7 of my highlightFade plugin. It follows the yellow fade technique of Web 2.0 fame
|
7 |
* but expands it to allow any starting colour and allows you to specify the end colour as well.
|
8 |
*
|
9 |
* For the moment, I'm done with this plug-in. Unless I come upon a really cool feature it should have
|
10 |
* this plug-in will only receive updates to ensure future compatibility with jQuery.
|
11 |
*
|
12 |
* As of now (Aug. 16, 2006) the plugin has been written with the 1.0.1 release of jQuery (rev 249) which
|
13 |
* is available from http://jquery.com/src/jquery-1.0.1.js
|
14 |
*
|
15 |
* A note regarding rgb() syntax: I noticed that most browsers implement rgb syntax as either an integer
|
16 |
* (0-255) or percentage (0-100%) value for each field, that is, rgb(i/p,i/p,i/p); however, the W3C
|
17 |
* standard clearly defines it as "either three integer values or three percentage values" [http://www.w3.org/TR/CSS21/syndata.html]
|
18 |
* which I choose to follow despite the error redundancy of the typical behaviour browsers employ.
|
19 |
*
|
20 |
* Changelog:
|
21 |
*
|
22 |
* 0.7:
|
23 |
* - Added the awesome custom attribute support written by George Adamson (slightly modified)
|
24 |
* - Removed bgColor plugin dependency seeing as attr is customizable now...
|
25 |
* 0.6:
|
26 |
* - Abstracted getBGColor into its own plugin with optional test and data retrieval functions
|
27 |
* - Converted all $ references to jQuery references as John's code seems to be shifting away
|
28 |
* from that and I don't want to have to update this for a long time.
|
29 |
* 0.5:
|
30 |
* - Added simple argument syntax for only specifying start colour of event
|
31 |
* - Removed old style argument syntax
|
32 |
* - Added 'interval', 'final, and 'end' properties
|
33 |
* - Renamed 'color' property to 'start'
|
34 |
* - Added second argument to $.highlightFade.getBGColor to bypass the e.highlighting check
|
35 |
* 0.4:
|
36 |
* - Added rgb(%,%,%) color syntax
|
37 |
* 0.3:
|
38 |
* - Fixed bug when event was called while parent was also running event corrupting the
|
39 |
* the background colour of the child
|
40 |
* 0.2:
|
41 |
* - Fixed bug where an unspecified onComplete function made the page throw continuous errors
|
42 |
* - Fixed bug where multiple events on the same element would speed each subsequent event
|
43 |
* 0.1:
|
44 |
* - Initial Release
|
45 |
*
|
46 |
* @author Blair Mitchelmore (blair@offput.ca)
|
47 |
* @version 0.5
|
48 |
*/
|
49 |
jQuery.fn.highlightFade = function(settings) { |
50 |
var o = (settings && settings.constructor == String) ? {start: settings} : settings || {}; |
51 |
var d = jQuery.highlightFade.defaults;
|
52 |
var i = o['interval'] || d['interval']; |
53 |
var a = o['attr'] || d['attr']; |
54 |
var ts = {
|
55 |
'linear': function(s,e,t,c) { return parseInt(s+(c/t)*(e-s)); }, |
56 |
'sinusoidal': function(s,e,t,c) { return parseInt(s+Math.sin(((c/t)*90)*(Math.PI/180))*(e-s)); }, |
57 |
'exponential': function(s,e,t,c) { return parseInt(s+(Math.pow(c/t,2))*(e-s)); } |
58 |
}; |
59 |
var t = (o['iterator'] && o['iterator'].constructor == Function) ? o['iterator'] : ts[o['iterator']] || ts[d['iterator']] || ts['linear']; |
60 |
if (d['iterator'] && d['iterator'].constructor == Function) t = d['iterator']; |
61 |
return this.each(function() { |
62 |
if (!this.highlighting) this.highlighting = {}; |
63 |
var e = (this.highlighting[a]) ? this.highlighting[a].end : jQuery.highlightFade.getBaseValue(this,a) || [255,255,255]; |
64 |
var c = jQuery.highlightFade.getRGB(o['start'] || o['colour'] || o['color'] || d['start'] || [255,255,128]); |
65 |
var s = jQuery.speed(o['speed'] || d['speed']); |
66 |
var r = o['final'] || (this.highlighting[a] && this.highlighting[a].orig) ? this.highlighting[a].orig : jQuery.curCSS(this,a); |
67 |
if (o['end'] || d['end']) r = jQuery.highlightFade.asRGBString(e = jQuery.highlightFade.getRGB(o['end'] || d['end'])); |
68 |
if (typeof o['final'] != 'undefined') r = o['final']; |
69 |
if (this.highlighting[a] && this.highlighting[a].timer) window.clearInterval(this.highlighting[a].timer); |
70 |
this.highlighting[a] = { steps: ((s.duration) / i), interval: i, currentStep: 0, start: c, end: e, orig: r, attr: a }; |
71 |
jQuery.highlightFade(this,a,o['complete'],t); |
72 |
}); |
73 |
}; |
74 |
|
75 |
jQuery.highlightFade = function(e,a,o,t) { |
76 |
e.highlighting[a].timer = window.setInterval(function() {
|
77 |
var newR = t(e.highlighting[a].start[0],e.highlighting[a].end[0],e.highlighting[a].steps,e.highlighting[a].currentStep); |
78 |
var newG = t(e.highlighting[a].start[1],e.highlighting[a].end[1],e.highlighting[a].steps,e.highlighting[a].currentStep); |
79 |
var newB = t(e.highlighting[a].start[2],e.highlighting[a].end[2],e.highlighting[a].steps,e.highlighting[a].currentStep); |
80 |
jQuery(e).css(a,jQuery.highlightFade.asRGBString([newR,newG,newB])); |
81 |
if (e.highlighting[a].currentStep++ >= e.highlighting[a].steps) {
|
82 |
jQuery(e).css(a,e.highlighting[a].orig || '');
|
83 |
window.clearInterval(e.highlighting[a].timer); |
84 |
e.highlighting[a] = null;
|
85 |
if (o && o.constructor == Function) o.call(e);
|
86 |
} |
87 |
},e.highlighting[a].interval); |
88 |
}; |
89 |
|
90 |
jQuery.highlightFade.defaults = { |
91 |
start: [255,255,128], |
92 |
interval: 50, |
93 |
speed: 400, |
94 |
attr: 'backgroundColor' |
95 |
}; |
96 |
|
97 |
jQuery.highlightFade.getRGB = function(c,d) { |
98 |
var result;
|
99 |
if (c && c.constructor == Array && c.length == 3) return c; |
100 |
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(c)) |
101 |
return [parseInt(result[1]),parseInt(result[2]),parseInt(result[3])]; |
102 |
else if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(c)) |
103 |
return [parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55]; |
104 |
else if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(c)) |
105 |
return [parseInt("0x" + result[1]),parseInt("0x" + result[2]),parseInt("0x" + result[3])]; |
106 |
else if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(c)) |
107 |
return [parseInt("0x"+ result[1] + result[1]),parseInt("0x" + result[2] + result[2]),parseInt("0x" + result[3] + result[3])]; |
108 |
else
|
109 |
return jQuery.highlightFade.checkColorName(c) || d || null; |
110 |
}; |
111 |
|
112 |
jQuery.highlightFade.asRGBString = function(a) { |
113 |
return "rgb(" + a.join(",") + ")"; |
114 |
}; |
115 |
|
116 |
jQuery.highlightFade.getBaseValue = function(e,a,b) { |
117 |
var s, t;
|
118 |
b = b || false;
|
119 |
t = a = a || jQuery.highlightFade.defaults['attr'];
|
120 |
do {
|
121 |
s = jQuery(e).css(t || 'backgroundColor');
|
122 |
if ((s != '' && s != 'transparent') || (e.tagName.toLowerCase() == "body") || (!b && e.highlighting && e.highlighting[a] && e.highlighting[a].end)) break; |
123 |
t = false;
|
124 |
} while (e = e.parentNode);
|
125 |
if (!b && e.highlighting && e.highlighting[a] && e.highlighting[a].end) s = e.highlighting[a].end;
|
126 |
if (s == undefined || s == '' || s == 'transparent') s = [255,255,255]; |
127 |
return jQuery.highlightFade.getRGB(s);
|
128 |
}; |
129 |
|
130 |
jQuery.highlightFade.checkColorName = function(c) { |
131 |
if (!c) return null; |
132 |
switch(c.replace(/^\s*|\s*$/g,'').toLowerCase()) { |
133 |
case 'aqua': return [0,255,255]; |
134 |
case 'black': return [0,0,0]; |
135 |
case 'blue': return [0,0,255]; |
136 |
case 'fuchsia': return [255,0,255]; |
137 |
case 'gray': return [128,128,128]; |
138 |
case 'green': return [0,128,0]; |
139 |
case 'lime': return [0,255,0]; |
140 |
case 'maroon': return [128,0,0]; |
141 |
case 'navy': return [0,0,128]; |
142 |
case 'olive': return [128,128,0]; |
143 |
case 'purple': return [128,0,128]; |
144 |
case 'red': return [255,0,0]; |
145 |
case 'silver': return [192,192,192]; |
146 |
case 'teal': return [0,128,128]; |
147 |
case 'white': return [255,255,255]; |
148 |
case 'yellow': return [255,255,0]; |
149 |
} |
150 |
}; |