mirror of
https://github.com/rails/rails.git
synced 2022-11-09 12:12:34 -05:00
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
This commit is contained in:
David Heinemeier Hansson
parent
75157bbf64
commit
94209e2fb7
5 changed files with 238 additions and 144 deletions
|
|
@ -1,5 +1,7 @@
|
|||
*SVN*
|
||||
|
||||
* 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]
|
||||
|
||||
* Fixed that named routes didn't use the default values for action and possible other parameters #1534 [Nicholas Seckar]
|
||||
|
||||
* Fixed JavascriptHelper#visual_effect to use camelize such that :blind_up will work #1639 [pelletierm@eastmedia.net]
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
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);
|
||||
|
||||
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;
|
||||
|
||||
if(this.options.endeffect)
|
||||
this.options.endeffect(this.element);
|
||||
|
||||
Droppables.reset();
|
||||
},
|
||||
keyPress: function(event) {
|
||||
if(this.active) {
|
||||
if(event.keyCode==Event.KEY_ESC) {
|
||||
this.finishDrag(event, false);
|
||||
Event.stop(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
endDrag: function(event) {
|
||||
if(this.active && this.dragging) {
|
||||
this.active = false;
|
||||
this.dragging = false;
|
||||
|
||||
Droppables.fire(event, this.element);
|
||||
Draggables.notify('onEnd', this);
|
||||
|
||||
var revert = this.options.revert;
|
||||
if(revert && typeof revert == 'function') revert = revert(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();
|
||||
}
|
||||
this.element.style.zIndex = this.originalZ;
|
||||
|
||||
if(this.options.endeffect)
|
||||
this.options.endeffect(this.element);
|
||||
|
||||
Droppables.reset();
|
||||
this.finishDrag(event, true);
|
||||
Event.stop(event);
|
||||
}
|
||||
this.active = false;
|
||||
|
|
|
|||
|
|
@ -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] || {})
|
||||
);
|
||||
|
|
|
|||
74
railties/html/javascripts/dragdrop.js
vendored
74
railties/html/javascripts/dragdrop.js
vendored
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
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);
|
||||
|
||||
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;
|
||||
|
||||
if(this.options.endeffect)
|
||||
this.options.endeffect(this.element);
|
||||
|
||||
Droppables.reset();
|
||||
},
|
||||
keyPress: function(event) {
|
||||
if(this.active) {
|
||||
if(event.keyCode==Event.KEY_ESC) {
|
||||
this.finishDrag(event, false);
|
||||
Event.stop(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
endDrag: function(event) {
|
||||
if(this.active && this.dragging) {
|
||||
this.active = false;
|
||||
this.dragging = false;
|
||||
|
||||
Droppables.fire(event, this.element);
|
||||
Draggables.notify('onEnd', this);
|
||||
|
||||
var revert = this.options.revert;
|
||||
if(revert && typeof revert == 'function') revert = revert(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();
|
||||
}
|
||||
this.element.style.zIndex = this.originalZ;
|
||||
|
||||
if(this.options.endeffect)
|
||||
this.options.endeffect(this.element);
|
||||
|
||||
Droppables.reset();
|
||||
this.finishDrag(event, true);
|
||||
Event.stop(event);
|
||||
}
|
||||
this.active = false;
|
||||
|
|
|
|||
116
railties/html/javascripts/effects.js
vendored
116
railties/html/javascripts/effects.js
vendored
|
|
@ -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] || {})
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue