aboutsummaryrefslogtreecommitdiffstats
path: root/railties/html/javascripts/controls.js
diff options
context:
space:
mode:
Diffstat (limited to 'railties/html/javascripts/controls.js')
-rw-r--r--railties/html/javascripts/controls.js113
1 files changed, 59 insertions, 54 deletions
diff --git a/railties/html/javascripts/controls.js b/railties/html/javascripts/controls.js
index 77046d9c35..a7436bcf17 100644
--- a/railties/html/javascripts/controls.js
+++ b/railties/html/javascripts/controls.js
@@ -60,7 +60,7 @@ Autocompleter.Base.prototype = {
update.style.position = 'absolute';
Position.clone(element, update, {setHeight: false, offsetTop: element.offsetHeight});
}
- new Effect.Appear(update,{duration:0.15});
+ Effect.Appear(update,{duration:0.15});
};
this.options.onHide = this.options.onHide ||
function(element, update){ new Effect.Fade(update,{duration:0.15}) };
@@ -87,15 +87,18 @@ Autocompleter.Base.prototype = {
'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
this.iefix = $(this.update.id+'_iefix');
}
- if(this.iefix) {
- Position.clone(this.update, this.iefix);
- this.iefix.style.zIndex = 1;
- this.update.style.zIndex = 2;
- Element.show(this.iefix);
- }
+ if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
+ },
+
+ fixIEOverlapping: function() {
+ Position.clone(this.update, this.iefix);
+ this.iefix.style.zIndex = 1;
+ this.update.style.zIndex = 2;
+ Element.show(this.iefix);
},
hide: function() {
+ this.stopIndicator();
if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);
if(this.iefix) Element.hide(this.iefix);
},
@@ -186,7 +189,7 @@ Autocompleter.Base.prototype = {
markPrevious: function() {
if(this.index > 0) this.index--
- else this.index = this.entryCcount-1;
+ else this.index = this.entryCount-1;
},
markNext: function() {
@@ -420,20 +423,7 @@ Autocompleter.Local.prototype = Object.extend(new Autocompleter.Base(), {
// AJAX in-place editor
//
-// The constructor takes three parameters. The first is the element
-// that should support in-place editing. The second is the url to submit
-// the changed value to. The server should respond with the updated
-// value (the server might have post-processed it or validation might
-// have prevented it from changing). The third is a hash of options.
-//
-// Supported options are (all are optional and have sensible defaults):
-// - okText - The text of the submit button that submits the changed value
-// to the server (default: "ok")
-// - cancelText - The text of the link that cancels editing (default: "cancel")
-// - savingText - The text being displayed as the AJAX engine communicates
-// with the server (default: "Saving...")
-// - formId - The id given to the <form> element
-// (default: the id of the element to edit plus '-inplaceeditor')
+// see documentation on http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor
Ajax.InPlaceEditor = Class.create();
Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
@@ -461,6 +451,7 @@ Ajax.InPlaceEditor.prototype = {
handleLineBreaks: true,
loadingText: 'Loading...',
savingClassName: 'inplaceeditor-saving',
+ loadingClassName: 'inplaceeditor-loading',
formClassName: 'inplaceeditor-form',
highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
highlightendcolor: "#FFFFFF",
@@ -508,7 +499,7 @@ Ajax.InPlaceEditor.prototype = {
Element.hide(this.options.externalControl);
}
Element.hide(this.element);
- this.form = this.getForm();
+ this.createForm();
this.element.parentNode.insertBefore(this.form, this.element);
Field.focus(this.editField);
// stop the event to avoid a page refresh in Safari
@@ -516,30 +507,29 @@ Ajax.InPlaceEditor.prototype = {
Event.stop(arguments[0]);
}
},
- getForm: function() {
- form = document.createElement("form");
- form.id = this.options.formId;
- Element.addClassName(form, this.options.formClassName)
- form.onsubmit = this.onSubmit.bind(this);
+ createForm: function() {
+ this.form = document.createElement("form");
+ this.form.id = this.options.formId;
+ Element.addClassName(this.form, this.options.formClassName)
+ this.form.onsubmit = this.onSubmit.bind(this);
- this.createEditField(form);
+ this.createEditField();
if (this.options.textarea) {
var br = document.createElement("br");
- form.appendChild(br);
+ this.form.appendChild(br);
}
okButton = document.createElement("input");
okButton.type = "submit";
okButton.value = this.options.okText;
- form.appendChild(okButton);
+ this.form.appendChild(okButton);
cancelLink = document.createElement("a");
cancelLink.href = "#";
cancelLink.appendChild(document.createTextNode(this.options.cancelText));
cancelLink.onclick = this.onclickCancel.bind(this);
- form.appendChild(cancelLink);
- return form;
+ this.form.appendChild(cancelLink);
},
hasHTMLLineBreaks: function(string) {
if (!this.options.handleLineBreaks) return false;
@@ -548,49 +538,57 @@ Ajax.InPlaceEditor.prototype = {
convertHTMLLineBreaks: function(string) {
return string.replace(/<br>/gi, "\n").replace(/<br\/>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi, "");
},
- createEditField: function(form) {
- if (this.options.rows == 1 && !this.hasHTMLLineBreaks(this.getText())) {
+ createEditField: function() {
+ var text;
+ if(this.options.loadTextURL) {
+ text = this.options.loadingText;
+ } else {
+ text = this.getText();
+ }
+
+ if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
this.options.textarea = false;
var textField = document.createElement("input");
textField.type = "text";
textField.name = "value";
- textField.value = this.getText();
+ textField.value = text;
textField.style.backgroundColor = this.options.highlightcolor;
var size = this.options.size || this.options.cols || 0;
- if (size != 0)
- textField.size = size;
- form.appendChild(textField);
+ if (size != 0) textField.size = size;
this.editField = textField;
} else {
this.options.textarea = true;
var textArea = document.createElement("textarea");
textArea.name = "value";
- textArea.value = this.convertHTMLLineBreaks(this.getText());
+ textArea.value = this.convertHTMLLineBreaks(text);
textArea.rows = this.options.rows;
textArea.cols = this.options.cols || 40;
- form.appendChild(textArea);
this.editField = textArea;
}
- },
- getText: function() {
- if (this.options.loadTextURL) {
+
+ if(this.options.loadTextURL) {
this.loadExternalText();
- return this.options.loadingText;
- } else {
- return this.element.innerHTML;
}
+ this.form.appendChild(this.editField);
+ },
+ getText: function() {
+ return this.element.innerHTML;
},
loadExternalText: function() {
+ Element.addClassName(this.form, this.options.loadingClassName);
+ this.editField.disabled = true;
new Ajax.Request(
this.options.loadTextURL,
- {
+ Object.extend({
asynchronous: true,
onComplete: this.onLoadedExternalText.bind(this)
- }
+ }, this.options.ajaxOptions)
);
},
onLoadedExternalText: function(transport) {
- this.form.value.value = transport.responseText.stripTags();
+ Element.removeClassName(this.form, this.options.loadingClassName);
+ this.editField.disabled = false;
+ this.editField.value = transport.responseText.stripTags();
},
onclickCancel: function() {
this.onComplete();
@@ -606,7 +604,15 @@ Ajax.InPlaceEditor.prototype = {
return false;
},
onSubmit: function() {
- this.saving = true;
+ // onLoading resets these so we need to save them away for the Ajax call
+ var form = this.form;
+ var value = this.editField.value;
+
+ // do this first, sometimes the ajax call returns before we get a chance to switch on Saving...
+ // which means this will actually switch on Saving... *after* we've left edit mode causing Saving...
+ // to be displayed indefinitely
+ this.onLoading();
+
new Ajax.Updater(
{
success: this.element,
@@ -615,12 +621,11 @@ Ajax.InPlaceEditor.prototype = {
},
this.url,
Object.extend({
- parameters: this.options.callback(this.form, this.editField.value),
+ parameters: this.options.callback(form, value),
onComplete: this.onComplete.bind(this),
onFailure: this.onFailure.bind(this)
}, this.options.ajaxOptions)
);
- this.onLoading();
// stop the event to avoid a page refresh in Safari
if (arguments.length > 1) {
Event.stop(arguments[0]);
@@ -642,7 +647,7 @@ Ajax.InPlaceEditor.prototype = {
},
removeForm: function() {
if(this.form) {
- Element.remove(this.form);
+ if (this.form.parentNode) Element.remove(this.form);
this.form = null;
}
},