From 94209e2fb7f244be5da2f208c2e5dacd2fede47e Mon Sep 17 00:00:00 2001 From: David Heinemeier Hansson Date: Thu, 7 Jul 2005 14:18:16 +0000 Subject: 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 --- .../action_view/helpers/javascripts/dragdrop.js | 70 +++++++------ .../lib/action_view/helpers/javascripts/effects.js | 116 ++++++++++++++------- 2 files changed, 116 insertions(+), 70 deletions(-) (limited to 'actionpack/lib/action_view/helpers') diff --git a/actionpack/lib/action_view/helpers/javascripts/dragdrop.js b/actionpack/lib/action_view/helpers/javascripts/dragdrop.js index 20432a3c88..eb6511095f 100644 --- a/actionpack/lib/action_view/helpers/javascripts/dragdrop.js +++ b/actionpack/lib/action_view/helpers/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/actionpack/lib/action_view/helpers/javascripts/effects.js b/actionpack/lib/action_view/helpers/javascripts/effects.js index 73accbd139..2b27052cda 100644 --- a/actionpack/lib/action_view/helpers/javascripts/effects.js +++ b/actionpack/lib/action_view/helpers/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] || {}) ); -- cgit v1.2.3