kotovalexarian-likes-github/rails--rails
1
0
Fork 0
mirror of https://github.com/rails/rails.git synced 2022-11-09 12:12:34 -05:00
Code Releases Activity

Update to script.aculo.us to 1.5.0 rev. 3343

Browse source 
git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@3349 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
This commit is contained in:
Thomas Fuchs 2005-12-25 18:23:25 +00:00
parent cfb0babec3
commit 1455697ee8
8 changed files with 260 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
actionpack/CHANGELOG
View file

@ -1,5 +1,7 @@
*SVN* *SVN*
* Update to script.aculo.us to 1.5.0 rev. 3343 [Thomas Fuchs]
* Added :select option for JavaScriptMacroHelper#auto_complete_field that makes it easier to only use part of the auto-complete suggestion as the value for insertion [Thomas Fuchs] * Added :select option for JavaScriptMacroHelper#auto_complete_field that makes it easier to only use part of the auto-complete suggestion as the value for insertion [Thomas Fuchs]
* Added delayed execution of Javascript from within RJS #3264 [devslashnull@gmail.com]. Example: * Added delayed execution of Javascript from within RJS #3264 [devslashnull@gmail.com]. Example:

34
actionpack/lib/action_view/helpers/javascripts/controls.js vendored
View file

@ -221,7 +221,6 @@ Autocompleter.Base.prototype = {
this.options.updateElement(selectedElement); this.options.updateElement(selectedElement);
return; return;
} }
var value = ''; var value = '';
if (this.options.select) { if (this.options.select) {
var nodes = document.getElementsByClassName(this.options.select, selectedElement) || []; var nodes = document.getElementsByClassName(this.options.select, selectedElement) || [];
@ -454,7 +453,9 @@ Ajax.InPlaceEditor.prototype = {
this.element = $(element); this.element = $(element);
this.options = Object.extend({ this.options = Object.extend({
okButton: true,
okText: "ok", okText: "ok",
cancelLink: true,
cancelText: "cancel", cancelText: "cancel",
savingText: "Saving...", savingText: "Saving...",
clickToEditText: "Click to edit", clickToEditText: "Click to edit",
@ -477,6 +478,7 @@ Ajax.InPlaceEditor.prototype = {
highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor, highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
highlightendcolor: "#FFFFFF", highlightendcolor: "#FFFFFF",
externalControl: null, externalControl: null,
submitOnBlur: false,
ajaxOptions: {} ajaxOptions: {}
}, options || {}); }, options || {});
@ -542,16 +544,20 @@ Ajax.InPlaceEditor.prototype = {
this.form.appendChild(br); this.form.appendChild(br);
} }
okButton = document.createElement("input"); if (this.options.okButton) {
okButton.type = "submit"; okButton = document.createElement("input");
okButton.value = this.options.okText; okButton.type = "submit";
this.form.appendChild(okButton); okButton.value = this.options.okText;
this.form.appendChild(okButton);
}
cancelLink = document.createElement("a"); if (this.options.cancelLink) {
cancelLink.href = "#"; cancelLink = document.createElement("a");
cancelLink.appendChild(document.createTextNode(this.options.cancelText)); cancelLink.href = "#";
cancelLink.onclick = this.onclickCancel.bind(this); cancelLink.appendChild(document.createTextNode(this.options.cancelText));
this.form.appendChild(cancelLink); cancelLink.onclick = this.onclickCancel.bind(this);
this.form.appendChild(cancelLink);
}
}, },
hasHTMLLineBreaks: function(string) { hasHTMLLineBreaks: function(string) {
if (!this.options.handleLineBreaks) return false; if (!this.options.handleLineBreaks) return false;
@ -568,23 +574,31 @@ Ajax.InPlaceEditor.prototype = {
text = this.getText(); text = this.getText();
} }
var obj = this;
if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) { if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
this.options.textarea = false; this.options.textarea = false;
var textField = document.createElement("input"); var textField = document.createElement("input");
textField.obj = this;
textField.type = "text"; textField.type = "text";
textField.name = "value"; textField.name = "value";
textField.value = text; textField.value = text;
textField.style.backgroundColor = this.options.highlightcolor; textField.style.backgroundColor = this.options.highlightcolor;
var size = this.options.size || this.options.cols || 0; var size = this.options.size || this.options.cols || 0;
if (size != 0) textField.size = size; if (size != 0) textField.size = size;
if (this.options.submitOnBlur)
textField.onblur = this.onSubmit.bind(this);
this.editField = textField; this.editField = textField;
} else { } else {
this.options.textarea = true; this.options.textarea = true;
var textArea = document.createElement("textarea"); var textArea = document.createElement("textarea");
textArea.obj = this;
textArea.name = "value"; textArea.name = "value";
textArea.value = this.convertHTMLLineBreaks(text); textArea.value = this.convertHTMLLineBreaks(text);
textArea.rows = this.options.rows; textArea.rows = this.options.rows;
textArea.cols = this.options.cols || 40; textArea.cols = this.options.cols || 40;
if (this.options.submitOnBlur)
textArea.onblur = this.onSubmit.bind(this);
this.editField = textArea; this.editField = textArea;
} }

