338 lines
12 KiB
JavaScript
338 lines
12 KiB
JavaScript
/*
|
|
* Flip! jQuery Plugin (http://lab.smashup.it/flip/)
|
|
* @author Luca Manno (luca@smashup.it) [http://i.smashup.it]
|
|
* [Original idea by Nicola Rizzo (thanks!)]
|
|
*
|
|
* @version 0.9.9 [Nov. 2009]
|
|
*
|
|
* @changelog
|
|
* v 0.9.9 -> Fix transparency over non-colored background. Added dontChangeColor option.
|
|
* Added $clone and $this parameters to on.. callback functions.
|
|
* Force hexadecimal color values. Made safe for noConflict use.
|
|
* Some refactoring. [Henrik Hjelte, Jul. 10, 2009]
|
|
* Added revert options, fixes and improvements on color management.
|
|
* Released in Nov 2009
|
|
* v 0.5 -> Added patch to make it work with Opera (thanks to Peter Siewert), Added callbacks [Feb. 1, 2008]
|
|
* v 0.4.1 -> Fixed a regression in Chrome and Safari caused by getTransparent [Oct. 1, 2008]
|
|
* v 0.4 -> Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds | Update: jquery.color.js plugin or jqueryUI still needed :( [Sept. 29, 2008]
|
|
* v 0.3 -> Now is possibile to define the content after the animation.
|
|
* (jQuery object or text/html is allowed) [Sept. 25, 2008]
|
|
* v 0.2 -> Fixed chainability and buggy innertext rendering (xNephilimx thanks!)
|
|
* v 0.1 -> Starting release [Sept. 11, 2008]
|
|
*
|
|
*/
|
|
(function($) {
|
|
|
|
function int_prop(fx){
|
|
fx.elem.style[ fx.prop ] = parseInt(fx.now,10) + fx.unit;
|
|
}
|
|
|
|
var throwError=function(message) {
|
|
throw({name:"jquery.flip.js plugin error",message:message});
|
|
};
|
|
|
|
var isIE6orOlder=function() {
|
|
// User agent sniffing is clearly out of fashion and $.browser will be be deprectad.
|
|
// Now, I can't think of a way to feature detect that IE6 doesn't show transparent
|
|
// borders in the correct way.
|
|
// Until then, this function will do, and be partly political correct, allowing
|
|
// 0.01 percent of the internet users to tweak with their UserAgent string.
|
|
//
|
|
// Not leadingWhiteSpace is to separate IE family from, well who knows?
|
|
// Maybe some version of Opera?
|
|
// The second guess behind this is that IE7+ will keep supporting maxHeight in the future.
|
|
|
|
// First guess changed to dean edwards ie sniffing http://dean.edwards.name/weblog/2007/03/sniff/
|
|
return (/*@cc_on!@*/false && (typeof document.body.style.maxHeight === "undefined"));
|
|
};
|
|
|
|
|
|
// Some named colors to work with
|
|
// From Interface by Stefan Petre
|
|
// http://interface.eyecon.ro/
|
|
|
|
var colors = {
|
|
aqua:[0,255,255],
|
|
azure:[240,255,255],
|
|
beige:[245,245,220],
|
|
black:[0,0,0],
|
|
blue:[0,0,255],
|
|
brown:[165,42,42],
|
|
cyan:[0,255,255],
|
|
darkblue:[0,0,139],
|
|
darkcyan:[0,139,139],
|
|
darkgrey:[169,169,169],
|
|
darkgreen:[0,100,0],
|
|
darkkhaki:[189,183,107],
|
|
darkmagenta:[139,0,139],
|
|
darkolivegreen:[85,107,47],
|
|
darkorange:[255,140,0],
|
|
darkorchid:[153,50,204],
|
|
darkred:[139,0,0],
|
|
darksalmon:[233,150,122],
|
|
darkviolet:[148,0,211],
|
|
fuchsia:[255,0,255],
|
|
gold:[255,215,0],
|
|
green:[0,128,0],
|
|
indigo:[75,0,130],
|
|
khaki:[240,230,140],
|
|
lightblue:[173,216,230],
|
|
lightcyan:[224,255,255],
|
|
lightgreen:[144,238,144],
|
|
lightgrey:[211,211,211],
|
|
lightpink:[255,182,193],
|
|
lightyellow:[255,255,224],
|
|
lime:[0,255,0],
|
|
magenta:[255,0,255],
|
|
maroon:[128,0,0],
|
|
navy:[0,0,128],
|
|
olive:[128,128,0],
|
|
orange:[255,165,0],
|
|
pink:[255,192,203],
|
|
purple:[128,0,128],
|
|
violet:[128,0,128],
|
|
red:[255,0,0],
|
|
silver:[192,192,192],
|
|
white:[255,255,255],
|
|
yellow:[255,255,0],
|
|
transparent: [255,255,255]
|
|
};
|
|
|
|
var acceptHexColor=function(color) {
|
|
if(color && color.indexOf("#")==-1 && color.indexOf("(")==-1){
|
|
return "rgb("+colors[color].toString()+")";
|
|
} else {
|
|
return color;
|
|
}
|
|
};
|
|
|
|
$.extend( $.fx.step, {
|
|
borderTopWidth : int_prop,
|
|
borderBottomWidth : int_prop,
|
|
borderLeftWidth: int_prop,
|
|
borderRightWidth: int_prop
|
|
});
|
|
|
|
$.fn.revertFlip = function(){
|
|
return this.each( function(){
|
|
var $this = $(this);
|
|
$this.flip($this.data('flipRevertedSettings'));
|
|
});
|
|
};
|
|
|
|
$.fn.flip = function(settings){
|
|
return this.each( function() {
|
|
var $this=$(this), flipObj, $clone, dirOption, dirOptions, newContent, ie6=isIE6orOlder();
|
|
|
|
if($this.data('flipLock')){
|
|
return false;
|
|
}
|
|
|
|
var revertedSettings = {
|
|
direction: (function(direction){
|
|
switch(direction)
|
|
{
|
|
case "tb":
|
|
return "bt";
|
|
case "bt":
|
|
return "tb";
|
|
case "lr":
|
|
return "rl";
|
|
case "rl":
|
|
return "lr";
|
|
default:
|
|
return "bt";
|
|
}
|
|
})(settings.direction),
|
|
bgColor: acceptHexColor(settings.color) || "#999",
|
|
color: acceptHexColor(settings.bgColor) || $this.css("background-color"),
|
|
content: $this.html(),
|
|
speed: settings.speed || 500,
|
|
onBefore: settings.onBefore || function(){},
|
|
onEnd: settings.onEnd || function(){},
|
|
onAnimation: settings.onAnimation || function(){}
|
|
};
|
|
|
|
$this
|
|
.data('flipRevertedSettings',revertedSettings)
|
|
.data('flipLock',1)
|
|
.data('flipSettings',revertedSettings);
|
|
|
|
flipObj = {
|
|
width: $this.width(),
|
|
height: $this.height(),
|
|
bgColor: acceptHexColor(settings.bgColor) || $this.css("background-color"),
|
|
fontSize: $this.css("font-size") || "12px",
|
|
direction: settings.direction || "tb",
|
|
toColor: acceptHexColor(settings.color) || "#999",
|
|
speed: settings.speed || 500,
|
|
top: $this.offset().top,
|
|
left: $this.offset().left,
|
|
target: settings.content || null,
|
|
transparent: "transparent",
|
|
dontChangeColor: settings.dontChangeColor || false,
|
|
onBefore: settings.onBefore || function(){},
|
|
onEnd: settings.onEnd || function(){},
|
|
onAnimation: settings.onAnimation || function(){}
|
|
};
|
|
|
|
// This is the first part of a trick to support
|
|
// transparent borders using chroma filter for IE6
|
|
// The color below is arbitrary, lets just hope it is not used in the animation
|
|
ie6 && (flipObj.transparent="#123456");
|
|
|
|
$clone= $this.css("visibility","hidden")
|
|
.clone(true)
|
|
.data('flipLock',1)
|
|
.appendTo("body")
|
|
.html("")
|
|
.css({visibility:"visible",position:"absolute",left:flipObj.left,top:flipObj.top,margin:0,zIndex:9999,"-webkit-box-shadow":"0px 0px 0px #000","-moz-box-shadow":"0px 0px 0px #000"});
|
|
|
|
var defaultStart=function() {
|
|
return {
|
|
backgroundColor: flipObj.transparent,
|
|
fontSize:0,
|
|
lineHeight:0,
|
|
borderTopWidth:0,
|
|
borderLeftWidth:0,
|
|
borderRightWidth:0,
|
|
borderBottomWidth:0,
|
|
borderTopColor:flipObj.transparent,
|
|
borderBottomColor:flipObj.transparent,
|
|
borderLeftColor:flipObj.transparent,
|
|
borderRightColor:flipObj.transparent,
|
|
background: "none",
|
|
borderStyle:'solid',
|
|
height:0,
|
|
width:0
|
|
};
|
|
};
|
|
var defaultHorizontal=function() {
|
|
var waist=(flipObj.height/100)*25;
|
|
var start=defaultStart();
|
|
start.width=flipObj.width;
|
|
return {
|
|
"start": start,
|
|
"first": {
|
|
borderTopWidth: 0,
|
|
borderLeftWidth: waist,
|
|
borderRightWidth: waist,
|
|
borderBottomWidth: 0,
|
|
borderTopColor: '#999',
|
|
borderBottomColor: '#999',
|
|
top: (flipObj.top+(flipObj.height/2)),
|
|
left: (flipObj.left-waist)},
|
|
"second": {
|
|
borderBottomWidth: 0,
|
|
borderTopWidth: 0,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 0,
|
|
borderTopColor: flipObj.transparent,
|
|
borderBottomColor: flipObj.transparent,
|
|
top: flipObj.top,
|
|
left: flipObj.left}
|
|
};
|
|
};
|
|
var defaultVertical=function() {
|
|
var waist=(flipObj.height/100)*25;
|
|
var start=defaultStart();
|
|
start.height=flipObj.height;
|
|
return {
|
|
"start": start,
|
|
"first": {
|
|
borderTopWidth: waist,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 0,
|
|
borderBottomWidth: waist,
|
|
borderLeftColor: '#999',
|
|
borderRightColor: '#999',
|
|
top: flipObj.top-waist,
|
|
left: flipObj.left+(flipObj.width/2)},
|
|
"second": {
|
|
borderTopWidth: 0,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 0,
|
|
borderBottomWidth: 0,
|
|
borderLeftColor: flipObj.transparent,
|
|
borderRightColor: flipObj.transparent,
|
|
top: flipObj.top,
|
|
left: flipObj.left}
|
|
};
|
|
};
|
|
|
|
dirOptions = {
|
|
"tb": function () {
|
|
var d=defaultHorizontal();
|
|
d.start.borderTopWidth=flipObj.height;
|
|
d.start.borderTopColor=flipObj.bgColor;
|
|
d.second.borderBottomWidth= flipObj.height;
|
|
d.second.borderBottomColor= flipObj.toColor;
|
|
return d;
|
|
},
|
|
"bt": function () {
|
|
var d=defaultHorizontal();
|
|
d.start.borderBottomWidth=flipObj.height;
|
|
d.start.borderBottomColor= flipObj.bgColor;
|
|
d.second.borderTopWidth= flipObj.height;
|
|
d.second.borderTopColor= flipObj.toColor;
|
|
return d;
|
|
},
|
|
"lr": function () {
|
|
var d=defaultVertical();
|
|
d.start.borderLeftWidth=flipObj.width;
|
|
d.start.borderLeftColor=flipObj.bgColor;
|
|
d.second.borderRightWidth= flipObj.width;
|
|
d.second.borderRightColor= flipObj.toColor;
|
|
return d;
|
|
},
|
|
"rl": function () {
|
|
var d=defaultVertical();
|
|
d.start.borderRightWidth=flipObj.width;
|
|
d.start.borderRightColor=flipObj.bgColor;
|
|
d.second.borderLeftWidth= flipObj.width;
|
|
d.second.borderLeftColor= flipObj.toColor;
|
|
return d;
|
|
}
|
|
};
|
|
|
|
dirOption=dirOptions[flipObj.direction]();
|
|
|
|
// Second part of IE6 transparency trick.
|
|
ie6 && (dirOption.start.filter="chroma(color="+flipObj.transparent+")");
|
|
|
|
newContent = function(){
|
|
var target = flipObj.target;
|
|
return target && target.jquery ? target.html() : target;
|
|
};
|
|
|
|
$clone.queue(function(){
|
|
flipObj.onBefore($clone,$this);
|
|
$clone.html('').css(dirOption.start);
|
|
$clone.dequeue();
|
|
});
|
|
|
|
$clone.animate(dirOption.first,flipObj.speed);
|
|
|
|
$clone.queue(function(){
|
|
flipObj.onAnimation($clone,$this);
|
|
$clone.dequeue();
|
|
});
|
|
$clone.animate(dirOption.second,flipObj.speed);
|
|
|
|
$clone.queue(function(){
|
|
if (!flipObj.dontChangeColor) {
|
|
$this.css({backgroundColor: flipObj.toColor});
|
|
}
|
|
$this.css({visibility: "visible"});
|
|
|
|
var nC = newContent();
|
|
if(nC){$this.html(nC);}
|
|
$clone.remove();
|
|
flipObj.onEnd($clone,$this);
|
|
$this.removeData('flipLock');
|
|
$clone.dequeue();
|
|
});
|
|
});
|
|
};
|
|
})(jQuery);
|