Scripts and Javascripts
Add these ancilliary files that came with Rails 2.1.0 RC1.
This commit is contained in:
parent
5292899c9a
commit
a37b06b801
820
public/javascripts/controls.js
vendored
820
public/javascripts/controls.js
vendored
|
@ -1,6 +1,6 @@
|
||||||
// Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
// (c) 2005, 2006 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
// (c) 2005-2007 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
||||||
// (c) 2005, 2006 Jon Tirsen (http://www.tirsen.com)
|
// (c) 2005-2007 Jon Tirsen (http://www.tirsen.com)
|
||||||
// Contributors:
|
// Contributors:
|
||||||
// Richard Livsey
|
// Richard Livsey
|
||||||
// Rahul Bhargava
|
// Rahul Bhargava
|
||||||
|
@ -38,16 +38,17 @@ if(typeof Effect == 'undefined')
|
||||||
throw("controls.js requires including script.aculo.us' effects.js library");
|
throw("controls.js requires including script.aculo.us' effects.js library");
|
||||||
|
|
||||||
var Autocompleter = { }
|
var Autocompleter = { }
|
||||||
Autocompleter.Base = function() {};
|
Autocompleter.Base = Class.create({
|
||||||
Autocompleter.Base.prototype = {
|
|
||||||
baseInitialize: function(element, update, options) {
|
baseInitialize: function(element, update, options) {
|
||||||
this.element = $(element);
|
element = $(element)
|
||||||
|
this.element = element;
|
||||||
this.update = $(update);
|
this.update = $(update);
|
||||||
this.hasFocus = false;
|
this.hasFocus = false;
|
||||||
this.changed = false;
|
this.changed = false;
|
||||||
this.active = false;
|
this.active = false;
|
||||||
this.index = 0;
|
this.index = 0;
|
||||||
this.entryCount = 0;
|
this.entryCount = 0;
|
||||||
|
this.oldElementValue = this.element.value;
|
||||||
|
|
||||||
if(this.setOptions)
|
if(this.setOptions)
|
||||||
this.setOptions(options);
|
this.setOptions(options);
|
||||||
|
@ -74,6 +75,9 @@ Autocompleter.Base.prototype = {
|
||||||
|
|
||||||
if(typeof(this.options.tokens) == 'string')
|
if(typeof(this.options.tokens) == 'string')
|
||||||
this.options.tokens = new Array(this.options.tokens);
|
this.options.tokens = new Array(this.options.tokens);
|
||||||
|
// Force carriage returns as token delimiters anyway
|
||||||
|
if (!this.options.tokens.include('\n'))
|
||||||
|
this.options.tokens.push('\n');
|
||||||
|
|
||||||
this.observer = null;
|
this.observer = null;
|
||||||
|
|
||||||
|
@ -81,15 +85,14 @@ Autocompleter.Base.prototype = {
|
||||||
|
|
||||||
Element.hide(this.update);
|
Element.hide(this.update);
|
||||||
|
|
||||||
Event.observe(this.element, "blur", this.onBlur.bindAsEventListener(this));
|
Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));
|
||||||
Event.observe(this.element, "keypress", this.onKeyPress.bindAsEventListener(this));
|
Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
|
||||||
},
|
},
|
||||||
|
|
||||||
show: function() {
|
show: function() {
|
||||||
if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
|
if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
|
||||||
if(!this.iefix &&
|
if(!this.iefix &&
|
||||||
(navigator.appVersion.indexOf('MSIE')>0) &&
|
(Prototype.Browser.IE) &&
|
||||||
(navigator.userAgent.indexOf('Opera')<0) &&
|
|
||||||
(Element.getStyle(this.update, 'position')=='absolute')) {
|
(Element.getStyle(this.update, 'position')=='absolute')) {
|
||||||
new Insertion.After(this.update,
|
new Insertion.After(this.update,
|
||||||
'<iframe id="' + this.update.id + '_iefix" '+
|
'<iframe id="' + this.update.id + '_iefix" '+
|
||||||
|
@ -139,17 +142,17 @@ Autocompleter.Base.prototype = {
|
||||||
case Event.KEY_UP:
|
case Event.KEY_UP:
|
||||||
this.markPrevious();
|
this.markPrevious();
|
||||||
this.render();
|
this.render();
|
||||||
if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);
|
Event.stop(event);
|
||||||
return;
|
return;
|
||||||
case Event.KEY_DOWN:
|
case Event.KEY_DOWN:
|
||||||
this.markNext();
|
this.markNext();
|
||||||
this.render();
|
this.render();
|
||||||
if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);
|
Event.stop(event);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
|
if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
|
||||||
(navigator.appVersion.indexOf('AppleWebKit') > 0 && event.keyCode == 0)) return;
|
(Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;
|
||||||
|
|
||||||
this.changed = true;
|
this.changed = true;
|
||||||
this.hasFocus = true;
|
this.hasFocus = true;
|
||||||
|
@ -195,7 +198,6 @@ Autocompleter.Base.prototype = {
|
||||||
this.index==i ?
|
this.index==i ?
|
||||||
Element.addClassName(this.getEntry(i),"selected") :
|
Element.addClassName(this.getEntry(i),"selected") :
|
||||||
Element.removeClassName(this.getEntry(i),"selected");
|
Element.removeClassName(this.getEntry(i),"selected");
|
||||||
|
|
||||||
if(this.hasFocus) {
|
if(this.hasFocus) {
|
||||||
this.show();
|
this.show();
|
||||||
this.active = true;
|
this.active = true;
|
||||||
|
@ -238,21 +240,22 @@ Autocompleter.Base.prototype = {
|
||||||
}
|
}
|
||||||
var value = '';
|
var value = '';
|
||||||
if (this.options.select) {
|
if (this.options.select) {
|
||||||
var nodes = document.getElementsByClassName(this.options.select, selectedElement) || [];
|
var nodes = $(selectedElement).select('.' + this.options.select) || [];
|
||||||
if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
|
if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
|
||||||
} else
|
} else
|
||||||
value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
|
value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
|
||||||
|
|
||||||
var lastTokenPos = this.findLastToken();
|
var bounds = this.getTokenBounds();
|
||||||
if (lastTokenPos != -1) {
|
if (bounds[0] != -1) {
|
||||||
var newValue = this.element.value.substr(0, lastTokenPos + 1);
|
var newValue = this.element.value.substr(0, bounds[0]);
|
||||||
var whitespace = this.element.value.substr(lastTokenPos + 1).match(/^\s+/);
|
var whitespace = this.element.value.substr(bounds[0]).match(/^\s+/);
|
||||||
if (whitespace)
|
if (whitespace)
|
||||||
newValue += whitespace[0];
|
newValue += whitespace[0];
|
||||||
this.element.value = newValue + value;
|
this.element.value = newValue + value + this.element.value.substr(bounds[1]);
|
||||||
} else {
|
} else {
|
||||||
this.element.value = value;
|
this.element.value = value;
|
||||||
}
|
}
|
||||||
|
this.oldElementValue = this.element.value;
|
||||||
this.element.focus();
|
this.element.focus();
|
||||||
|
|
||||||
if (this.options.afterUpdateElement)
|
if (this.options.afterUpdateElement)
|
||||||
|
@ -296,39 +299,48 @@ Autocompleter.Base.prototype = {
|
||||||
|
|
||||||
onObserverEvent: function() {
|
onObserverEvent: function() {
|
||||||
this.changed = false;
|
this.changed = false;
|
||||||
|
this.tokenBounds = null;
|
||||||
if(this.getToken().length>=this.options.minChars) {
|
if(this.getToken().length>=this.options.minChars) {
|
||||||
this.startIndicator();
|
|
||||||
this.getUpdatedChoices();
|
this.getUpdatedChoices();
|
||||||
} else {
|
} else {
|
||||||
this.active = false;
|
this.active = false;
|
||||||
this.hide();
|
this.hide();
|
||||||
}
|
}
|
||||||
|
this.oldElementValue = this.element.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
getToken: function() {
|
getToken: function() {
|
||||||
var tokenPos = this.findLastToken();
|
var bounds = this.getTokenBounds();
|
||||||
if (tokenPos != -1)
|
return this.element.value.substring(bounds[0], bounds[1]).strip();
|
||||||
var ret = this.element.value.substr(tokenPos + 1).replace(/^\s+/,'').replace(/\s+$/,'');
|
|
||||||
else
|
|
||||||
var ret = this.element.value;
|
|
||||||
|
|
||||||
return /\n/.test(ret) ? '' : ret;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
findLastToken: function() {
|
getTokenBounds: function() {
|
||||||
var lastTokenPos = -1;
|
if (null != this.tokenBounds) return this.tokenBounds;
|
||||||
|
var value = this.element.value;
|
||||||
|
if (value.strip().empty()) return [-1, 0];
|
||||||
|
var diff = arguments.callee.getFirstDifferencePos(value, this.oldElementValue);
|
||||||
|
var offset = (diff == this.oldElementValue.length ? 1 : 0);
|
||||||
|
var prevTokenPos = -1, nextTokenPos = value.length;
|
||||||
|
var tp;
|
||||||
|
for (var index = 0, l = this.options.tokens.length; index < l; ++index) {
|
||||||
|
tp = value.lastIndexOf(this.options.tokens[index], diff + offset - 1);
|
||||||
|
if (tp > prevTokenPos) prevTokenPos = tp;
|
||||||
|
tp = value.indexOf(this.options.tokens[index], diff + offset);
|
||||||
|
if (-1 != tp && tp < nextTokenPos) nextTokenPos = tp;
|
||||||
|
}
|
||||||
|
return (this.tokenBounds = [prevTokenPos + 1, nextTokenPos]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
for (var i=0; i<this.options.tokens.length; i++) {
|
Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function(newS, oldS) {
|
||||||
var thisTokenPos = this.element.value.lastIndexOf(this.options.tokens[i]);
|
var boundary = Math.min(newS.length, oldS.length);
|
||||||
if (thisTokenPos > lastTokenPos)
|
for (var index = 0; index < boundary; ++index)
|
||||||
lastTokenPos = thisTokenPos;
|
if (newS[index] != oldS[index])
|
||||||
}
|
return index;
|
||||||
return lastTokenPos;
|
return boundary;
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
Ajax.Autocompleter = Class.create();
|
Ajax.Autocompleter = Class.create(Autocompleter.Base, {
|
||||||
Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), {
|
|
||||||
initialize: function(element, update, url, options) {
|
initialize: function(element, update, url, options) {
|
||||||
this.baseInitialize(element, update, options);
|
this.baseInitialize(element, update, options);
|
||||||
this.options.asynchronous = true;
|
this.options.asynchronous = true;
|
||||||
|
@ -338,7 +350,9 @@ Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.pro
|
||||||
},
|
},
|
||||||
|
|
||||||
getUpdatedChoices: function() {
|
getUpdatedChoices: function() {
|
||||||
entry = encodeURIComponent(this.options.paramName) + '=' +
|
this.startIndicator();
|
||||||
|
|
||||||
|
var entry = encodeURIComponent(this.options.paramName) + '=' +
|
||||||
encodeURIComponent(this.getToken());
|
encodeURIComponent(this.getToken());
|
||||||
|
|
||||||
this.options.parameters = this.options.callback ?
|
this.options.parameters = this.options.callback ?
|
||||||
|
@ -353,7 +367,6 @@ Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.pro
|
||||||
onComplete: function(request) {
|
onComplete: function(request) {
|
||||||
this.updateChoices(request.responseText);
|
this.updateChoices(request.responseText);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// The local array autocompleter. Used when you'd prefer to
|
// The local array autocompleter. Used when you'd prefer to
|
||||||
|
@ -391,8 +404,7 @@ Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.pro
|
||||||
// In that case, the other options above will not apply unless
|
// In that case, the other options above will not apply unless
|
||||||
// you support them.
|
// you support them.
|
||||||
|
|
||||||
Autocompleter.Local = Class.create();
|
Autocompleter.Local = Class.create(Autocompleter.Base, {
|
||||||
Autocompleter.Local.prototype = Object.extend(new Autocompleter.Base(), {
|
|
||||||
initialize: function(element, update, array, options) {
|
initialize: function(element, update, array, options) {
|
||||||
this.baseInitialize(element, update, options);
|
this.baseInitialize(element, update, options);
|
||||||
this.options.array = array;
|
this.options.array = array;
|
||||||
|
@ -452,9 +464,8 @@ Autocompleter.Local.prototype = Object.extend(new Autocompleter.Base(), {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// AJAX in-place editor
|
// AJAX in-place editor and collection editor
|
||||||
//
|
// Full rewrite by Christophe Porteneuve <tdd@tddsworld.com> (April 2007).
|
||||||
// see documentation on http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor
|
|
||||||
|
|
||||||
// Use this if you notice weird scrolling problems on some browsers,
|
// Use this if you notice weird scrolling problems on some browsers,
|
||||||
// the DOM might be a bit confused when this gets called so do this
|
// the DOM might be a bit confused when this gets called so do this
|
||||||
|
@ -465,353 +476,472 @@ Field.scrollFreeActivate = function(field) {
|
||||||
}, 1);
|
}, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
Ajax.InPlaceEditor = Class.create();
|
Ajax.InPlaceEditor = Class.create({
|
||||||
Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
|
|
||||||
Ajax.InPlaceEditor.prototype = {
|
|
||||||
initialize: function(element, url, options) {
|
initialize: function(element, url, options) {
|
||||||
this.url = url;
|
this.url = url;
|
||||||
this.element = $(element);
|
this.element = element = $(element);
|
||||||
|
this.prepareOptions();
|
||||||
this.options = Object.extend({
|
this._controls = { };
|
||||||
paramName: "value",
|
arguments.callee.dealWithDeprecatedOptions(options); // DEPRECATION LAYER!!!
|
||||||
okButton: true,
|
Object.extend(this.options, options || { });
|
||||||
okText: "ok",
|
|
||||||
cancelLink: true,
|
|
||||||
cancelText: "cancel",
|
|
||||||
savingText: "Saving...",
|
|
||||||
clickToEditText: "Click to edit",
|
|
||||||
okText: "ok",
|
|
||||||
rows: 1,
|
|
||||||
onComplete: function(transport, element) {
|
|
||||||
new Effect.Highlight(element, {startcolor: this.options.highlightcolor});
|
|
||||||
},
|
|
||||||
onFailure: function(transport) {
|
|
||||||
alert("Error communicating with the server: " + transport.responseText.stripTags());
|
|
||||||
},
|
|
||||||
callback: function(form) {
|
|
||||||
return Form.serialize(form);
|
|
||||||
},
|
|
||||||
handleLineBreaks: true,
|
|
||||||
loadingText: 'Loading...',
|
|
||||||
savingClassName: 'inplaceeditor-saving',
|
|
||||||
loadingClassName: 'inplaceeditor-loading',
|
|
||||||
formClassName: 'inplaceeditor-form',
|
|
||||||
highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
|
|
||||||
highlightendcolor: "#FFFFFF",
|
|
||||||
externalControl: null,
|
|
||||||
submitOnBlur: false,
|
|
||||||
ajaxOptions: {},
|
|
||||||
evalScripts: false
|
|
||||||
}, options || {});
|
|
||||||
|
|
||||||
if (!this.options.formId && this.element.id) {
|
if (!this.options.formId && this.element.id) {
|
||||||
this.options.formId = this.element.id + "-inplaceeditor";
|
this.options.formId = this.element.id + '-inplaceeditor';
|
||||||
if ($(this.options.formId)) {
|
if ($(this.options.formId))
|
||||||
// there's already a form with that name, don't specify an id
|
this.options.formId = '';
|
||||||
this.options.formId = null;
|
|
||||||
}
|
}
|
||||||
}
|
if (this.options.externalControl)
|
||||||
|
|
||||||
if (this.options.externalControl) {
|
|
||||||
this.options.externalControl = $(this.options.externalControl);
|
this.options.externalControl = $(this.options.externalControl);
|
||||||
}
|
if (!this.options.externalControl)
|
||||||
|
this.options.externalControlOnly = false;
|
||||||
this.originalBackground = Element.getStyle(this.element, 'background-color');
|
this._originalBackground = this.element.getStyle('background-color') || 'transparent';
|
||||||
if (!this.originalBackground) {
|
|
||||||
this.originalBackground = "transparent";
|
|
||||||
}
|
|
||||||
|
|
||||||
this.element.title = this.options.clickToEditText;
|
this.element.title = this.options.clickToEditText;
|
||||||
|
this._boundCancelHandler = this.handleFormCancellation.bind(this);
|
||||||
this.onclickListener = this.enterEditMode.bindAsEventListener(this);
|
this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this);
|
||||||
this.mouseoverListener = this.enterHover.bindAsEventListener(this);
|
this._boundFailureHandler = this.handleAJAXFailure.bind(this);
|
||||||
this.mouseoutListener = this.leaveHover.bindAsEventListener(this);
|
this._boundSubmitHandler = this.handleFormSubmission.bind(this);
|
||||||
Event.observe(this.element, 'click', this.onclickListener);
|
this._boundWrapperHandler = this.wrapUp.bind(this);
|
||||||
Event.observe(this.element, 'mouseover', this.mouseoverListener);
|
this.registerListeners();
|
||||||
Event.observe(this.element, 'mouseout', this.mouseoutListener);
|
|
||||||
if (this.options.externalControl) {
|
|
||||||
Event.observe(this.options.externalControl, 'click', this.onclickListener);
|
|
||||||
Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
|
|
||||||
Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
enterEditMode: function(evt) {
|
checkForEscapeOrReturn: function(e) {
|
||||||
if (this.saving) return;
|
if (!this._editing || e.ctrlKey || e.altKey || e.shiftKey) return;
|
||||||
if (this.editing) return;
|
if (Event.KEY_ESC == e.keyCode)
|
||||||
this.editing = true;
|
this.handleFormCancellation(e);
|
||||||
this.onEnterEditMode();
|
else if (Event.KEY_RETURN == e.keyCode)
|
||||||
if (this.options.externalControl) {
|
this.handleFormSubmission(e);
|
||||||
Element.hide(this.options.externalControl);
|
|
||||||
}
|
|
||||||
Element.hide(this.element);
|
|
||||||
this.createForm();
|
|
||||||
this.element.parentNode.insertBefore(this.form, this.element);
|
|
||||||
if (!this.options.loadTextURL) Field.scrollFreeActivate(this.editField);
|
|
||||||
// stop the event to avoid a page refresh in Safari
|
|
||||||
if (evt) {
|
|
||||||
Event.stop(evt);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
},
|
||||||
createForm: function() {
|
createControl: function(mode, handler, extraClasses) {
|
||||||
this.form = document.createElement("form");
|
var control = this.options[mode + 'Control'];
|
||||||
this.form.id = this.options.formId;
|
var text = this.options[mode + 'Text'];
|
||||||
Element.addClassName(this.form, this.options.formClassName)
|
if ('button' == control) {
|
||||||
this.form.onsubmit = this.onSubmit.bind(this);
|
var btn = document.createElement('input');
|
||||||
|
btn.type = 'submit';
|
||||||
this.createEditField();
|
btn.value = text;
|
||||||
|
btn.className = 'editor_' + mode + '_button';
|
||||||
if (this.options.textarea) {
|
if ('cancel' == mode)
|
||||||
var br = document.createElement("br");
|
btn.onclick = this._boundCancelHandler;
|
||||||
this.form.appendChild(br);
|
this._form.appendChild(btn);
|
||||||
|
this._controls[mode] = btn;
|
||||||
|
} else if ('link' == control) {
|
||||||
|
var link = document.createElement('a');
|
||||||
|
link.href = '#';
|
||||||
|
link.appendChild(document.createTextNode(text));
|
||||||
|
link.onclick = 'cancel' == mode ? this._boundCancelHandler : this._boundSubmitHandler;
|
||||||
|
link.className = 'editor_' + mode + '_link';
|
||||||
|
if (extraClasses)
|
||||||
|
link.className += ' ' + extraClasses;
|
||||||
|
this._form.appendChild(link);
|
||||||
|
this._controls[mode] = link;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.options.okButton) {
|
|
||||||
okButton = document.createElement("input");
|
|
||||||
okButton.type = "submit";
|
|
||||||
okButton.value = this.options.okText;
|
|
||||||
okButton.className = 'editor_ok_button';
|
|
||||||
this.form.appendChild(okButton);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.options.cancelLink) {
|
|
||||||
cancelLink = document.createElement("a");
|
|
||||||
cancelLink.href = "#";
|
|
||||||
cancelLink.appendChild(document.createTextNode(this.options.cancelText));
|
|
||||||
cancelLink.onclick = this.onclickCancel.bind(this);
|
|
||||||
cancelLink.className = 'editor_cancel';
|
|
||||||
this.form.appendChild(cancelLink);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hasHTMLLineBreaks: function(string) {
|
|
||||||
if (!this.options.handleLineBreaks) return false;
|
|
||||||
return string.match(/<br/i) || string.match(/<p>/i);
|
|
||||||
},
|
|
||||||
convertHTMLLineBreaks: function(string) {
|
|
||||||
return string.replace(/<br>/gi, "\n").replace(/<br\/>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi, "");
|
|
||||||
},
|
},
|
||||||
createEditField: function() {
|
createEditField: function() {
|
||||||
var text;
|
var text = (this.options.loadTextURL ? this.options.loadingText : this.getText());
|
||||||
if(this.options.loadTextURL) {
|
var fld;
|
||||||
text = this.options.loadingText;
|
if (1 >= this.options.rows && !/\r|\n/.test(this.getText())) {
|
||||||
} else {
|
fld = document.createElement('input');
|
||||||
text = this.getText();
|
fld.type = 'text';
|
||||||
}
|
|
||||||
|
|
||||||
var obj = this;
|
|
||||||
|
|
||||||
if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
|
|
||||||
this.options.textarea = false;
|
|
||||||
var textField = document.createElement("input");
|
|
||||||
textField.obj = this;
|
|
||||||
textField.type = "text";
|
|
||||||
textField.name = this.options.paramName;
|
|
||||||
textField.value = text;
|
|
||||||
textField.style.backgroundColor = this.options.highlightcolor;
|
|
||||||
textField.className = 'editor_field';
|
|
||||||
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 (0 < size) fld.size = size;
|
||||||
if (this.options.submitOnBlur)
|
|
||||||
textField.onblur = this.onSubmit.bind(this);
|
|
||||||
this.editField = textField;
|
|
||||||
} else {
|
} else {
|
||||||
this.options.textarea = true;
|
fld = document.createElement('textarea');
|
||||||
var textArea = document.createElement("textarea");
|
fld.rows = (1 >= this.options.rows ? this.options.autoRows : this.options.rows);
|
||||||
textArea.obj = this;
|
fld.cols = this.options.cols || 40;
|
||||||
textArea.name = this.options.paramName;
|
}
|
||||||
textArea.value = this.convertHTMLLineBreaks(text);
|
fld.name = this.options.paramName;
|
||||||
textArea.rows = this.options.rows;
|
fld.value = text; // No HTML breaks conversion anymore
|
||||||
textArea.cols = this.options.cols || 40;
|
fld.className = 'editor_field';
|
||||||
textArea.className = 'editor_field';
|
|
||||||
if (this.options.submitOnBlur)
|
if (this.options.submitOnBlur)
|
||||||
textArea.onblur = this.onSubmit.bind(this);
|
fld.onblur = this._boundSubmitHandler;
|
||||||
this.editField = textArea;
|
this._controls.editor = fld;
|
||||||
}
|
if (this.options.loadTextURL)
|
||||||
|
|
||||||
if(this.options.loadTextURL) {
|
|
||||||
this.loadExternalText();
|
this.loadExternalText();
|
||||||
}
|
this._form.appendChild(this._controls.editor);
|
||||||
this.form.appendChild(this.editField);
|
},
|
||||||
|
createForm: function() {
|
||||||
|
var ipe = this;
|
||||||
|
function addText(mode, condition) {
|
||||||
|
var text = ipe.options['text' + mode + 'Controls'];
|
||||||
|
if (!text || condition === false) return;
|
||||||
|
ipe._form.appendChild(document.createTextNode(text));
|
||||||
|
};
|
||||||
|
this._form = $(document.createElement('form'));
|
||||||
|
this._form.id = this.options.formId;
|
||||||
|
this._form.addClassName(this.options.formClassName);
|
||||||
|
this._form.onsubmit = this._boundSubmitHandler;
|
||||||
|
this.createEditField();
|
||||||
|
if ('textarea' == this._controls.editor.tagName.toLowerCase())
|
||||||
|
this._form.appendChild(document.createElement('br'));
|
||||||
|
if (this.options.onFormCustomization)
|
||||||
|
this.options.onFormCustomization(this, this._form);
|
||||||
|
addText('Before', this.options.okControl || this.options.cancelControl);
|
||||||
|
this.createControl('ok', this._boundSubmitHandler);
|
||||||
|
addText('Between', this.options.okControl && this.options.cancelControl);
|
||||||
|
this.createControl('cancel', this._boundCancelHandler, 'editor_cancel');
|
||||||
|
addText('After', this.options.okControl || this.options.cancelControl);
|
||||||
|
},
|
||||||
|
destroy: function() {
|
||||||
|
if (this._oldInnerHTML)
|
||||||
|
this.element.innerHTML = this._oldInnerHTML;
|
||||||
|
this.leaveEditMode();
|
||||||
|
this.unregisterListeners();
|
||||||
|
},
|
||||||
|
enterEditMode: function(e) {
|
||||||
|
if (this._saving || this._editing) return;
|
||||||
|
this._editing = true;
|
||||||
|
this.triggerCallback('onEnterEditMode');
|
||||||
|
if (this.options.externalControl)
|
||||||
|
this.options.externalControl.hide();
|
||||||
|
this.element.hide();
|
||||||
|
this.createForm();
|
||||||
|
this.element.parentNode.insertBefore(this._form, this.element);
|
||||||
|
if (!this.options.loadTextURL)
|
||||||
|
this.postProcessEditField();
|
||||||
|
if (e) Event.stop(e);
|
||||||
|
},
|
||||||
|
enterHover: function(e) {
|
||||||
|
if (this.options.hoverClassName)
|
||||||
|
this.element.addClassName(this.options.hoverClassName);
|
||||||
|
if (this._saving) return;
|
||||||
|
this.triggerCallback('onEnterHover');
|
||||||
},
|
},
|
||||||
getText: function() {
|
getText: function() {
|
||||||
return this.element.innerHTML;
|
return this.element.innerHTML;
|
||||||
},
|
},
|
||||||
loadExternalText: function() {
|
handleAJAXFailure: function(transport) {
|
||||||
Element.addClassName(this.form, this.options.loadingClassName);
|
this.triggerCallback('onFailure', transport);
|
||||||
this.editField.disabled = true;
|
if (this._oldInnerHTML) {
|
||||||
new Ajax.Request(
|
this.element.innerHTML = this._oldInnerHTML;
|
||||||
this.options.loadTextURL,
|
this._oldInnerHTML = null;
|
||||||
Object.extend({
|
|
||||||
asynchronous: true,
|
|
||||||
onComplete: this.onLoadedExternalText.bind(this)
|
|
||||||
}, this.options.ajaxOptions)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
onLoadedExternalText: function(transport) {
|
|
||||||
Element.removeClassName(this.form, this.options.loadingClassName);
|
|
||||||
this.editField.disabled = false;
|
|
||||||
this.editField.value = transport.responseText.stripTags();
|
|
||||||
Field.scrollFreeActivate(this.editField);
|
|
||||||
},
|
|
||||||
onclickCancel: function() {
|
|
||||||
this.onComplete();
|
|
||||||
this.leaveEditMode();
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onFailure: function(transport) {
|
|
||||||
this.options.onFailure(transport);
|
|
||||||
if (this.oldInnerHTML) {
|
|
||||||
this.element.innerHTML = this.oldInnerHTML;
|
|
||||||
this.oldInnerHTML = null;
|
|
||||||
}
|
}
|
||||||
return false;
|
|
||||||
},
|
},
|
||||||
onSubmit: function() {
|
handleFormCancellation: function(e) {
|
||||||
// onLoading resets these so we need to save them away for the Ajax call
|
this.wrapUp();
|
||||||
var form = this.form;
|
if (e) Event.stop(e);
|
||||||
var value = this.editField.value;
|
},
|
||||||
|
handleFormSubmission: function(e) {
|
||||||
// do this first, sometimes the ajax call returns before we get a chance to switch on Saving...
|
var form = this._form;
|
||||||
// which means this will actually switch on Saving... *after* we've left edit mode causing Saving...
|
var value = $F(this._controls.editor);
|
||||||
// to be displayed indefinitely
|
this.prepareSubmission();
|
||||||
this.onLoading();
|
var params = this.options.callback(form, value) || '';
|
||||||
|
if (Object.isString(params))
|
||||||
if (this.options.evalScripts) {
|
params = params.toQueryParams();
|
||||||
new Ajax.Request(
|
params.editorId = this.element.id;
|
||||||
this.url, Object.extend({
|
if (this.options.htmlResponse) {
|
||||||
parameters: this.options.callback(form, value),
|
var options = Object.extend({ evalScripts: true }, this.options.ajaxOptions);
|
||||||
onComplete: this.onComplete.bind(this),
|
Object.extend(options, {
|
||||||
onFailure: this.onFailure.bind(this),
|
parameters: params,
|
||||||
asynchronous:true,
|
onComplete: this._boundWrapperHandler,
|
||||||
evalScripts:true
|
onFailure: this._boundFailureHandler
|
||||||
}, this.options.ajaxOptions));
|
});
|
||||||
|
new Ajax.Updater({ success: this.element }, this.url, options);
|
||||||
} else {
|
} else {
|
||||||
new Ajax.Updater(
|
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||||
{ success: this.element,
|
Object.extend(options, {
|
||||||
// don't update on failure (this could be an option)
|
parameters: params,
|
||||||
failure: null },
|
onComplete: this._boundWrapperHandler,
|
||||||
this.url, Object.extend({
|
onFailure: this._boundFailureHandler
|
||||||
parameters: this.options.callback(form, value),
|
});
|
||||||
onComplete: this.onComplete.bind(this),
|
new Ajax.Request(this.url, options);
|
||||||
onFailure: this.onFailure.bind(this)
|
|
||||||
}, this.options.ajaxOptions));
|
|
||||||
}
|
}
|
||||||
// stop the event to avoid a page refresh in Safari
|
if (e) Event.stop(e);
|
||||||
if (arguments.length > 1) {
|
|
||||||
Event.stop(arguments[0]);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
},
|
||||||
onLoading: function() {
|
leaveEditMode: function() {
|
||||||
this.saving = true;
|
this.element.removeClassName(this.options.savingClassName);
|
||||||
|
this.removeForm();
|
||||||
|
this.leaveHover();
|
||||||
|
this.element.style.backgroundColor = this._originalBackground;
|
||||||
|
this.element.show();
|
||||||
|
if (this.options.externalControl)
|
||||||
|
this.options.externalControl.show();
|
||||||
|
this._saving = false;
|
||||||
|
this._editing = false;
|
||||||
|
this._oldInnerHTML = null;
|
||||||
|
this.triggerCallback('onLeaveEditMode');
|
||||||
|
},
|
||||||
|
leaveHover: function(e) {
|
||||||
|
if (this.options.hoverClassName)
|
||||||
|
this.element.removeClassName(this.options.hoverClassName);
|
||||||
|
if (this._saving) return;
|
||||||
|
this.triggerCallback('onLeaveHover');
|
||||||
|
},
|
||||||
|
loadExternalText: function() {
|
||||||
|
this._form.addClassName(this.options.loadingClassName);
|
||||||
|
this._controls.editor.disabled = true;
|
||||||
|
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||||
|
Object.extend(options, {
|
||||||
|
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||||
|
onComplete: Prototype.emptyFunction,
|
||||||
|
onSuccess: function(transport) {
|
||||||
|
this._form.removeClassName(this.options.loadingClassName);
|
||||||
|
var text = transport.responseText;
|
||||||
|
if (this.options.stripLoadedTextTags)
|
||||||
|
text = text.stripTags();
|
||||||
|
this._controls.editor.value = text;
|
||||||
|
this._controls.editor.disabled = false;
|
||||||
|
this.postProcessEditField();
|
||||||
|
}.bind(this),
|
||||||
|
onFailure: this._boundFailureHandler
|
||||||
|
});
|
||||||
|
new Ajax.Request(this.options.loadTextURL, options);
|
||||||
|
},
|
||||||
|
postProcessEditField: function() {
|
||||||
|
var fpc = this.options.fieldPostCreation;
|
||||||
|
if (fpc)
|
||||||
|
$(this._controls.editor)['focus' == fpc ? 'focus' : 'activate']();
|
||||||
|
},
|
||||||
|
prepareOptions: function() {
|
||||||
|
this.options = Object.clone(Ajax.InPlaceEditor.DefaultOptions);
|
||||||
|
Object.extend(this.options, Ajax.InPlaceEditor.DefaultCallbacks);
|
||||||
|
[this._extraDefaultOptions].flatten().compact().each(function(defs) {
|
||||||
|
Object.extend(this.options, defs);
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
|
prepareSubmission: function() {
|
||||||
|
this._saving = true;
|
||||||
this.removeForm();
|
this.removeForm();
|
||||||
this.leaveHover();
|
this.leaveHover();
|
||||||
this.showSaving();
|
this.showSaving();
|
||||||
},
|
},
|
||||||
showSaving: function() {
|
registerListeners: function() {
|
||||||
this.oldInnerHTML = this.element.innerHTML;
|
this._listeners = { };
|
||||||
this.element.innerHTML = this.options.savingText;
|
var listener;
|
||||||
Element.addClassName(this.element, this.options.savingClassName);
|
$H(Ajax.InPlaceEditor.Listeners).each(function(pair) {
|
||||||
this.element.style.backgroundColor = this.originalBackground;
|
listener = this[pair.value].bind(this);
|
||||||
Element.show(this.element);
|
this._listeners[pair.key] = listener;
|
||||||
|
if (!this.options.externalControlOnly)
|
||||||
|
this.element.observe(pair.key, listener);
|
||||||
|
if (this.options.externalControl)
|
||||||
|
this.options.externalControl.observe(pair.key, listener);
|
||||||
|
}.bind(this));
|
||||||
},
|
},
|
||||||
removeForm: function() {
|
removeForm: function() {
|
||||||
if(this.form) {
|
if (!this._form) return;
|
||||||
if (this.form.parentNode) Element.remove(this.form);
|
this._form.remove();
|
||||||
this.form = null;
|
this._form = null;
|
||||||
|
this._controls = { };
|
||||||
|
},
|
||||||
|
showSaving: function() {
|
||||||
|
this._oldInnerHTML = this.element.innerHTML;
|
||||||
|
this.element.innerHTML = this.options.savingText;
|
||||||
|
this.element.addClassName(this.options.savingClassName);
|
||||||
|
this.element.style.backgroundColor = this._originalBackground;
|
||||||
|
this.element.show();
|
||||||
|
},
|
||||||
|
triggerCallback: function(cbName, arg) {
|
||||||
|
if ('function' == typeof this.options[cbName]) {
|
||||||
|
this.options[cbName](this, arg);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
enterHover: function() {
|
unregisterListeners: function() {
|
||||||
if (this.saving) return;
|
$H(this._listeners).each(function(pair) {
|
||||||
this.element.style.backgroundColor = this.options.highlightcolor;
|
if (!this.options.externalControlOnly)
|
||||||
if (this.effect) {
|
this.element.stopObserving(pair.key, pair.value);
|
||||||
this.effect.cancel();
|
if (this.options.externalControl)
|
||||||
}
|
this.options.externalControl.stopObserving(pair.key, pair.value);
|
||||||
Element.addClassName(this.element, this.options.hoverClassName)
|
}.bind(this));
|
||||||
},
|
},
|
||||||
leaveHover: function() {
|
wrapUp: function(transport) {
|
||||||
if (this.options.backgroundColor) {
|
this.leaveEditMode();
|
||||||
this.element.style.backgroundColor = this.oldBackground;
|
// Can't use triggerCallback due to backward compatibility: requires
|
||||||
|
// binding + direct element
|
||||||
|
this._boundComplete(transport, this.element);
|
||||||
}
|
}
|
||||||
Element.removeClassName(this.element, this.options.hoverClassName)
|
|
||||||
if (this.saving) return;
|
|
||||||
this.effect = new Effect.Highlight(this.element, {
|
|
||||||
startcolor: this.options.highlightcolor,
|
|
||||||
endcolor: this.options.highlightendcolor,
|
|
||||||
restorecolor: this.originalBackground
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Object.extend(Ajax.InPlaceEditor.prototype, {
|
||||||
|
dispose: Ajax.InPlaceEditor.prototype.destroy
|
||||||
|
});
|
||||||
|
|
||||||
|
Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
|
||||||
|
initialize: function($super, element, url, options) {
|
||||||
|
this._extraDefaultOptions = Ajax.InPlaceCollectionEditor.DefaultOptions;
|
||||||
|
$super(element, url, options);
|
||||||
},
|
},
|
||||||
leaveEditMode: function() {
|
|
||||||
Element.removeClassName(this.element, this.options.savingClassName);
|
createEditField: function() {
|
||||||
this.removeForm();
|
var list = document.createElement('select');
|
||||||
this.leaveHover();
|
list.name = this.options.paramName;
|
||||||
this.element.style.backgroundColor = this.originalBackground;
|
list.size = 1;
|
||||||
Element.show(this.element);
|
this._controls.editor = list;
|
||||||
if (this.options.externalControl) {
|
this._collection = this.options.collection || [];
|
||||||
Element.show(this.options.externalControl);
|
if (this.options.loadCollectionURL)
|
||||||
}
|
this.loadCollection();
|
||||||
this.editing = false;
|
else
|
||||||
this.saving = false;
|
this.checkForExternalText();
|
||||||
this.oldInnerHTML = null;
|
this._form.appendChild(this._controls.editor);
|
||||||
this.onLeaveEditMode();
|
|
||||||
},
|
},
|
||||||
onComplete: function(transport) {
|
|
||||||
this.leaveEditMode();
|
loadCollection: function() {
|
||||||
this.options.onComplete.bind(this)(transport, this.element);
|
this._form.addClassName(this.options.loadingClassName);
|
||||||
|
this.showLoadingText(this.options.loadingCollectionText);
|
||||||
|
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||||
|
Object.extend(options, {
|
||||||
|
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||||
|
onComplete: Prototype.emptyFunction,
|
||||||
|
onSuccess: function(transport) {
|
||||||
|
var js = transport.responseText.strip();
|
||||||
|
if (!/^\[.*\]$/.test(js)) // TODO: improve sanity check
|
||||||
|
throw 'Server returned an invalid collection representation.';
|
||||||
|
this._collection = eval(js);
|
||||||
|
this.checkForExternalText();
|
||||||
|
}.bind(this),
|
||||||
|
onFailure: this.onFailure
|
||||||
|
});
|
||||||
|
new Ajax.Request(this.options.loadCollectionURL, options);
|
||||||
},
|
},
|
||||||
onEnterEditMode: function() {},
|
|
||||||
onLeaveEditMode: function() {},
|
showLoadingText: function(text) {
|
||||||
dispose: function() {
|
this._controls.editor.disabled = true;
|
||||||
if (this.oldInnerHTML) {
|
var tempOption = this._controls.editor.firstChild;
|
||||||
this.element.innerHTML = this.oldInnerHTML;
|
if (!tempOption) {
|
||||||
}
|
tempOption = document.createElement('option');
|
||||||
this.leaveEditMode();
|
tempOption.value = '';
|
||||||
Event.stopObserving(this.element, 'click', this.onclickListener);
|
this._controls.editor.appendChild(tempOption);
|
||||||
Event.stopObserving(this.element, 'mouseover', this.mouseoverListener);
|
tempOption.selected = true;
|
||||||
Event.stopObserving(this.element, 'mouseout', this.mouseoutListener);
|
|
||||||
if (this.options.externalControl) {
|
|
||||||
Event.stopObserving(this.options.externalControl, 'click', this.onclickListener);
|
|
||||||
Event.stopObserving(this.options.externalControl, 'mouseover', this.mouseoverListener);
|
|
||||||
Event.stopObserving(this.options.externalControl, 'mouseout', this.mouseoutListener);
|
|
||||||
}
|
}
|
||||||
|
tempOption.update((text || '').stripScripts().stripTags());
|
||||||
|
},
|
||||||
|
|
||||||
|
checkForExternalText: function() {
|
||||||
|
this._text = this.getText();
|
||||||
|
if (this.options.loadTextURL)
|
||||||
|
this.loadExternalText();
|
||||||
|
else
|
||||||
|
this.buildOptionList();
|
||||||
|
},
|
||||||
|
|
||||||
|
loadExternalText: function() {
|
||||||
|
this.showLoadingText(this.options.loadingText);
|
||||||
|
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||||
|
Object.extend(options, {
|
||||||
|
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||||
|
onComplete: Prototype.emptyFunction,
|
||||||
|
onSuccess: function(transport) {
|
||||||
|
this._text = transport.responseText.strip();
|
||||||
|
this.buildOptionList();
|
||||||
|
}.bind(this),
|
||||||
|
onFailure: this.onFailure
|
||||||
|
});
|
||||||
|
new Ajax.Request(this.options.loadTextURL, options);
|
||||||
|
},
|
||||||
|
|
||||||
|
buildOptionList: function() {
|
||||||
|
this._form.removeClassName(this.options.loadingClassName);
|
||||||
|
this._collection = this._collection.map(function(entry) {
|
||||||
|
return 2 === entry.length ? entry : [entry, entry].flatten();
|
||||||
|
});
|
||||||
|
var marker = ('value' in this.options) ? this.options.value : this._text;
|
||||||
|
var textFound = this._collection.any(function(entry) {
|
||||||
|
return entry[0] == marker;
|
||||||
|
}.bind(this));
|
||||||
|
this._controls.editor.update('');
|
||||||
|
var option;
|
||||||
|
this._collection.each(function(entry, index) {
|
||||||
|
option = document.createElement('option');
|
||||||
|
option.value = entry[0];
|
||||||
|
option.selected = textFound ? entry[0] == marker : 0 == index;
|
||||||
|
option.appendChild(document.createTextNode(entry[1]));
|
||||||
|
this._controls.editor.appendChild(option);
|
||||||
|
}.bind(this));
|
||||||
|
this._controls.editor.disabled = false;
|
||||||
|
Field.scrollFreeActivate(this._controls.editor);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//**** DEPRECATION LAYER FOR InPlace[Collection]Editor! ****
|
||||||
|
//**** This only exists for a while, in order to let ****
|
||||||
|
//**** users adapt to the new API. Read up on the new ****
|
||||||
|
//**** API and convert your code to it ASAP! ****
|
||||||
|
|
||||||
|
Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function(options) {
|
||||||
|
if (!options) return;
|
||||||
|
function fallback(name, expr) {
|
||||||
|
if (name in options || expr === undefined) return;
|
||||||
|
options[name] = expr;
|
||||||
|
};
|
||||||
|
fallback('cancelControl', (options.cancelLink ? 'link' : (options.cancelButton ? 'button' :
|
||||||
|
options.cancelLink == options.cancelButton == false ? false : undefined)));
|
||||||
|
fallback('okControl', (options.okLink ? 'link' : (options.okButton ? 'button' :
|
||||||
|
options.okLink == options.okButton == false ? false : undefined)));
|
||||||
|
fallback('highlightColor', options.highlightcolor);
|
||||||
|
fallback('highlightEndColor', options.highlightendcolor);
|
||||||
};
|
};
|
||||||
|
|
||||||
Ajax.InPlaceCollectionEditor = Class.create();
|
Object.extend(Ajax.InPlaceEditor, {
|
||||||
Object.extend(Ajax.InPlaceCollectionEditor.prototype, Ajax.InPlaceEditor.prototype);
|
DefaultOptions: {
|
||||||
Object.extend(Ajax.InPlaceCollectionEditor.prototype, {
|
ajaxOptions: { },
|
||||||
createEditField: function() {
|
autoRows: 3, // Use when multi-line w/ rows == 1
|
||||||
if (!this.cached_selectTag) {
|
cancelControl: 'link', // 'link'|'button'|false
|
||||||
var selectTag = document.createElement("select");
|
cancelText: 'cancel',
|
||||||
var collection = this.options.collection || [];
|
clickToEditText: 'Click to edit',
|
||||||
var optionTag;
|
externalControl: null, // id|elt
|
||||||
collection.each(function(e,i) {
|
externalControlOnly: false,
|
||||||
optionTag = document.createElement("option");
|
fieldPostCreation: 'activate', // 'activate'|'focus'|false
|
||||||
optionTag.value = (e instanceof Array) ? e[0] : e;
|
formClassName: 'inplaceeditor-form',
|
||||||
if((typeof this.options.value == 'undefined') &&
|
formId: null, // id|elt
|
||||||
((e instanceof Array) ? this.element.innerHTML == e[1] : e == optionTag.value)) optionTag.selected = true;
|
highlightColor: '#ffff99',
|
||||||
if(this.options.value==optionTag.value) optionTag.selected = true;
|
highlightEndColor: '#ffffff',
|
||||||
optionTag.appendChild(document.createTextNode((e instanceof Array) ? e[1] : e));
|
hoverClassName: '',
|
||||||
selectTag.appendChild(optionTag);
|
htmlResponse: true,
|
||||||
}.bind(this));
|
loadingClassName: 'inplaceeditor-loading',
|
||||||
this.cached_selectTag = selectTag;
|
loadingText: 'Loading...',
|
||||||
}
|
okControl: 'button', // 'link'|'button'|false
|
||||||
|
okText: 'ok',
|
||||||
this.editField = this.cached_selectTag;
|
paramName: 'value',
|
||||||
if(this.options.loadTextURL) this.loadExternalText();
|
rows: 1, // If 1 and multi-line, uses autoRows
|
||||||
this.form.appendChild(this.editField);
|
savingClassName: 'inplaceeditor-saving',
|
||||||
this.options.callback = function(form, value) {
|
savingText: 'Saving...',
|
||||||
return "value=" + encodeURIComponent(value);
|
size: 0,
|
||||||
|
stripLoadedTextTags: false,
|
||||||
|
submitOnBlur: false,
|
||||||
|
textAfterControls: '',
|
||||||
|
textBeforeControls: '',
|
||||||
|
textBetweenControls: ''
|
||||||
|
},
|
||||||
|
DefaultCallbacks: {
|
||||||
|
callback: function(form) {
|
||||||
|
return Form.serialize(form);
|
||||||
|
},
|
||||||
|
onComplete: function(transport, element) {
|
||||||
|
// For backward compatibility, this one is bound to the IPE, and passes
|
||||||
|
// the element directly. It was too often customized, so we don't break it.
|
||||||
|
new Effect.Highlight(element, {
|
||||||
|
startcolor: this.options.highlightColor, keepBackgroundImage: true });
|
||||||
|
},
|
||||||
|
onEnterEditMode: null,
|
||||||
|
onEnterHover: function(ipe) {
|
||||||
|
ipe.element.style.backgroundColor = ipe.options.highlightColor;
|
||||||
|
if (ipe._effect)
|
||||||
|
ipe._effect.cancel();
|
||||||
|
},
|
||||||
|
onFailure: function(transport, ipe) {
|
||||||
|
alert('Error communication with the server: ' + transport.responseText.stripTags());
|
||||||
|
},
|
||||||
|
onFormCustomization: null, // Takes the IPE and its generated form, after editor, before controls.
|
||||||
|
onLeaveEditMode: null,
|
||||||
|
onLeaveHover: function(ipe) {
|
||||||
|
ipe._effect = new Effect.Highlight(ipe.element, {
|
||||||
|
startcolor: ipe.options.highlightColor, endcolor: ipe.options.highlightEndColor,
|
||||||
|
restorecolor: ipe._originalBackground, keepBackgroundImage: true
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
Listeners: {
|
||||||
|
click: 'enterEditMode',
|
||||||
|
keydown: 'checkForEscapeOrReturn',
|
||||||
|
mouseover: 'enterHover',
|
||||||
|
mouseout: 'leaveHover'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Ajax.InPlaceCollectionEditor.DefaultOptions = {
|
||||||
|
loadingCollectionText: 'Loading options...'
|
||||||
|
};
|
||||||
|
|
||||||
// Delayed observer, like Form.Element.Observer,
|
// Delayed observer, like Form.Element.Observer,
|
||||||
// but waits for delay after last key input
|
// but waits for delay after last key input
|
||||||
// Ideal for live-search fields
|
// Ideal for live-search fields
|
||||||
|
|
||||||
Form.Element.DelayedObserver = Class.create();
|
Form.Element.DelayedObserver = Class.create({
|
||||||
Form.Element.DelayedObserver.prototype = {
|
|
||||||
initialize: function(element, delay, callback) {
|
initialize: function(element, delay, callback) {
|
||||||
this.delay = delay || 0.5;
|
this.delay = delay || 0.5;
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
|
@ -830,4 +960,4 @@ Form.Element.DelayedObserver.prototype = {
|
||||||
this.timer = null;
|
this.timer = null;
|
||||||
this.callback(this.element, $F(this.element));
|
this.callback(this.element, $F(this.element));
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
|
|
112
public/javascripts/dragdrop.js
vendored
112
public/javascripts/dragdrop.js
vendored
|
@ -1,10 +1,10 @@
|
||||||
// Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
// (c) 2005, 2006 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
|
// (c) 2005-2007 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
|
||||||
//
|
//
|
||||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||||
|
|
||||||
if(typeof Effect == 'undefined')
|
if(Object.isUndefined(Effect))
|
||||||
throw("dragdrop.js requires including script.aculo.us' effects.js library");
|
throw("dragdrop.js requires including script.aculo.us' effects.js library");
|
||||||
|
|
||||||
var Droppables = {
|
var Droppables = {
|
||||||
|
@ -26,8 +26,7 @@ var Droppables = {
|
||||||
if(options.containment) {
|
if(options.containment) {
|
||||||
options._containers = [];
|
options._containers = [];
|
||||||
var containment = options.containment;
|
var containment = options.containment;
|
||||||
if((typeof containment == 'object') &&
|
if(Object.isArray(containment)) {
|
||||||
(containment.constructor == Array)) {
|
|
||||||
containment.each( function(c) { options._containers.push($(c)) });
|
containment.each( function(c) { options._containers.push($(c)) });
|
||||||
} else {
|
} else {
|
||||||
options._containers.push($(containment));
|
options._containers.push($(containment));
|
||||||
|
@ -87,21 +86,23 @@ var Droppables = {
|
||||||
|
|
||||||
show: function(point, element) {
|
show: function(point, element) {
|
||||||
if(!this.drops.length) return;
|
if(!this.drops.length) return;
|
||||||
var affected = [];
|
var drop, affected = [];
|
||||||
|
|
||||||
if(this.last_active) this.deactivate(this.last_active);
|
|
||||||
this.drops.each( function(drop) {
|
this.drops.each( function(drop) {
|
||||||
if(Droppables.isAffected(point, element, drop))
|
if(Droppables.isAffected(point, element, drop))
|
||||||
affected.push(drop);
|
affected.push(drop);
|
||||||
});
|
});
|
||||||
|
|
||||||
if(affected.length>0) {
|
if(affected.length>0)
|
||||||
drop = Droppables.findDeepestChild(affected);
|
drop = Droppables.findDeepestChild(affected);
|
||||||
|
|
||||||
|
if(this.last_active && this.last_active != drop) this.deactivate(this.last_active);
|
||||||
|
if (drop) {
|
||||||
Position.within(drop.element, point[0], point[1]);
|
Position.within(drop.element, point[0], point[1]);
|
||||||
if(drop.onHover)
|
if(drop.onHover)
|
||||||
drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
|
drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
|
||||||
|
|
||||||
Droppables.activate(drop);
|
if (drop != this.last_active) Droppables.activate(drop);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -110,8 +111,10 @@ var Droppables = {
|
||||||
Position.prepare();
|
Position.prepare();
|
||||||
|
|
||||||
if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
|
if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
|
||||||
if (this.last_active.onDrop)
|
if (this.last_active.onDrop) {
|
||||||
this.last_active.onDrop(element, this.last_active.element, event);
|
this.last_active.onDrop(element, this.last_active.element, event);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
reset: function() {
|
reset: function() {
|
||||||
|
@ -219,10 +222,7 @@ var Draggables = {
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
var Draggable = Class.create();
|
var Draggable = Class.create({
|
||||||
Draggable._dragging = {};
|
|
||||||
|
|
||||||
Draggable.prototype = {
|
|
||||||
initialize: function(element) {
|
initialize: function(element) {
|
||||||
var defaults = {
|
var defaults = {
|
||||||
handle: false,
|
handle: false,
|
||||||
|
@ -233,7 +233,7 @@ Draggable.prototype = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
endeffect: function(element) {
|
endeffect: function(element) {
|
||||||
var toOpacity = typeof element._opacity == 'number' ? element._opacity : 1.0;
|
var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0;
|
||||||
new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity,
|
new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity,
|
||||||
queue: {scope:'_draggable', position:'end'},
|
queue: {scope:'_draggable', position:'end'},
|
||||||
afterFinish: function(){
|
afterFinish: function(){
|
||||||
|
@ -243,6 +243,7 @@ Draggable.prototype = {
|
||||||
},
|
},
|
||||||
zindex: 1000,
|
zindex: 1000,
|
||||||
revert: false,
|
revert: false,
|
||||||
|
quiet: false,
|
||||||
scroll: false,
|
scroll: false,
|
||||||
scrollSensitivity: 20,
|
scrollSensitivity: 20,
|
||||||
scrollSpeed: 15,
|
scrollSpeed: 15,
|
||||||
|
@ -250,7 +251,7 @@ Draggable.prototype = {
|
||||||
delay: 0
|
delay: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
if(!arguments[1] || typeof arguments[1].endeffect == 'undefined')
|
if(!arguments[1] || Object.isUndefined(arguments[1].endeffect))
|
||||||
Object.extend(defaults, {
|
Object.extend(defaults, {
|
||||||
starteffect: function(element) {
|
starteffect: function(element) {
|
||||||
element._opacity = Element.getOpacity(element);
|
element._opacity = Element.getOpacity(element);
|
||||||
|
@ -263,7 +264,7 @@ Draggable.prototype = {
|
||||||
|
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
|
|
||||||
if(options.handle && (typeof options.handle == 'string'))
|
if(options.handle && Object.isString(options.handle))
|
||||||
this.handle = this.element.down('.'+options.handle, 0);
|
this.handle = this.element.down('.'+options.handle, 0);
|
||||||
|
|
||||||
if(!this.handle) this.handle = $(options.handle);
|
if(!this.handle) this.handle = $(options.handle);
|
||||||
|
@ -276,7 +277,6 @@ Draggable.prototype = {
|
||||||
|
|
||||||
Element.makePositioned(this.element); // fix IE
|
Element.makePositioned(this.element); // fix IE
|
||||||
|
|
||||||
this.delta = this.currentDelta();
|
|
||||||
this.options = options;
|
this.options = options;
|
||||||
this.dragging = false;
|
this.dragging = false;
|
||||||
|
|
||||||
|
@ -298,17 +298,17 @@ Draggable.prototype = {
|
||||||
},
|
},
|
||||||
|
|
||||||
initDrag: function(event) {
|
initDrag: function(event) {
|
||||||
if(typeof Draggable._dragging[this.element] != 'undefined' &&
|
if(!Object.isUndefined(Draggable._dragging[this.element]) &&
|
||||||
Draggable._dragging[this.element]) return;
|
Draggable._dragging[this.element]) return;
|
||||||
if(Event.isLeftClick(event)) {
|
if(Event.isLeftClick(event)) {
|
||||||
// abort on form elements, fixes a Firefox issue
|
// abort on form elements, fixes a Firefox issue
|
||||||
var src = Event.element(event);
|
var src = Event.element(event);
|
||||||
if(src.tagName && (
|
if((tag_name = src.tagName.toUpperCase()) && (
|
||||||
src.tagName=='INPUT' ||
|
tag_name=='INPUT' ||
|
||||||
src.tagName=='SELECT' ||
|
tag_name=='SELECT' ||
|
||||||
src.tagName=='OPTION' ||
|
tag_name=='OPTION' ||
|
||||||
src.tagName=='BUTTON' ||
|
tag_name=='BUTTON' ||
|
||||||
src.tagName=='TEXTAREA')) return;
|
tag_name=='TEXTAREA')) return;
|
||||||
|
|
||||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||||
var pos = Position.cumulativeOffset(this.element);
|
var pos = Position.cumulativeOffset(this.element);
|
||||||
|
@ -321,6 +321,8 @@ Draggable.prototype = {
|
||||||
|
|
||||||
startDrag: function(event) {
|
startDrag: function(event) {
|
||||||
this.dragging = true;
|
this.dragging = true;
|
||||||
|
if(!this.delta)
|
||||||
|
this.delta = this.currentDelta();
|
||||||
|
|
||||||
if(this.options.zindex) {
|
if(this.options.zindex) {
|
||||||
this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
|
this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
|
||||||
|
@ -329,6 +331,8 @@ Draggable.prototype = {
|
||||||
|
|
||||||
if(this.options.ghosting) {
|
if(this.options.ghosting) {
|
||||||
this._clone = this.element.cloneNode(true);
|
this._clone = this.element.cloneNode(true);
|
||||||
|
this.element._originallyAbsolute = (this.element.getStyle('position') == 'absolute');
|
||||||
|
if (!this.element._originallyAbsolute)
|
||||||
Position.absolutize(this.element);
|
Position.absolutize(this.element);
|
||||||
this.element.parentNode.insertBefore(this._clone, this.element);
|
this.element.parentNode.insertBefore(this._clone, this.element);
|
||||||
}
|
}
|
||||||
|
@ -351,8 +355,12 @@ Draggable.prototype = {
|
||||||
|
|
||||||
updateDrag: function(event, pointer) {
|
updateDrag: function(event, pointer) {
|
||||||
if(!this.dragging) this.startDrag(event);
|
if(!this.dragging) this.startDrag(event);
|
||||||
|
|
||||||
|
if(!this.options.quiet){
|
||||||
Position.prepare();
|
Position.prepare();
|
||||||
Droppables.show(pointer, this.element);
|
Droppables.show(pointer, this.element);
|
||||||
|
}
|
||||||
|
|
||||||
Draggables.notify('onDrag', this, event);
|
Draggables.notify('onDrag', this, event);
|
||||||
|
|
||||||
this.draw(pointer);
|
this.draw(pointer);
|
||||||
|
@ -380,7 +388,7 @@ Draggable.prototype = {
|
||||||
}
|
}
|
||||||
|
|
||||||
// fix AppleWebKit rendering
|
// fix AppleWebKit rendering
|
||||||
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
if(Prototype.Browser.WebKit) window.scrollBy(0,0);
|
||||||
|
|
||||||
Event.stop(event);
|
Event.stop(event);
|
||||||
},
|
},
|
||||||
|
@ -388,20 +396,34 @@ Draggable.prototype = {
|
||||||
finishDrag: function(event, success) {
|
finishDrag: function(event, success) {
|
||||||
this.dragging = false;
|
this.dragging = false;
|
||||||
|
|
||||||
|
if(this.options.quiet){
|
||||||
|
Position.prepare();
|
||||||
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||||
|
Droppables.show(pointer, this.element);
|
||||||
|
}
|
||||||
|
|
||||||
if(this.options.ghosting) {
|
if(this.options.ghosting) {
|
||||||
|
if (!this.element._originallyAbsolute)
|
||||||
Position.relativize(this.element);
|
Position.relativize(this.element);
|
||||||
|
delete this.element._originallyAbsolute;
|
||||||
Element.remove(this._clone);
|
Element.remove(this._clone);
|
||||||
this._clone = null;
|
this._clone = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(success) Droppables.fire(event, this.element);
|
var dropped = false;
|
||||||
|
if(success) {
|
||||||
|
dropped = Droppables.fire(event, this.element);
|
||||||
|
if (!dropped) dropped = false;
|
||||||
|
}
|
||||||
|
if(dropped && this.options.onDropped) this.options.onDropped(this.element);
|
||||||
Draggables.notify('onEnd', this, event);
|
Draggables.notify('onEnd', this, event);
|
||||||
|
|
||||||
var revert = this.options.revert;
|
var revert = this.options.revert;
|
||||||
if(revert && typeof revert == 'function') revert = revert(this.element);
|
if(revert && Object.isFunction(revert)) revert = revert(this.element);
|
||||||
|
|
||||||
var d = this.currentDelta();
|
var d = this.currentDelta();
|
||||||
if(revert && this.options.reverteffect) {
|
if(revert && this.options.reverteffect) {
|
||||||
|
if (dropped == 0 || revert != 'failure')
|
||||||
this.options.reverteffect(this.element,
|
this.options.reverteffect(this.element,
|
||||||
d[1]-this.delta[1], d[0]-this.delta[0]);
|
d[1]-this.delta[1], d[0]-this.delta[0]);
|
||||||
} else {
|
} else {
|
||||||
|
@ -451,15 +473,15 @@ Draggable.prototype = {
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
if(this.options.snap) {
|
if(this.options.snap) {
|
||||||
if(typeof this.options.snap == 'function') {
|
if(Object.isFunction(this.options.snap)) {
|
||||||
p = this.options.snap(p[0],p[1],this);
|
p = this.options.snap(p[0],p[1],this);
|
||||||
} else {
|
} else {
|
||||||
if(this.options.snap instanceof Array) {
|
if(Object.isArray(this.options.snap)) {
|
||||||
p = p.map( function(v, i) {
|
p = p.map( function(v, i) {
|
||||||
return Math.round(v/this.options.snap[i])*this.options.snap[i] }.bind(this))
|
return (v/this.options.snap[i]).round()*this.options.snap[i] }.bind(this))
|
||||||
} else {
|
} else {
|
||||||
p = p.map( function(v) {
|
p = p.map( function(v) {
|
||||||
return Math.round(v/this.options.snap)*this.options.snap }.bind(this))
|
return (v/this.options.snap).round()*this.options.snap }.bind(this))
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
||||||
|
@ -543,12 +565,13 @@ Draggable.prototype = {
|
||||||
}
|
}
|
||||||
return { top: T, left: L, width: W, height: H };
|
return { top: T, left: L, width: W, height: H };
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
|
Draggable._dragging = { };
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
var SortableObserver = Class.create();
|
var SortableObserver = Class.create({
|
||||||
SortableObserver.prototype = {
|
|
||||||
initialize: function(element, observer) {
|
initialize: function(element, observer) {
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
this.observer = observer;
|
this.observer = observer;
|
||||||
|
@ -564,7 +587,7 @@ SortableObserver.prototype = {
|
||||||
if(this.lastValue != Sortable.serialize(this.element))
|
if(this.lastValue != Sortable.serialize(this.element))
|
||||||
this.observer(this.element)
|
this.observer(this.element)
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
var Sortable = {
|
var Sortable = {
|
||||||
SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
|
SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
|
||||||
|
@ -572,7 +595,7 @@ var Sortable = {
|
||||||
sortables: { },
|
sortables: { },
|
||||||
|
|
||||||
_findRootElement: function(element) {
|
_findRootElement: function(element) {
|
||||||
while (element.tagName != "BODY") {
|
while (element.tagName.toUpperCase() != "BODY") {
|
||||||
if(element.id && Sortable.sortables[element.id]) return element;
|
if(element.id && Sortable.sortables[element.id]) return element;
|
||||||
element = element.parentNode;
|
element = element.parentNode;
|
||||||
}
|
}
|
||||||
|
@ -612,10 +635,17 @@ var Sortable = {
|
||||||
delay: 0,
|
delay: 0,
|
||||||
hoverclass: null,
|
hoverclass: null,
|
||||||
ghosting: false,
|
ghosting: false,
|
||||||
|
quiet: false,
|
||||||
scroll: false,
|
scroll: false,
|
||||||
scrollSensitivity: 20,
|
scrollSensitivity: 20,
|
||||||
scrollSpeed: 15,
|
scrollSpeed: 15,
|
||||||
format: this.SERIALIZE_RULE,
|
format: this.SERIALIZE_RULE,
|
||||||
|
|
||||||
|
// these take arrays of elements or ids and can be
|
||||||
|
// used for better initialization performance
|
||||||
|
elements: false,
|
||||||
|
handles: false,
|
||||||
|
|
||||||
onChange: Prototype.emptyFunction,
|
onChange: Prototype.emptyFunction,
|
||||||
onUpdate: Prototype.emptyFunction
|
onUpdate: Prototype.emptyFunction
|
||||||
}, arguments[1] || { });
|
}, arguments[1] || { });
|
||||||
|
@ -626,6 +656,7 @@ var Sortable = {
|
||||||
// build options for the draggables
|
// build options for the draggables
|
||||||
var options_for_draggable = {
|
var options_for_draggable = {
|
||||||
revert: true,
|
revert: true,
|
||||||
|
quiet: options.quiet,
|
||||||
scroll: options.scroll,
|
scroll: options.scroll,
|
||||||
scrollSpeed: options.scrollSpeed,
|
scrollSpeed: options.scrollSpeed,
|
||||||
scrollSensitivity: options.scrollSensitivity,
|
scrollSensitivity: options.scrollSensitivity,
|
||||||
|
@ -679,10 +710,9 @@ var Sortable = {
|
||||||
options.droppables.push(element);
|
options.droppables.push(element);
|
||||||
}
|
}
|
||||||
|
|
||||||
(this.findElements(element, options) || []).each( function(e) {
|
(options.elements || this.findElements(element, options) || []).each( function(e,i) {
|
||||||
// handles are per-draggable
|
var handle = options.handles ? $(options.handles[i]) :
|
||||||
var handle = options.handle ?
|
(options.handle ? $(e).select('.' + options.handle)[0] : e);
|
||||||
$(e).down('.'+options.handle,0) : e;
|
|
||||||
options.draggables.push(
|
options.draggables.push(
|
||||||
new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
|
new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
|
||||||
Droppables.add(e, options_for_droppable);
|
Droppables.add(e, options_for_droppable);
|
||||||
|
|
598
public/javascripts/effects.js
vendored
598
public/javascripts/effects.js
vendored
|
@ -1,4 +1,4 @@
|
||||||
// Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
// Contributors:
|
// Contributors:
|
||||||
// Justin Palmer (http://encytemedia.com/)
|
// Justin Palmer (http://encytemedia.com/)
|
||||||
// Mark Pilgrim (http://diveintomark.org/)
|
// Mark Pilgrim (http://diveintomark.org/)
|
||||||
|
@ -21,7 +21,7 @@ String.prototype.parseColor = function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (color.length==7 ? color : (arguments[0] || this));
|
return (color.length==7 ? color : (arguments[0] || this));
|
||||||
}
|
};
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ Element.collectTextNodes = function(element) {
|
||||||
return (node.nodeType==3 ? node.nodeValue :
|
return (node.nodeType==3 ? node.nodeValue :
|
||||||
(node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
|
(node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
|
||||||
}).flatten().join('');
|
}).flatten().join('');
|
||||||
}
|
};
|
||||||
|
|
||||||
Element.collectTextNodesIgnoreClass = function(element, className) {
|
Element.collectTextNodesIgnoreClass = function(element, className) {
|
||||||
return $A($(element).childNodes).collect( function(node) {
|
return $A($(element).childNodes).collect( function(node) {
|
||||||
|
@ -38,47 +38,18 @@ Element.collectTextNodesIgnoreClass = function(element, className) {
|
||||||
((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
|
((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
|
||||||
Element.collectTextNodesIgnoreClass(node, className) : ''));
|
Element.collectTextNodesIgnoreClass(node, className) : ''));
|
||||||
}).flatten().join('');
|
}).flatten().join('');
|
||||||
}
|
};
|
||||||
|
|
||||||
Element.setContentZoom = function(element, percent) {
|
Element.setContentZoom = function(element, percent) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
element.setStyle({fontSize: (percent/100) + 'em'});
|
element.setStyle({fontSize: (percent/100) + 'em'});
|
||||||
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
if (Prototype.Browser.WebKit) window.scrollBy(0,0);
|
||||||
return element;
|
return element;
|
||||||
}
|
};
|
||||||
|
|
||||||
Element.getOpacity = function(element){
|
|
||||||
element = $(element);
|
|
||||||
var opacity;
|
|
||||||
if (opacity = element.getStyle('opacity'))
|
|
||||||
return parseFloat(opacity);
|
|
||||||
if (opacity = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/))
|
|
||||||
if(opacity[1]) return parseFloat(opacity[1]) / 100;
|
|
||||||
return 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.setOpacity = function(element, value){
|
|
||||||
element= $(element);
|
|
||||||
if (value == 1){
|
|
||||||
element.setStyle({ opacity:
|
|
||||||
(/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
|
|
||||||
0.999999 : 1.0 });
|
|
||||||
if(/MSIE/.test(navigator.userAgent) && !window.opera)
|
|
||||||
element.setStyle({filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
|
|
||||||
} else {
|
|
||||||
if(value < 0.00001) value = 0;
|
|
||||||
element.setStyle({opacity: value});
|
|
||||||
if(/MSIE/.test(navigator.userAgent) && !window.opera)
|
|
||||||
element.setStyle(
|
|
||||||
{ filter: element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,'') +
|
|
||||||
'alpha(opacity='+value*100+')' });
|
|
||||||
}
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
Element.getInlineOpacity = function(element){
|
Element.getInlineOpacity = function(element){
|
||||||
return $(element).style.opacity || '';
|
return $(element).style.opacity || '';
|
||||||
}
|
};
|
||||||
|
|
||||||
Element.forceRerendering = function(element) {
|
Element.forceRerendering = function(element) {
|
||||||
try {
|
try {
|
||||||
|
@ -91,31 +62,63 @@ Element.forceRerendering = function(element) {
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
Array.prototype.call = function() {
|
|
||||||
var args = arguments;
|
|
||||||
this.each(function(f){ f.apply(this, args) });
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
var Effect = {
|
var Effect = {
|
||||||
_elementDoesNotExistError: {
|
_elementDoesNotExistError: {
|
||||||
name: 'ElementDoesNotExistError',
|
name: 'ElementDoesNotExistError',
|
||||||
message: 'The specified DOM element does not exist, but is required for this effect to operate'
|
message: 'The specified DOM element does not exist, but is required for this effect to operate'
|
||||||
},
|
},
|
||||||
|
Transitions: {
|
||||||
|
linear: Prototype.K,
|
||||||
|
sinoidal: function(pos) {
|
||||||
|
return (-Math.cos(pos*Math.PI)/2) + 0.5;
|
||||||
|
},
|
||||||
|
reverse: function(pos) {
|
||||||
|
return 1-pos;
|
||||||
|
},
|
||||||
|
flicker: function(pos) {
|
||||||
|
var pos = ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
|
||||||
|
return pos > 1 ? 1 : pos;
|
||||||
|
},
|
||||||
|
wobble: function(pos) {
|
||||||
|
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
|
||||||
|
},
|
||||||
|
pulse: function(pos, pulses) {
|
||||||
|
pulses = pulses || 5;
|
||||||
|
return (
|
||||||
|
((pos % (1/pulses)) * pulses).round() == 0 ?
|
||||||
|
((pos * pulses * 2) - (pos * pulses * 2).floor()) :
|
||||||
|
1 - ((pos * pulses * 2) - (pos * pulses * 2).floor())
|
||||||
|
);
|
||||||
|
},
|
||||||
|
spring: function(pos) {
|
||||||
|
return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
|
||||||
|
},
|
||||||
|
none: function(pos) {
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
full: function(pos) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
DefaultOptions: {
|
||||||
|
duration: 1.0, // seconds
|
||||||
|
fps: 100, // 100= assume 66fps max.
|
||||||
|
sync: false, // true for combining
|
||||||
|
from: 0.0,
|
||||||
|
to: 1.0,
|
||||||
|
delay: 0.0,
|
||||||
|
queue: 'parallel'
|
||||||
|
},
|
||||||
tagifyText: function(element) {
|
tagifyText: function(element) {
|
||||||
if(typeof Builder == 'undefined')
|
|
||||||
throw("Effect.tagifyText requires including script.aculo.us' builder.js library");
|
|
||||||
|
|
||||||
var tagifyStyle = 'position:relative';
|
var tagifyStyle = 'position:relative';
|
||||||
if(/MSIE/.test(navigator.userAgent) && !window.opera) tagifyStyle += ';zoom:1';
|
if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
|
||||||
|
|
||||||
element = $(element);
|
element = $(element);
|
||||||
$A(element.childNodes).each( function(child) {
|
$A(element.childNodes).each( function(child) {
|
||||||
if (child.nodeType==3) {
|
if (child.nodeType==3) {
|
||||||
child.nodeValue.toArray().each( function(character) {
|
child.nodeValue.toArray().each( function(character) {
|
||||||
element.insertBefore(
|
element.insertBefore(
|
||||||
Builder.node('span',{style: tagifyStyle},
|
new Element('span', {style: tagifyStyle}).update(
|
||||||
character == ' ' ? String.fromCharCode(160) : character),
|
character == ' ' ? String.fromCharCode(160) : character),
|
||||||
child);
|
child);
|
||||||
});
|
});
|
||||||
|
@ -126,7 +129,7 @@ var Effect = {
|
||||||
multiple: function(element, effect) {
|
multiple: function(element, effect) {
|
||||||
var elements;
|
var elements;
|
||||||
if (((typeof element == 'object') ||
|
if (((typeof element == 'object') ||
|
||||||
(typeof element == 'function')) &&
|
Object.isFunction(element)) &&
|
||||||
(element.length))
|
(element.length))
|
||||||
elements = element;
|
elements = element;
|
||||||
else
|
else
|
||||||
|
@ -158,44 +161,11 @@ var Effect = {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var Effect2 = Effect; // deprecated
|
Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
|
||||||
|
|
||||||
/* ------------- transitions ------------- */
|
|
||||||
|
|
||||||
Effect.Transitions = {
|
|
||||||
linear: Prototype.K,
|
|
||||||
sinoidal: function(pos) {
|
|
||||||
return (-Math.cos(pos*Math.PI)/2) + 0.5;
|
|
||||||
},
|
|
||||||
reverse: function(pos) {
|
|
||||||
return 1-pos;
|
|
||||||
},
|
|
||||||
flicker: function(pos) {
|
|
||||||
return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
|
|
||||||
},
|
|
||||||
wobble: function(pos) {
|
|
||||||
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
|
|
||||||
},
|
|
||||||
pulse: function(pos, pulses) {
|
|
||||||
pulses = pulses || 5;
|
|
||||||
return (
|
|
||||||
Math.round((pos % (1/pulses)) * pulses) == 0 ?
|
|
||||||
((pos * pulses * 2) - Math.floor(pos * pulses * 2)) :
|
|
||||||
1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2))
|
|
||||||
);
|
|
||||||
},
|
|
||||||
none: function(pos) {
|
|
||||||
return 0;
|
|
||||||
},
|
|
||||||
full: function(pos) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ------------- core effects ------------- */
|
/* ------------- core effects ------------- */
|
||||||
|
|
||||||
Effect.ScopedQueue = Class.create();
|
Effect.ScopedQueue = Class.create(Enumerable, {
|
||||||
Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.effects = [];
|
this.effects = [];
|
||||||
this.interval = null;
|
this.interval = null;
|
||||||
|
@ -206,7 +176,7 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
||||||
add: function(effect) {
|
add: function(effect) {
|
||||||
var timestamp = new Date().getTime();
|
var timestamp = new Date().getTime();
|
||||||
|
|
||||||
var position = (typeof effect.options.queue == 'string') ?
|
var position = Object.isString(effect.options.queue) ?
|
||||||
effect.options.queue : effect.options.queue.position;
|
effect.options.queue : effect.options.queue.position;
|
||||||
|
|
||||||
switch(position) {
|
switch(position) {
|
||||||
|
@ -233,7 +203,7 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
||||||
this.effects.push(effect);
|
this.effects.push(effect);
|
||||||
|
|
||||||
if (!this.interval)
|
if (!this.interval)
|
||||||
this.interval = setInterval(this.loop.bind(this), 40);
|
this.interval = setInterval(this.loop.bind(this), 15);
|
||||||
},
|
},
|
||||||
remove: function(effect) {
|
remove: function(effect) {
|
||||||
this.effects = this.effects.reject(function(e) { return e==effect });
|
this.effects = this.effects.reject(function(e) { return e==effect });
|
||||||
|
@ -244,46 +214,57 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
||||||
},
|
},
|
||||||
loop: function() {
|
loop: function() {
|
||||||
var timePos = new Date().getTime();
|
var timePos = new Date().getTime();
|
||||||
this.effects.invoke('loop', timePos);
|
for(var i=0, len=this.effects.length;i<len;i++)
|
||||||
|
this.effects[i] && this.effects[i].loop(timePos);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Effect.Queues = {
|
Effect.Queues = {
|
||||||
instances: $H(),
|
instances: $H(),
|
||||||
get: function(queueName) {
|
get: function(queueName) {
|
||||||
if(typeof queueName != 'string') return queueName;
|
if (!Object.isString(queueName)) return queueName;
|
||||||
|
|
||||||
if(!this.instances[queueName])
|
return this.instances.get(queueName) ||
|
||||||
this.instances[queueName] = new Effect.ScopedQueue();
|
this.instances.set(queueName, new Effect.ScopedQueue());
|
||||||
|
|
||||||
return this.instances[queueName];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
Effect.Queue = Effect.Queues.get('global');
|
Effect.Queue = Effect.Queues.get('global');
|
||||||
|
|
||||||
Effect.DefaultOptions = {
|
Effect.Base = Class.create({
|
||||||
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'
|
|
||||||
}
|
|
||||||
|
|
||||||
Effect.Base = function() {};
|
|
||||||
Effect.Base.prototype = {
|
|
||||||
position: null,
|
position: null,
|
||||||
start: function(options) {
|
start: function(options) {
|
||||||
|
function codeForEvent(options,eventName){
|
||||||
|
return (
|
||||||
|
(options[eventName+'Internal'] ? 'this.options.'+eventName+'Internal(this);' : '') +
|
||||||
|
(options[eventName] ? 'this.options.'+eventName+'(this);' : '')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (options && options.transition === false) options.transition = Effect.Transitions.linear;
|
||||||
this.options = Object.extend(Object.extend({ },Effect.DefaultOptions), 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.fromToDelta = this.options.to-this.options.from;
|
||||||
|
this.totalTime = this.finishOn-this.startOn;
|
||||||
|
this.totalFrames = this.options.fps*this.options.duration;
|
||||||
|
|
||||||
|
eval('this.render = function(pos){ '+
|
||||||
|
'if (this.state=="idle"){this.state="running";'+
|
||||||
|
codeForEvent(this.options,'beforeSetup')+
|
||||||
|
(this.setup ? 'this.setup();':'')+
|
||||||
|
codeForEvent(this.options,'afterSetup')+
|
||||||
|
'};if (this.state=="running"){'+
|
||||||
|
'pos=this.options.transition(pos)*'+this.fromToDelta+'+'+this.options.from+';'+
|
||||||
|
'this.position=pos;'+
|
||||||
|
codeForEvent(this.options,'beforeUpdate')+
|
||||||
|
(this.update ? 'this.update(pos);':'')+
|
||||||
|
codeForEvent(this.options,'afterUpdate')+
|
||||||
|
'}}');
|
||||||
|
|
||||||
this.event('beforeStart');
|
this.event('beforeStart');
|
||||||
if (!this.options.sync)
|
if (!this.options.sync)
|
||||||
Effect.Queues.get(typeof this.options.queue == 'string' ?
|
Effect.Queues.get(Object.isString(this.options.queue) ?
|
||||||
'global' : this.options.queue.scope).add(this);
|
'global' : this.options.queue.scope).add(this);
|
||||||
},
|
},
|
||||||
loop: function(timePos) {
|
loop: function(timePos) {
|
||||||
|
@ -296,34 +277,17 @@ Effect.Base.prototype = {
|
||||||
this.event('afterFinish');
|
this.event('afterFinish');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var pos = (timePos - this.startOn) / (this.finishOn - this.startOn);
|
var pos = (timePos - this.startOn) / this.totalTime,
|
||||||
var frame = Math.round(pos * this.options.fps * this.options.duration);
|
frame = (pos * this.totalFrames).round();
|
||||||
if (frame > this.currentFrame) {
|
if (frame > this.currentFrame) {
|
||||||
this.render(pos);
|
this.render(pos);
|
||||||
this.currentFrame = frame;
|
this.currentFrame = frame;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render: function(pos) {
|
|
||||||
if(this.state == 'idle') {
|
|
||||||
this.state = 'running';
|
|
||||||
this.event('beforeSetup');
|
|
||||||
if(this.setup) this.setup();
|
|
||||||
this.event('afterSetup');
|
|
||||||
}
|
|
||||||
if(this.state == 'running') {
|
|
||||||
if(this.options.transition) pos = this.options.transition(pos);
|
|
||||||
pos *= (this.options.to-this.options.from);
|
|
||||||
pos += this.options.from;
|
|
||||||
this.position = pos;
|
|
||||||
this.event('beforeUpdate');
|
|
||||||
if(this.update) this.update(pos);
|
|
||||||
this.event('afterUpdate');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
cancel: function() {
|
cancel: function() {
|
||||||
if (!this.options.sync)
|
if (!this.options.sync)
|
||||||
Effect.Queues.get(typeof this.options.queue == 'string' ?
|
Effect.Queues.get(Object.isString(this.options.queue) ?
|
||||||
'global' : this.options.queue.scope).remove(this);
|
'global' : this.options.queue.scope).remove(this);
|
||||||
this.state = 'finished';
|
this.state = 'finished';
|
||||||
},
|
},
|
||||||
|
@ -332,12 +296,14 @@ Effect.Base.prototype = {
|
||||||
if (this.options[eventName]) this.options[eventName](this);
|
if (this.options[eventName]) this.options[eventName](this);
|
||||||
},
|
},
|
||||||
inspect: function() {
|
inspect: function() {
|
||||||
return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
|
var data = $H();
|
||||||
}
|
for(property in this)
|
||||||
|
if (!Object.isFunction(this[property])) data.set(property, this[property]);
|
||||||
|
return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
Effect.Parallel = Class.create();
|
Effect.Parallel = Class.create(Effect.Base, {
|
||||||
Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(effects) {
|
initialize: function(effects) {
|
||||||
this.effects = effects || [];
|
this.effects = effects || [];
|
||||||
this.start(arguments[1]);
|
this.start(arguments[1]);
|
||||||
|
@ -356,24 +322,34 @@ Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Effect.Event = Class.create();
|
Effect.Tween = Class.create(Effect.Base, {
|
||||||
Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), {
|
initialize: function(object, from, to) {
|
||||||
|
object = Object.isString(object) ? $(object) : object;
|
||||||
|
var args = $A(arguments), method = args.last(),
|
||||||
|
options = args.length == 5 ? args[3] : null;
|
||||||
|
this.method = Object.isFunction(method) ? method.bind(object) :
|
||||||
|
Object.isFunction(object[method]) ? object[method].bind(object) :
|
||||||
|
function(value) { object[method] = value };
|
||||||
|
this.start(Object.extend({ from: from, to: to }, options || { }));
|
||||||
|
},
|
||||||
|
update: function(position) {
|
||||||
|
this.method(position);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Effect.Event = Class.create(Effect.Base, {
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
var options = Object.extend({
|
this.start(Object.extend({ duration: 0 }, arguments[0] || { }));
|
||||||
duration: 0
|
|
||||||
}, arguments[0] || {});
|
|
||||||
this.start(options);
|
|
||||||
},
|
},
|
||||||
update: Prototype.emptyFunction
|
update: Prototype.emptyFunction
|
||||||
});
|
});
|
||||||
|
|
||||||
Effect.Opacity = Class.create();
|
Effect.Opacity = Class.create(Effect.Base, {
|
||||||
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
initialize: function(element) {
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
if (!this.element) throw(Effect._elementDoesNotExistError);
|
if (!this.element) throw(Effect._elementDoesNotExistError);
|
||||||
// make this work on IE on elements without 'layout'
|
// make this work on IE on elements without 'layout'
|
||||||
if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout))
|
if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
|
||||||
this.element.setStyle({zoom: 1});
|
this.element.setStyle({zoom: 1});
|
||||||
var options = Object.extend({
|
var options = Object.extend({
|
||||||
from: this.element.getOpacity() || 0.0,
|
from: this.element.getOpacity() || 0.0,
|
||||||
|
@ -386,8 +362,7 @@ Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Effect.Move = Class.create();
|
Effect.Move = Class.create(Effect.Base, {
|
||||||
Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
initialize: function(element) {
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
if (!this.element) throw(Effect._elementDoesNotExistError);
|
if (!this.element) throw(Effect._elementDoesNotExistError);
|
||||||
|
@ -399,23 +374,18 @@ Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
|
||||||
this.start(options);
|
this.start(options);
|
||||||
},
|
},
|
||||||
setup: function() {
|
setup: function() {
|
||||||
// Bug in Opera: Opera returns the "real" position of a static element or
|
|
||||||
// relative element that does not have top/left explicitly set.
|
|
||||||
// ==> Always set top and left for position relative elements in your stylesheets
|
|
||||||
// (to 0 if you do not need them)
|
|
||||||
this.element.makePositioned();
|
this.element.makePositioned();
|
||||||
this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
|
this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
|
||||||
this.originalTop = parseFloat(this.element.getStyle('top') || '0');
|
this.originalTop = parseFloat(this.element.getStyle('top') || '0');
|
||||||
if (this.options.mode == 'absolute') {
|
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.x = this.options.x - this.originalLeft;
|
||||||
this.options.y = this.options.y - this.originalTop;
|
this.options.y = this.options.y - this.originalTop;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
update: function(position) {
|
update: function(position) {
|
||||||
this.element.setStyle({
|
this.element.setStyle({
|
||||||
left: Math.round(this.options.x * position + this.originalLeft) + 'px',
|
left: (this.options.x * position + this.originalLeft).round() + 'px',
|
||||||
top: Math.round(this.options.y * position + this.originalTop) + 'px'
|
top: (this.options.y * position + this.originalTop).round() + 'px'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -426,8 +396,7 @@ Effect.MoveBy = function(element, toTop, toLeft) {
|
||||||
Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
|
Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
|
||||||
};
|
};
|
||||||
|
|
||||||
Effect.Scale = Class.create();
|
Effect.Scale = Class.create(Effect.Base, {
|
||||||
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element, percent) {
|
initialize: function(element, percent) {
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
if (!this.element) throw(Effect._elementDoesNotExistError);
|
if (!this.element) throw(Effect._elementDoesNotExistError);
|
||||||
|
@ -484,8 +453,8 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
||||||
},
|
},
|
||||||
setDimensions: function(height, width) {
|
setDimensions: function(height, width) {
|
||||||
var d = { };
|
var d = { };
|
||||||
if(this.options.scaleX) d.width = Math.round(width) + 'px';
|
if (this.options.scaleX) d.width = width.round() + 'px';
|
||||||
if(this.options.scaleY) d.height = Math.round(height) + 'px';
|
if (this.options.scaleY) d.height = height.round() + 'px';
|
||||||
if (this.options.scaleFromCenter) {
|
if (this.options.scaleFromCenter) {
|
||||||
var topd = (height - this.dims[0])/2;
|
var topd = (height - this.dims[0])/2;
|
||||||
var leftd = (width - this.dims[1])/2;
|
var leftd = (width - this.dims[1])/2;
|
||||||
|
@ -501,8 +470,7 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Effect.Highlight = Class.create();
|
Effect.Highlight = Class.create(Effect.Base, {
|
||||||
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
initialize: function(element) {
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
if (!this.element) throw(Effect._elementDoesNotExistError);
|
if (!this.element) throw(Effect._elementDoesNotExistError);
|
||||||
|
@ -513,9 +481,11 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype),
|
||||||
// Prevent executing on elements not in the layout flow
|
// Prevent executing on elements not in the layout flow
|
||||||
if (this.element.getStyle('display')=='none') { this.cancel(); return; }
|
if (this.element.getStyle('display')=='none') { this.cancel(); return; }
|
||||||
// Disable background image during the effect
|
// Disable background image during the effect
|
||||||
this.oldStyle = {
|
this.oldStyle = { };
|
||||||
backgroundImage: this.element.getStyle('background-image') };
|
if (!this.options.keepBackgroundImage) {
|
||||||
|
this.oldStyle.backgroundImage = this.element.getStyle('background-image');
|
||||||
this.element.setStyle({backgroundImage: 'none'});
|
this.element.setStyle({backgroundImage: 'none'});
|
||||||
|
}
|
||||||
if (!this.options.endcolor)
|
if (!this.options.endcolor)
|
||||||
this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
|
this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
|
||||||
if (!this.options.restorecolor)
|
if (!this.options.restorecolor)
|
||||||
|
@ -526,7 +496,7 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype),
|
||||||
},
|
},
|
||||||
update: function(position) {
|
update: function(position) {
|
||||||
this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
|
this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
|
||||||
return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
|
return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
|
||||||
},
|
},
|
||||||
finish: function() {
|
finish: function() {
|
||||||
this.element.setStyle(Object.extend(this.oldStyle, {
|
this.element.setStyle(Object.extend(this.oldStyle, {
|
||||||
|
@ -535,30 +505,21 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype),
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Effect.ScrollTo = Class.create();
|
Effect.ScrollTo = function(element) {
|
||||||
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
|
var options = arguments[1] || { },
|
||||||
initialize: function(element) {
|
scrollOffsets = document.viewport.getScrollOffsets(),
|
||||||
this.element = $(element);
|
elementOffsets = $(element).cumulativeOffset(),
|
||||||
this.start(arguments[1] || {});
|
max = (window.height || document.body.scrollHeight) - document.viewport.getHeight();
|
||||||
},
|
|
||||||
setup: function() {
|
if (options.offset) elementOffsets[1] += options.offset;
|
||||||
Position.prepare();
|
|
||||||
var offsets = Position.cumulativeOffset(this.element);
|
return new Effect.Tween(null,
|
||||||
if(this.options.offset) offsets[1] += this.options.offset;
|
scrollOffsets.top,
|
||||||
var max = window.innerHeight ?
|
elementOffsets[1] > max ? max : elementOffsets[1],
|
||||||
window.height - window.innerHeight :
|
options,
|
||||||
document.body.scrollHeight -
|
function(p){ scrollTo(scrollOffsets.left, p.round()) }
|
||||||
(document.documentElement.clientHeight ?
|
);
|
||||||
document.documentElement.clientHeight : document.body.clientHeight);
|
};
|
||||||
this.scrollStart = Position.deltaY;
|
|
||||||
this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
|
|
||||||
},
|
|
||||||
update: function(position) {
|
|
||||||
Position.prepare();
|
|
||||||
window.scrollTo(Position.deltaX,
|
|
||||||
this.scrollStart + (position*this.delta));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ------------- combination effects ------------- */
|
/* ------------- combination effects ------------- */
|
||||||
|
|
||||||
|
@ -571,9 +532,10 @@ Effect.Fade = function(element) {
|
||||||
afterFinishInternal: function(effect) {
|
afterFinishInternal: function(effect) {
|
||||||
if (effect.options.to!=0) return;
|
if (effect.options.to!=0) return;
|
||||||
effect.element.hide().setStyle({opacity: oldOpacity});
|
effect.element.hide().setStyle({opacity: oldOpacity});
|
||||||
}}, arguments[1] || {});
|
|
||||||
return new Effect.Opacity(element,options);
|
|
||||||
}
|
}
|
||||||
|
}, arguments[1] || { });
|
||||||
|
return new Effect.Opacity(element,options);
|
||||||
|
};
|
||||||
|
|
||||||
Effect.Appear = function(element) {
|
Effect.Appear = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -588,7 +550,7 @@ Effect.Appear = function(element) {
|
||||||
effect.element.setOpacity(effect.options.from).show();
|
effect.element.setOpacity(effect.options.from).show();
|
||||||
}}, arguments[1] || { });
|
}}, arguments[1] || { });
|
||||||
return new Effect.Opacity(element,options);
|
return new Effect.Opacity(element,options);
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.Puff = function(element) {
|
Effect.Puff = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -612,7 +574,7 @@ Effect.Puff = function(element) {
|
||||||
effect.effects[0].element.hide().setStyle(oldStyle); }
|
effect.effects[0].element.hide().setStyle(oldStyle); }
|
||||||
}, arguments[1] || { })
|
}, arguments[1] || { })
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.BlindUp = function(element) {
|
Effect.BlindUp = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -626,7 +588,7 @@ Effect.BlindUp = function(element) {
|
||||||
}
|
}
|
||||||
}, arguments[1] || { })
|
}, arguments[1] || { })
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.BlindDown = function(element) {
|
Effect.BlindDown = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -644,7 +606,7 @@ Effect.BlindDown = function(element) {
|
||||||
effect.element.undoClipping();
|
effect.element.undoClipping();
|
||||||
}
|
}
|
||||||
}, arguments[1] || { }));
|
}, arguments[1] || { }));
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.SwitchOff = function(element) {
|
Effect.SwitchOff = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -666,7 +628,7 @@ Effect.SwitchOff = function(element) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, arguments[1] || { }));
|
}, arguments[1] || { }));
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.DropOut = function(element) {
|
Effect.DropOut = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -686,28 +648,34 @@ Effect.DropOut = function(element) {
|
||||||
effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
|
effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
|
||||||
}
|
}
|
||||||
}, arguments[1] || { }));
|
}, arguments[1] || { }));
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.Shake = function(element) {
|
Effect.Shake = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
distance: 20,
|
||||||
|
duration: 0.5
|
||||||
|
}, arguments[1] || {});
|
||||||
|
var distance = parseFloat(options.distance);
|
||||||
|
var split = parseFloat(options.duration) / 10.0;
|
||||||
var oldStyle = {
|
var oldStyle = {
|
||||||
top: element.getStyle('top'),
|
top: element.getStyle('top'),
|
||||||
left: element.getStyle('left') };
|
left: element.getStyle('left') };
|
||||||
return new Effect.Move(element,
|
return new Effect.Move(element,
|
||||||
{ x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
|
{ x: distance, y: 0, duration: split, afterFinishInternal: function(effect) {
|
||||||
new Effect.Move(effect.element,
|
new Effect.Move(effect.element,
|
||||||
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
{ x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
|
||||||
new Effect.Move(effect.element,
|
new Effect.Move(effect.element,
|
||||||
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
{ x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
|
||||||
new Effect.Move(effect.element,
|
new Effect.Move(effect.element,
|
||||||
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
{ x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
|
||||||
new Effect.Move(effect.element,
|
new Effect.Move(effect.element,
|
||||||
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
{ x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
|
||||||
new Effect.Move(effect.element,
|
new Effect.Move(effect.element,
|
||||||
{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
|
{ x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) {
|
||||||
effect.element.undoPositioned().setStyle(oldStyle);
|
effect.element.undoPositioned().setStyle(oldStyle);
|
||||||
}}) }}) }}) }}) }}) }});
|
}}) }}) }}) }}) }}) }});
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.SlideDown = function(element) {
|
Effect.SlideDown = function(element) {
|
||||||
element = $(element).cleanWhitespace();
|
element = $(element).cleanWhitespace();
|
||||||
|
@ -735,18 +703,20 @@ Effect.SlideDown = function(element) {
|
||||||
effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
|
effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
|
||||||
}, arguments[1] || { })
|
}, arguments[1] || { })
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.SlideUp = function(element) {
|
Effect.SlideUp = function(element) {
|
||||||
element = $(element).cleanWhitespace();
|
element = $(element).cleanWhitespace();
|
||||||
var oldInnerBottom = element.down().getStyle('bottom');
|
var oldInnerBottom = element.down().getStyle('bottom');
|
||||||
|
var elementDimensions = element.getDimensions();
|
||||||
return new Effect.Scale(element, window.opera ? 0 : 1,
|
return new Effect.Scale(element, window.opera ? 0 : 1,
|
||||||
Object.extend({ scaleContent: false,
|
Object.extend({ scaleContent: false,
|
||||||
scaleX: false,
|
scaleX: false,
|
||||||
scaleMode: 'box',
|
scaleMode: 'box',
|
||||||
scaleFrom: 100,
|
scaleFrom: 100,
|
||||||
|
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
||||||
restoreAfterFinish: true,
|
restoreAfterFinish: true,
|
||||||
beforeStartInternal: function(effect) {
|
afterSetup: function(effect) {
|
||||||
effect.element.makePositioned();
|
effect.element.makePositioned();
|
||||||
effect.element.down().makePositioned();
|
effect.element.down().makePositioned();
|
||||||
if (window.opera) effect.element.setStyle({top: ''});
|
if (window.opera) effect.element.setStyle({top: ''});
|
||||||
|
@ -757,12 +727,12 @@ Effect.SlideUp = function(element) {
|
||||||
(effect.dims[0] - effect.element.clientHeight) + 'px' });
|
(effect.dims[0] - effect.element.clientHeight) + 'px' });
|
||||||
},
|
},
|
||||||
afterFinishInternal: function(effect) {
|
afterFinishInternal: function(effect) {
|
||||||
effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom});
|
effect.element.hide().undoClipping().undoPositioned();
|
||||||
effect.element.down().undoPositioned();
|
effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
|
||||||
}
|
}
|
||||||
}, arguments[1] || { })
|
}, arguments[1] || { })
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
// Bug in opera makes the TD containing this element expand for a instance after finish
|
// Bug in opera makes the TD containing this element expand for a instance after finish
|
||||||
Effect.Squish = function(element) {
|
Effect.Squish = function(element) {
|
||||||
|
@ -775,7 +745,7 @@ Effect.Squish = function(element) {
|
||||||
effect.element.hide().undoClipping();
|
effect.element.hide().undoClipping();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.Grow = function(element) {
|
Effect.Grow = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -849,7 +819,7 @@ Effect.Grow = function(element) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.Shrink = function(element) {
|
Effect.Shrink = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -903,7 +873,7 @@ Effect.Shrink = function(element) {
|
||||||
effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
|
effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
|
||||||
}, options)
|
}, options)
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.Pulsate = function(element) {
|
Effect.Pulsate = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -916,7 +886,7 @@ Effect.Pulsate = function(element) {
|
||||||
Object.extend(Object.extend({ duration: 2.0, from: 0,
|
Object.extend(Object.extend({ duration: 2.0, from: 0,
|
||||||
afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
|
afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
|
||||||
}, options), {transition: reverser}));
|
}, options), {transition: reverser}));
|
||||||
}
|
};
|
||||||
|
|
||||||
Effect.Fold = function(element) {
|
Effect.Fold = function(element) {
|
||||||
element = $(element);
|
element = $(element);
|
||||||
|
@ -939,16 +909,37 @@ Effect.Fold = function(element) {
|
||||||
}}, arguments[1] || { }));
|
}}, arguments[1] || { }));
|
||||||
};
|
};
|
||||||
|
|
||||||
Effect.Morph = Class.create();
|
Effect.Morph = Class.create(Effect.Base, {
|
||||||
Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
|
|
||||||
initialize: function(element) {
|
initialize: function(element) {
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
if (!this.element) throw(Effect._elementDoesNotExistError);
|
if (!this.element) throw(Effect._elementDoesNotExistError);
|
||||||
var options = Object.extend({
|
var options = Object.extend({
|
||||||
style: ''
|
style: { }
|
||||||
}, arguments[1] || { });
|
}, arguments[1] || { });
|
||||||
|
|
||||||
|
if (!Object.isString(options.style)) this.style = $H(options.style);
|
||||||
|
else {
|
||||||
|
if (options.style.include(':'))
|
||||||
|
this.style = options.style.parseStyle();
|
||||||
|
else {
|
||||||
|
this.element.addClassName(options.style);
|
||||||
|
this.style = $H(this.element.getStyles());
|
||||||
|
this.element.removeClassName(options.style);
|
||||||
|
var css = this.element.getStyles();
|
||||||
|
this.style = this.style.reject(function(style) {
|
||||||
|
return style.value == css[style.key];
|
||||||
|
});
|
||||||
|
options.afterFinishInternal = function(effect) {
|
||||||
|
effect.element.addClassName(effect.options.style);
|
||||||
|
effect.transforms.each(function(transform) {
|
||||||
|
effect.element.style[transform.style] = '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
this.start(options);
|
this.start(options);
|
||||||
},
|
},
|
||||||
|
|
||||||
setup: function(){
|
setup: function(){
|
||||||
function parseColor(color){
|
function parseColor(color){
|
||||||
if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
|
if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
|
||||||
|
@ -957,16 +948,29 @@ Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
|
||||||
return parseInt( color.slice(i*2+1,i*2+3), 16 )
|
return parseInt( color.slice(i*2+1,i*2+3), 16 )
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.transforms = this.options.style.parseStyle().map(function(property){
|
this.transforms = this.style.map(function(pair){
|
||||||
var originalValue = this.element.getStyle(property[0]);
|
var property = pair[0], value = pair[1], unit = null;
|
||||||
return $H({
|
|
||||||
style: property[0],
|
if (value.parseColor('#zzzzzz') != '#zzzzzz') {
|
||||||
originalValue: property[1].unit=='color' ?
|
value = value.parseColor();
|
||||||
parseColor(originalValue) : parseFloat(originalValue || 0),
|
unit = 'color';
|
||||||
targetValue: property[1].unit=='color' ?
|
} else if (property == 'opacity') {
|
||||||
parseColor(property[1].value) : property[1].value,
|
value = parseFloat(value);
|
||||||
unit: property[1].unit
|
if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
|
||||||
});
|
this.element.setStyle({zoom: 1});
|
||||||
|
} else if (Element.CSS_LENGTH.test(value)) {
|
||||||
|
var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
|
||||||
|
value = parseFloat(components[1]);
|
||||||
|
unit = (components.length == 3) ? components[2] : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var originalValue = this.element.getStyle(property);
|
||||||
|
return {
|
||||||
|
style: property.camelize(),
|
||||||
|
originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
|
||||||
|
targetValue: unit=='color' ? parseColor(value) : value,
|
||||||
|
unit: unit
|
||||||
|
};
|
||||||
}.bind(this)).reject(function(transform){
|
}.bind(this)).reject(function(transform){
|
||||||
return (
|
return (
|
||||||
(transform.originalValue == transform.targetValue) ||
|
(transform.originalValue == transform.targetValue) ||
|
||||||
|
@ -978,22 +982,24 @@ Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
update: function(position) {
|
update: function(position) {
|
||||||
var style = $H(), value = null;
|
var style = { }, transform, i = this.transforms.length;
|
||||||
this.transforms.each(function(transform){
|
while(i--)
|
||||||
value = transform.unit=='color' ?
|
style[(transform = this.transforms[i]).style] =
|
||||||
$R(0,2).inject('#',function(m,v,i){
|
transform.unit=='color' ? '#'+
|
||||||
return m+(Math.round(transform.originalValue[i]+
|
(Math.round(transform.originalValue[0]+
|
||||||
(transform.targetValue[i] - transform.originalValue[i])*position)).toColorPart() }) :
|
(transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
|
||||||
transform.originalValue + Math.round(
|
(Math.round(transform.originalValue[1]+
|
||||||
((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit;
|
(transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
|
||||||
style[transform.style] = value;
|
(Math.round(transform.originalValue[2]+
|
||||||
});
|
(transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
|
||||||
this.element.setStyle(style);
|
(transform.originalValue +
|
||||||
|
(transform.targetValue - transform.originalValue) * position).toFixed(3) +
|
||||||
|
(transform.unit === null ? '' : transform.unit);
|
||||||
|
this.element.setStyle(style, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Effect.Transform = Class.create();
|
Effect.Transform = Class.create({
|
||||||
Object.extend(Effect.Transform.prototype, {
|
|
||||||
initialize: function(tracks){
|
initialize: function(tracks){
|
||||||
this.tracks = [];
|
this.tracks = [];
|
||||||
this.options = arguments[1] || { };
|
this.options = arguments[1] || { };
|
||||||
|
@ -1001,9 +1007,10 @@ Object.extend(Effect.Transform.prototype, {
|
||||||
},
|
},
|
||||||
addTracks: function(tracks){
|
addTracks: function(tracks){
|
||||||
tracks.each(function(track){
|
tracks.each(function(track){
|
||||||
var data = $H(track).values().first();
|
track = $H(track);
|
||||||
|
var data = track.values().first();
|
||||||
this.tracks.push($H({
|
this.tracks.push($H({
|
||||||
ids: $H(track).keys().first(),
|
ids: track.keys().first(),
|
||||||
effect: Effect.Morph,
|
effect: Effect.Morph,
|
||||||
options: { style: data }
|
options: { style: data }
|
||||||
}));
|
}));
|
||||||
|
@ -1013,76 +1020,101 @@ Object.extend(Effect.Transform.prototype, {
|
||||||
play: function(){
|
play: function(){
|
||||||
return new Effect.Parallel(
|
return new Effect.Parallel(
|
||||||
this.tracks.map(function(track){
|
this.tracks.map(function(track){
|
||||||
var elements = [$(track.ids) || $$(track.ids)].flatten();
|
var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
|
||||||
return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) });
|
var elements = [$(ids) || $$(ids)].flatten();
|
||||||
|
return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
|
||||||
}).flatten(),
|
}).flatten(),
|
||||||
this.options
|
this.options
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Element.CSS_PROPERTIES = ['azimuth', 'backgroundAttachment', 'backgroundColor', 'backgroundImage',
|
Element.CSS_PROPERTIES = $w(
|
||||||
'backgroundPosition', 'backgroundRepeat', 'borderBottomColor', 'borderBottomStyle',
|
'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
|
||||||
'borderBottomWidth', 'borderCollapse', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth',
|
'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
|
||||||
'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderTopColor',
|
'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
|
||||||
'borderTopStyle', 'borderTopWidth', 'bottom', 'captionSide', 'clear', 'clip', 'color', 'content',
|
'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
|
||||||
'counterIncrement', 'counterReset', 'cssFloat', 'cueAfter', 'cueBefore', 'cursor', 'direction',
|
'fontSize fontWeight height left letterSpacing lineHeight ' +
|
||||||
'display', 'elevation', 'emptyCells', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch',
|
'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
|
||||||
'fontStyle', 'fontVariant', 'fontWeight', 'height', 'left', 'letterSpacing', 'lineHeight',
|
'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
|
||||||
'listStyleImage', 'listStylePosition', 'listStyleType', 'marginBottom', 'marginLeft', 'marginRight',
|
'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
|
||||||
'marginTop', 'markerOffset', 'marks', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity',
|
'right textIndent top width wordSpacing zIndex');
|
||||||
'orphans', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflowX', 'overflowY',
|
|
||||||
'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore',
|
|
||||||
'pageBreakInside', 'pauseAfter', 'pauseBefore', 'pitch', 'pitchRange', 'position', 'quotes',
|
|
||||||
'richness', 'right', 'size', 'speakHeader', 'speakNumeral', 'speakPunctuation', 'speechRate', 'stress',
|
|
||||||
'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textShadow', 'textTransform', 'top',
|
|
||||||
'unicodeBidi', 'verticalAlign', 'visibility', 'voiceFamily', 'volume', 'whiteSpace', 'widows',
|
|
||||||
'width', 'wordSpacing', 'zIndex'];
|
|
||||||
|
|
||||||
Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
|
Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
|
||||||
|
|
||||||
|
String.__parseStyleElement = document.createElement('div');
|
||||||
String.prototype.parseStyle = function(){
|
String.prototype.parseStyle = function(){
|
||||||
var element = Element.extend(document.createElement('div'));
|
var style, styleRules = $H();
|
||||||
element.innerHTML = '<div style="' + this + '"></div>';
|
if (Prototype.Browser.WebKit)
|
||||||
var style = element.down().style, styleRules = $H();
|
style = new Element('div',{style:this}).style;
|
||||||
|
else {
|
||||||
|
String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>';
|
||||||
|
style = String.__parseStyleElement.childNodes[0].style;
|
||||||
|
}
|
||||||
|
|
||||||
Element.CSS_PROPERTIES.each(function(property){
|
Element.CSS_PROPERTIES.each(function(property){
|
||||||
if(style[property]) styleRules[property] = style[property];
|
if (style[property]) styleRules.set(property, style[property]);
|
||||||
});
|
});
|
||||||
|
|
||||||
var result = $H();
|
if (Prototype.Browser.IE && this.include('opacity'))
|
||||||
|
styleRules.set('opacity', this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]);
|
||||||
|
|
||||||
styleRules.each(function(pair){
|
return styleRules;
|
||||||
var property = pair[0], value = pair[1], unit = null;
|
|
||||||
|
|
||||||
if(value.parseColor('#zzzzzz') != '#zzzzzz') {
|
|
||||||
value = value.parseColor();
|
|
||||||
unit = 'color';
|
|
||||||
} else if(Element.CSS_LENGTH.test(value))
|
|
||||||
var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/),
|
|
||||||
value = parseFloat(components[1]), unit = (components.length == 3) ? components[2] : null;
|
|
||||||
|
|
||||||
result[property.underscore().dasherize()] = $H({ value:value, unit:unit });
|
|
||||||
}.bind(this));
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Element.morph = function(element, style) {
|
if (document.defaultView && document.defaultView.getComputedStyle) {
|
||||||
|
Element.getStyles = function(element) {
|
||||||
|
var css = document.defaultView.getComputedStyle($(element), null);
|
||||||
|
return Element.CSS_PROPERTIES.inject({ }, function(styles, property) {
|
||||||
|
styles[property] = css[property];
|
||||||
|
return styles;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
Element.getStyles = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var css = element.currentStyle, styles;
|
||||||
|
styles = Element.CSS_PROPERTIES.inject({ }, function(hash, property) {
|
||||||
|
hash.set(property, css[property]);
|
||||||
|
return hash;
|
||||||
|
});
|
||||||
|
if (!styles.opacity) styles.set('opacity', element.getOpacity());
|
||||||
|
return styles;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
Effect.Methods = {
|
||||||
|
morph: function(element, style) {
|
||||||
|
element = $(element);
|
||||||
new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { }));
|
new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { }));
|
||||||
return element;
|
return element;
|
||||||
|
},
|
||||||
|
visualEffect: function(element, effect, options) {
|
||||||
|
element = $(element)
|
||||||
|
var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1);
|
||||||
|
new Effect[klass](element, options);
|
||||||
|
return element;
|
||||||
|
},
|
||||||
|
highlight: function(element, options) {
|
||||||
|
element = $(element);
|
||||||
|
new Effect.Highlight(element, options);
|
||||||
|
return element;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
|
$w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
|
||||||
'collectTextNodes','collectTextNodesIgnoreClass','morph'].each(
|
'pulsate shake puff squish switchOff dropOut').each(
|
||||||
function(f) { Element.Methods[f] = Element[f]; }
|
function(effect) {
|
||||||
|
Effect.Methods[effect] = function(element, options){
|
||||||
|
element = $(element);
|
||||||
|
Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options);
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
Element.Methods.visualEffect = function(element, effect, options) {
|
$w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each(
|
||||||
s = effect.gsub(/_/, '-').camelize();
|
function(f) { Effect.Methods[f] = Element[f]; }
|
||||||
effect_class = s.charAt(0).toUpperCase() + s.substring(1);
|
);
|
||||||
new Effect[effect_class](element, options);
|
|
||||||
return $(element);
|
|
||||||
};
|
|
||||||
|
|
||||||
Element.addMethods();
|
Element.addMethods(Effect.Methods);
|
||||||
|
|
4402
public/javascripts/prototype.js
vendored
4402
public/javascripts/prototype.js
vendored
File diff suppressed because it is too large
Load diff
3
script/dbconsole
Executable file
3
script/dbconsole
Executable file
|
@ -0,0 +1,3 @@
|
||||||
|
#!/usr/bin/env ruby
|
||||||
|
require File.dirname(__FILE__) + '/../config/boot'
|
||||||
|
require 'commands/dbconsole'
|
3
script/performance/request
Executable file
3
script/performance/request
Executable file
|
@ -0,0 +1,3 @@
|
||||||
|
#!/usr/bin/env ruby
|
||||||
|
require File.dirname(__FILE__) + '/../../config/boot'
|
||||||
|
require 'commands/performance/request'
|
Loading…
Reference in a new issue