www/plugins-dist/compagnon/prive/javascript/jquery.twinkle.js

   1 /*
   2  * jQuery.twinkle 0.2
   3  * http://larsjung.de/twinkle
   4  *
   5  * provided under the terms of the MIT License
   6  */
   7
   8 ( function( $ ) {
   9
  10
  11         var TwinkleEvent = function ( offX, offY, element, posX, posY ) {
  12
  13                 this.offset = { "left": offX, "top": offY };
  14                 this.element = element;
  15                 this.position = { "left": posX, "top": posY };
  16         };
  17
  18
  19         var Twinkler = function () {
  20
  21                 this.defaults = {
  22                         "widthRatio": 0.5,
  23                         "heightRatio": 0.5,
  24                         "delay": 0,
  25                         "gap": 0,
  26                         "effect": "splash",
  27                         "effectOptions": undefined
  28                 };
  29                 this.effects = {};
  30
  31
  32                 this.twinkle = function ( event, options ) {
  33
  34                         var settings = $.extend( {}, this.defaults, options );
  35
  36                         var effect = this.effects[settings.effect];
  37                         if ( effect !== undefined ) {
  38                                 event.element = event.element || "body";
  39                                 effect.run( event, settings.effectOptions );
  40                         };
  41                 };
  42
  43
  44                 this.twinkleAtElement = function ( htmlElement, options ) {
  45
  46                         var settings = $.extend( {}, this.defaults, options );
  47
  48                         var $ele = $( htmlElement );
  49
  50                         var off = $ele.offset();
  51                         var offX = off.left + $ele.outerWidth( true ) * settings.widthRatio;
  52                         var offY = off.top + $ele.outerHeight( true ) * settings.heightRatio;
  53
  54                         var pos = $ele.position();
  55                         var posX = pos.left + $ele.outerWidth( true ) * settings.widthRatio;
  56                         var posY = pos.top + $ele.outerHeight( true ) * settings.heightRatio;
  57
  58                         var event = new TwinkleEvent( offX, offY, htmlElement, posX, posY );
  59
  60                         this.twinkle( event, options );
  61                 };
  62
  63
  64                 this.twinkleAtElements = function ( htmlElements, options ) {
  65
  66                         var THIS = this;
  67                         var settings = $.extend( {}, this.defaults, options );
  68
  69                         var delay = settings.delay;
  70                         $( htmlElements ).each( function () {
  71                                 var htmlElement = this;
  72                                 setTimeout( function () {
  73                                         THIS.twinkleAtElement( htmlElement, options );
  74                                 }, delay );
  75                                 delay += settings.gap;
  76                         } );
  77                 };
  78         };
  79
  80
  81
  82         var twinkler = new Twinkler();
  83         var namespace = "twinkle";
  84
  85
  86         var globals = {
  87
  88                 twinkle: function ( element, left, top, options ) {
  89
  90                         var event = new TwinkleEvent( 0, 0, element, left, top );
  91                         twinkler.twinkle( event, options );
  92                         return globals;
  93                 },
  94
  95                 add: function ( effect ) {
  96
  97                         if ( twinkler.effects[effect.id] === undefined ) {
  98                                 twinkler.effects[effect.id] = effect;
  99                         };
 100                         return globals;
 101                 },
 102
 103                 remove: function ( effect ) {
 104
 105                         if ( twinkler.effects[effect.id] !== undefined ) {
 106                                 delete twinkler.effects[effect.id];
 107                         };
 108                         return globals;
 109                 }
 110         };
 111
 112
 113         var methods = {
 114
 115                 twinkle: function ( options ) {
 116
 117                         twinkler.twinkleAtElements( this, options );
 118                         return this;
 119                 }
 120         };
 121
 122
 123         $[namespace] = globals;
 124         $.fn[namespace] = function( method ) {
 125
 126                 if ( methods[method] ) {
 127                         return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
 128                 } else if ( method === undefined || method instanceof Object ) {
 129                         return methods.twinkle.apply( this, arguments );
 130                 } else {
 131                         $.error( "Method " +  method + " does not exist on jQuery." + namespace );
 132                 };
 133         };
 134
 135
 136 } )( jQuery );
 137
 138
 139 /*
 140  * jQuery.twinkle 0.2
 141  * CSS Effects
 142  * http://larsjung.de/twinkle
 143  *
 144  * provided under the terms of the MIT License
 145  */
 146
 147 ( function( $ ) {
 148
 149
 150         function animation( css, event, settings ) {
 151
 152                 var $dot = $( "<div />" ).css( css ).appendTo( event.element );
 153
 154                 var fadeIn = function() {
 155                         $dot.animate(
 156                                 {
 157                                         "left": event.position.left - settings.radius * 0.5,
 158                                         "top": event.position.top - settings.radius * 0.5,
 159                                         "width": settings.radius,
 160                                         "height": settings.radius,
 161                                         "opacity": 1
 162                                 },
 163                                 settings.duration * 0.5,
 164                                 "linear",
 165                                 fadeOut
 166                         );
 167                 };
 168                 var fadeOut = function () {
 169                         $dot.animate(
 170                                 {
 171                                         "left": event.position.left - settings.radius,
 172                                         "top": event.position.top - settings.radius,
 173                                         "width": settings.radius * 2,
 174                                         "height": settings.radius * 2,
 175                                         "opacity": 0
 176                                 },
 177                                 settings.duration * 0.5,
 178                                 "linear",
 179                                 cleanUp
 180                         );
 181                 };
 182                 var cleanUp = function () {
 183                         $dot.remove();
 184                 };
 185
 186                 fadeIn();
 187         };
 188
 189
 190         var SplashEffect = function () {
 191
 192                 var defaults = {
 193                         "color": "rgba(255,0,0,0.5)",
 194                         "radius": 300,
 195                         "duration": 1000
 196                 };
 197
 198                 this.id = "splash-css";
 199
 200                 this.run = function ( event, options ) {
 201
 202                         var settings = $.extend( {}, defaults, options );
 203                         var css = {
 204                                 "position": "absolute",
 205                                 "z-index": 1000,
 206                                 "display": "block",
 207                                 "border-radius": settings.radius,
 208                                 "background-color": settings.color,
 209                                 "box-shadow": "0 0 30px " + settings.color,
 210                                 "left": event.position.left,
 211                                 "top": event.position.top,
 212                                 "width": 0,
 213                                 "height": 0,
 214                                 "opacity": 0.4
 215                         };
 216
 217                         animation( css, event, settings );
 218                 };
 219         };
 220
 221
 222         var DropEffect = function () {
 223
 224                 var drops = new DropsEffect();
 225
 226                 this.id = "drop-css";
 227
 228                 this.run = function ( event, options ) {
 229
 230                         drops.run( event, $.extend( options, { count: 1 } ) );
 231                 };
 232         };
 233
 234
 235         var DropsEffect = function () {
 236
 237                 var defaults = {
 238                         "color": "rgba(255,0,0,0.5)",
 239                         "radius": 300,
 240                         "duration": 1000,
 241                         "width": 2,
 242                         "count": 3,
 243                         "delay": 300
 244                 };
 245
 246                 this.id = "drops-css";
 247
 248                 this.run = function ( event, options ) {
 249
 250                         var settings = $.extend( {}, defaults, options );
 251                         var css = {
 252                                 "position": "absolute",
 253                                 "z-index": 1000,
 254                                 "display": "block",
 255                                 "border-radius": settings.radius,
 256                                 "border": "" + settings.width + "px solid " + settings.color,
 257                                 "left": event.position.left,
 258                                 "top": event.position.top,
 259                                 "width": 0,
 260                                 "height": 0,
 261                                 "opacity": 0.4
 262                         };
 263
 264                         var delay = 0;
 265                         for ( var i = 0; i < settings.count; i++ ) {
 266                                 setTimeout( function () {
 267                                         animation( css, event, settings );
 268                                 }, delay );
 269                                 delay += settings.delay;
 270                         };
 271                 };
 272         };
 273
 274
 275         $.twinkle.add( new SplashEffect() );
 276         $.twinkle.add( new DropEffect() );
 277         $.twinkle.add( new DropsEffect() );
 278
 279
 280 } )( jQuery );
 281
 282
 283 /*
 284  * jQuery.twinkle 0.2
 285  * Canvas Effects
 286  * http://larsjung.de/twinkle
 287  *
 288  * provided under the terms of the MIT License
 289  */
 290
 291 ( function( $ ) {
 292
 293
 294         var Interpolator = function ( values ) {
 295
 296                 var equiDist = function( values ) {
 297
 298                         var dist = 1 / ( values.length - 1 );
 299                         var points = [];
 300                         for ( var i = 0; i < values.length; i++ ) {
 301                                 points.push( { x: dist * i , y: values[i] } );
 302                         };
 303                         return points;
 304                 };
 305
 306                 var interpolate = function ( p1, p2, x ) {
 307
 308                         var m = ( p2.y - p1.y ) / ( p2.x - p1.x );
 309                         var y = p1.y + m * ( x - p1.x );
 310                         return y;
 311                 };
 312
 313                 var findSection = function ( x ) {
 314
 315                         for ( var i = 0; i < points.length; i++ ) {
 316
 317                                 if ( i === 0 ) {
 318                                         continue;
 319                                 };
 320
 321                                 var prev = points[i-1];
 322                                 var current = points[i];
 323                                 if ( x >= prev.x && x <= current.x ) {
 324                                         return [ prev, current ];
 325                                 };
 326                         };
 327                         return undefined;
 328                 };
 329
 330                 var points = equiDist( values );
 331
 332                 this.get = function ( x ) {
 333
 334                         x = Math.max( 0, Math.min( 1, x ) );
 335                         var secPts = findSection( x );
 336                         return interpolate( secPts[0], secPts[1], x );
 337                 };
 338
 339         };
 340         Interpolator.scale = function ( x, scale, offset ) {
 341
 342                 scale = scale || 1;
 343                 offset = offset || 0;
 344                 x = ( x - offset ) / scale;
 345                 return x >= 0 && x <= 1 ? x : undefined;
 346         };
 347
 348
 349         var FrameEvent = function ( ctx, frac, millis ) {
 350
 351                 this.ctx = ctx;
 352                 this.frac = frac;
 353                 this.millis = millis;
 354         };
 355
 356
 357         var CanvasEffect = function ( twinkleEvent, width, height, frame ) {
 358
 359                 this.element = twinkleEvent.element;
 360                 this.x = twinkleEvent.position.left;
 361                 this.y = twinkleEvent.position.top;
 362                 this.width = width;
 363                 this.height = height;
 364                 this.frame = frame;
 365                 this.$canvas = undefined;
 366                 this.ctx = undefined;
 367
 368                 this.init = function () {
 369
 370                         var css = {
 371                                 "position": "absolute",
 372                                 "z-index": 1000,
 373                                 "display": "block",
 374                                 "left": this.x - this.width * 0.5,
 375                                 "top": this.y - this.height * 0.5,
 376                                 "width": this.width,
 377                                 "height": this.height
 378                         };
 379
 380                         this.$canvas = $( "<canvas width='" + this.width + "' height='" + this.height + "' />" ).css( css ).appendTo( this.element );
 381                         this.ctx = new Ctx( this.$canvas.get( 0 ).getContext( "2d" ) );
 382                 };
 383
 384                 this.destroy = function () {
 385
 386                         this.$canvas.remove();
 387                         this.$canvas = undefined;
 388                         this.ctx = undefined;
 389                 };
 390
 391                 this.run = function ( duration, fps ) {
 392
 393                         this.init();
 394
 395                         var THIS = this;
 396                         var frameCount = duration / 1000 * fps;
 397                         var delta = 1 / frameCount;
 398                         for ( var i = 0; i < frameCount + 1; i++ ) {
 399                                 ( function ( frac ) {
 400                                         setTimeout( function () {
 401                                                 if ( THIS.ctx ) {
 402                                                         THIS.frame( new FrameEvent( THIS.ctx, frac, duration * frac ) );
 403                                                 };
 404                                         }, duration * frac );
 405                                 } )( i * delta );
 406                         };
 407
 408                         setTimeout( $.proxy( this.destroy, this ), duration );
 409                 };
 410
 411         };
 412
 413
 414         var Path = function ( ctx ) {
 415
 416                 var context = ctx.context;
 417                 context.beginPath();
 418
 419                 this.circle = function ( x, y, radius ) {
 420
 421                         context.arc( x, y, radius, 0, 2 * Math.PI, false );
 422                         return this;
 423                 };
 424
 425                 this.stroke = function ( strokeWidth, strokeStyle ) {
 426
 427                         context.lineWidth = strokeWidth;
 428                         context.strokeStyle = strokeStyle;
 429                         context.stroke();
 430                         return ctx;
 431                 };
 432
 433                 this.fill = function ( fillStyle ) {
 434
 435                         context.fillStyle = fillStyle;
 436                         context.fill();
 437                         return ctx;
 438                 };
 439
 440                 this.draw = function ( strokeWidth, strokeStyle, fillStyle ) {
 441
 442                         this.stroke( strokeWidth, strokeStyle );
 443                         this.fill( fillStyle );
 444                         return ctx;
 445                 };
 446         };
 447
 448
 449         var Ctx = function ( context ) {
 450
 451                 this.context = context;
 452                 this.width = $( context.canvas ).width();
 453                 this.height = $( context.canvas ).height();
 454
 455                 this.clear = function () {
 456
 457                         this.resetTransform();
 458                         this.context.clearRect( 0, 0, this.width, this.height );
 459                         return this;
 460                 };
 461
 462                 this.resetTransform = function () {
 463
 464                         this.context.setTransform( 1, 0, 0, 1, 0, 0 );
 465                         return this;
 466                 };
 467
 468                 this.translate = function ( x, y ) {
 469
 470                         this.context.translate( x, y );
 471                         return this;
 472                 };
 473
 474                 this.rotate = function ( alpha ) {
 475
 476                         this.context.rotate( Math.PI * alpha / 180 );
 477                         return this;
 478                 };
 479
 480                 this.opacity = function ( opacity ) {
 481
 482                         this.context.globalAlpha = opacity;
 483                         return this;
 484                 };
 485
 486                 this.path = function () {
 487
 488                         return new Path( this );
 489                 };
 490         };
 491
 492
 493
 494         var SplashEffect = function () {
 495
 496                 var defaults = {
 497                         "color": "rgba(255,0,0,0.5)",
 498                         "radius": 300,
 499                         "duration": 1000
 500                 };
 501
 502                 this.id = "splash";
 503
 504                 this.run = function ( twinkleEvent, options ) {
 505
 506                         var settings = $.extend( {}, defaults, options );
 507                         var size = settings.radius * 2;
 508                         var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
 509                         var radiusIpl = new Interpolator( [ 0, settings.radius ] );
 510                         var frame = function ( frameEvent ) {
 511
 512                                 var radius = radiusIpl.get( frameEvent.frac );
 513                                 var opacity = opacityIpl.get( frameEvent.frac );
 514
 515                                 this.ctx
 516                                         .clear()
 517                                         .opacity( opacity )
 518                                         .path()
 519                                         .circle( this.width * 0.5, this.height * 0.5, radius )
 520                                         .fill( settings.color );
 521                         };
 522
 523                         new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
 524                 };
 525         };
 526
 527         $.twinkle.add( new SplashEffect() );
 528
 529
 530
 531         var DropEffect = function () {
 532
 533                 var defaults = {
 534                         "color": "rgba(255,0,0,0.5)",
 535                         "radius": 300,
 536                         "duration": 1000,
 537                         "width": 2
 538                 };
 539
 540                 this.id = "drop";
 541
 542                 this.run = function ( twinkleEvent, options ) {
 543
 544                         var settings = $.extend( {}, defaults, options );
 545                         var size = settings.radius * 2;
 546                         var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
 547                         var radiusIpl = new Interpolator( [ 0, settings.radius ] );
 548                         var frame = function ( frameEvent ) {
 549
 550                                 var radius = radiusIpl.get( frameEvent.frac );
 551                                 var opacity = opacityIpl.get( frameEvent.frac );
 552
 553                                 this.ctx
 554                                         .clear()
 555                                         .opacity( opacity )
 556                                         .path()
 557                                         .circle( this.width * 0.5, this.height * 0.5, radius )
 558                                         .stroke( settings.width, settings.color );
 559                         };
 560
 561                         new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
 562                 };
 563         };
 564
 565         $.twinkle.add( new DropEffect() );
 566
 567
 568
 569         var DropsEffect = function () {
 570
 571                 var defaults = {
 572                         "color": "rgba(255,0,0,0.5)",
 573                         "radius": 300,
 574                         "duration": 1000,
 575                         "width": 2,
 576                         "count": 3,
 577                         "delay": 100
 578                 };
 579
 580                 this.id = "drops";
 581
 582                 this.run = function ( twinkleEvent, options ) {
 583
 584                         var settings = $.extend( {}, defaults, options );
 585                         var size = settings.radius * 2;
 586                         var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
 587                         var radiusIpl = new Interpolator( [ 0, settings.radius ] );
 588                         var scale = ( settings.duration - ( settings.count - 1 ) * settings.delay ) / settings.duration;
 589                         var offset = settings.delay / settings.duration;
 590
 591                         var frame = function ( frameEvent ) {
 592
 593                                 this.ctx.clear();
 594                                 for ( var i = 0; i < settings.count; i++ ) {
 595                                         var frac = Interpolator.scale( frameEvent.frac, scale, offset * i );
 596
 597                                         if ( frac !== undefined ) {
 598                                                 var radius = radiusIpl.get( frac );
 599                                                 var opacity = opacityIpl.get( frac );
 600                                                 this.ctx
 601                                                         .opacity( opacity )
 602                                                         .path()
 603                                                         .circle( this.width * 0.5, this.height * 0.5, radius )
 604                                                         .stroke( settings.width, settings.color );
 605                                         };
 606                                 };
 607                         };
 608
 609                         new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
 610                 };
 611         };
 612
 613         $.twinkle.add( new DropsEffect() );
 614
 615
 616
 617         var PulseEffect = function () {
 618
 619                 var defaults = {
 620                         "color": "rgba(255,0,0,0.5)",
 621                         "radius": 100,
 622                         "duration": 3000
 623                 };
 624
 625                 this.id = "pulse";
 626
 627                 this.run = function ( twinkleEvent, options ) {
 628
 629                         var settings = $.extend( {}, defaults, options );
 630                         var size = settings.radius * 2;
 631                         var opacityIpl = new Interpolator( [ 0, 1, 0.6, 1, 0.6, 1, 0 ] );
 632                         var radiusIpl = new Interpolator( [ 0, settings.radius, settings.radius * 0.6, settings.radius, settings.radius * 0.6, settings.radius, 0 ] );
 633                         var frame = function ( frameEvent ) {
 634
 635                                 var x = this.width * 0.5;
 636                                 var y = this.height * 0.5;
 637                                 var radius = radiusIpl.get( frameEvent.frac );
 638                                 var opacity = opacityIpl.get( frameEvent.frac );
 639
 640                                 this.ctx
 641                                         .clear()
 642                                         .opacity( opacity )
 643                                         .path()
 644                                         .circle( this.width * 0.5, this.height * 0.5, radius )
 645                                         .fill( settings.color );
 646                         };
 647
 648                         new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
 649                 };
 650         };
 651
 652         $.twinkle.add( new PulseEffect() );
 653
 654
 655
 656         var OrbitEffect = function () {
 657
 658                 var defaults = {
 659                         "color": "rgba(255,0,0,0.5)",
 660                         "radius": 100,
 661                         "duration": 3000,
 662                         "satellites": 10,
 663                         "satellitesRadius": 10,
 664                         "circulations": 1.5
 665                 };
 666
 667                 this.id = "orbit";
 668
 669                 this.run = function ( twinkleEvent, options ) {
 670
 671                         var settings = $.extend( {}, defaults, options );
 672                         var size = settings.radius * 2;
 673                         var opacityIpl = new Interpolator( [ 0.4, 1, 1, 0.4 ] );
 674                         var r = settings.radius - settings.satellitesRadius;
 675                         var radiusIpl = new Interpolator( [ 0, r, r, 0 ] );
 676                         var frame = function ( frameEvent ) {
 677
 678                                 var radius = radiusIpl.get( frameEvent.frac );
 679                                 var opacity = opacityIpl.get( frameEvent.frac );
 680                                 var bog = Math.PI * 2 * settings.circulations * frameEvent.frac;
 681
 682                                 this.ctx
 683                                         .clear()
 684                                         .opacity( opacity )
 685                                         .translate( this.width * 0.5, this.height * 0.5 );
 686
 687                                 var path = this.ctx.path();
 688                                 for ( var i = 0; i < settings.satellites; i++ ) {
 689
 690                                         bog += Math.PI * 2 / settings.satellites;
 691                                         var x = Math.cos( bog ) * radius;
 692                                         var y = Math.sin( bog ) * radius;
 693                                         path.circle( x, y, settings.satellitesRadius );
 694                                 };
 695                                 path.fill( settings.color );
 696                         };
 697
 698                         new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
 699                 };
 700         };
 701
 702         $.twinkle.add( new OrbitEffect() );
 703
 704
 705
 706 } )( jQuery );
 707
 708
 709
 710