Browse files

Update button handling logic for text areas, including blur event tim…

…ing and confirmation dialog
  • Loading branch information...
1 parent 710b56b commit 4be3ff1491d40a566ab74cca395857eb70c88659 @bfalling committed Dec 19, 2011
Showing with 81 additions and 12 deletions.
  1. +34 −8 lib/assets/javascripts/best_in_place.js
  2. +47 −4 spec/integration/js_spec.rb
View
42 lib/assets/javascripts/best_in_place.js
@@ -55,6 +55,12 @@ BestInPlaceEditor.prototype = {
$(this.activator).bind('click', {editor: this}, this.clickHandler);
},
+ abortIfConfirm : function () {
+ if (confirm("Are you sure you want to discard your changes?")) {
+ this.abort();
+ }
+ },
+
update : function() {
var editor = this;
if (this.formType in {"input":1, "textarea":1} && this.getValue() == this.oldValue)
@@ -386,34 +392,54 @@ BestInPlaceEditor.forms = {
this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.textarea.submitHandler);
if (this.cancelButton) {
this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.textarea.cancelButtonHandler)
- } else {
- this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler);
}
+ this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler);
this.element.find("textarea").bind('keyup', {editor: this}, BestInPlaceEditor.forms.textarea.keyupHandler);
+ this.blurTimer = null;
+ this.userClicked = false;
},
getValue : function() {
return this.sanitizeValue(this.element.find("textarea").val());
},
+ // When buttons are present, use a timer on the blur event to give precedence to clicks
blurHandler : function(event) {
- event.data.editor.update();
+ if (event.data.editor.okButton) {
+ event.data.editor.blurTimer = setTimeout(function () {
+ if (!event.data.editor.userClicked) {
+ event.data.editor.abortIfConfirm();
+ }
+ }, 500);
+ } else {
+ if (event.data.editor.cancelButton) {
+ event.data.editor.blurTimer = setTimeout(function () {
+ if (!event.data.editor.userClicked) {
+ event.data.editor.update();
+ }
+ }, 500);
+ } else {
+ event.data.editor.update();
+ }
+ }
},
submitHandler : function(event) {
+ event.data.editor.userClicked = true;
+ clearTimeout(event.data.editor.blurTimer);
event.data.editor.update();
},
cancelButtonHandler : function(event) {
- event.data.editor.abort();
- event.stopPropagation();
+ event.data.editor.userClicked = true;
+ clearTimeout(event.data.editor.blurTimer);
+ event.data.editor.abortIfConfirm();
+ event.stopPropagation(); // Without this, click isn't handled
},
keyupHandler : function(event) {
if (event.keyCode == 27) {
- if (confirm("Are you sure you want to discard your changes?")) {
- event.data.editor.abort();
- }
+ event.data.editor.abortIfConfirm();
}
}
}
View
51 spec/integration/js_spec.rb
@@ -210,10 +210,6 @@
end
end
- it "should do the above 3 for text areas" do
- pending
- end
-
it "should correctly use an OK submit button when so configured for a text area" do
@user.save!
visit user_path(@user)
@@ -249,13 +245,60 @@
$("##{id} textarea").val('1Q84');
$("##{id} input[type='button']").click();
JS
+ page.driver.browser.switch_to.alert.accept
+
+ visit user_path(@user)
+ within("#favorite_books") do
+ page.should have_content('The City of Gold and Lead')
+ end
+ end
+
+ it "should not submit text area on blur if there's an OK button present" do
+ @user.save!
+ visit user_path(@user)
+
+ within("#favorite_books") do
+ page.should have_content('The City of Gold and Lead')
+ end
+ id = BestInPlace::Utils.build_best_in_place_id @user, :favorite_books
+ page.execute_script <<-JS
+ $("##{id}").click();
+ $("##{id} textarea").val('1Q84');
+ $("##{id} textarea").blur();
+ JS
+ sleep 1 # Increase if browser is slow
+ page.driver.browser.switch_to.alert.accept
+
visit user_path(@user)
within("#favorite_books") do
page.should have_content('The City of Gold and Lead')
end
end
+ it "should still submit text area on blur if there's only a Cancel button present" do
+ @user.save!
+ visit user_path(@user, :suppress_ok_button => 1)
+
+ within("#favorite_books") do
+ page.should have_content('The City of Gold and Lead')
+ end
+
+ id = BestInPlace::Utils.build_best_in_place_id @user, :favorite_books
+ page.execute_script %{$("##{id}").click();}
+ page.should have_no_css("##{id} input[type='submit']")
+ page.execute_script <<-JS
+ $("##{id} textarea").val('1Q84');
+ $("##{id} textarea").blur();
+ JS
+ sleep 1 # Increase if browser is slow
+
+ visit user_path(@user)
+ within("#favorite_books") do
+ page.should have_content('1Q84')
+ end
+ end
+
it "should show validation errors" do
@user.save!
visit user_path(@user)

0 comments on commit 4be3ff1

Please sign in to comment.