[Sommaire] [Imprimer]

   1  // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
   2  //
   3  // Parts (c) 2005 Justin Palmer (http://encytemedia.com/)
   4  // Parts (c) 2005 Mark Pilgrim (http://diveintomark.org/)
   5  // 
   6  // Permission is hereby granted, free of charge, to any person obtaining
   7  // a copy of this software and associated documentation files (the
   8  // "Software"), to deal in the Software without restriction, including
   9  // without limitation the rights to use, copy, modify, merge, publish,
  10  // distribute, sublicense, and/or sell copies of the Software, and to
  11  // permit persons to whom the Software is furnished to do so, subject to
  12  // the following conditions:
  13  // 
  14  // The above copyright notice and this permission notice shall be
  15  // included in all copies or substantial portions of the Software.
  16  // 
  17  // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  18  // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  19  // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  20  // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  21  // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  22  // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  23  // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  24  
  25  
  26  Effect = {}
  27  Effect2 = Effect; // deprecated
  28  
  29  /* ------------- transitions ------------- */
  30  
  31  Effect.Transitions = {}
  32  
  33  Effect.Transitions.linear = function(pos) {
  34    return pos;
  35  }
  36  Effect.Transitions.sinoidal = function(pos) {
  37    return (-Math.cos(pos*Math.PI)/2) + 0.5;
  38  }
  39  Effect.Transitions.reverse  = function(pos) {
  40    return 1-pos;
  41  }
  42  Effect.Transitions.flicker = function(pos) {
  43    return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random(0.25);
  44  }
  45  Effect.Transitions.wobble = function(pos) {
  46    return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
  47  }
  48  Effect.Transitions.pulse = function(pos) {
  49    return (Math.floor(pos*10) % 2 == 0 ? 
  50      (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
  51  }
  52  Effect.Transitions.none = function(pos) {
  53    return 0;
  54  }
  55  Effect.Transitions.full = function(pos) {
  56    return 1;
  57  }
  58  
  59  /* ------------- core effects ------------- */
  60  
  61  Effect.Base = function() {};
  62  Effect.Base.prototype = {
  63    setOptions: function(options) {
  64      this.options = Object.extend({
  65        transition: Effect.Transitions.sinoidal,
  66        duration:   1.0,   // seconds
  67        fps:        25.0,  // max. 100fps
  68        sync:       false, // true for combining
  69        from:       0.0,
  70        to:         1.0
  71      }, options || {});
  72    },
  73    start: function(options) {
  74      this.setOptions(options || {});
  75      this.currentFrame = 0;
  76      this.startOn      = new Date().getTime();
  77      this.finishOn     = this.startOn + (this.options.duration*1000);
  78      if(this.options.beforeStart) this.options.beforeStart(this);
  79      if(!this.options.sync) this.loop();  
  80    },
  81    loop: function() {
  82      var timePos = new Date().getTime();
  83      if(timePos >= this.finishOn) {
  84        this.render(1.0);
  85        if(this.finish) this.finish(); 
  86        if(this.options.afterFinish) this.options.afterFinish(this);
  87        return;  
  88      }
  89      var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
  90      var frame = Math.round(pos * this.options.fps * this.options.duration);
  91      if(frame > this.currentFrame) {
  92        this.render(pos);
  93        this.currentFrame = frame;
  94      }
  95      this.timeout = setTimeout(this.loop.bind(this), 10);
  96    },
  97    render: function(pos) {
  98      if(this.options.transition) pos = this.options.transition(pos);
  99      pos *= (this.options.to-this.options.from);
 100      pos += this.options.from; 
 101      if(this.options.beforeUpdate) this.options.beforeUpdate(this);
 102      if(this.update) this.update(pos);
 103      if(this.options.afterUpdate) this.options.afterUpdate(this);  
 104    },
 105    cancel: function() {
 106      if(this.timeout) clearTimeout(this.timeout);
 107    }
 108  }
 109  
 110  Effect.Parallel = Class.create();
 111  Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
 112    initialize: function(effects) {
 113      this.effects = effects || [];
 114      this.start(arguments[1]);
 115    },
 116    update: function(position) {
 117      for (var i = 0; i < this.effects.length; i++)
 118        this.effects[i].render(position);  
 119    },
 120    finish: function(position) {
 121      for (var i = 0; i < this.effects.length; i++)
 122        if(this.effects[i].finish) this.effects[i].finish(position);
 123    }
 124  });
 125  
 126  // Internet Explorer caveat: works only on elements the have
 127  // a 'layout', meaning having a given width or height. 
 128  // There is no way to safely set this automatically.
 129  Effect.Opacity = Class.create();
 130  Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
 131    initialize: function(element) {
 132      this.element = $(element);
 133      options = Object.extend({
 134        from: 0.0,
 135        to:   1.0
 136      }, arguments[1] || {});
 137      this.start(options);
 138    },
 139    update: function(position) {
 140      this.setOpacity(position);
 141    }, 
 142    setOpacity: function(opacity) {
 143      if(opacity==1.0) {
 144        this.element.style.opacity = null;
 145        this.element.style.filter  = null;
 146      } else {
 147        this.element.style.opacity = opacity;
 148        this.element.style.filter  = "alpha(opacity:"+opacity*100+")";
 149      }
 150    }
 151  });
 152  
 153  Effect.MoveBy = Class.create();
 154  Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), {
 155    initialize: function(element, toTop, toLeft) {
 156      this.element      = $(element);
 157      this.originalTop  = parseFloat(Element.getStyle(element,'top')  || '0');
 158      this.originalLeft = parseFloat(Element.getStyle(element,'left') || '0');
 159      this.toTop        = toTop;
 160      this.toLeft       = toLeft;
 161      Element.makePositioned(this.element);
 162      this.start(arguments[3]);
 163    },
 164    update: function(position) {
 165      topd  = this.toTop  * position + this.originalTop;
 166      leftd = this.toLeft * position + this.originalLeft;
 167      this.setPosition(topd, leftd);
 168    },
 169    setPosition: function(topd, leftd) {
 170      this.element.style.top  = topd  + "px";
 171      this.element.style.left = leftd + "px";
 172    }
 173  });
 174  
 175  Effect.Scale = Class.create();
 176  Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
 177    initialize: function(element, percent) {
 178      this.element = $(element)
 179      options = Object.extend({
 180        scaleX: true,
 181        scaleY: true,
 182        scaleContent: true,
 183        scaleFromCenter: false,
 184        scaleMode: 'box',        // 'box' or 'contents' or {} with provided values
 185        scaleFrom: 100.0
 186      }, arguments[2] || {});
 187      this.originalTop    = this.element.offsetTop;
 188      this.originalLeft   = this.element.offsetLeft;
 189      if(Element.getStyle(element,'font-size')=="") this.sizeEm = 1.0;
 190      if(Element.getStyle(element,'font-size') && Element.getStyle(element,'font-size').indexOf("em")>0)
 191        this.sizeEm      = parseFloat(Element.getStyle(element,'font-size'));
 192      this.factor = (percent/100.0) - (options.scaleFrom/100.0);
 193      if(options.scaleMode=='box') {
 194        this.originalHeight = this.element.clientHeight;
 195        this.originalWidth  = this.element.clientWidth; 
 196      } else 
 197      if(options.scaleMode=='contents') {
 198        this.originalHeight = this.element.scrollHeight;
 199        this.originalWidth  = this.element.scrollWidth;
 200      } else {
 201        this.originalHeight = options.scaleMode.originalHeight;
 202        this.originalWidth  = options.scaleMode.originalWidth;
 203      }
 204      this.start(options);
 205    },
 206  
 207    update: function(position) {
 208      currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
 209      if(this.options.scaleContent && this.sizeEm) 
 210        this.element.style.fontSize = this.sizeEm*currentScale + "em";
 211      this.setDimensions(
 212        this.originalWidth * currentScale, 
 213        this.originalHeight * currentScale);
 214    },
 215  
 216    setDimensions: function(width, height) {
 217      if(this.options.scaleX) this.element.style.width = width + 'px';
 218      if(this.options.scaleY) this.element.style.height = height + 'px';
 219      if(this.options.scaleFromCenter) {
 220        topd  = (height - this.originalHeight)/2;
 221        leftd = (width  - this.originalWidth)/2;
 222        if(Element.getStyle(this.element,'position')=='absolute') {
 223          if(this.options.scaleY) this.element.style.top = this.originalTop-topd + "px";
 224          if(this.options.scaleX) this.element.style.left = this.originalLeft-leftd + "px";
 225        } else {
 226          if(this.options.scaleY) this.element.style.top = -topd + "px";
 227          if(this.options.scaleX) this.element.style.left = -leftd + "px";
 228        }
 229      }
 230    }
 231  });
 232  
 233  Effect.Highlight = Class.create();
 234  Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
 235    initialize: function(element) {
 236      this.element = $(element);
 237      
 238      // try to parse current background color as default for endcolor
 239      // browser stores this as: "rgb(255, 255, 255)", convert to "#ffffff" format
 240      var endcolor = "#ffffff";
 241      var current = Element.getStyle(this.element, 'background-color');
 242      if(current && current.slice(0,4) == "rgb(") {
 243        endcolor = "#";
 244        var cols = current.slice(4,current.length-1).split(',');
 245        var i=0; do { endcolor += parseInt(cols[i]).toColorPart() } while (++i<3); }
 246        
 247      var options = Object.extend({
 248        startcolor:   "#ffff99",
 249        endcolor:     endcolor,
 250        restorecolor: current 
 251      }, arguments[1] || {});
 252      
 253      // init color calculations
 254      this.colors_base = [
 255        parseInt(options.startcolor.slice(1,3),16),
 256        parseInt(options.startcolor.slice(3,5),16),
 257        parseInt(options.startcolor.slice(5),16) ];
 258      this.colors_delta = [
 259        parseInt(options.endcolor.slice(1,3),16)-this.colors_base[0],
 260        parseInt(options.endcolor.slice(3,5),16)-this.colors_base[1],
 261        parseInt(options.endcolor.slice(5),16)-this.colors_base[2] ];
 262  
 263      this.start(options);
 264    },
 265    update: function(position) {
 266      var colors = [
 267        Math.round(this.colors_base[0]+(this.colors_delta[0]*position)),
 268        Math.round(this.colors_base[1]+(this.colors_delta[1]*position)),
 269        Math.round(this.colors_base[2]+(this.colors_delta[2]*position)) ];
 270      this.element.style.backgroundColor = "#" +
 271        colors[0].toColorPart() + colors[1].toColorPart() + colors[2].toColorPart();
 272    },
 273    finish: function() {
 274      this.element.style.backgroundColor = this.options.restorecolor;
 275    }
 276  });
 277  
 278  Effect.ScrollTo = Class.create();
 279  Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
 280    initialize: function(element) {
 281      this.element = $(element);
 282      Position.prepare();
 283      var offsets = Position.cumulativeOffset(this.element);
 284      var max = window.innerHeight ? 
 285        window.height - window.innerHeight :
 286        document.body.scrollHeight - 
 287          (document.documentElement.clientHeight ? 
 288            document.documentElement.clientHeight : document.body.clientHeight);
 289      this.scrollStart = Position.deltaY;
 290      this.delta  = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
 291      this.start(arguments[1] || {});
 292    },
 293    update: function(position) {
 294      Position.prepare();
 295      window.scrollTo(Position.deltaX, 
 296        this.scrollStart + (position*this.delta));
 297    }
 298  });
 299  
 300  /* ------------- prepackaged effects ------------- */
 301  
 302  Effect.Fade = function(element) {
 303    options = Object.extend({
 304    from: 1.0,
 305    to:   0.0,
 306    afterFinish: function(effect) 
 307      { Element.hide(effect.element);
 308        effect.setOpacity(1); } 
 309    }, arguments[1] || {});
 310    return new Effect.Opacity(element,options);
 311  }
 312  
 313  Effect.Appear = function(element) {
 314    options = Object.extend({
 315    from: 0.0,
 316    to:   1.0,
 317    beforeStart: function(effect)  
 318      { effect.setOpacity(0);
 319        Element.show(effect.element); },
 320    afterUpdate: function(effect)  
 321      { Element.show(effect.element); }
 322    }, arguments[1] || {});
 323    return new Effect.Opacity(element,options);
 324  }
 325  
 326  Effect.Puff = function(element) {
 327    return new Effect.Parallel(
 328     [ new Effect.Scale(element, 200, { sync: true, scaleFromCenter: true }), 
 329       new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ], 
 330       { duration: 1.0, 
 331        afterUpdate: function(effect) 
 332         { effect.effects[0].element.style.position = 'absolute'; },
 333        afterFinish: function(effect)
 334         { Element.hide(effect.effects[0].element); }
 335       }
 336     );
 337  }
 338  
 339  Effect.BlindUp = function(element) {
 340    Element.makeClipping(element);
 341    return new Effect.Scale(element, 0, 
 342      Object.extend({ scaleContent: false, 
 343        scaleX: false, 
 344        afterFinish: function(effect) 
 345          { 
 346            Element.hide(effect.element);
 347            Element.undoClipping(effect.element);
 348          } 
 349      }, arguments[1] || {})
 350    );
 351  }
 352  
 353  Effect.BlindDown = function(element) {
 354    $(element).style.height   = '0px';
 355    Element.makeClipping(element);
 356    Element.show(element);
 357    return new Effect.Scale(element, 100, 
 358      Object.extend({ scaleContent: false, 
 359        scaleX: false, 
 360        scaleMode: 'contents',
 361        scaleFrom: 0,
 362        afterFinish: function(effect) {
 363          Element.undoClipping(effect.element);
 364        }
 365      }, arguments[1] || {})
 366    );
 367  }
 368  
 369  Effect.SwitchOff = function(element) {
 370    return new Effect.Appear(element,
 371      { duration: 0.4,
 372       transition: Effect.Transitions.flicker,
 373       afterFinish: function(effect)
 374        { effect.element.style.overflow = 'hidden';
 375          new Effect.Scale(effect.element, 1, 
 376           { duration: 0.3, scaleFromCenter: true,
 377            scaleX: false, scaleContent: false,
 378            afterUpdate: function(effect) { 
 379             if(effect.element.style.position=="")
 380               effect.element.style.position = 'relative'; },
 381            afterFinish: function(effect) { Element.hide(effect.element); }
 382           } )
 383        }
 384      } );
 385  }
 386  
 387  Effect.DropOut = function(element) {
 388    return new Effect.Parallel(
 389      [ new Effect.MoveBy(element, 100, 0, { sync: true }), 
 390        new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ], 
 391      { duration: 0.5, 
 392       afterFinish: function(effect)
 393         { Element.hide(effect.effects[0].element); } 
 394      });
 395  }
 396  
 397  Effect.Shake = function(element) {
 398    return new Effect.MoveBy(element, 0, 20, 
 399      { duration: 0.05, afterFinish: function(effect) {
 400    new Effect.MoveBy(effect.element, 0, -40, 
 401      { duration: 0.1, afterFinish: function(effect) { 
 402    new Effect.MoveBy(effect.element, 0, 40, 
 403      { duration: 0.1, afterFinish: function(effect) {  
 404    new Effect.MoveBy(effect.element, 0, -40, 
 405      { duration: 0.1, afterFinish: function(effect) {  
 406    new Effect.MoveBy(effect.element, 0, 40, 
 407      { duration: 0.1, afterFinish: function(effect) {  
 408    new Effect.MoveBy(effect.element, 0, -20, 
 409      { duration: 0.05, afterFinish: function(effect) {  
 410    }}) }}) }}) }}) }}) }});
 411  }
 412  
 413  Effect.SlideDown = function(element) {
 414    element = $(element);
 415    element.style.height   = '0px';
 416    Element.makeClipping(element);
 417    Element.cleanWhitespace(element);
 418    Element.makePositioned(element.firstChild);
 419    Element.show(element);
 420    return new Effect.Scale(element, 100, 
 421     Object.extend({ scaleContent: false, 
 422      scaleX: false, 
 423      scaleMode: 'contents',
 424      scaleFrom: 0,
 425      afterUpdate: function(effect) 
 426        { effect.element.firstChild.style.bottom = 
 427            (effect.originalHeight - effect.element.clientHeight) + 'px'; },
 428      afterFinish: function(effect) 
 429        {  Element.undoClipping(effect.element); }
 430      }, arguments[1] || {})
 431    );
 432  }
 433    
 434  Effect.SlideUp = function(element) {
 435    element = $(element);
 436    Element.makeClipping(element);
 437    Element.cleanWhitespace(element);
 438    Element.makePositioned(element.firstChild);
 439    Element.show(element);
 440    return new Effect.Scale(element, 0, 
 441     Object.extend({ scaleContent: false, 
 442      scaleX: false, 
 443      afterUpdate: function(effect) 
 444        { effect.element.firstChild.style.bottom = 
 445            (effect.originalHeight - effect.element.clientHeight) + 'px'; },
 446      afterFinish: function(effect)
 447        { 
 448          Element.hide(effect.element);
 449          Element.undoClipping(effect.element);
 450        }
 451     }, arguments[1] || {})
 452    );
 453  }
 454  
 455  Effect.Squish = function(element) {
 456   return new Effect.Scale(element, 0, 
 457     { afterFinish: function(effect) { Element.hide(effect.element); } });
 458  }
 459  
 460  Effect.Grow = function(element) {
 461    element = $(element);
 462    var options = arguments[1] || {};
 463    
 464    var originalWidth = element.clientWidth;
 465    var originalHeight = element.clientHeight;
 466    element.style.overflow = 'hidden';
 467    Element.show(element);
 468    
 469    var direction = options.direction || 'center';
 470    var moveTransition = options.moveTransition || Effect.Transitions.sinoidal;
 471    var scaleTransition = options.scaleTransition || Effect.Transitions.sinoidal;
 472    var opacityTransition = options.opacityTransition || Effect.Transitions.full;
 473    
 474    var initialMoveX, initialMoveY;
 475    var moveX, moveY;
 476    
 477    switch (direction) {
 478      case 'top-left':
 479        initialMoveX = initialMoveY = moveX = moveY = 0; 
 480        break;
 481      case 'top-right':
 482        initialMoveX = originalWidth;
 483        initialMoveY = moveY = 0;
 484        moveX = -originalWidth;
 485        break;
 486      case 'bottom-left':
 487        initialMoveX = moveX = 0;
 488        initialMoveY = originalHeight;
 489        moveY = -originalHeight;
 490        break;
 491      case 'bottom-right':
 492        initialMoveX = originalWidth;
 493        initialMoveY = originalHeight;
 494        moveX = -originalWidth;
 495        moveY = -originalHeight;
 496        break;
 497      case 'center':
 498        initialMoveX = originalWidth / 2;
 499        initialMoveY = originalHeight / 2;
 500        moveX = -originalWidth / 2;
 501        moveY = -originalHeight / 2;
 502        break;
 503    }
 504    
 505    return new Effect.MoveBy(element, initialMoveY, initialMoveX, { 
 506      duration: 0.01, 
 507      beforeUpdate: function(effect) { $(element).style.height = '0px'; },
 508      afterFinish: function(effect) {
 509        new Effect.Parallel(
 510          [ new Effect.Opacity(element, { sync: true, to: 1.0, from: 0.0, transition: opacityTransition }),
 511            new Effect.MoveBy(element, moveY, moveX, { sync: true, transition: moveTransition }),
 512            new Effect.Scale(element, 100, { 
 513              scaleMode: { originalHeight: originalHeight, originalWidth: originalWidth }, 
 514              sync: true, scaleFrom: 0, scaleTo: 100, transition: scaleTransition })],
 515          options); }
 516      });
 517  }
 518  
 519  Effect.Shrink = function(element) {
 520    element = $(element);
 521    var options = arguments[1] || {};
 522    
 523    var originalWidth = element.clientWidth;
 524    var originalHeight = element.clientHeight;
 525    element.style.overflow = 'hidden';
 526    Element.show(element);
 527  
 528    var direction = options.direction || 'center';
 529    var moveTransition = options.moveTransition || Effect.Transitions.sinoidal;
 530    var scaleTransition = options.scaleTransition || Effect.Transitions.sinoidal;
 531    var opacityTransition = options.opacityTransition || Effect.Transitions.none;
 532    
 533    var moveX, moveY;
 534    
 535    switch (direction) {
 536      case 'top-left':
 537        moveX = moveY = 0;
 538        break;
 539      case 'top-right':
 540        moveX = originalWidth;
 541        moveY = 0;
 542        break;
 543      case 'bottom-left':
 544        moveX = 0;
 545        moveY = originalHeight;
 546        break;
 547      case 'bottom-right':
 548        moveX = originalWidth;
 549        moveY = originalHeight;
 550        break;
 551      case 'center':  
 552        moveX = originalWidth / 2;
 553        moveY = originalHeight / 2;
 554        break;
 555    }
 556    
 557    return new Effect.Parallel(
 558      [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: opacityTransition }),
 559        new Effect.Scale(element, 0, { sync: true, transition: moveTransition }),
 560        new Effect.MoveBy(element, moveY, moveX, { sync: true, transition: scaleTransition }) ],
 561      options);
 562  }
 563  
 564  Effect.Pulsate = function(element) {
 565    var options    = arguments[1] || {};
 566    var transition = options.transition || Effect.Transitions.sinoidal;
 567    var reverser   = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
 568    reverser.bind(transition);
 569    return new Effect.Opacity(element, 
 570      Object.extend(Object.extend({  duration: 3.0,
 571         afterFinish: function(effect) { Element.show(effect.element); }
 572      }, options), {transition: reverser}));
 573  }
 574  
 575  Effect.Fold = function(element) {
 576   $(element).style.overflow = 'hidden';
 577   return new Effect.Scale(element, 5, Object.extend({   
 578     scaleContent: false,
 579     scaleTo: 100,
 580     scaleX: false,
 581     afterFinish: function(effect) {
 582     new Effect.Scale(element, 1, { 
 583       scaleContent: false, 
 584       scaleTo: 0,
 585       scaleY: false,
 586       afterFinish: function(effect) { Element.hide(effect.element) } });
 587   }}, arguments[1] || {}));
 588  }
 589  
 590  // old: new Effect.ContentZoom(element, percent)
 591  // new: Element.setContentZoom(element, percent) 
 592  
 593  Element.setContentZoom = function(element, percent) {
 594    var element = $(element);
 595    element.style.fontSize = (percent/100) + "em";  
 596    if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
 597  }