Added a bunch of script.aculo.us features: Effect.ScrollTo, to smoothly scroll the page to an element, better Firefox flickering handling on SlideUp/SlideDown, Removed a possible memory leak in IE with draggables, Added support for cancelling dragging my hitting ESC #1644 [Thomas Fuchs]

git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@1759 5ecf4fe2-1ee6-0310-87b1-e25e094e27de

2 files changed, 116 insertions, 70 deletions

diff --git a/railties/html/javascripts/dragdrop.js b/railties/html/javascripts/dragdrop.js
index 20432a3c88..eb6511095f 100644
--- a/railties/html/javascripts/dragdrop.js
+++ b/railties/html/javascripts/dragdrop.js
@@ -196,17 +196,13 @@ var Droppables = {
   },
   
   fire: function(event, element) {
-    if(!this.drops) return;
-    var pX = Event.pointerX(event);
-    var pY = Event.pointerY(event);
+    if(!this.last_active) return;
     Position.prepare();
     
-    var i = this.drops.length-1; do {
-      var drop = this.drops[i];
-      if(this.is_affected(pX, pY, element, drop))
-        if(drop.droppable.onDrop)
-           drop.droppable.onDrop(element);
-    } while (i--);
+    if (this.is_affected(Event.pointerX(event), Event.pointerY(event), element, this.last_active))
+      if (this.last_active.droppable.onDrop) 
+        this.last_active.droppable.onDrop(element, this.last_active);
+    
   },
   
   reset: function() {
@@ -247,7 +243,6 @@ Draggable.prototype = {
     }.extend(arguments[1] || {});
     
     this.element      = $(element);
-    this.element.drag = this;
     this.handle       = options.handle ? $(options.handle) : this.element;
     
     // fix IE
@@ -270,6 +265,7 @@ Draggable.prototype = {
     Event.observe(this.handle, "mousedown", this.startDrag.bindAsEventListener(this));
     Event.observe(document, "mouseup", this.endDrag.bindAsEventListener(this));
     Event.observe(document, "mousemove", this.update.bindAsEventListener(this));
+    Event.observe(document, "keypress", this.keyPress.bindAsEventListener(this));
   },
   currentLeft: function() {
     return parseInt(this.element.style.left || '0');
@@ -290,31 +286,43 @@ Draggable.prototype = {
       Event.stop(event);
     }
   },
-  endDrag: function(event) {
-    if(this.active && this.dragging) {
-      this.active = false;
-      this.dragging = false;
+  finishDrag: function(event, success) {
+    this.active = false;
+    this.dragging = false;
+    
+    if(success) Droppables.fire(event, this.element);
+    Draggables.notify('onEnd', this);
+    
+    var revert = this.options.revert;
+    if(revert && typeof revert == 'function') revert = revert(this.element);
       
-      Droppables.fire(event, this.element);
-      Draggables.notify('onEnd', this);
+    if(revert && this.options.reverteffect) {
+      this.options.reverteffect(this.element, 
+      this.currentTop()-this.originalTop,
+      this.currentLeft()-this.originalLeft);
+    } else {
+      this.originalLeft = this.currentLeft();
+      this.originalTop  = this.currentTop();
+    }
+    
+    this.element.style.zIndex = this.originalZ;
       
-      var revert = this.options.revert;
-      if(revert && typeof revert == 'function') revert = revert(this.element);
+    if(this.options.endeffect) 
+      this.options.endeffect(this.element);
       
-      if(revert && this.options.reverteffect) {
-        this.options.reverteffect(this.element, 
-          this.currentTop()-this.originalTop,
-          this.currentLeft()-this.originalLeft);
-      } else {
-        this.originalLeft = this.currentLeft();
-        this.originalTop  = this.currentTop();
+    Droppables.reset();
+  },
+  keyPress: function(event) {
+    if(this.active) {
+      if(event.keyCode==Event.KEY_ESC) {
+        this.finishDrag(event, false);
+        Event.stop(event);
       }
-      this.element.style.zIndex = this.originalZ;
-     
-      if(this.options.endeffect) 
-        this.options.endeffect(this.element);
-      
-      Droppables.reset();
+    }
+  },
+  endDrag: function(event) {
+    if(this.active && this.dragging) {
+      this.finishDrag(event, true);
       Event.stop(event);
     }
     this.active = false;
diff --git a/railties/html/javascripts/effects.js b/railties/html/javascripts/effects.js
index 73accbd139..2b27052cda 100644
--- a/railties/html/javascripts/effects.js
+++ b/railties/html/javascripts/effects.js
@@ -46,15 +46,33 @@ Effect.Transitions.wobble = function(pos) {
   return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
 }
 Effect.Transitions.pulse = function(pos) {
-   return (Math.floor(pos*10) % 2 == 0 ? 
+  return (Math.floor(pos*10) % 2 == 0 ? 
     (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
 }
-
 Effect.Transitions.none = function(pos) {
-    return 0;
+  return 0;
 }
 Effect.Transitions.full = function(pos) {
-    return 1;
+  return 1;
+}
+
+/* ------------- element ext -------------- */
+
+Element.makePositioned = function(element) {
+  element = $(element);
+  if(element.style.position == "")
+    element.style.position = "relative";
+}
+
+Element.makeClipping = function(element) {
+  element = $(element);
+  element._overflow = element.style.overflow || 'visible';
+  if(element._overflow!='hidden') element.style.overflow = 'hidden';
+}
+
+Element.undoClipping = function(element) {
+  element = $(element);
+  if(element._overflow!='hidden') element.style.overflow = element._overflow;
 }
 
 /* ------------- core effects ------------- */
@@ -73,22 +91,22 @@ Effect.Base.prototype = {
   },
   start: function(options) {
     this.setOptions(options || {});
-    this.currentFrame    = 0;
-    this.startOn  = new Date().getTime();
-    this.finishOn = this.startOn + (this.options.duration*1000);
+    this.currentFrame = 0;
+    this.startOn      = new Date().getTime();
+    this.finishOn     = this.startOn + (this.options.duration*1000);
     if(this.options.beforeStart) this.options.beforeStart(this);
     if(!this.options.sync) this.loop();  
   },
   loop: function() {
-    timePos = new Date().getTime();
+    var timePos = new Date().getTime();
     if(timePos >= this.finishOn) {
       this.render(this.options.to);
       if(this.finish) this.finish(); 
       if(this.options.afterFinish) this.options.afterFinish(this);
       return;  
     }
-    pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
-    frame = Math.round(pos * this.options.fps * this.options.duration);
+    var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
+    var frame = Math.round(pos * this.options.fps * this.options.duration);
     if(frame > this.currentFrame) {
       this.render(pos);
       this.currentFrame = frame;
@@ -97,7 +115,7 @@ Effect.Base.prototype = {
   },
   render: function(pos) {
     if(this.options.transition) pos = this.options.transition(pos);
-    pos  = pos * (this.options.to-this.options.from);
+    pos *= (this.options.to-this.options.from);
     pos += this.options.from; 
     if(this.options.beforeUpdate) this.options.beforeUpdate(this);
     if(this.update) this.update(pos);
@@ -112,15 +130,15 @@ Effect.Parallel = Class.create();
   Effect.Parallel.prototype = (new Effect.Base()).extend({
     initialize: function(effects) {
       this.effects = effects || [];
-       this.start(arguments[1]);
+      this.start(arguments[1]);
     },
     update: function(position) {
-       for (var i = 0; i < this.effects.length; i++)
+      for (var i = 0; i < this.effects.length; i++)
         this.effects[i].render(position);  
     },
     finish: function(position) {
-       for (var i = 0; i < this.effects.length; i++)
-          if(this.effects[i].finish) this.effects[i].finish(position);
+      for (var i = 0; i < this.effects.length; i++)
+        if(this.effects[i].finish) this.effects[i].finish(position);
     }
   });
 
@@ -155,8 +173,7 @@ Effect.MoveBy = Class.create();
      this.originalLeft = parseFloat(this.element.style.left || '0');
      this.toTop        = toTop;
      this.toLeft       = toLeft;
-     if(this.element.style.position == "")
-       this.element.style.position = "relative";
+     Element.makePositioned(this.element);
      this.start(arguments[3]);
    },
    update: function(position) {
@@ -184,9 +201,9 @@ Effect.Scale.prototype = (new Effect.Base()).extend({
     }.extend(arguments[2] || {});
     this.originalTop    = this.element.offsetTop;
     this.originalLeft   = this.element.offsetLeft;
-    if (this.element.style.fontSize=="") this.sizeEm = 1.0;
-    if (this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0)
-       this.sizeEm      = parseFloat(this.element.style.fontSize);
+    if(this.element.style.fontSize=="") this.sizeEm = 1.0;
+    if(this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0)
+      this.sizeEm      = parseFloat(this.element.style.fontSize);
     this.factor = (percent/100.0) - (options.scaleFrom/100.0);
     if(options.scaleMode=='box') {
       this.originalHeight = this.element.clientHeight;
@@ -207,8 +224,8 @@ Effect.Scale.prototype = (new Effect.Base()).extend({
     if(this.options.scaleContent && this.sizeEm) 
       this.element.style.fontSize = this.sizeEm*currentScale + "em";
     this.setDimensions(
-     this.originalWidth * currentScale, 
-     this.originalHeight * currentScale);
+      this.originalWidth * currentScale, 
+      this.originalHeight * currentScale);
   },
 
   setDimensions: function(width, height) {
@@ -269,6 +286,27 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
   }
 });
 
+Effect.ScrollTo = Class.create();
+Effect.ScrollTo.prototype = (new Effect.Base()).extend({
+  initialize: function(element) {
+    this.element = $(element);
+    Position.prepare();
+    var offsets = Position.cumulativeOffset(this.element);
+    var max = window.innerHeight ? 
+      window.height - window.innerHeight :
+      document.body.scrollHeight - 
+        (document.documentElement.clientHeight ? 
+          document.documentElement.clientHeight : document.body.clientHeight);
+    this.scrollStart = Position.deltaY;
+    this.delta  = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
+    this.start(arguments[1] || {});
+  },
+  update: function(position) {
+    Position.prepare();
+    window.scrollTo(Position.deltaX, 
+      this.scrollStart + (position*this.delta));
+  }
+});
 
 /* ------------- prepackaged effects ------------- */
 
@@ -310,15 +348,14 @@ Effect.Puff = function(element) {
 }
 
 Effect.BlindUp = function(element) {
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.overflow = 'hidden';
+  Element.makeClipping(element);
   new Effect.Scale(element, 0, 
     { scaleContent: false, 
       scaleX: false, 
       afterFinish: function(effect) 
         { 
           Element.hide(effect.element);
-          effect.element.style.overflow = effect.element._overflow;
+          Element.undoClipping(effect.element);
         } 
     }.extend(arguments[1] || {})
   );
@@ -326,8 +363,7 @@ Effect.BlindUp = function(element) {
 
 Effect.BlindDown = function(element) {
   $(element).style.height   = '0px';
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.overflow = 'hidden';
+  Element.makeClipping(element);
   Element.show(element);
   new Effect.Scale(element, 100, 
     { scaleContent: false, 
@@ -335,7 +371,7 @@ Effect.BlindDown = function(element) {
       scaleMode: 'contents',
       scaleFrom: 0,
       afterFinish: function(effect) {
-        effect.element.style.overflow = effect.element._overflow;
+        Element.undoClipping(effect.element);
       }
     }.extend(arguments[1] || {})
   );
@@ -346,7 +382,7 @@ Effect.SwitchOff = function(element) {
     { duration: 0.4,
      transition: Effect.Transitions.flicker,
      afterFinish: function(effect)
-      {  effect.element.style.overflow = 'hidden';
+      { effect.element.style.overflow = 'hidden';
         new Effect.Scale(effect.element, 1, 
          { duration: 0.3, scaleFromCenter: true,
           scaleX: false, scaleContent: false,
@@ -356,7 +392,7 @@ Effect.SwitchOff = function(element) {
           afterFinish: function(effect) { Element.hide(effect.element); }
          } )
       }
-    } )
+    } );
 }
 
 Effect.DropOut = function(element) {
@@ -386,10 +422,11 @@ Effect.Shake = function(element) {
 }
 
 Effect.SlideDown = function(element) {
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.height   = '0px';
-  $(element).style.overflow = 'hidden';
-  $(element).firstChild.style.position = 'relative';
+  element = $(element);
+  element.style.height   = '0px';
+  Element.makeClipping(element);
+  Element.cleanWhitespace(element);
+  Element.makePositioned(element.firstChild);
   Element.show(element);
   new Effect.Scale(element, 100, 
    { scaleContent: false, 
@@ -400,15 +437,16 @@ Effect.SlideDown = function(element) {
       { effect.element.firstChild.style.bottom = 
           (effect.originalHeight - effect.element.clientHeight) + 'px'; },
     afterFinish: function(effect) 
-      {  effect.element.style.overflow = effect.element._overflow; }
+      {  Element.undoClipping(effect.element); }
     }.extend(arguments[1] || {})
   );
 }
   
 Effect.SlideUp = function(element) {
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.overflow = 'hidden';
-  $(element).firstChild.style.position = 'relative';
+  element = $(element);
+  Element.makeClipping(element);
+  Element.cleanWhitespace(element);
+  Element.makePositioned(element.firstChild);
   Element.show(element);
   new Effect.Scale(element, 0, 
    { scaleContent: false, 
@@ -419,7 +457,7 @@ Effect.SlideUp = function(element) {
     afterFinish: function(effect)
       { 
         Element.hide(effect.element);
-        effect.element.style.overflow = effect.element._overflow; 
+        Element.undoClipping(effect.element);
       }
    }.extend(arguments[1] || {})
   );