Add option to change bind event type to activate a field

README.md

@@ -100,6 +100,17 @@ Options:
 - **:confirm**: If set to true displays a confirmation message when abandoning changes (pressing the escape key).
 - **:skip_blur**: If set to true, blurring the input will not cause changes to be abandoned in textareas.
 
+JS Options:
+
+You can overwrite BestInPlaceEditor default settings like this:
+
+    $(document).ready(function() {
+      /* Activating Best In Place */
+      jQuery(".best_in_place").best_in_place({
+        eventType: 'dblclick'
+      });
+    });
+
 HTML Options:
 
 If you provide an option that is not explicitly a best_in_place option it will be passed through when creating the best_in_place span.

lib/assets/javascripts/best_in_place.js

@@ -27,7 +27,7 @@ function BestInPlaceEditor(e) {
     this.initOptions();
     this.bindForm();
     this.initPlaceHolder();
-    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+    jQuery(this.activator).bind(BestInPlaceEditor.defaults.eventType, {editor: this}, this.clickHandler);
 }
 
 BestInPlaceEditor.prototype = {
@@ -66,15 +66,15 @@ BestInPlaceEditor.prototype = {
 
         this.oldValue = this.isPlaceHolder() ? "" : this.element.html();
         this.display_value = to_display;
-        jQuery(this.activator).unbind("click", this.clickHandler);
+        jQuery(this.activator).unbind(BestInPlaceEditor.defaults.eventType, this.clickHandler);
         this.activateForm();
         this.element.trigger(jQuery.Event("best_in_place:activate"));
     },
 
     abort: function () {
         'use strict';
         this.activateText(this.oldValue);
-        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+        jQuery(this.activator).bind(BestInPlaceEditor.defaults.eventType, {editor: this}, this.clickHandler);
         this.element.trigger(jQuery.Event("best_in_place:abort"));
         this.element.trigger(jQuery.Event("best_in_place:deactivate"));
     },
@@ -293,7 +293,7 @@ BestInPlaceEditor.prototype = {
         this.element.trigger(jQuery.Event("ajax:success"), [data, status, xhr]);
 
         // Binding back after being clicked
-        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+        jQuery(this.activator).bind(BestInPlaceEditor.defaults.eventType, {editor: this}, this.clickHandler);
         this.element.trigger(jQuery.Event("best_in_place:deactivate"));
 
         if (this.collectionValue !== null && this.formType === "select") {
@@ -310,7 +310,7 @@ BestInPlaceEditor.prototype = {
         this.element.trigger(jQuery.Event("ajax:error"), request, error);
 
         // Binding back after being clicked
-        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+        jQuery(this.activator).bind(BestInPlaceEditor.defaults.eventType, {editor: this}, this.clickHandler);
         this.element.trigger(jQuery.Event("best_in_place:deactivate"));
     },
 
@@ -470,24 +470,32 @@ BestInPlaceEditor.forms = {
                 select_elt.append(option_elt);
             });
             output.append(select_elt);
+            this.okButton = false;
+
+            this.placeButtons(output, this);
+
 
             this.element.html(output);
             this.setHtmlAttributes();
             this.element.find("select").bind('change', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
-            this.element.find("select").bind('blur', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
+//            this.element.find("select").bind('blur', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
             this.element.find("select").bind('keyup', {editor: this}, BestInPlaceEditor.forms.select.keyupHandler);
             this.element.find("select")[0].focus();
 
+            if (this.cancelButton) {
+                this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.select.justAbort);
+            }
+
             // automatically click on the select so you
             // don't have to click twice
-            try {
-              var e = document.createEvent("MouseEvents");
-              e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
-              this.element.find("select")[0].dispatchEvent(e);
-            }
-            catch(e) {
-              // browser doesn't support this, e.g. IE8
-            }
+//            try {
+//              var e = document.createEvent("MouseEvents");
+//              e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+//              this.element.find("select")[0].dispatchEvent(e);
+//            }
+//            catch(e) {
+//              // browser doesn't support this, e.g. IE8
+//            }
         },
 
         getValue: function () {
@@ -500,6 +508,10 @@ BestInPlaceEditor.forms = {
             event.data.editor.update();
         },
 
+        justAbort: function(event){
+            event.data.editor.abort();
+        },
+
         keyupHandler: function (event) {
             'use strict';
             if (event.keyCode === 27) {
@@ -621,6 +633,7 @@ BestInPlaceEditor.forms = {
 
 BestInPlaceEditor.defaults = {
     locales: {},
+    eventType: 'click',
     ajaxMethod: "put",  //TODO Change to patch when support to 3.2 is dropped
     ajaxDataType: 'text',
     okButtonClass: '',
@@ -635,19 +648,22 @@ BestInPlaceEditor.defaults.locales[''] = {
     placeHolder: '-'
 };
 
-jQuery.fn.best_in_place = function () {
+jQuery.fn.best_in_place = function (options) {
     'use strict';
+
+    $.extend(BestInPlaceEditor.defaults, options)
+
     function setBestInPlace(element) {
         if (!element.data('bestInPlaceEditor')) {
             element.data('bestInPlaceEditor', new BestInPlaceEditor(element));
             return true;
         }
     }
 
-    jQuery(this.context).delegate(this.selector, 'click', function () {
+    jQuery(this.context).delegate(this.selector, BestInPlaceEditor.defaults.eventType, function () {
         var el = jQuery(this);
         if (setBestInPlace(el)) {
-            el.click();
+            el.trigger(BestInPlaceEditor.defaults.eventType);
         }
     });
 

lib/best_in_place/test_helpers.rb

@@ -12,9 +12,9 @@ def bip_area(model, attr, new_value)
       wait_for_ajax
     end
 
-    def bip_text(model, attr, new_value)
+    def bip_text(model, attr, new_value, event_type = 'click')
       id = BestInPlace::Utils.build_best_in_place_id model, attr
-      find("##{id}").click
+      find("##{id}").trigger(event_type)
       execute_script <<-JS
         $("##{id} input[name='#{attr}']").val('#{escape_javascript new_value.to_s}');
         $("##{id} form").submit();

spec/integration/js_spec.rb

@@ -155,6 +155,19 @@
     expect(find('#email')).to have_content('[email protected]')
   end
 
+  it "should be able to use bip_text with double click event type to update a text field" do
+    @user.save!
+    visit event_type_user_path(@user)
+    expect(find('#email')).to have_content('[email protected]')
+
+    bip_text @user, :email, "[email protected]", 'dblclick'
+
+    expect(find('#email')).to have_content('[email protected]')
+
+    visit user_path(@user)
+    expect(find('#email')).to have_content('[email protected]')
+  end
+
   it "should be able to update a field two consecutive times" do
     @user.save!
     visit user_path(@user)

spec/internal/app/assets/javascripts/application.js

@@ -6,12 +6,6 @@
 //= require best_in_place.purr
 //= require_self
 
-$(document).ready(function() {
-  /* Activating Best In Place */
-  jQuery(".best_in_place").best_in_place();
-});
-
-
 /* Inicialització en català per a l'extenció 'calendar' per jQuery. */
 /* Writers: ([email protected]). */
 jQuery(function($){

spec/internal/app/controllers/users_controller.rb

@@ -27,6 +27,14 @@ def email_field
     render :action => :email_field, :layout => false
   end
 
+  def event_type
+    @user = User.find(params[:id])
+    @event_type = 'dblclick'
+    @countries = COUNTRIES_HASH
+
+    render :show
+  end
+
   def show_ajax
     @user = User.find(params[:id])
     @countries = COUNTRIES_HASH

spec/internal/app/views/layouts/application.html.erb

@@ -5,6 +5,14 @@
   <%= stylesheet_link_tag "scaffold", "style", "jquery-ui-1.8.16.custom" %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tag %>
+  <script>
+      $(document).ready(function() {
+          /* Activating Best In Place */
+          jQuery(".best_in_place").best_in_place({
+              eventType: '<%= @event_type || 'click' %>'
+          });
+      });
+  </script>
 </head>
 <body>
 

spec/internal/config/routes.rb

@@ -4,6 +4,7 @@
       get :double_init
       get :show_ajax
       get :email_field
+      get :event_type
     end
   end