Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added even more goodies to script.aculo.us #1677 [Thomas Fuchs]

git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@1783 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
  • Loading branch information...
commit 165f82d18026dbbcf94695128d32fadef916af5a 1 parent 14f06c2
@dhh dhh authored
View
7 actionpack/CHANGELOG
@@ -1,5 +1,12 @@
*SVN*
+* Added even more goodies to script.aculo.us #1677 [Thomas Fuchs]
+ * Added capability to remove draggables/droppables and redeclare sortables in dragdrop.js (this makes it possible to call sortable_element on the same element more than once, e.g. in AJAX returns that modify the sortable element. all current sortable 'stuff' on the element will be discarded and the sortable will be rebuilt)
+ * Always reset background color on Effect.Highlight; this make change backwards-compatibility, to be sure include style="background-color:(target-color)" on your elements or else elements will fall back to their CSS rules (which is a good thing in most circumstances)
+ * Removed circular references from element to prevent memory leaks (still not completely gone in IE)
+ * Changes to class extension in effects.js
+ * Make Effect.Highlight restore any previously set background color when finishing (makes effect work with CSS classes that set a background color)
+
* Improved error message for DoubleRenderError
* Fixed routing to allow for testing of *path components #1650 [Nicholas Seckar]
View
122 actionpack/lib/action_view/helpers/javascripts/dragdrop.js
@@ -112,6 +112,12 @@ Element.Class = {
var Droppables = {
drops: false,
+ remove: function(element) {
+ for(var i = 0; i < this.drops.length; i++)
+ if(this.drops[i].element == element)
+ this.drops.splice(i,1);
+ },
+
add: function(element) {
var element = $(element);
var options = {
@@ -134,43 +140,42 @@ var Droppables = {
options._containers.length-1;
}
- if(element.style.position=='') //fix IE
- element.style.position = 'relative';
+ Element.makePositioned(element); // fix IE
- // activate the droppable
- element.droppable = options;
+ options.element = element;
+ // activate the droppable
if(!this.drops) this.drops = [];
- this.drops.push(element);
+ this.drops.push(options);
},
is_contained: function(element, drop) {
- var containers = drop.droppable._containers;
+ var containers = drop._containers;
var parentNode = element.parentNode;
- var i = drop.droppable._containers_length;
+ var i = drop._containers_length;
do { if(parentNode==containers[i]) return true; } while (i--);
return false;
},
is_affected: function(pX, pY, element, drop) {
return (
- (drop!=element) &&
- ((!drop.droppable._containers) ||
+ (drop.element!=element) &&
+ ((!drop._containers) ||
this.is_contained(element, drop)) &&
- ((!drop.droppable.accept) ||
- (Element.Class.has_any(element, drop.droppable.accept))) &&
- Position.within(drop, pX, pY) );
+ ((!drop.accept) ||
+ (Element.Class.has_any(element, drop.accept))) &&
+ Position.within(drop.element, pX, pY) );
},
deactivate: function(drop) {
- Element.Class.remove(drop, drop.droppable.hoverclass);
+ Element.Class.remove(drop.element, drop.hoverclass);
this.last_active = null;
},
activate: function(drop) {
if(this.last_active) this.deactivate(this.last_active);
- if(drop.droppable.hoverclass) {
- Element.Class.add(drop, drop.droppable.hoverclass);
+ if(drop.hoverclass) {
+ Element.Class.add(drop.element, drop.hoverclass);
this.last_active = drop;
}
},
@@ -184,10 +189,9 @@ var Droppables = {
var i = this.drops.length-1; do {
var drop = this.drops[i];
if(this.is_affected(pX, pY, element, drop)) {
- if(drop.droppable.onHover)
- drop.droppable.onHover(
- element, drop, Position.overlap(drop.droppable.overlap, drop));
- if(drop.droppable.greedy) {
+ if(drop.onHover)
+ drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
+ if(drop.greedy) {
this.activate(drop);
return;
}
@@ -200,8 +204,8 @@ var Droppables = {
Position.prepare();
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);
+ if (this.last_active.onDrop)
+ this.last_active.onDrop(element, this.last_active);
},
@@ -216,6 +220,11 @@ Draggables = {
addObserver: function(observer) {
this.observers.push(observer);
},
+ removeObserver: function(observer) {
+ for(var i = 0; i < this.observers.length; i++)
+ if(this.observers[i] = observer)
+ this.observers.splice(i,1);
+ },
notify: function(eventName, draggable) { // 'onStart', 'onEnd'
for(var i = 0; i < this.observers.length; i++)
this.observers[i][eventName](draggable);
@@ -245,9 +254,7 @@ Draggable.prototype = {
this.element = $(element);
this.handle = options.handle ? $(options.handle) : this.element;
- // fix IE
- if(!this.element.style.position)
- this.element.style.position = 'relative';
+ Element.makePositioned(this.element); // fix IE
this.offsetX = 0;
this.offsetY = 0;
@@ -262,10 +269,21 @@ Draggable.prototype = {
this.active = false;
this.dragging = false;
- 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));
+ this.eventMouseDown = this.startDrag.bindAsEventListener(this);
+ this.eventMouseUp = this.endDrag.bindAsEventListener(this);
+ this.eventMouseMove = this.update.bindAsEventListener(this);
+ this.eventKeypress = this.keyPress.bindAsEventListener(this);
+
+ Event.observe(this.handle, "mousedown", this.eventMouseDown);
+ Event.observe(document, "mouseup", this.eventMouseUp);
+ Event.observe(document, "mousemove", this.eventMouseMove);
+ Event.observe(document, "keypress", this.eventKeypress);
+ },
+ destroy: function() {
+ Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
+ Event.stopObserving(document, "mouseup", this.eventMouseUp);
+ Event.stopObserving(document, "mousemove", this.eventMouseMove);
+ Event.stopObserving(document, "keypress", this.eventKeypress);
},
currentLeft: function() {
return parseInt(this.element.style.left || '0');
@@ -380,9 +398,32 @@ SortableObserver.prototype = {
}
Sortable = {
+ sortables: new Array(),
+ options: function(element){
+ var element = $(element);
+ for(var i=0;i<this.sortables.length;i++)
+ if(this.sortables[i].element == element)
+ return this.sortables[i];
+ return null;
+ },
+ destroy: function(element){
+ var element = $(element);
+ for(var i=0;i<this.sortables.length;i++) {
+ if(this.sortables[i].element == element) {
+ var s = this.sortables[i];
+ Draggables.removeObserver(s.observer);
+ for(var j=0;j<s.droppables.length;j++)
+ Droppables.remove(s.droppables[j]);
+ for(var j=0;j<s.draggables.length;j++)
+ s.draggables[j].destroy();
+ this.sortables.splice(i,1);
+ }
+ }
+ },
create: function(element) {
var element = $(element);
var options = {
+ element: element,
tag: 'li', // assumes li children, override with tag: 'tagname'
overlap: 'vertical', // one of 'vertical', 'horizontal'
constraint: 'vertical', // one of 'vertical', 'horizontal', false
@@ -393,7 +434,9 @@ Sortable = {
onChange: function() {},
onUpdate: function() {}
}.extend(arguments[1] || {});
- element.sortable = options;
+
+ // clear any old sortable with same element
+ this.destroy(element);
// build options for the draggables
var options_for_draggable = {
@@ -443,8 +486,8 @@ Sortable = {
// fix for gecko engine
Element.cleanWhitespace(element);
- // for onupdate
- Draggables.addObserver(new SortableObserver(element, options.onUpdate));
+ options.draggables = [];
+ options.droppables = [];
// make it so
var elements = element.childNodes;
@@ -456,16 +499,27 @@ Sortable = {
var handle = options.handle ?
Element.Class.childrenWith(elements[i], options.handle)[0] : elements[i];
- new Draggable(elements[i], options_for_draggable.extend({ handle: handle }));
+ options.draggables.push(new Draggable(elements[i], options_for_draggable.extend({ handle: handle })));
+
Droppables.add(elements[i], options_for_droppable);
+ options.droppables.push(elements[i]);
+
}
+ // keep reference
+ this.sortables.push(options);
+
+ // for onupdate
+ options.observer = new SortableObserver(element, options.onUpdate);
+ Draggables.addObserver(options.observer);
+
},
serialize: function(element) {
var element = $(element);
+ var sortableOptions = this.options(element);
var options = {
- tag: element.sortable.tag,
- only: element.sortable.only,
+ tag: sortableOptions.tag,
+ only: sortableOptions.only,
name: element.id
}.extend(arguments[1] || {});
View
86 actionpack/lib/action_view/helpers/javascripts/effects.js
@@ -127,26 +127,26 @@ Effect.Base.prototype = {
}
Effect.Parallel = Class.create();
- Effect.Parallel.prototype = (new Effect.Base()).extend({
- initialize: function(effects) {
- this.effects = effects || [];
- this.start(arguments[1]);
- },
- update: function(position) {
- 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);
- }
- });
+Effect.Parallel.prototype.extend(Effect.Base.prototype).extend({
+ initialize: function(effects) {
+ this.effects = effects || [];
+ this.start(arguments[1]);
+ },
+ update: function(position) {
+ 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);
+ }
+});
// Internet Explorer caveat: works only on elements the have
// a 'layout', meaning having a given width or height.
// There is no way to safely set this automatically.
Effect.Opacity = Class.create();
-Effect.Opacity.prototype = (new Effect.Base()).extend({
+Effect.Opacity.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element) {
this.element = $(element);
options = {
@@ -166,29 +166,29 @@ Effect.Opacity.prototype = (new Effect.Base()).extend({
});
Effect.MoveBy = Class.create();
- Effect.MoveBy.prototype = (new Effect.Base()).extend({
- initialize: function(element, toTop, toLeft) {
- this.element = $(element);
- this.originalTop = parseFloat(this.element.style.top || '0');
- this.originalLeft = parseFloat(this.element.style.left || '0');
- this.toTop = toTop;
- this.toLeft = toLeft;
- Element.makePositioned(this.element);
- this.start(arguments[3]);
- },
- update: function(position) {
- topd = this.toTop * position + this.originalTop;
- leftd = this.toLeft * position + this.originalLeft;
- this.setPosition(topd, leftd);
- },
- setPosition: function(topd, leftd) {
- this.element.style.top = topd + "px";
- this.element.style.left = leftd + "px";
- }
+Effect.MoveBy.prototype.extend(Effect.Base.prototype).extend({
+ initialize: function(element, toTop, toLeft) {
+ this.element = $(element);
+ this.originalTop = parseFloat(this.element.style.top || '0');
+ this.originalLeft = parseFloat(this.element.style.left || '0');
+ this.toTop = toTop;
+ this.toLeft = toLeft;
+ Element.makePositioned(this.element);
+ this.start(arguments[3]);
+ },
+ update: function(position) {
+ topd = this.toTop * position + this.originalTop;
+ leftd = this.toLeft * position + this.originalLeft;
+ this.setPosition(topd, leftd);
+ },
+ setPosition: function(topd, leftd) {
+ this.element.style.top = topd + "px";
+ this.element.style.left = leftd + "px";
+ }
});
Effect.Scale = Class.create();
-Effect.Scale.prototype = (new Effect.Base()).extend({
+Effect.Scale.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element, percent) {
this.element = $(element)
options = {
@@ -246,7 +246,7 @@ Effect.Scale.prototype = (new Effect.Base()).extend({
});
Effect.Highlight = Class.create();
-Effect.Highlight.prototype = (new Effect.Base()).extend({
+Effect.Highlight.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element) {
this.element = $(element);
@@ -260,8 +260,9 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
var i=0; do { endcolor += parseInt(cols[i]).toColorPart() } while (++i<3); }
var options = {
- startcolor: "#ffff99",
- endcolor: endcolor
+ startcolor: "#ffff99",
+ endcolor: endcolor,
+ restorecolor: current
}.extend(arguments[1] || {});
// init color calculations
@@ -283,11 +284,14 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
Math.round(this.colors_base[2]+(this.colors_delta[2]*position)) ];
this.element.style.backgroundColor = "#" +
colors[0].toColorPart() + colors[1].toColorPart() + colors[2].toColorPart();
+ },
+ finish: function() {
+ this.element.style.backgroundColor = this.options.restorecolor;
}
});
Effect.ScrollTo = Class.create();
-Effect.ScrollTo.prototype = (new Effect.Base()).extend({
+Effect.ScrollTo.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element) {
this.element = $(element);
Position.prepare();
@@ -310,7 +314,7 @@ Effect.ScrollTo.prototype = (new Effect.Base()).extend({
/* ------------- prepackaged effects ------------- */
-Effect.Fade = function(element) {
+Effect.Fade = function(element) {
options = {
from: 1.0,
to: 0.0,
@@ -321,7 +325,7 @@ Effect.Fade = function(element) {
new Effect.Opacity(element,options);
}
-Effect.Appear = function(element) {
+Effect.Appear = function(element) {
options = {
from: 0.0,
to: 1.0,
View
122 railties/html/javascripts/dragdrop.js
@@ -112,6 +112,12 @@ Element.Class = {
var Droppables = {
drops: false,
+ remove: function(element) {
+ for(var i = 0; i < this.drops.length; i++)
+ if(this.drops[i].element == element)
+ this.drops.splice(i,1);
+ },
+
add: function(element) {
var element = $(element);
var options = {
@@ -134,43 +140,42 @@ var Droppables = {
options._containers.length-1;
}
- if(element.style.position=='') //fix IE
- element.style.position = 'relative';
+ Element.makePositioned(element); // fix IE
- // activate the droppable
- element.droppable = options;
+ options.element = element;
+ // activate the droppable
if(!this.drops) this.drops = [];
- this.drops.push(element);
+ this.drops.push(options);
},
is_contained: function(element, drop) {
- var containers = drop.droppable._containers;
+ var containers = drop._containers;
var parentNode = element.parentNode;
- var i = drop.droppable._containers_length;
+ var i = drop._containers_length;
do { if(parentNode==containers[i]) return true; } while (i--);
return false;
},
is_affected: function(pX, pY, element, drop) {
return (
- (drop!=element) &&
- ((!drop.droppable._containers) ||
+ (drop.element!=element) &&
+ ((!drop._containers) ||
this.is_contained(element, drop)) &&
- ((!drop.droppable.accept) ||
- (Element.Class.has_any(element, drop.droppable.accept))) &&
- Position.within(drop, pX, pY) );
+ ((!drop.accept) ||
+ (Element.Class.has_any(element, drop.accept))) &&
+ Position.within(drop.element, pX, pY) );
},
deactivate: function(drop) {
- Element.Class.remove(drop, drop.droppable.hoverclass);
+ Element.Class.remove(drop.element, drop.hoverclass);
this.last_active = null;
},
activate: function(drop) {
if(this.last_active) this.deactivate(this.last_active);
- if(drop.droppable.hoverclass) {
- Element.Class.add(drop, drop.droppable.hoverclass);
+ if(drop.hoverclass) {
+ Element.Class.add(drop.element, drop.hoverclass);
this.last_active = drop;
}
},
@@ -184,10 +189,9 @@ var Droppables = {
var i = this.drops.length-1; do {
var drop = this.drops[i];
if(this.is_affected(pX, pY, element, drop)) {
- if(drop.droppable.onHover)
- drop.droppable.onHover(
- element, drop, Position.overlap(drop.droppable.overlap, drop));
- if(drop.droppable.greedy) {
+ if(drop.onHover)
+ drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
+ if(drop.greedy) {
this.activate(drop);
return;
}
@@ -200,8 +204,8 @@ var Droppables = {
Position.prepare();
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);
+ if (this.last_active.onDrop)
+ this.last_active.onDrop(element, this.last_active);
},
@@ -216,6 +220,11 @@ Draggables = {
addObserver: function(observer) {
this.observers.push(observer);
},
+ removeObserver: function(observer) {
+ for(var i = 0; i < this.observers.length; i++)
+ if(this.observers[i] = observer)
+ this.observers.splice(i,1);
+ },
notify: function(eventName, draggable) { // 'onStart', 'onEnd'
for(var i = 0; i < this.observers.length; i++)
this.observers[i][eventName](draggable);
@@ -245,9 +254,7 @@ Draggable.prototype = {
this.element = $(element);
this.handle = options.handle ? $(options.handle) : this.element;
- // fix IE
- if(!this.element.style.position)
- this.element.style.position = 'relative';
+ Element.makePositioned(this.element); // fix IE
this.offsetX = 0;
this.offsetY = 0;
@@ -262,10 +269,21 @@ Draggable.prototype = {
this.active = false;
this.dragging = false;
- 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));
+ this.eventMouseDown = this.startDrag.bindAsEventListener(this);
+ this.eventMouseUp = this.endDrag.bindAsEventListener(this);
+ this.eventMouseMove = this.update.bindAsEventListener(this);
+ this.eventKeypress = this.keyPress.bindAsEventListener(this);
+
+ Event.observe(this.handle, "mousedown", this.eventMouseDown);
+ Event.observe(document, "mouseup", this.eventMouseUp);
+ Event.observe(document, "mousemove", this.eventMouseMove);
+ Event.observe(document, "keypress", this.eventKeypress);
+ },
+ destroy: function() {
+ Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
+ Event.stopObserving(document, "mouseup", this.eventMouseUp);
+ Event.stopObserving(document, "mousemove", this.eventMouseMove);
+ Event.stopObserving(document, "keypress", this.eventKeypress);
},
currentLeft: function() {
return parseInt(this.element.style.left || '0');
@@ -380,9 +398,32 @@ SortableObserver.prototype = {
}
Sortable = {
+ sortables: new Array(),
+ options: function(element){
+ var element = $(element);
+ for(var i=0;i<this.sortables.length;i++)
+ if(this.sortables[i].element == element)
+ return this.sortables[i];
+ return null;
+ },
+ destroy: function(element){
+ var element = $(element);
+ for(var i=0;i<this.sortables.length;i++) {
+ if(this.sortables[i].element == element) {
+ var s = this.sortables[i];
+ Draggables.removeObserver(s.observer);
+ for(var j=0;j<s.droppables.length;j++)
+ Droppables.remove(s.droppables[j]);
+ for(var j=0;j<s.draggables.length;j++)
+ s.draggables[j].destroy();
+ this.sortables.splice(i,1);
+ }
+ }
+ },
create: function(element) {
var element = $(element);
var options = {
+ element: element,
tag: 'li', // assumes li children, override with tag: 'tagname'
overlap: 'vertical', // one of 'vertical', 'horizontal'
constraint: 'vertical', // one of 'vertical', 'horizontal', false
@@ -393,7 +434,9 @@ Sortable = {
onChange: function() {},
onUpdate: function() {}
}.extend(arguments[1] || {});
- element.sortable = options;
+
+ // clear any old sortable with same element
+ this.destroy(element);
// build options for the draggables
var options_for_draggable = {
@@ -443,8 +486,8 @@ Sortable = {
// fix for gecko engine
Element.cleanWhitespace(element);
- // for onupdate
- Draggables.addObserver(new SortableObserver(element, options.onUpdate));
+ options.draggables = [];
+ options.droppables = [];
// make it so
var elements = element.childNodes;
@@ -456,16 +499,27 @@ Sortable = {
var handle = options.handle ?
Element.Class.childrenWith(elements[i], options.handle)[0] : elements[i];
- new Draggable(elements[i], options_for_draggable.extend({ handle: handle }));
+ options.draggables.push(new Draggable(elements[i], options_for_draggable.extend({ handle: handle })));
+
Droppables.add(elements[i], options_for_droppable);
+ options.droppables.push(elements[i]);
+
}
+ // keep reference
+ this.sortables.push(options);
+
+ // for onupdate
+ options.observer = new SortableObserver(element, options.onUpdate);
+ Draggables.addObserver(options.observer);
+
},
serialize: function(element) {
var element = $(element);
+ var sortableOptions = this.options(element);
var options = {
- tag: element.sortable.tag,
- only: element.sortable.only,
+ tag: sortableOptions.tag,
+ only: sortableOptions.only,
name: element.id
}.extend(arguments[1] || {});
View
86 railties/html/javascripts/effects.js
@@ -127,26 +127,26 @@ Effect.Base.prototype = {
}
Effect.Parallel = Class.create();
- Effect.Parallel.prototype = (new Effect.Base()).extend({
- initialize: function(effects) {
- this.effects = effects || [];
- this.start(arguments[1]);
- },
- update: function(position) {
- 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);
- }
- });
+Effect.Parallel.prototype.extend(Effect.Base.prototype).extend({
+ initialize: function(effects) {
+ this.effects = effects || [];
+ this.start(arguments[1]);
+ },
+ update: function(position) {
+ 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);
+ }
+});
// Internet Explorer caveat: works only on elements the have
// a 'layout', meaning having a given width or height.
// There is no way to safely set this automatically.
Effect.Opacity = Class.create();
-Effect.Opacity.prototype = (new Effect.Base()).extend({
+Effect.Opacity.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element) {
this.element = $(element);
options = {
@@ -166,29 +166,29 @@ Effect.Opacity.prototype = (new Effect.Base()).extend({
});
Effect.MoveBy = Class.create();
- Effect.MoveBy.prototype = (new Effect.Base()).extend({
- initialize: function(element, toTop, toLeft) {
- this.element = $(element);
- this.originalTop = parseFloat(this.element.style.top || '0');
- this.originalLeft = parseFloat(this.element.style.left || '0');
- this.toTop = toTop;
- this.toLeft = toLeft;
- Element.makePositioned(this.element);
- this.start(arguments[3]);
- },
- update: function(position) {
- topd = this.toTop * position + this.originalTop;
- leftd = this.toLeft * position + this.originalLeft;
- this.setPosition(topd, leftd);
- },
- setPosition: function(topd, leftd) {
- this.element.style.top = topd + "px";
- this.element.style.left = leftd + "px";
- }
+Effect.MoveBy.prototype.extend(Effect.Base.prototype).extend({
+ initialize: function(element, toTop, toLeft) {
+ this.element = $(element);
+ this.originalTop = parseFloat(this.element.style.top || '0');
+ this.originalLeft = parseFloat(this.element.style.left || '0');
+ this.toTop = toTop;
+ this.toLeft = toLeft;
+ Element.makePositioned(this.element);
+ this.start(arguments[3]);
+ },
+ update: function(position) {
+ topd = this.toTop * position + this.originalTop;
+ leftd = this.toLeft * position + this.originalLeft;
+ this.setPosition(topd, leftd);
+ },
+ setPosition: function(topd, leftd) {
+ this.element.style.top = topd + "px";
+ this.element.style.left = leftd + "px";
+ }
});
Effect.Scale = Class.create();
-Effect.Scale.prototype = (new Effect.Base()).extend({
+Effect.Scale.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element, percent) {
this.element = $(element)
options = {
@@ -246,7 +246,7 @@ Effect.Scale.prototype = (new Effect.Base()).extend({
});
Effect.Highlight = Class.create();
-Effect.Highlight.prototype = (new Effect.Base()).extend({
+Effect.Highlight.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element) {
this.element = $(element);
@@ -260,8 +260,9 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
var i=0; do { endcolor += parseInt(cols[i]).toColorPart() } while (++i<3); }
var options = {
- startcolor: "#ffff99",
- endcolor: endcolor
+ startcolor: "#ffff99",
+ endcolor: endcolor,
+ restorecolor: current
}.extend(arguments[1] || {});
// init color calculations
@@ -283,11 +284,14 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
Math.round(this.colors_base[2]+(this.colors_delta[2]*position)) ];
this.element.style.backgroundColor = "#" +
colors[0].toColorPart() + colors[1].toColorPart() + colors[2].toColorPart();
+ },
+ finish: function() {
+ this.element.style.backgroundColor = this.options.restorecolor;
}
});
Effect.ScrollTo = Class.create();
-Effect.ScrollTo.prototype = (new Effect.Base()).extend({
+Effect.ScrollTo.prototype.extend(Effect.Base.prototype).extend({
initialize: function(element) {
this.element = $(element);
Position.prepare();
@@ -310,7 +314,7 @@ Effect.ScrollTo.prototype = (new Effect.Base()).extend({
/* ------------- prepackaged effects ------------- */
-Effect.Fade = function(element) {
+Effect.Fade = function(element) {
options = {
from: 1.0,
to: 0.0,
@@ -321,7 +325,7 @@ Effect.Fade = function(element) {
new Effect.Opacity(element,options);
}
-Effect.Appear = function(element) {
+Effect.Appear = function(element) {
options = {
from: 0.0,
to: 1.0,
Please sign in to comment.
Something went wrong with that request. Please try again.