Skip to content
Browse files

script.aculo.us: Fixed a bug with Safari and the InPlaceEditor with f…

…orm submission. Add support for interpreting simple <br>s into linebreaks. [Jon Tirsen]

git-svn-id: http://svn.rubyonrails.org/rails/spinoffs/scriptaculous@2282 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
  • Loading branch information...
1 parent 6ab09bd commit 8d9918aa2f5586330129b9cf14a2835c9d4976c1 @madrobby committed Sep 21, 2005
Showing with 59 additions and 2 deletions.
  1. +2 −0 CHANGELOG
  2. +18 −2 src/controls.js
  3. +39 −0 test/unit/ajax_inplaceeditor_test.html
View
2 CHANGELOG
@@ -1,5 +1,7 @@
*SVN*
+* Fixed a bug with Safari and the InPlaceEditor with form submission. Add support for interpreting simple <br>s into linebreaks. [Jon Tirsen]
+
* New Control.Slider() for horizontal and vertical sliders [Marty Haught]
* Fixed autoapplying a 'layout' on IE with Effect.Opacity not working for elements given as id string
View
20 src/controls.js
@@ -458,6 +458,7 @@ Ajax.InPlaceEditor.prototype = {
callback: function(form) {
return Form.serialize(form);
},
+ handleLineBreaks: true,
loadingText: 'Loading...',
savingClassName: 'inplaceeditor-saving',
formClassName: 'inplaceeditor-form',
@@ -510,6 +511,10 @@ Ajax.InPlaceEditor.prototype = {
this.form = this.getForm();
this.element.parentNode.insertBefore(this.form, this.element);
Field.focus(this.editField);
+ // stop the event to avoid a page refresh in Safari
+ if (arguments.length > 1) {
+ Event.stop(arguments[0]);
+ }
},
getForm: function() {
form = document.createElement("form");
@@ -536,8 +541,15 @@ Ajax.InPlaceEditor.prototype = {
form.appendChild(cancelLink);
return form;
},
+ 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(form) {
- if (this.options.rows == 1) {
+ if (this.options.rows == 1 && !this.hasHTMLLineBreaks(this.getText())) {
this.options.textarea = false;
var textField = document.createElement("input");
textField.type = "text";
@@ -553,7 +565,7 @@ Ajax.InPlaceEditor.prototype = {
this.options.textarea = true;
var textArea = document.createElement("textarea");
textArea.name = "value";
- textArea.value = this.getText();
+ textArea.value = this.convertHTMLLineBreaks(this.getText());
textArea.rows = this.options.rows;
textArea.cols = this.options.cols || 40;
form.appendChild(textArea);
@@ -609,6 +621,10 @@ Ajax.InPlaceEditor.prototype = {
}, this.options.ajaxOptions)
);
this.onLoading();
+ // stop the event to avoid a page refresh in Safari
+ if (arguments.length > 1) {
+ Event.stop(arguments[0]);
+ }
return false;
},
onLoading: function() {
View
39 test/unit/ajax_inplaceeditor_test.html
@@ -21,6 +21,7 @@
<h1 id="tobeedited">To be edited</h1>
<a id="tobeeditedEditControl" href="#">edit</a>
+<div id="tobeeditedMultiLine">First line<br/>Second line<br/>Third line</div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
@@ -33,6 +34,9 @@ <h1 id="tobeedited">To be edited</h1>
externalControl: $('tobeeditedEditControl'),
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
+ inPlaceEditorMultiLine = new Ajax.InPlaceEditor($('tobeeditedMultiLine'), '_ajax_inplaceeditor_result.html', {
+ ajaxOptions: {method: 'get'} //override so we can use a static for the result
+ });
}},
teardown: function() { with(this) {
@@ -166,6 +170,41 @@ <h1 id="tobeedited">To be edited</h1>
assertNotVisible($('tobeeditedEditControl'));
Event.simulateMouse(document.forms[0].childNodes[2],'click');
assertVisible($('tobeeditedEditControl'));
+ }},
+
+ testHasLineBreaksDetectsHTMLLineBreaks: function() { with(this) {
+ assert(inPlaceEditorMultiLine.hasHTMLLineBreaks("Line 1<br/>Line 2"));
+ assert(inPlaceEditorMultiLine.hasHTMLLineBreaks("Line 1<br>Line 2"));
+ assert(inPlaceEditorMultiLine.hasHTMLLineBreaks("<p>Line 1</p>Line 2"));
+ assert(inPlaceEditorMultiLine.hasHTMLLineBreaks("Line 1<BR/>Line 2"));
+ assert(inPlaceEditorMultiLine.hasHTMLLineBreaks("Line 1<BR>Line 2"));
+ assert(inPlaceEditorMultiLine.hasHTMLLineBreaks("<P>Line 1</P>Line 2"));
+ assert(inPlaceEditorMultiLine.hasHTMLLineBreaks("<P>Line 1<P>Line 2"));
+ assert(!inPlaceEditorMultiLine.hasHTMLLineBreaks("One line"));
+ }},
+
+ testConvertsHTMLLineBreaksIntoNewLines: function() { with(this) {
+ assertEqual("Line 1\nLine 2", inPlaceEditorMultiLine.convertHTMLLineBreaks("Line 1<br/>Line 2"));
+ assertEqual("Line 1\nLine 2", inPlaceEditorMultiLine.convertHTMLLineBreaks("Line 1<br>Line 2"));
+ // <p> not supported (too hard)
+ //assertEqual("Line 1\nLine 2", inPlaceEditorMultiLine.convertHTMLLineBreaks("<p>Line 1</p>Line 2"));
+ assertEqual("Line 1\nLine 2", inPlaceEditorMultiLine.convertHTMLLineBreaks("Line 1<BR/>Line 2"));
+ assertEqual("Line 1\nLine 2", inPlaceEditorMultiLine.convertHTMLLineBreaks("Line 1<BR>Line 2"));
+ // <p> not supported (too hard)
+ //assertEqual("Line 1\nLine 2", inPlaceEditorMultiLine.convertHTMLLineBreaks("<P>Line 1</P>Line 2"));
+ // unclosed <P>s not supported yet
+ //assertEqual("Line 1\nLine 2", inPlaceEditorMultiLine.convertHTMLLineBreaks("<P>Line 1<P>Line 2"));
+ // <p> not supported (too hard)
+ //assertEqual("Line 1\nLine 2\nLine 3\nLine 4", inPlaceEditorMultiLine.convertHTMLLineBreaks("<P>Line 1</P>Line 2<br>Line 3<p>Line 4</P>"));
+ assertEqual("One line", inPlaceEditorMultiLine.convertHTMLLineBreaks("One line"));
+ }},
+
+ testConvertsParagraphsAndBRsIntoLineBreaks: function() { with(this) {
+ inPlaceEditorMultiLine.enterEditMode();
+ assertEqual("TEXTAREA", document.forms[0].firstChild.tagName);
+ assertEqual("First line\nSecond line\nThird line", document.forms[0].firstChild.value)
+ // doesn't automatically determine size yet
+ //assertEqual(3, document.forms[0].firstChild.rows);
}}
});

0 comments on commit 8d9918a

Please sign in to comment.
Something went wrong with that request. Please try again.