1/* 2 3 FLIPPY jQuery plugin (http://guilhemmarty.com/flippy) 4 Released under MIT Licence (http://www.opensource.org/licenses/MIT) 5 6 @author : Guilhem MARTY ([email protected]) 7 8 @version: 1.3 9 10 @changelog: 11 12 May 21 2013 - v1.3 : added revert callbacks, direction option is not case sensitive 13 14 Apr 06 2013 - v1.2 : can now use CSS3 transform property for better visual result in modern web browsers 15 16 Apr 03 2013 - v1.1 : code cleanup (Object Oriented) + add Revert action + add onAnimation callback 17 18 Mar 30 2013 - v1.0.3 : bug fix on IE8/IE9 with explorerCanvas + add multiple simultaneous flippy animations 19 20 Mar 17 2013 - v1.0.2 : bug fix with IE10+. Can use rgba in color and color target 21 22 Feb 11 2012 - v1.0.1 : bug fix with IE9 23 24 Feb 11 2012 - v1.0 : First release 25 26 */ 27(function($){ 28 var _ColorsRef = { 29 'aliceblue':'#f0f8ff', 30 'antiquewhite':'#faebd7', 31 'aqua':'#00ffff', 32 'aquamarine':'#7fffd4', 33 'azure':'#f0ffff', 34 'beige':'#f5f5dc', 35 'bisque':'#ffe4c4', 36 'black':'#000000', 37 'blanchedalmond':'#ffebcd', 38 'blue':'#0000ff', 39 'blueviolet':'#8a2be2', 40 'brown':'#a52a2a', 41 'burlywood':'#deb887', 42 'cadetblue':'#5f9ea0', 43 'chartreuse':'#7fff00', 44 'chocolate':'#d2691e', 45 'coral':'#ff7f50', 46 'cornflowerblue':'#6495ed', 47 'cornsilk':'#fff8dc', 48 'crimson':'#dc143c', 49 'cyan':'#00ffff', 50 'darkblue':'#00008b', 51 'darkcyan':'#008b8b', 52 'darkgoldenrod':'#b8860b', 53 'darkgray':'#a9a9a9', 54 'darkgrey':'#a9a9a9', 55 'darkgreen':'#006400', 56 'darkkhaki':'#bdb76b', 57 'darkmagenta':'#8b008b', 58 'darkolivegreen':'#556b2f', 59 'darkorange':'#ff8c00', 60 'darkorchid':'#9932cc', 61 'darkred':'#8b0000', 62 'darksalmon':'#e9967a', 63 'darkseagreen':'#8fbc8f', 64 'darkslateblue':'#483d8b', 65 'darkslategray':'#2f4f4f', 66 'darkslategrey':'#2f4f4f', 67 'darkturquoise':'#00ced1', 68 'darkviolet':'#9400d3', 69 'deeppink':'#ff1493', 70 'deepskyblue':'#00bfff', 71 'dimgray':'#696969', 72 'dimgrey':'#696969', 73 'dodgerblue':'#1e90ff', 74 'firebrick':'#b22222', 75 'floralwhite':'#fffaf0', 76 'forestgreen':'#228b22', 77 'fuchsia':'#ff00ff', 78 'gainsboro':'#dcdcdc', 79 'ghostwhite':'#f8f8ff', 80 'gold':'#ffd700', 81 'goldenrod':'#daa520', 82 'gray':'#808080', 83 'grey':'#808080', 84 'green':'#008000', 85 'greenyellow':'#adff2f', 86 'honeydew':'#f0fff0', 87 'hotpink':'#ff69b4', 88 'indianred ':'#cd5c5c', 89 'indigo ':'#4b0082', 90 'ivory':'#fffff0', 91 'khaki':'#f0e68c', 92 'lavender':'#e6e6fa', 93 'lavenderblush':'#fff0f5', 94 'lawngreen':'#7cfc00', 95 'lemonchiffon':'#fffacd', 96 'lightblue':'#add8e6', 97 'lightcoral':'#f08080', 98 'lightcyan':'#e0ffff', 99 'lightgoldenrodyellow':'#fafad2', 100 'lightgray':'#d3d3d3', 101 'lightgrey':'#d3d3d3', 102 'lightgreen':'#90ee90', 103 'lightpink':'#ffb6c1', 104 'lightsalmon':'#ffa07a', 105 'lightseagreen':'#20b2aa', 106 'lightskyblue':'#87cefa', 107 'lightslategray':'#778899', 108 'lightslategrey':'#778899', 109 'lightsteelblue':'#b0c4de', 110 'lightyellow':'#ffffe0', 111 'lime':'#00ff00', 112 'limegreen':'#32cd32', 113 'linen':'#faf0e6', 114 'magenta':'#ff00ff', 115 'maroon':'#800000', 116 'mediumaquamarine':'#66cdaa', 117 'mediumblue':'#0000cd', 118 'mediumorchid':'#ba55d3', 119 'mediumpurple':'#9370d8', 120 'mediumseagreen':'#3cb371', 121 'mediumslateblue':'#7b68ee', 122 'mediumspringgreen':'#00fa9a', 123 'mediumturquoise':'#48d1cc', 124 'mediumvioletred':'#c71585', 125 'midnightblue':'#191970', 126 'mintcream':'#f5fffa', 127 'mistyrose':'#ffe4e1', 128 'moccasin':'#ffe4b5', 129 'navajowhite':'#ffdead', 130 'navy':'#000080', 131 'oldlace':'#fdf5e6', 132 'olive':'#808000', 133 'olivedrab':'#6b8e23', 134 'orange':'#ffa500', 135 'orangered':'#ff4500', 136 'orchid':'#da70d6', 137 'palegoldenrod':'#eee8aa', 138 'palegreen':'#98fb98', 139 'paleturquoise':'#afeeee', 140 'palevioletred':'#d87093', 141 'papayawhip':'#ffefd5', 142 'peachpuff':'#ffdab9', 143 'peru':'#cd853f', 144 'pink':'#ffc0cb', 145 'plum':'#dda0dd', 146 'powderblue':'#b0e0e6', 147 'purple':'#800080', 148 'red':'#ff0000', 149 'rosybrown':'#bc8f8f', 150 'royalblue':'#4169e1', 151 'saddlebrown':'#8b4513', 152 'salmon':'#fa8072', 153 'sandybrown':'#f4a460', 154 'seagreen':'#2e8b57', 155 'seashell':'#fff5ee', 156 'sienna':'#a0522d', 157 'silver':'#c0c0c0', 158 'skyblue':'#87ceeb', 159 'slateblue':'#6a5acd', 160 'slategray':'#708090', 161 'slategrey':'#708090', 162 'snow':'#fffafa', 163 'springgreen':'#00ff7f', 164 'steelblue':'#4682b4', 165 'tan':'#d2b48c', 166 'teal':'#008080', 167 'thistle':'#d8bfd8', 168 'tomato':'#ff6347', 169 'turquoise':'#40e0d0', 170 'violet':'#ee82ee', 171 'wheat':'#f5deb3', 172 'white':'#ffffff', 173 'whitesmoke':'#f5f5f5', 174 'yellow':'#ffff00', 175 'yellowgreen':'#9acd32' 176 }; 177 178 function detect_CSS3Support() 179 { 180 $("document").ready(function() 181 { 182 var Fel = document.createElement('p'), 183 support_css3, 184 transforms = { 185 'webkitTransform':'-webkit-transform', 186 'OTransform':'-o-transform', 187 'msTransform':'-ms-transform', 188 'MozTransform':'-moz-transform', 189 'transform':'transform' 190 }; 191 document.body.appendChild(Fel); 192 193 for(var t in transforms){ 194 if( Fel.style[t] !== undefined ){ 195 Fel.style[t] = 'rotateX(1deg)'; 196 support_css3 = window.getComputedStyle(Fel).getPropertyValue(transforms[t]); 197 } 198 } 199 200 document.body.removeChild(Fel); 201
202 _Support_CSS3 = (support_css3 !== undefined && support_css3.length > 0 && support_css3 !== "none"); 203 }); 204 } 205 206 var _isIE = (navigator.appName == "Microsoft Internet Explorer"); 207 var _Support_Canvas = window.HTMLCanvasElement; 208 var _Support_CSS3 = null; 209 detect_CSS3Support(); 210 var PI = Math.PI; 211 212 //! Class flipBox 213 var flipBox = function($jO,opts, undefined) 214 { 215 //! public methods 216 217 /** 218 * Animate the FlipBox 219 * @param reversing : boolean [false] 220 * @return void 221 */ 222 this.animate = function(reversing) 223 { 224 if(reversing){ this._RBefore(); }else{ this._Before(); } 225 226 if(typeof reversing !== undefined && reversing){ 227 var recto = this._Recto; 228 var recto_color = this._Recto_color; 229 230 this._Recto = this._Verso; 231 this._Color = this._Recto_color = this._Verso_color; 232 233 this._Verso = recto; 234 this._Color_target = this._Verso_color = recto_color; 235 236 this._Reversing = true; 237 238 switch(this._Direction){ 239 case "TOP": this._Direction = "BOTTOM"; break; 240 case "BOTTOM": this._Direction = "TOP"; break; 241 case "LEFT": this._Direction = "RIGHT"; break; 242 case "RIGHT": this._Direction = "LEFT"; break; 243 } 244 } 245 246 if(this._noCSS || !_Support_CSS3){ 247 //! run canvas animation 248 this.initiateFlippy(); 249 this.cvO = document.getElementById("flippy"+this._UID); 250 this.jO.data("_oFlippy_",this); 251 this._Int = setInterval($.proxy(this.drawFlippy, this), this._Refresh_rate); 252 }else{ 253 //! run CSS3 animation 254 this.jO 255 .addClass('flippy_active') 256 .parent() 257 .css({ 258 // ! perspective property setting is still buggy, so _Depth is inactive until a better solution is find 259 "perspective": this._nW+"px" // old version : Math.floor(this._Depth * this._nW) +"px" 260 }); 261 this.jO.data("_oFlippy_",this); 262 this._Int = setInterval($.proxy(this.drawFlippyCSS, this), this._Refresh_rate); 263 } 264 265 }; 266 267 /** 268 * Refresh CSS3 fliped element 269 * @return void 270 */ 271 this.drawFlippyCSS = function() 272 { 273 this._Ang = (this._Direction == "RIGHT" || this._Direction == "TOP") ? this._Ang + this._Step_ang : this._Ang - this._Step_ang; 274 var _Axis = (this._Direction == "RIGHT" || this._Direction == "LEFT") ? "Y" : "X" ; 275 276 if( 277 ( (this._Direction == "RIGHT" || this._Direction == "TOP") && this._Ang > 90 && this._Ang <= (90+this._Step_ang)) || 278 ( (this._Direction == "LEFT" || this._Direction == "BOTTOM") && this._Ang < -90 && this._Ang >= (-90-this._Step_ang)) 279 ){ 280
281 if(this._Reversing){ this._RMidway() }else{ this._Midway(); } 282 283 this.jO 284 .css({ 285 "opacity":this._Color_target_alpha, 286 "background":this._Color_target 287 }) 288 .empty() 289 .append(this._Verso); 290 291 this._Ang = (this._Direction == "RIGHT" || this._Direction == "TOP") ? -90 : 90 ; 292 this._Half = true; 293 } 294 295 if(this._Direction == "RIGHT" || this._Direction == "TOP"){ 296 this._Ang = (this._Ang > (this._Step_ang) && this._Half) ? this._Ang-(this._Step_ang) : this._Ang; 297 }else{ 298 this._Ang = (this._Ang < (-this._Step_ang) && this._Half) ? this._Ang+(this._Step_ang) : this._Ang; 299 } 300 301 if( 302 ((this._Direction == "RIGHT" || this._Direction == "TOP") && this._Ang > 0 && this._Half) || 303 ((this._Direction == "LEFT" || this._Direction == "BOTTOM") && this._Ang < 0 && this._Half) 304 ){ 305 this.jO 306 .removeClass("flippy_active") 307 .css({ 308 "-webkit-transform": "rotate"+_Axis+"(0deg)", 309 "-moz-transform": "rotate"+_Axis+"(0deg)", 310 "-o-transform": "rotate"+_Axis+"(0deg)", 311 "-ms-transform": "rotate"+_Axis+"(0deg)", 312 "transform": "rotate"+_Axis+"(0deg)" 313 }) 314 .find(".flippy_light") 315 .remove(); 316 317 clearInterval(this._Int); 318 this._Half = false;
319 if(this._Reversing){ this._RAfter() }else{ this._After() }; 320 321 //! End animation 322 return; 323 }else{ 324 this.jO.css({ 325 "-webkit-transform": "rotate"+_Axis+"("+this._Ang+"deg)", 326 "-moz-transform": "rotate"+_Axis+"("+this._Ang+"deg)", 327 "-o-transform": "rotate"+_Axis+"("+this._Ang+"deg)", 328 "-ms-transform": "rotate"+_Axis+"("+this._Ang+"deg)", 329 "transform": "rotate"+_Axis+"("+this._Ang+"deg)" 330 }); 331 } 332 333 this.applyLight(); 334 335 if(this._Reversing){ this._RDuring(); }else{ this._During(); } 336 337 }; 338 339 /** 340 * Apply light to CSS flipped element 341 * @return void 342 */ 343 this.applyLight = function() 344 { 345 if(this.jO.find(".flippy_light").size() === 0){ 346 this 347 .jO 348 .append('<div class="flippy_light"></div>') 349 .find(".flippy_light") 350 .css({ 351 "position":"absolute", 352 "top":"0", 353 "left":"0", 354 "min-width":this._nW+"px", 355 "min-height":this._nH+"px", 356 "width":this._nW+"px", 357 "height":this._nH+"px", 358 "background-color":((this._Direction == "LEFT" && this._Half) || (this._Direction == "RIGHT" && !this._Half) || (this._Direction == "TOP" && this._Half) || (this._Direction == "BOTTOM" && !this._Half))? "#000" : "#FFF", 359 "opacity":(Math.abs(this._Ang)*this._Light/90)/100 360 }); 361 }else{ 362 this 363 .jO 364 .find(".flippy_light") 365 .css({ 366 "background-color":((this._Direction == "LEFT" && this._Half) || (this._Direction == "RIGHT" && !this._Half) || (this._Direction == "TOP" && this._Half) || (this._Direction == "BOTTOM" && !this._Half))? "#000" : "#FFF", 367 "opacity":(Math.abs(this._Ang)*this._Light/90)/100 368 }); 369 } 370 371 }; 372 373 /** 374 * Create the flippy canvas 375 * @return void 376 */ 377 this.initiateFlippy = function() 378 { 379 var cv_pattern; 380 this.jO 381 .addClass('flippy_active') 382 .empty() 383 .css({ 384 "opacity":this._Color_alpha, 385 "background":"none", 386 "position":"relative", 387 "overflow":"visible" 388 }); 389 390 switch(this._Direction){ 391 case "TOP": 392 this._CenterX = (Math.sin(PI/2)*this._nW*this._Depth); 393 this._CenterY = this._H/2; 394 cv_pattern = '<canvas id="flippy'+this._UID+'" class="flippy" width="'+(this._W+(2*this._CenterX))+'" height="'+this._H+'"></canvas>'; 395 this.new_flippy(cv_pattern); 396 this.jO.find("#flippy"+this._UID) 397 .css({ 398 "position":"absolute", 399 "top":"0", 400 "left":"-"+this._CenterX+"px" 401 }); 402 break; 403 case "BOTTOM": 404 this._CenterX = (Math.sin(PI/2)*this._nW*this._Depth); 405 this._CenterY = this._H/2; 406 cv_pattern = '<canvas id="flippy'+this._UID+'" class="flippy" width="'+(this._W+(2*this._CenterX))+'" height="'+this._H+'"></canvas>'; 407 this.new_flippy(cv_pattern); 408 this.jO.find("#flippy"+this._UID) 409 .css({ 410 "position":"absolute", 411 "top":"0", 412 "left":"-"+this._CenterX+"px" 413 }); 414 break; 415 case "LEFT": 416 this._CenterY = (Math.sin(PI/2)*this._nH*this._Depth); 417 this._CenterX = this._W/2; 418 cv_pattern = '<canvas id="flippy'+this._UID+'" class="flippy" width="'+this._W+'" height="'+(this._H+(2*this._CenterY))+'"></canvas>'; 419 this.new_flippy(cv_pattern); 420 this.jO.find("#flippy"+this._UID) 421 .css({ 422 "position":"absolute", 423 "top":"-"+this._CenterY+"px", 424 "left":"0" 425 }); 426 break; 427 case "RIGHT": 428 this._CenterY = (Math.sin(PI/2)*this._nH*this._Depth); 429 this._CenterX = this._W/2; 430 cv_pattern = '<canvas id="flippy'+this._UID+'" class="flippy" width="'+this._W+'" height="'+(this._H+(2*this._CenterY))+'"></canvas>'; 431 this.new_flippy(cv_pattern); 432 this.jO.find("#flippy"+this._UID) 433 .css({ 434 "position":"absolute", 435 "top":"-"+this._CenterY+"px", 436 "left":"0" 437 }); 438 break; 439 } 440 }; 441 442 /** 443 * redraw Canvas 444 * @return void 445 */ 446 this.drawFlippy = function() 447 { 448 this._Ang += this._Step_ang; 449 if(this._Ang > 90 && this._Ang <= (90+this._Step_ang)){
450 if(this._Reversing){ this._RMidway(); }else{ this._Midway(); } 451 this.jO.css({"opacity":this._Color_target_alpha}); 452 } 453 this._Ang = (this._Ang > (180+this._Step_ang)) ? this._Ang-(180+this._Step_ang) : this._Ang; 454 455 var rad = (this._Ang/180)*PI; 456 457 if(this.cvO === null){ return; } 458 if(_isIE && !_Support_Canvas){ G_vmlCanvasManager.initElement(this.cvO);} 459 var ctx = this.cvO.getContext("2d"); 460 ctx.clearRect(0, 0, this._W+(2*this._CenterX), this._H+(2*this._CenterY)); 461 ctx.beginPath(); 462 var deltaH = Math.sin(rad)*this._H*this._Depth; 463 var deltaW = Math.sin(rad)*this._W*this._Depth; 464 var X, Y; 465 466 switch(this._Direction){ 467 case "LEFT" : 468 X = Math.cos(rad)*(this._W/2); 469 ctx.fillStyle = (this._Ang > 90) ?this.changeColor(this._Color_target,Math.floor(Math.sin(rad)*this._Light)) : this.changeColor(this._Color,-Math.floor(Math.sin(rad)*this._Light)); 470 ctx.moveTo(this._CenterX-X,this._CenterY+deltaH);//TL 471 ctx.lineTo(this._CenterX+X,this._CenterY-deltaH);//TR 472 ctx.lineTo(this._CenterX+X,this._CenterY+this._H+deltaH);//BR 473 ctx.lineTo(this._CenterX-X,this._CenterY+this._H-deltaH);//BL 474 ctx.lineTo(this._CenterX-X,this._CenterY);//loop 475 ctx.fill(); 476 break; 477 case "RIGHT" : 478 X = Math.cos(rad)*(this._W/2); 479 ctx.fillStyle = (this._Ang > 90) ? this.changeColor(this._Color_target,-Math.floor(Math.sin(rad)*this._Light)) : this.changeColor(this._Color,Math.floor(Math.sin(rad)*this._Light)); 480 ctx.moveTo(this._CenterX+X,this._CenterY+deltaH);//TL 481 ctx.lineTo(this._CenterX-X,this._CenterY-deltaH);//TR 482 ctx.lineTo(this._CenterX-X,this._CenterY+this._H+deltaH);//BR 483 ctx.lineTo(this._CenterX+X,this._CenterY+this._H-deltaH);//BL 484 ctx.lineTo(this._CenterX+X,this._CenterY);//loop 485 ctx.fill(); 486 break; 487 case "TOP" : 488 Y = Math.cos(rad)*(this._H/2); 489 ctx.fillStyle = (this._Ang > 90) ? this.changeColor(this._Color_target,-Math.floor(Math.sin(rad)*this._Light)) : this.changeColor(this._Color,Math.floor(Math.sin(rad)*this._Light)); 490 ctx.moveTo(this._CenterX+deltaW,this._CenterY-Y);//TL 491 ctx.lineTo(this._CenterX-deltaW,this._CenterY+Y);//TR 492 ctx.lineTo(this._CenterX+this._W+deltaW,this._CenterY+Y);//BR 493 ctx.lineTo(this._CenterX+this._W-deltaW,this._CenterY-Y);//BL 494 ctx.lineTo(this._CenterX,this._CenterY-Y);//loop 495 ctx.fill(); 496 break; 497 case "BOTTOM" : 498 Y = Math.cos(rad)*(this._H/2); 499 ctx.fillStyle = (this._Ang > 90) ? this.changeColor(this._Color_target,Math.floor(Math.sin(rad)*this._Light)) : this.changeColor(this._Color,-Math.floor(Math.sin(rad)*this._Light)); 500 ctx.moveTo(this._CenterX+deltaW,this._CenterY+Y);//TL 501 ctx.lineTo(this._CenterX-deltaW,this._CenterY-Y);//TR 502 ctx.lineTo(this._CenterX+this._W+deltaW,this._CenterY-Y);//BR 503 ctx.lineTo(this._CenterX+this._W-deltaW,this._CenterY+Y);//BL 504 ctx.lineTo(this._CenterX,this._CenterY+Y);//loop 505 ctx.fill(); 506 break; 507 } 508 509 if(this._Ang > 180){ 510 this.jO 511 .removeClass("flippy_active") 512 .css({ 513 "background":this._Color_target 514 }) 515 .append(this._Verso) 516 .removeClass("flippy_container") 517 .find(".flippy") 518 .remove(); 519 520 clearInterval(this._Int);
521 if(this._Reversing){ this._RAfter(); }else{ this._After(); } 522 523 //! End animation 524 return; 525 } 526 527 if(this._Reversing){ this._RDuring(); }else{ this._During(); } 528 }; 529 530 /** 531 * Create Canvas from HTML source cv_pattern 532 * @param cv_pattern string canvas pattern 533 * @return void 534 */ 535 this.new_flippy = function(cv_pattern) 536 { 537 if(_isIE && !_Support_Canvas){ 538 539 this.jO 540 .addClass("flippy_container") 541 .attr("id","flippy_container"+this._UID); 542 var $that = document.getElementById("flippy_container"+this._UID); 543 var cv = document.createElement(cv_pattern); 544 545 $that.appendChild(cv); 546 }else{ 547 this.jO.append(cv_pattern); 548 } 549 }; 550 551 /** 552 * Convert a rgb or rgba to an Hex color code 553 * @param color string color 554 * @return string Hex color code 555 */ 556 this.convertColor = function(color) 557 { 558 var theColor = _ColorsRef.hasOwnProperty(color) ? _ColorsRef[color] : color; 559 560 if (/^transparent$/i.test(theColor)) 561 return '#ffffff'; 562 563 if(theColor.substr(0,4) == "rgb("){ 564 return [ 565 "#", 566 this.toHex(theColor.substr(4,theColor.length).split(',')[0] >>> 0), 567 this.toHex(theColor.substr(3,theColor.length).split(',')[1] >>> 0), 568 this.toHex(theColor.substr(3,theColor.length-4).split(',')[2] >>> 0)].join(''); 569 } 570 571 if(theColor.substr(0,5) == "rgba("){ 572 return ["#", 573 this.toHex(theColor.substr(5,theColor.length).split(',')[0] >>> 0), 574 this.toHex(theColor.substr(3,theColor.length).split(',')[1] >>> 0), 575 this.toHex(theColor.substr(3,theColor.length-4).split(',')[2] >>> 0)].join(''); 576 } 577 578 return theColor; 579 }; 580 581 /** 582 * Convert a dec to hex 583 * @param dec mixed the dec 584 * @return string hex value 585 */ 586 this.toHex = function(dec) 587 { 588 var modulos = []; 589 while(Math.floor(dec)>16){ 590 modulos.push(dec%16); 591 dec = Math.floor(dec/16); 592 } 593 594 var Hex, i; 595 switch(dec){ 596 case 10 : Hex = "A"; break; 597 case 11 : Hex = "B"; break; 598 case 12 : Hex = "C"; break; 599 case 13 : Hex = "D"; break; 600 case 14 : Hex = "E"; break; 601 case 15 : Hex = "F"; break; 602 default : Hex = ""+dec; break; 603 } 604 for( i=modulos.length-1;i>=0;i--){ 605 switch(modulos[i]){ 606 case 10 : Hex += "A"; break; 607 case 11 : Hex += "B"; break; 608 case 12 : Hex += "C"; break; 609 case 13 : Hex += "D"; break; 610 case 14 : Hex += "E"; break; 611 case 15 : Hex += "F"; break; 612 default : Hex += ""+modulos[i]; break; 613 } 614 } 615 if (Hex.length == 1 ){ 616 return "0"+Hex; 617 } else { 618 return Hex; 619 } 620 }; 621 622 /** 623 * Change the color to the next step 624 * @return string the Hex color code 625 */ 626 this.changeColor = function(colorHex,step) 627 { 628 var redHex = colorHex.substr(1,2); 629 var greenHex = colorHex.substr(3,2); 630 var blueHex = colorHex.substr(5,2); 631 632 var redDec = (parseInt(redHex,16)+step > 255) ? 255 : parseInt(redHex,16)+step; 633 var greenDec = (parseInt(greenHex,16)+step > 255) ? 255 : parseInt(greenHex,16)+step; 634 var blueDec = (parseInt(blueHex,16)+step > 255) ? 255 : parseInt(blueHex,16)+step; 635 636 redHex = (redDec <= 0) ? "00" : this.toHex(redDec); 637 greenHex = (greenDec <= 0) ? "00" : this.toHex(greenDec); 638 blueHex = (blueDec <= 0) ? "00" : this.toHex(blueDec); 639 return "#"+redHex+greenHex+blueHex; 640 }; 641 642 //! Define attributes 643 opts = $.extend({ 644 step_ang:10, 645 refresh_rate:15, 646 duration:300, 647 depth:0.12, 648 color_target:"white", 649 light:60, 650 content:"", 651 direction:"LEFT", 652 noCSS:false, 653 onStart:function(){}, 654 onMidway:function(){}, 655 onAnimation:function(){}, 656 onFinish:function(){}, 657 onReverseStart:function(){}, 658 onReverseMidway:function(){}, 659 onReverseAnimation:function(){}, 660 onReverseFinish:function(){} 661 }, opts); 662 663 //this._Int; 664 this._Reversing = false; 665 this._Half = false; 666 this._UID = Math.floor(Math.random()* 1000000); 667 this.jO = $jO; 668 this._noCSS = opts.noCSS; 669 //this.cvO; 670 671 this._Ang = 0; 672 this._Step_ang = (opts.refresh_rate/opts.duration)*200; 673 this._Refresh_rate = opts.refresh_rate; 674 this._Duration = opts.duration; // UNUSED! 675 676 this._Depth = opts.depth; 677 //this._CenterX; 678 //this._CenterY; 679 680 this._Color_target_is_rgba = (opts.color_target.substr(0,5) == "rgba("); 681 this._Color = $jO.css("background-color"); 682 this._Color_target_alpha = (this._Color_target_is_rgba)? opts.color_target.substr(3,opts.c
682olor_target.length-4).split(',')[3] >>> 0 : 1; 683 this._Color_alpha = /^transparent$/i.test('' + this._Color) ? 0 : (this._Color.substr(0,5) == "rgba(")? this._Color.substr(3,this._Color.length-4).split(',')[3] >>> 0 : 1; 684 this._Color_target = this.convertColor(opts.color_target); 685 this._Color = this.convertColor(this._Color); 686 687 this._Direction = opts.direction.toUpperCase(); 688 this._Light = opts.light; 689 690 this._Content = (typeof opts.content == "object") ? opts.content.html() : opts.content; 691 this._Recto_color = this._Color; 692 this._Verso_color = this._Color_target; 693 this._Recto = (opts.recto !== undefined)? opts.recto : this.jO.html(); 694 this._Verso = (opts.verso !== undefined)? opts.verso : this._Content; 695 696 this._Before = opts.onStart; 697 this._During = opts.onAnimation; 698 this._Midway = opts.onMidway; 699 this._After = opts.onFinish; 700 701 this._RBefore = opts.onReverseStart; 702 this._RDuring = opts.onReverseAnimation; 703 this._RMidway = opts.onReverseMidway; 704 this._RAfter = opts.onReverseFinish; 705 706 this._nW = this.jO.width(); 707 this._nH = this.jO.height(); 708 this._W = this.jO.outerWidth(); 709 this._H = this.jO.outerHeight(); 710 711 opts = null; 712 713 }; //! end Class flipBox 714 715 //! initiate jQuery Plugin 716 $.fn.flippy = function(opts) 717 { 718 719 return this.each(function(){ 720 $t = $(this); 721 if(!$t.hasClass("flippy_active")){ 722 var _FP = new flipBox($t,opts); 723 _FP.animate(); 724 } 725 726 }); 727 728 };//! end $.flippy() function 729 730 //! flippyReverse() function 731 $.fn.flippyReverse = function() 732 { 733 734 return this.each(function(){ 735 $t = $(this); 736 if(!$t.hasClass("flippy_active")){ 737 var _FP = $t.data("_oFlippy_"); 738 _FP.animate(true); 739 } 740 741 }); 742 743 };//! end $.flippyReverse() function 744 745 746})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.