Adding support for checkboxes

README.md

@@ -14,12 +14,12 @@ The editor works by PUTting the updated value to the server and GETting the upda
 
 ###Features
 
-- Compatible with text inputs
-- Compatible with textarea
-- Compatible with select dropdown collections
-- Compatible with checkboxes
+- Compatible with text **inputs**
+- Compatible with **textarea**
+- Compatible with **select** dropdown with custom collections
+- Compatible with custom boolean values (like **checkboxes**)
 - Sanitize HTML and trim spaces of user's input
-- Displays server-side validation errors
+- Displays server-side **validation** errors
 
 ---
 
@@ -50,6 +50,10 @@ Of course it can take an instance or global variable for the collection, just re
 
 #### Checkbox
 
+    <%= best_in_place @user, :receive_emails, :checkbox, ["No, thanks", "Yes, of course!"] %>
+
+The first value is always the negative boolean value and the second the positive. If not defined, it will display *Yes* and *No* options.
+
 ---
 
 ###Installation

lib/best_in_place.rb

@@ -9,8 +9,11 @@ def best_in_place(object, field, formType = :input, selectValues = [])
       end
       if formType == :checkbox
         fieldValue = !!object.send(field)
-        value = "<form action='javascript:void(0)' style='display:inline;'><input type='checkbox' "
-        value += (fieldValue ? "checked='checked'" : "") + "/></form>"
+        if selectValues.blank? || selectValues.size != 2
+          selectValues = ["No", "Yes"]
+        end
+        value = fieldValue ? selectValues[1] : selectValues[0]
+        selectValues = selectValues.to_json
       end
       out = "<span class='best_in_place'"
       out += " id='best_in_place_" + object.class.to_s.underscore + "_" + field.to_s + "'"

public/javascripts/best_in_place.js

@@ -48,6 +48,8 @@ BestInPlaceEditor.prototype = {
     })
     if (this.formType == "select") {
       editor.element.html(this.values[this.getValue()][1])
+    } else if (this.formType == "checkbox") {
+      editor.element.html(this.getValue() ? this.values[1] : this.values[0])
     } else editor.element.html(this.getValue())
   },
 
@@ -75,17 +77,15 @@ BestInPlaceEditor.prototype = {
       }
     })
 
-    var ft = (self.selectValues != null ? "select" : "input")
-
     // Load own attributes (overrides all others)
     self.url           = self.element.attr("data-url")          || self.url      || document.location.pathname
     self.selectValues  = self.element.attr("data-selectValues") || self.selectValues
-    self.formType      = self.element.attr("data-formType")     || self.formtype || ft
+    self.formType      = self.element.attr("data-formType")     || self.formtype || "input"
     self.objectName    = self.element.attr("data-object")       || self.objectName
     self.attributeName = self.element.attr("data-attribute")    || self.attributeName
     self.activator     = self.element.attr("data-activator")    || self.element
 
-    if (self.formType == "select" && self.selectValues != null)
+    if ((self.formType == "select" || self.formType == "checkbox") && self.selectValues != null)
     {
       self.values = jQuery.parseJSON(self.selectValues)
     }
@@ -158,7 +158,6 @@ BestInPlaceEditor.prototype = {
 
 BestInPlaceEditor.forms = {
   "input" : {
-    /* is bound to the editor and called to replace the element's content with a form for editing data */
     activateForm : function() {
       var form = '<form class="form_in_place" action="javascript:void(0)" style="display:inline;"><input type="text" value="' + this.sanitize(this.oldValue) + '"></form>'
       this.element.html(form)
@@ -206,28 +205,20 @@ BestInPlaceEditor.forms = {
     }
   },
 
-  /* Not yet working */
   "checkbox" : {
     activateForm : function() {
-      var output = "<form action='javascript:void(0)' style='display:inline;'>"
-      checked = (this.oldValue ? "checked='checked'" : "")
-      output += "<input type='hidden' value=" + !Boolean(this.oldValue) + "/>"
-      output += "<input type='checkbox' " + checked + "/></form>"
+      var newValue = Boolean(this.oldValue != this.values[1])
+      var output = newValue ? this.values[1] : this.values[0]
       this.element.html(output)
-      this.element.find("input").bind('click', {editor: this}, BestInPlaceEditor.forms.select.blurHandler)
+      this.update()
     },
 
     getValue : function() {
-      return this.sanitize(this.element.find("input").val())
-    },
-
-    blurHandler : function(event) {
-      event.data.editor.update()
+      return Boolean(this.element.html() == this.values[1])
     }
-  },
+  },s
 
   "textarea" : {
-    /* is bound to the editor and called to replace the element's content with a form for editing data */
     activateForm : function() {
       this.element.html('<form action="javascript:void(0)" style="display:inline;"><textarea>' + this.sanitize(this.oldValue) + '</textarea></form>')
       this.element.find('textarea')[0].select()

test_app/app/views/users/show.html.erb

@@ -35,13 +35,13 @@
     <tr>
       <td>Country</td>
       <td>
-          <%= best_in_place @user, :country, :select, [[1, "Spain"], [2, "Italy"], [3, "Germany"], [4, "France"]] %>
+          <%= best_in_place @user, :country, :select, @countries %>
       </td>
     </tr>
     <tr>
       <td>Receive newsletter?</td>
       <td>
-        <%= best_in_place @user, :receive_email, :checkbox %>
+        <%= best_in_place @user, :receive_email, :checkbox, ["No thanks", "Yes of course"] %>
       </td>
     </tr>
     <tr>