best_in_place 0.1.4 → 0.1.5

data/Gemfile.lock

@@ -0,0 +1,78 @@
+PATH
+  remote: .
+  specs:
+    best_in_place (0.1.4)
+      rails (~> 3.0.0)
+
+GEM
+  remote: http://rubygems.org/
+  specs:
+    abstract (1.0.0)
+    actionmailer (3.0.3)
+      actionpack (= 3.0.3)
+      mail (~> 2.2.9)
+    actionpack (3.0.3)
+      activemodel (= 3.0.3)
+      activesupport (= 3.0.3)
+      builder (~> 2.1.2)
+      erubis (~> 2.6.6)
+      i18n (~> 0.4)
+      rack (~> 1.2.1)
+      rack-mount (~> 0.6.13)
+      rack-test (~> 0.5.6)
+      tzinfo (~> 0.3.23)
+    activemodel (3.0.3)
+      activesupport (= 3.0.3)
+      builder (~> 2.1.2)
+      i18n (~> 0.4)
+    activerecord (3.0.3)
+      activemodel (= 3.0.3)
+      activesupport (= 3.0.3)
+      arel (~> 2.0.2)
+      tzinfo (~> 0.3.23)
+    activeresource (3.0.3)
+      activemodel (= 3.0.3)
+      activesupport (= 3.0.3)
+    activesupport (3.0.3)
+    arel (2.0.7)
+    builder (2.1.2)
+    erubis (2.6.6)
+      abstract (>= 1.0.0)
+    i18n (0.5.0)
+    mail (2.2.14)
+      activesupport (>= 2.3.6)
+      i18n (>= 0.4.0)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.16)
+    polyglot (0.3.1)
+    rack (1.2.1)
+    rack-mount (0.6.13)
+      rack (>= 1.0.0)
+    rack-test (0.5.7)
+      rack (>= 1.0)
+    rails (3.0.3)
+      actionmailer (= 3.0.3)
+      actionpack (= 3.0.3)
+      activerecord (= 3.0.3)
+      activeresource (= 3.0.3)
+      activesupport (= 3.0.3)
+      bundler (~> 1.0)
+      railties (= 3.0.3)
+    railties (3.0.3)
+      actionpack (= 3.0.3)
+      activesupport (= 3.0.3)
+      rake (>= 0.8.7)
+      thor (~> 0.14.4)
+    rake (0.8.7)
+    thor (0.14.6)
+    treetop (1.4.9)
+      polyglot (>= 0.3.1)
+    tzinfo (0.3.24)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  best_in_place!
+  rails (~> 3.0.0)

data/README.md

@@ -19,48 +19,60 @@ The editor works by PUTting the updated value to the server and GETting the upda
 - Compatible with text **inputs**
 - Compatible with **textarea**
 - Compatible with **select** dropdown with custom collections
-- Compatible with custom boolean values (like **checkboxes**)
+- Compatible with custom boolean values (same usage of **checkboxes**)
 - Sanitize HTML and trim spaces of user's input
 - Displays server-side **validation** errors
+- Allows external activator
+- ESC key destroys changes
 
 ---
 
 ##Usage of Rails 3 Gem
 
-**best_in_place Object, Field, [formType, [selectValues, [urlObject, [nilValue]]]]**
+**best_in_place object, field, OPTIONS**
+
+Params:
+
+- **object** (Mandatory): The Object parameter represents the object itself you are about to modify
+- **field** (Mandatory): The field (passed as symbol) is the attribute of the Object you are going to display/edit.
+
+Options:
+
+- **:type** It can be only [:input, :textarea, :select, :checkbox] or if undefined it defaults to :input.
+- **:collection**: In case you are using the :select type then you must specify the collection of values it takes. In case you are
+  using the :checkbox type you can specify the two values it can take, or otherwise they will default to Yes and No.
+- **:path**: URL to which the updating action will be sent. If not defined it defaults to the :object path.
+- **:nil**: The nil param defines the content displayed in case no value is defined for that field. It can be something like "click me to edit".
+  If not defined it will show *"-"*.
+- **:activator**: Is the DOM object that can activate the field. If not defined the user will making editable by clicking on it.
 