7
actionpack/lib/action_view/helpers/javascripts/dragdrop.js vendored
View file

@ -146,6 +146,7 @@ var Draggables = {
if(!this.activeDraggable) return; if(!this.activeDraggable) return;
this._lastPointer = null; this._lastPointer = null;
this.activeDraggable.endDrag(event); this.activeDraggable.endDrag(event);
this.activeDraggable = null;
}, },
keyPress: function(event) { keyPress: function(event) {
@ -191,7 +192,7 @@ Draggable.prototype = {
}, },
reverteffect: function(element, top_offset, left_offset) { reverteffect: function(element, top_offset, left_offset) {
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02; var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
element._revert = new Effect.MoveBy(element, -top_offset, -left_offset, {duration:dur}); element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur});
}, },
endeffect: function(element) { endeffect: function(element) {
new Effect.Opacity(element, {duration:0.2, from:0.7, to:1.0}); new Effect.Opacity(element, {duration:0.2, from:0.7, to:1.0});
@ -227,8 +228,8 @@ Draggable.prototype = {
currentDelta: function() { currentDelta: function() {
return([ return([
parseInt(this.element.style.left || '0'), parseInt(Element.getStyle(this.element,'left') || '0'),
parseInt(this.element.style.top || '0')]); parseInt(Element.getStyle(this.element,'top') || '0')]);
}, },
initDrag: function(event) { initDrag: function(event) {

144
actionpack/lib/action_view/helpers/javascripts/effects.js vendored
View file

@ -39,7 +39,6 @@ Element.collectTextNodesIgnoreClass = function(element, className) {
}).flatten().join(''); }).flatten().join('');
} }
Element.setStyle = function(element, style) { Element.setStyle = function(element, style) {
element = $(element); element = $(element);
for(k in style) element.style[k.camelize()] = style[k]; for(k in style) element.style[k.camelize()] = style[k];
@ -128,6 +127,20 @@ var Effect = {
$A(elements).each( function(element, index) { $A(elements).each( function(element, index) {
new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay })); new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
}); });
},
PAIRS: {
'slide': ['SlideDown','SlideUp'],
'blind': ['BlindDown','BlindUp'],
'appear': ['Appear','Fade']
},
toggle: function(element, effect) {
element = $(element);
effect = (effect || 'appear').toLowerCase();
var options = Object.extend({
queue: { position:'end', scope:(element.id || 'global') }
}, arguments[2] || {});
Effect[Element.visible(element) ?
Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
} }
}; };
@ -165,16 +178,22 @@ Effect.Transitions.full = function(pos) {
/* ------------- core effects ------------- */ /* ------------- core effects ------------- */
Effect.Queue = { Effect.ScopedQueue = Class.create();
effects: [], Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
initialize: function() {
this.effects = [];
this.interval = null;
},
_each: function(iterator) { _each: function(iterator) {
this.effects._each(iterator); this.effects._each(iterator);
}, },
interval: null,
add: function(effect) { add: function(effect) {
var timestamp = new Date().getTime(); var timestamp = new Date().getTime();
switch(effect.options.queue) { var position = (typeof effect.options.queue == 'string') ?
effect.options.queue : effect.options.queue.position;
switch(position) {
case 'front': case 'front':
// move unstarted effects after this effect // move unstarted effects after this effect
this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) { this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
@ -205,32 +224,45 @@ Effect.Queue = {
var timePos = new Date().getTime(); var timePos = new Date().getTime();
this.effects.invoke('loop', timePos); this.effects.invoke('loop', timePos);
} }
});
Effect.Queues = {
instances: $H(),
get: function(queueName) {
if(typeof queueName != 'string') return queueName;
if(!this.instances[queueName])
this.instances[queueName] = new Effect.ScopedQueue();
return this.instances[queueName];
}
}
Effect.Queue = Effect.Queues.get('global');
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 25fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
} }
Object.extend(Effect.Queue, Enumerable);
Effect.Base = function() {}; Effect.Base = function() {};
Effect.Base.prototype = { Effect.Base.prototype = {
position: null, position: null,
setOptions: function(options) {
this.options = Object.extend({
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 25fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}, options || {});
},
start: function(options) { start: function(options) {
this.setOptions(options || {}); this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
this.currentFrame = 0; this.currentFrame = 0;
this.state = 'idle'; this.state = 'idle';
this.startOn = this.options.delay*1000; this.startOn = this.options.delay*1000;
this.finishOn = this.startOn + (this.options.duration*1000); this.finishOn = this.startOn + (this.options.duration*1000);
this.event('beforeStart'); this.event('beforeStart');
if(!this.options.sync) Effect.Queue.add(this); if(!this.options.sync)
Effect.Queues.get(typeof this.options.queue == 'string' ?
'global' : this.options.queue.scope).add(this);
}, },
loop: function(timePos) { loop: function(timePos) {
if(timePos >= this.startOn) { if(timePos >= this.startOn) {
@ -268,7 +300,9 @@ Effect.Base.prototype = {
} }
}, },
cancel: function() { cancel: function() {
if(!this.options.sync) Effect.Queue.remove(this); if(!this.options.sync)
Effect.Queues.get(typeof this.options.queue == 'string' ?
'global' : this.options.queue.scope).remove(this);
this.state = 'finished'; this.state = 'finished';
}, },
event: function(eventName) { event: function(eventName) {
@ -318,13 +352,16 @@ Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
} }
}); });
Effect.MoveBy = Class.create(); Effect.Move = Class.create();
Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), { Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
initialize: function(element, toTop, toLeft) { initialize: function(element) {
this.element = $(element); this.element = $(element);
this.toTop = toTop; var options = Object.extend({
this.toLeft = toLeft; x: 0,
this.start(arguments[3]); y: 0,
mode: 'relative'
}, arguments[1] || {});
this.start(options);
}, },
setup: function() { setup: function() {
// Bug in Opera: Opera returns the "real" position of a static element or // Bug in Opera: Opera returns the "real" position of a static element or
@ -332,17 +369,28 @@ Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), {
// ==> Always set top and left for position relative elements in your stylesheets // ==> Always set top and left for position relative elements in your stylesheets
// (to 0 if you do not need them) // (to 0 if you do not need them)
Element.makePositioned(this.element); Element.makePositioned(this.element);
this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0');
this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0'); this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0');
this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0');
if(this.options.mode == 'absolute') {
// absolute movement, so we need to calc deltaX and deltaY
this.options.x = this.options.x - this.originalLeft;
this.options.y = this.options.y - this.originalTop;
}
}, },
update: function(position) { update: function(position) {
Element.setStyle(this.element, { Element.setStyle(this.element, {
top: this.toTop * position + this.originalTop + 'px', left: this.options.x * position + this.originalLeft + 'px',
left: this.toLeft * position + this.originalLeft + 'px' top: this.options.y * position + this.originalTop + 'px'
}); });
} }
}); });
// for backwards compatibility
Effect.MoveBy = function(element, toTop, toLeft) {
return new Effect.Move(element,
Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
};
Effect.Scale = Class.create(); Effect.Scale = Class.create();
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
initialize: function(element, percent) { initialize: function(element, percent) {
@ -584,7 +632,7 @@ Effect.DropOut = function(element) {
left: Element.getStyle(element, 'left'), left: Element.getStyle(element, 'left'),
opacity: Element.getInlineOpacity(element) }; opacity: Element.getInlineOpacity(element) };
return new Effect.Parallel( return new Effect.Parallel(
[ new Effect.MoveBy(element, 100, 0, { sync: true }), [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
new Effect.Opacity(element, { sync: true, to: 0.0 }) ], new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
Object.extend( Object.extend(
{ duration: 0.5, { duration: 0.5,
@ -601,18 +649,18 @@ Effect.Shake = function(element) {
var oldStyle = { var oldStyle = {
top: Element.getStyle(element, 'top'), top: Element.getStyle(element, 'top'),
left: Element.getStyle(element, 'left') }; left: Element.getStyle(element, 'left') };
return new Effect.MoveBy(element, 0, 20, return new Effect.Move(element,
{ duration: 0.05, afterFinishInternal: function(effect) { { x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, -40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, 40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, -40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, 40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, -20, new Effect.Move(effect.element,
{ duration: 0.05, afterFinishInternal: function(effect) { with(Element) { { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { with(Element) {
undoPositioned(effect.element); undoPositioned(effect.element);
setStyle(effect.element, oldStyle); setStyle(effect.element, oldStyle);
}}}) }}) }}) }}) }}) }}); }}}) }}) }}) }}) }}) }});
@ -736,7 +784,9 @@ Effect.Grow = function(element) {
break; break;
} }
return new Effect.MoveBy(element, initialMoveY, initialMoveX, { return new Effect.Move(element, {
x: initialMoveX,
y: initialMoveY,
duration: 0.01, duration: 0.01,
beforeSetup: function(effect) { with(Element) { beforeSetup: function(effect) { with(Element) {
hide(effect.element); hide(effect.element);
@ -746,7 +796,7 @@ Effect.Grow = function(element) {
afterFinishInternal: function(effect) { afterFinishInternal: function(effect) {
new Effect.Parallel( new Effect.Parallel(
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
new Effect.MoveBy(effect.element, moveY, moveX, { sync: true, transition: options.moveTransition }), new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
new Effect.Scale(effect.element, 100, { new Effect.Scale(effect.element, 100, {
scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
@ -806,7 +856,7 @@ Effect.Shrink = function(element) {
return new Effect.Parallel( return new Effect.Parallel(
[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }), [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}), new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
new Effect.MoveBy(element, moveY, moveX, { sync: true, transition: options.moveTransition }) new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
], Object.extend({ ], Object.extend({
beforeStartInternal: function(effect) { with(Element) { beforeStartInternal: function(effect) { with(Element) {
[makePositioned, makeClipping].call(effect.effects[0].element) }}, [makePositioned, makeClipping].call(effect.effects[0].element) }},

2
railties/CHANGELOG
View file

@ -1,5 +1,7 @@
*SVN* *SVN*
* Update to script.aculo.us to 1.5.0 rev. 3343 [Thomas Fuchs]
* Honor ActiveRecord::Base.pluralize_table_names when creating and destroying session store table. #3204. [rails@bencurtis.com, Marcel Molina Jr.] * Honor ActiveRecord::Base.pluralize_table_names when creating and destroying session store table. #3204. [rails@bencurtis.com, Marcel Molina Jr.]
* Update to script.aculo.us 1.5.0 final (equals 1.5.0_rc6) [Thomas Fuchs] * Update to script.aculo.us 1.5.0 final (equals 1.5.0_rc6) [Thomas Fuchs]

34
railties/html/javascripts/controls.js vendored
View file

@ -221,7 +221,6 @@ Autocompleter.Base.prototype = {
this.options.updateElement(selectedElement); this.options.updateElement(selectedElement);
return; return;
} }
var value = ''; var value = '';
if (this.options.select) { if (this.options.select) {
var nodes = document.getElementsByClassName(this.options.select, selectedElement) || []; var nodes = document.getElementsByClassName(this.options.select, selectedElement) || [];
@ -454,7 +453,9 @@ Ajax.InPlaceEditor.prototype = {
this.element = $(element); this.element = $(element);
this.options = Object.extend({ this.options = Object.extend({
okButton: true,
okText: "ok", okText: "ok",
cancelLink: true,
cancelText: "cancel", cancelText: "cancel",
savingText: "Saving...", savingText: "Saving...",
clickToEditText: "Click to edit", clickToEditText: "Click to edit",
@ -477,6 +478,7 @@ Ajax.InPlaceEditor.prototype = {
highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor, highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
highlightendcolor: "#FFFFFF", highlightendcolor: "#FFFFFF",
externalControl: null, externalControl: null,
submitOnBlur: false,
ajaxOptions: {} ajaxOptions: {}
}, options || {}); }, options || {});
@ -542,16 +544,20 @@ Ajax.InPlaceEditor.prototype = {
this.form.appendChild(br); this.form.appendChild(br);
} }
okButton = document.createElement("input"); if (this.options.okButton) {
okButton.type = "submit"; okButton = document.createElement("input");
okButton.value = this.options.okText; okButton.type = "submit";
this.form.appendChild(okButton); okButton.value = this.options.okText;
this.form.appendChild(okButton);
}
cancelLink = document.createElement("a"); if (this.options.cancelLink) {
cancelLink.href = "#"; cancelLink = document.createElement("a");
cancelLink.appendChild(document.createTextNode(this.options.cancelText)); cancelLink.href = "#";
cancelLink.onclick = this.onclickCancel.bind(this); cancelLink.appendChild(document.createTextNode(this.options.cancelText));
this.form.appendChild(cancelLink); cancelLink.onclick = this.onclickCancel.bind(this);
this.form.appendChild(cancelLink);
}
}, },
hasHTMLLineBreaks: function(string) { hasHTMLLineBreaks: function(string) {
if (!this.options.handleLineBreaks) return false; if (!this.options.handleLineBreaks) return false;
@ -568,23 +574,31 @@ Ajax.InPlaceEditor.prototype = {
text = this.getText(); text = this.getText();
} }
var obj = this;
if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) { if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
this.options.textarea = false; this.options.textarea = false;
var textField = document.createElement("input"); var textField = document.createElement("input");
textField.obj = this;
textField.type = "text"; textField.type = "text";
textField.name = "value"; textField.name = "value";
textField.value = text; textField.value = text;
textField.style.backgroundColor = this.options.highlightcolor; textField.style.backgroundColor = this.options.highlightcolor;
var size = this.options.size || this.options.cols || 0; var size = this.options.size || this.options.cols || 0;
if (size != 0) textField.size = size; if (size != 0) textField.size = size;
if (this.options.submitOnBlur)
textField.onblur = this.onSubmit.bind(this);
this.editField = textField; this.editField = textField;
} else { } else {
this.options.textarea = true; this.options.textarea = true;
var textArea = document.createElement("textarea"); var textArea = document.createElement("textarea");
textArea.obj = this;
textArea.name = "value"; textArea.name = "value";
textArea.value = this.convertHTMLLineBreaks(text); textArea.value = this.convertHTMLLineBreaks(text);
textArea.rows = this.options.rows; textArea.rows = this.options.rows;
textArea.cols = this.options.cols || 40; textArea.cols = this.options.cols || 40;
if (this.options.submitOnBlur)
textArea.onblur = this.onSubmit.bind(this);
this.editField = textArea; this.editField = textArea;
} }

7
railties/html/javascripts/dragdrop.js vendored
View file

@ -146,6 +146,7 @@ var Draggables = {
if(!this.activeDraggable) return; if(!this.activeDraggable) return;
this._lastPointer = null; this._lastPointer = null;
this.activeDraggable.endDrag(event); this.activeDraggable.endDrag(event);
this.activeDraggable = null;
}, },
keyPress: function(event) { keyPress: function(event) {
@ -191,7 +192,7 @@ Draggable.prototype = {
}, },
reverteffect: function(element, top_offset, left_offset) { reverteffect: function(element, top_offset, left_offset) {
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02; var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
element._revert = new Effect.MoveBy(element, -top_offset, -left_offset, {duration:dur}); element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur});
}, },
endeffect: function(element) { endeffect: function(element) {
new Effect.Opacity(element, {duration:0.2, from:0.7, to:1.0}); new Effect.Opacity(element, {duration:0.2, from:0.7, to:1.0});
@ -227,8 +228,8 @@ Draggable.prototype = {
currentDelta: function() { currentDelta: function() {
return([ return([
parseInt(this.element.style.left || '0'), parseInt(Element.getStyle(this.element,'left') || '0'),
parseInt(this.element.style.top || '0')]); parseInt(Element.getStyle(this.element,'top') || '0')]);
}, },
initDrag: function(event) { initDrag: function(event) {

144
railties/html/javascripts/effects.js vendored
View file

@ -39,7 +39,6 @@ Element.collectTextNodesIgnoreClass = function(element, className) {
}).flatten().join(''); }).flatten().join('');
} }
Element.setStyle = function(element, style) { Element.setStyle = function(element, style) {
element = $(element); element = $(element);
for(k in style) element.style[k.camelize()] = style[k]; for(k in style) element.style[k.camelize()] = style[k];
@ -128,6 +127,20 @@ var Effect = {
$A(elements).each( function(element, index) { $A(elements).each( function(element, index) {
new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay })); new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
}); });
},
PAIRS: {
'slide': ['SlideDown','SlideUp'],
'blind': ['BlindDown','BlindUp'],
'appear': ['Appear','Fade']
},
toggle: function(element, effect) {
element = $(element);
effect = (effect || 'appear').toLowerCase();
var options = Object.extend({
queue: { position:'end', scope:(element.id || 'global') }
}, arguments[2] || {});
Effect[Element.visible(element) ?
Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
} }
}; };
@ -165,16 +178,22 @@ Effect.Transitions.full = function(pos) {
/* ------------- core effects ------------- */ /* ------------- core effects ------------- */
Effect.Queue = { Effect.ScopedQueue = Class.create();
effects: [], Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
initialize: function() {
this.effects = [];
this.interval = null;
},
_each: function(iterator) { _each: function(iterator) {
this.effects._each(iterator); this.effects._each(iterator);
}, },
interval: null,
add: function(effect) { add: function(effect) {
var timestamp = new Date().getTime(); var timestamp = new Date().getTime();
switch(effect.options.queue) { var position = (typeof effect.options.queue == 'string') ?
effect.options.queue : effect.options.queue.position;
switch(position) {
case 'front': case 'front':
// move unstarted effects after this effect // move unstarted effects after this effect
this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) { this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
@ -205,32 +224,45 @@ Effect.Queue = {
var timePos = new Date().getTime(); var timePos = new Date().getTime();
this.effects.invoke('loop', timePos); this.effects.invoke('loop', timePos);
} }
});
Effect.Queues = {
instances: $H(),
get: function(queueName) {
if(typeof queueName != 'string') return queueName;
if(!this.instances[queueName])
this.instances[queueName] = new Effect.ScopedQueue();
return this.instances[queueName];
}
}
Effect.Queue = Effect.Queues.get('global');
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 25fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
} }
Object.extend(Effect.Queue, Enumerable);
Effect.Base = function() {}; Effect.Base = function() {};
Effect.Base.prototype = { Effect.Base.prototype = {
position: null, position: null,
setOptions: function(options) {
this.options = Object.extend({
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 25fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}, options || {});
},
start: function(options) { start: function(options) {
this.setOptions(options || {}); this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
this.currentFrame = 0; this.currentFrame = 0;
this.state = 'idle'; this.state = 'idle';
this.startOn = this.options.delay*1000; this.startOn = this.options.delay*1000;
this.finishOn = this.startOn + (this.options.duration*1000); this.finishOn = this.startOn + (this.options.duration*1000);
this.event('beforeStart'); this.event('beforeStart');
if(!this.options.sync) Effect.Queue.add(this); if(!this.options.sync)
Effect.Queues.get(typeof this.options.queue == 'string' ?
'global' : this.options.queue.scope).add(this);
}, },
loop: function(timePos) { loop: function(timePos) {
if(timePos >= this.startOn) { if(timePos >= this.startOn) {
@ -268,7 +300,9 @@ Effect.Base.prototype = {
} }
}, },
cancel: function() { cancel: function() {
if(!this.options.sync) Effect.Queue.remove(this); if(!this.options.sync)
Effect.Queues.get(typeof this.options.queue == 'string' ?
'global' : this.options.queue.scope).remove(this);
this.state = 'finished'; this.state = 'finished';
}, },
event: function(eventName) { event: function(eventName) {
@ -318,13 +352,16 @@ Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
} }
}); });
Effect.MoveBy = Class.create(); Effect.Move = Class.create();
Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), { Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
initialize: function(element, toTop, toLeft) { initialize: function(element) {
this.element = $(element); this.element = $(element);
this.toTop = toTop; var options = Object.extend({
this.toLeft = toLeft; x: 0,
this.start(arguments[3]); y: 0,
mode: 'relative'
}, arguments[1] || {});
this.start(options);
}, },
setup: function() { setup: function() {
// Bug in Opera: Opera returns the "real" position of a static element or // Bug in Opera: Opera returns the "real" position of a static element or
@ -332,17 +369,28 @@ Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), {
// ==> Always set top and left for position relative elements in your stylesheets // ==> Always set top and left for position relative elements in your stylesheets
// (to 0 if you do not need them) // (to 0 if you do not need them)
Element.makePositioned(this.element); Element.makePositioned(this.element);
this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0');
this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0'); this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0');
this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0');
if(this.options.mode == 'absolute') {
// absolute movement, so we need to calc deltaX and deltaY
this.options.x = this.options.x - this.originalLeft;
this.options.y = this.options.y - this.originalTop;
}
}, },
update: function(position) { update: function(position) {
Element.setStyle(this.element, { Element.setStyle(this.element, {
top: this.toTop * position + this.originalTop + 'px', left: this.options.x * position + this.originalLeft + 'px',
left: this.toLeft * position + this.originalLeft + 'px' top: this.options.y * position + this.originalTop + 'px'
}); });
} }
}); });
// for backwards compatibility
Effect.MoveBy = function(element, toTop, toLeft) {
return new Effect.Move(element,
Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
};
Effect.Scale = Class.create(); Effect.Scale = Class.create();
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
initialize: function(element, percent) { initialize: function(element, percent) {
@ -584,7 +632,7 @@ Effect.DropOut = function(element) {
left: Element.getStyle(element, 'left'), left: Element.getStyle(element, 'left'),
opacity: Element.getInlineOpacity(element) }; opacity: Element.getInlineOpacity(element) };
return new Effect.Parallel( return new Effect.Parallel(
[ new Effect.MoveBy(element, 100, 0, { sync: true }), [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
new Effect.Opacity(element, { sync: true, to: 0.0 }) ], new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
Object.extend( Object.extend(
{ duration: 0.5, { duration: 0.5,
@ -601,18 +649,18 @@ Effect.Shake = function(element) {
var oldStyle = { var oldStyle = {
top: Element.getStyle(element, 'top'), top: Element.getStyle(element, 'top'),
left: Element.getStyle(element, 'left') }; left: Element.getStyle(element, 'left') };
return new Effect.MoveBy(element, 0, 20, return new Effect.Move(element,
{ duration: 0.05, afterFinishInternal: function(effect) { { x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, -40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, 40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, -40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, 40, new Effect.Move(effect.element,
{ duration: 0.1, afterFinishInternal: function(effect) { { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.MoveBy(effect.element, 0, -20, new Effect.Move(effect.element,
{ duration: 0.05, afterFinishInternal: function(effect) { with(Element) { { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { with(Element) {
undoPositioned(effect.element); undoPositioned(effect.element);
setStyle(effect.element, oldStyle); setStyle(effect.element, oldStyle);
}}}) }}) }}) }}) }}) }}); }}}) }}) }}) }}) }}) }});
@ -736,7 +784,9 @@ Effect.Grow = function(element) {
break; break;
} }
return new Effect.MoveBy(element, initialMoveY, initialMoveX, { return new Effect.Move(element, {
x: initialMoveX,
y: initialMoveY,
duration: 0.01, duration: 0.01,
beforeSetup: function(effect) { with(Element) { beforeSetup: function(effect) { with(Element) {
hide(effect.element); hide(effect.element);
@ -746,7 +796,7 @@ Effect.Grow = function(element) {
afterFinishInternal: function(effect) { afterFinishInternal: function(effect) {
new Effect.Parallel( new Effect.Parallel(
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
new Effect.MoveBy(effect.element, moveY, moveX, { sync: true, transition: options.moveTransition }), new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
new Effect.Scale(effect.element, 100, { new Effect.Scale(effect.element, 100, {
scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
@ -806,7 +856,7 @@ Effect.Shrink = function(element) {
return new Effect.Parallel( return new Effect.Parallel(
[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }), [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}), new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
new Effect.MoveBy(element, moveY, moveX, { sync: true, transition: options.moveTransition }) new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
], Object.extend({ ], Object.extend({
beforeStartInternal: function(effect) { with(Element) { beforeStartInternal: function(effect) { with(Element) {
[makePositioned, makeClipping].call(effect.effects[0].element) }}, [makePositioned, makeClipping].call(effect.effects[0].element) }},