-The *Object* parameter represents the object itself you are about to modify. The *field* (passed as symbol) is the attribute of the Object 
-you are going to display/edit. You can add the *formType* [:input, :textarea, :select, :checkbox] or it defaults to :input. In case you chose 
-:select, you must specify the collection of values it takes through the *selectValues* param. In case you use :checkbox, you can user the parameter 
-selectValues to specify the two possible boolean values. If the Object url cannot be obtained directly from the Object, you can pass the parameter 
-*urlObject* the same way you pass any url in Rails. The last parameter *nilValue* allows you to customize the null value, in case the user deletes 
-the contents. By default it will display *"-"*.
 
 I created a [test_app](https://github.com/bernat/best_in_place/tree/master/test_app) and a running demo in heroku to test the features.
 
-Examples (code placed in the views):
+Examples (code in the views):
 
 ### Input
 
-    <%= best_in_place @user, :name, :input %>
+    <%= best_in_place @user, :name, :type => :input %>
 
-    <%= best_in_place @user, :name, :input, nil, nil, "Click me to add content!" %>
+    <%= best_in_place @user, :name, :type => :input, :nil => "Click me to add content!" %>
 
 ### Textarea
 
-    <%= best_in_place @user, :description, :textarea %>
+    <%= best_in_place @user, :description, :type => :textarea %>
 
 ### Select
 
-    <%= best_in_place @user, :country, :select, [[1, "Spain"], [2, "Italy"], [3, "Germany"], [4, "France"]] %>
+    <%= best_in_place @user, :country, :type => :select, :collection => [[1, "Spain"], [2, "Italy"], [3, "Germany"], [4, "France"]] %>
 
-Of course it can take an instance or global variable for the collection, just remember the structure [[key, value], [key, value],...]
+Of course it can take an instance or global variable for the collection, just remember the structure [[key, value], [key, value],...].
+The key can be a string or an integer.
 
 ### Checkbox
 
-    <%= best_in_place @user, :receive_emails, :checkbox, ["No, thanks", "Yes, of course!"] %>
+    <%= best_in_place @user, :receive_emails, :type => :checkbox, :collection => ["No, thanks", "Yes, of course!"] %>
 
-The first value is always the negative boolean value and the second the positive [false, true]. 
+The first value is always the negative boolean value and the second the positive. Structure: ["false value", "true value"].
 If not defined, it will default to *Yes* and *No* options.
 
 ### Display server validation errors
@@ -99,7 +111,7 @@ At the same time, you must define the restrictions, validations and error messag
         :format => {:with => /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, :message => "has wrong email format"}
       validates :zip, :numericality => true, :length => { :minimum => 5 }
     end
-    
+
 When the user tries to introduce invalid data, the error messages defined in the model will be displayed in pop-up windows using the jQuery.purr plugin.
 
 ---
@@ -113,7 +125,8 @@ in the following order:
 - jquery.purr.js
 - **best_in_place.js**
 
-The last one you can copy it (and keeping up to date to the last version) by running the following generator in your application's root:
+The last one you can copy it (and keeping up to date to the last version) by running the following generator in your application's root.
+Remember to do it every time you update the gem (or you will see no change).
 
     rails g best_in_place:setup
 
@@ -133,9 +146,8 @@ In order to use the Rails 3 gem, just add the following line to the gemfile:
 ##TODO
 
 - Client Side Validation definitions
-- To accept given click handlers
-- To accept a handler to activate all best_in_place fields at once
-- Specs
+- Accepting more than one handler to activate best_in_place fields
+- Specs *(sacrilege!!)*
 
 ---
 
@@ -144,7 +156,13 @@ In order to use the Rails 3 gem, just add the following line to the gemfile:
 - v.0.1.0 Initial deploy
 - v.0.1.2 Fixing errors in collections (taken value[0] instead of index) and fixing test_app controller responses
 - v.0.1.3 Bug in Rails Helper. Key wrongly considered an Integer.
+- v.0.1.4 Adding two new parameters for further customization urlObject and nilValue and making input update on blur.
+- v.0.1.5 **Attention: this release is not backwards compatible**. Changing params from list to option hash, helper's refactoring,
+  fixing bug with objects inside namespaces, adding feature for passing an external activator handler as param. Adding feature
+  of key ESCAPE for destroying changes before they are made permanent (in inputs and textarea).
 
 ##Authors, License and Stuff
 
-Code by [Bernat Farrero](http://bernatfarrero.com) based on the [original project](http://github.com/janv/rest_in_place/) of Jan Varwig and released under [MIT](http://www.opensource.org/licenses/mit-license.php).
+Code by [Bernat Farrero](http://bernatfarrero.com) (based on the [original project](http://github.com/janv/rest_in_place/) of Jan Varwig) and released under [MIT](http://www.opensource.org/licenses/mit-license.php).
+
+Many thanks to the contributors: Specially [Roger Campos](http://github.com/rogercampos)

data/lib/best_in_place.rb

@@ -1,27 +1,33 @@
 module BestInPlace
   module BestInPlaceHelpers
-    def best_in_place(object, field, formType = :input, selectValues = [], urlObject = nil, nilValue = "-")
+    def best_in_place(object, field, opts = {})
+      opts[:type] ||= :input
+      opts[:collection] ||= []
+      opts[:nil] ||= "-"
       field = field.to_s
-      value = object.send(field).blank? ? nilValue.to_s : object.send(field)
-      if formType == :select && !selectValues.blank?
-        value = Hash[selectValues][object.send(field)]
-        selectValues = selectValues.to_json
+      value = object.send(field).blank? ? opts[:nil].to_s : object.send(field)
+      collection = nil
+      if opts[:type] == :select && !opts[:collection].blank?
+        v = object.send(field)
+        value = Hash[opts[:collection]][!!(v =~ /^[0-9]+$/) ? v.to_i : v]
+        collection = opts[:collection].to_json
       end
-      if formType == :checkbox
+      if opts[:type] == :checkbox
         fieldValue = !!object.send(field)
-        if selectValues.blank? || selectValues.size != 2
-          selectValues = ["No", "Yes"]
+        if opts[:collection].blank? || opts[:collection].size != 2
+          opts[:collection] = ["No", "Yes"]
         end
-        value = fieldValue ? selectValues[1] : selectValues[0]
-        selectValues = selectValues.to_json
+        value = fieldValue ? opts[:collection][1] : opts[:collection][0]
+        collection = opts[:collection].to_json
       end
       out = "<span class='best_in_place'"
-      out += " id='best_in_place_" + object.class.to_s.underscore + "_" + field.to_s + "'"
-      out += " data-url='" + (urlObject.blank? ? url_for(object).to_s : url_for(urlObject)) + "'"
-      out += " data-object='" + object.class.to_s.underscore + "'"
-      out += " data-selectValues='" + selectValues + "'" if !selectValues.blank?
-      out += " data-attribute='" + field + "'"
-      out += " data-formType='" + formType.to_s + "'>"
+      out += " id='best_in_place_" + object.class.to_s.gsub("::", "_").underscore + "_#{field}"
+      out += " data-url='" + (opts[:path].blank? ? url_for(object).to_s : url_for(opts[:path])) + "'"
+      out += " data-object='" + object.class.to_s.gsub("::", "_").underscore + "'"
+      out += " data-collection='#{collection}'" unless collection.blank?
+      out += " data-attribute='#{field}'"
+      out += " data-activator='#{opts[:activator].to_s}'" unless opts[:activator].blank?
+      out += " data-type='#{opts[:type].to_s}'>"
       out += value.to_s
       out +=  "</span>"
       raw(out)
@@ -30,4 +36,4 @@ module BestInPlace
 end
 
 
-ActionView::Base.send(:include, BestInPlace::BestInPlaceHelpers)
+ActionView::Base.send(:include, BestInPlace::BestInPlaceHelpers)

data/lib/best_in_place/version.rb

@@ -1,3 +1,3 @@
 module BestInPlace
-  VERSION = "0.1.4"
+  VERSION = "0.1.5"
 end

data/public/javascripts/best_in_place.js

@@ -23,7 +23,7 @@ function BestInPlaceEditor(e) {
   this.element = jQuery(e)
   this.initOptions()
   this.bindForm()
-  this.activator.bind('click', {editor: this}, this.clickHandler)
+  $(this.activator).bind('click', {editor: this}, this.clickHandler)
 }
 
 BestInPlaceEditor.prototype = {
@@ -32,12 +32,13 @@ BestInPlaceEditor.prototype = {
   activate : function() {
 		var elem = this.element.html()
     this.oldValue = elem
-    this.activator.unbind("click", this.clickHandler)
+    $(this.activator).unbind("click", this.clickHandler)
     this.activateForm()
   },
 
   abort : function() {
-    this.element.html(this.oldValue).bind('click', {editor: this}, this.clickHandler)
+    this.element.html(this.oldValue)
+    $(this.activator).bind('click', {editor: this}, this.clickHandler)
   },
 
   update : function() {
@@ -68,8 +69,8 @@ BestInPlaceEditor.prototype = {
     var self = this
     self.element.parents().each(function(){
       self.url           = self.url           || jQuery(this).attr("data-url")
-      self.selectValues  = self.selectValues  || jQuery(this).attr("data-selectValues")
-      self.formType      = self.formType      || jQuery(this).attr("data-formType")
+      self.collection    = self.collection    || jQuery(this).attr("data-collection")
+      self.formType      = self.formType      || jQuery(this).attr("data-type")
       self.objectName    = self.objectName    || jQuery(this).attr("data-object")
       self.attributeName = self.attributeName || jQuery(this).attr("data-attribute")
     })
@@ -83,15 +84,15 @@ BestInPlaceEditor.prototype = {
 
     // 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 || "input"
+    self.collection    = self.element.attr("data-collection")   || self.collection
+    self.formType      = self.element.attr("data-type")         || 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.formType == "checkbox") && self.selectValues != null)
+    if ((self.formType == "select" || self.formType == "checkbox") && self.collection != null)
     {
-      self.values = jQuery.parseJSON(self.selectValues)
+      self.values = jQuery.parseJSON(self.collection)
     }
   },
 
@@ -136,7 +137,7 @@ BestInPlaceEditor.prototype = {
     this.element.html(data[this.objectName])
 
 		// Binding back after being clicked
-    this.element.bind('click', {editor: this}, this.clickHandler)
+    $(this.activator).bind('click', {editor: this}, this.clickHandler)
   },
 
   loadErrorCallback : function(request, error) {
@@ -149,7 +150,7 @@ BestInPlaceEditor.prototype = {
     })
 
 		// Binding back after being clicked
-    this.element.bind('click', {editor: this}, this.clickHandler)
+    $(this.activator).bind('click', {editor: this}, this.clickHandler)
   },
 
   clickHandler : function(event) {
@@ -164,10 +165,9 @@ BestInPlaceEditor.forms = {
       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)
       this.element.find('input')[0].select()
-      this.element.find("form")
-        .bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler)
-      this.element.find("input")
-        .bind('blur',   {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler)
+      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler)
+      this.element.find("input").bind('blur',   {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler)
+      this.element.find("input").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler)
     },
 
     getValue :  function() {
@@ -180,7 +180,10 @@ BestInPlaceEditor.forms = {
 
     submitHandler : function(event) {
       event.data.editor.update()
-      return false
+    },
+
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) event.data.editor.abort()
     }
   },
 
@@ -204,7 +207,7 @@ BestInPlaceEditor.forms = {
 
     blurHandler : function(event) {
       event.data.editor.update()
-    }
+    },
   },
 
   "checkbox" : {
@@ -225,6 +228,7 @@ BestInPlaceEditor.forms = {
       this.element.html('<form action="javascript:void(0)" style="display:inline;"><textarea>' + this.sanitize(this.oldValue) + '</textarea></form>')
       this.element.find('textarea')[0].select()
       this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler)
+      this.element.find("textarea").bind('keyup', {editor: this}, BestInPlaceEditor.forms.textarea.keyupHandler)
     },
 
     getValue :  function() {
@@ -233,6 +237,10 @@ BestInPlaceEditor.forms = {
 
     blurHandler : function(event) {
       event.data.editor.update()
+    },
+
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) event.data.editor.abort()
     }
 
   }

data/test_app/Gemfile

@@ -7,7 +7,7 @@ gem 'rails', '3.0.0'
 
 gem 'sqlite3-ruby', :require => 'sqlite3'
 
-gem 'best_in_place'
+gem 'best_in_place', :path => ".."
 # Use unicorn as the web server
 # gem 'unicorn'
 

data/test_app/Gemfile.lock

@@ -1,3 +1,9 @@
+PATH
+  remote: ..
+  specs:
+    best_in_place (0.1.5)
+      rails (~> 3.0.0)
+
 GEM
   remote: http://rubygems.org/
   specs:
@@ -30,8 +36,6 @@ GEM
     activesupport (3.0.0)
     arel (1.0.1)
       activesupport (~> 3.0.0)
-    best_in_place (0.1.1)
-      rails (~> 3.0.0)
     builder (2.1.2)
     erubis (2.6.6)
       abstract (>= 1.0.0)
@@ -71,6 +75,6 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  best_in_place
+  best_in_place!
   rails (= 3.0.0)
   sqlite3-ruby

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

@@ -1,12 +1,13 @@
 <p id="notice"><%= notice %></p>
 <div id="user_account">
   <h1>User details</h1>
-  <p>Click to edit</p>
+  <%= link_to "Go back to USERS", users_path %>
+  <p style="margin-left:48em">Click to edit</p>
   <table>
     <tr>
-      <td>Name</td>
+      <td>Name <a id="editme" href="#">(edit me)</a></td>
       <td>
-        <%= best_in_place @user, :name, :input %>
+        <%= best_in_place @user, :name, :type => :input, :activator => "#editme" %>
       </td>
     </tr>
     <tr>
@@ -36,22 +37,32 @@
     <tr>
       <td>Country</td>
       <td>
-          <%= best_in_place @user, :country, :select, @countries %>
+          <%= best_in_place @user, :country, {:type => :select, :collection => @countries} %>
+          <!-- <%= @countries.inspect %> -->
       </td>
     </tr>
     <tr>
       <td>Receive newsletter?</td>
       <td>
-        <%= best_in_place @user, :receive_email, :checkbox, ["No thanks", "Yes of course"] %>
+        <%= best_in_place @user, :receive_email, {:type => :checkbox, :collection => ["No thanks", "Yes of course"]} %>
       </td>
     </tr>
     <tr>
       <td>User description</td>
       <td>
-        <%= best_in_place @user, :description, :textarea %>
+        <%= best_in_place @user, :description, :type => :textarea %>
       </td>
   </table>
-
-  <%= link_to "Users list", users_path %>
+  <br />
+  <hr />
+  <p>Try the <b>features of Best In Place</b>:</p>
+  <ul>
+  <li>Try giving wrong email values or too short address, inputs to see server errors.</li>
+  <li>Click on newsletter to change a boolean value</li>
+  <li>Click on country to change the value in a collection of values</li>
+  <li>Use the external handler to change the value of the name</li>
+  <li>Try making changes inside inputs or textareas and then press the ESC key to recover the old value</li>
+  </ul>
+  <p>More information on <a href="http://github.com/bernat/best_in_place">github</a> or <a href="http://blog.bernatfarrero.com/in-place-editing-with-javascript-jquery-and-rails-3/">bernatfarrero.com</a>.</p>
 
 </div>

data/test_app/public/javascripts/best_in_place.js

@@ -23,7 +23,7 @@ function BestInPlaceEditor(e) {
   this.element = jQuery(e)
   this.initOptions()
   this.bindForm()
-  this.activator.bind('click', {editor: this}, this.clickHandler)
+  $(this.activator).bind('click', {editor: this}, this.clickHandler)
 }
 
 BestInPlaceEditor.prototype = {
@@ -32,12 +32,13 @@ BestInPlaceEditor.prototype = {
   activate : function() {
 		var elem = this.element.html()
     this.oldValue = elem
-    this.activator.unbind("click", this.clickHandler)
+    $(this.activator).unbind("click", this.clickHandler)
     this.activateForm()
   },
 
   abort : function() {
-    this.element.html(this.oldValue).bind('click', {editor: this}, this.clickHandler)
+    this.element.html(this.oldValue)
+    $(this.activator).bind('click', {editor: this}, this.clickHandler)
   },
 
   update : function() {
@@ -68,8 +69,8 @@ BestInPlaceEditor.prototype = {
     var self = this
     self.element.parents().each(function(){
       self.url           = self.url           || jQuery(this).attr("data-url")
-      self.selectValues  = self.selectValues  || jQuery(this).attr("data-selectValues")
-      self.formType      = self.formType      || jQuery(this).attr("data-formType")
+      self.collection    = self.collection    || jQuery(this).attr("data-collection")
+      self.formType      = self.formType      || jQuery(this).attr("data-type")
       self.objectName    = self.objectName    || jQuery(this).attr("data-object")
       self.attributeName = self.attributeName || jQuery(this).attr("data-attribute")
     })
@@ -83,15 +84,15 @@ BestInPlaceEditor.prototype = {
 
     // 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 || "input"
+    self.collection    = self.element.attr("data-collection")   || self.collection
+    self.formType      = self.element.attr("data-type")         || 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.formType == "checkbox") && self.selectValues != null)
+    if ((self.formType == "select" || self.formType == "checkbox") && self.collection != null)
     {
-      self.values = jQuery.parseJSON(self.selectValues)
+      self.values = jQuery.parseJSON(self.collection)
     }
   },
 
@@ -136,7 +137,7 @@ BestInPlaceEditor.prototype = {
     this.element.html(data[this.objectName])
 
 		// Binding back after being clicked
-    this.element.bind('click', {editor: this}, this.clickHandler)
+    $(this.activator).bind('click', {editor: this}, this.clickHandler)
   },
 
   loadErrorCallback : function(request, error) {
@@ -149,7 +150,7 @@ BestInPlaceEditor.prototype = {
     })
 
 		// Binding back after being clicked
-    this.element.bind('click', {editor: this}, this.clickHandler)
+    $(this.activator).bind('click', {editor: this}, this.clickHandler)
   },
 
   clickHandler : function(event) {
@@ -164,10 +165,9 @@ BestInPlaceEditor.forms = {
       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)
       this.element.find('input')[0].select()
-      this.element.find("form")
-        .bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler)
-      this.element.find("input")
-        .bind('blur',   {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler)
+      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler)
+      this.element.find("input").bind('blur',   {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler)
+      this.element.find("input").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler)
     },
 
     getValue :  function() {
@@ -175,12 +175,15 @@ BestInPlaceEditor.forms = {
     },
 
     inputBlurHandler : function(event) {
-      event.data.editor.abort()
+      event.data.editor.update()
     },
 
     submitHandler : function(event) {
       event.data.editor.update()
-      return false
+    },
+
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) event.data.editor.abort()
     }
   },
 
@@ -204,7 +207,7 @@ BestInPlaceEditor.forms = {
 
     blurHandler : function(event) {
       event.data.editor.update()
-    }
+    },
   },
 
   "checkbox" : {
@@ -225,6 +228,7 @@ BestInPlaceEditor.forms = {
       this.element.html('<form action="javascript:void(0)" style="display:inline;"><textarea>' + this.sanitize(this.oldValue) + '</textarea></form>')
       this.element.find('textarea')[0].select()
       this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler)
+      this.element.find("textarea").bind('keyup', {editor: this}, BestInPlaceEditor.forms.textarea.keyupHandler)
     },
 
     getValue :  function() {
@@ -233,6 +237,10 @@ BestInPlaceEditor.forms = {
 
     blurHandler : function(event) {
       event.data.editor.update()
+    },
+
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) event.data.editor.abort()
     }
 
   }

data/test_app/public/stylesheets/style.css

@@ -25,7 +25,7 @@ input[type=checkbox] {
 }
 textarea {
   height:15em;
-  width: 30em;
+  width: 95%;
 }
 .best_in_place {
   padding: .1m;

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: best_in_place
 version: !ruby/object:Gem::Version 
-  hash: 19
+  hash: 17
   prerelease: false
   segments: 
   - 0
   - 1
-  - 4
-  version: 0.1.4
+  - 5
+  version: 0.1.5
 platform: ruby
 authors: 
 - Bernat Farrero
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-01-24 00:00:00 +01:00
+date: 2011-01-26 00:00:00 +01:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -46,6 +46,7 @@ extra_rdoc_files: []
 files: 
 - .gitignore
 - Gemfile
+- Gemfile.lock
 - README.md
 - Rakefile
 - best_in_place.gemspec