best_in_place 0.1.9 → 0.2.0

data/.gitignore

@@ -1,5 +1,11 @@
 .DS_Store
-testapp/log
-testapp/config/database.yml
-.bundle/*
+.bundle
 pkg/*
+
+Gemfile.lock
+test_app/.bundle
+test_app/db/*.sqlite3
+test_app/log/*.log
+test_app/tmp/**/*
+
+.rvmrc

data/.rspec

@@ -0,0 +1 @@
+--colour

data/.travis.yml

@@ -0,0 +1,11 @@
+rvm:
+  - 1.8.7
+  - ree
+  - 1.9.2
+  - 1.9.3
+
+env: "RAILS_ENV=test DISPLAY=:99.0"
+
+before_script:
+  - "sh -c 'cd test_app && bundle && bundle exec rake db:drop db:migrate'"
+  - "sh -e /etc/init.d/xvfb start"

data/Gemfile

@@ -2,3 +2,5 @@ source "http://rubygems.org"
 
 # Specify your gem's dependencies in best_in_place.gemspec
 gemspec
+
+gem 'sqlite3-ruby', :require => 'sqlite3'

data/README.md

@@ -1,4 +1,5 @@
 # Best In Place
+[![Build Status](https://secure.travis-ci.org/bernat/best_in_place.png)](http://travis-ci.org/bernat/best_in_place)
 **The Unobtrusive in Place editing solution**
 
 
@@ -47,6 +48,7 @@ Options:
   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.
 - **:sanitize**: True by default. If set to false the input/textarea will accept html tags.
+- **:html_args**: Hash of html arguments, such as maxlength, default-value etc.
 
 
 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.
@@ -176,4 +178,4 @@ If the script is used with the Rails Gem no html tags will be allowed unless the
 
 Code by [Bernat Farrero](http://bernatfarrero.com) from [Itnig Web Services](http://itnig.net) (it was based on the [original project](http://github.com/janv/rest_in_place/) of Jan Varwig) and released under [MIT license](http://www.opensource.org/licenses/mit-license.php).
 
-Many thanks to the contributors: [Roger Campos](http://github.com/rogercampos) and [Jack Senechal](https://github.com/jacksenechal)
+Many thanks to the contributors: [Roger Campos](http://github.com/rogercampos) and [Jack Senechal](https://github.com/jacksenechal)

data/Rakefile

@@ -1,2 +1,8 @@
 require 'bundler'
 Bundler::GemHelper.install_tasks
+
+require 'rspec/core'
+require 'rspec/core/rake_task'
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/best_in_place.gemspec

@@ -18,5 +18,10 @@ Gem::Specification.new do |s|
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]
+
   s.add_dependency "rails", "~> 3.0.0"
+
+  s.add_development_dependency "rspec-rails", "~> 2.7.0"
+  s.add_development_dependency "nokogiri", ">= 1.5.0"
+  s.add_development_dependency "capybara", ">= 1.0.1"
 end

data/lib/best_in_place.rb

@@ -1,44 +1,7 @@
+require "best_in_place/helper"
+
 module BestInPlace
-  module BestInPlaceHelpers
-    def best_in_place(object, field, opts = {})
-      opts[:type] ||= :input
-      opts[:collection] ||= []
-      field = field.to_s
-      value = object.send(field).blank? ? "" : 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 opts[:type] == :checkbox
-        fieldValue = !!object.send(field)
-        if opts[:collection].blank? || opts[:collection].size != 2
-          opts[:collection] = ["No", "Yes"]
-        end
-        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.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]}'" unless opts[:activator].blank?
-      out << " data-nil='#{opts[:nil].to_s}'" unless opts[:nil].blank?
-      out << " data-type='#{opts[:type].to_s}'"
-      if !opts[:sanitize].nil? && !opts[:sanitize]
-        out << " data-sanitize='false'>"
-        out << sanitize(value.to_s, :tags => %w(b i u s a strong em p h1 h2 h3 h4 h5 ul li ol hr pre span img), :attributes => %w(id class))
-      else
-        out << ">#{sanitize(value.to_s, :tags => nil, :attributes => nil)}"
-      end
-      out << "</span>"
-      raw out
-    end
-  end
+  autoload :TestHelpers, "best_in_place/test_helpers"
 end
 
-
 ActionView::Base.send(:include, BestInPlace::BestInPlaceHelpers)

data/lib/best_in_place/helper.rb

@@ -0,0 +1,52 @@
+module BestInPlace
+  module BestInPlaceHelpers
+    def best_in_place(object, field, opts = {})
+      opts[:type] ||= :input
+      opts[:collection] ||= []
+      field = field.to_s
+      value = object.send(field).blank? ? "" : 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 opts[:type] == :checkbox
+        fieldValue = !!object.send(field)
+        if opts[:collection].blank? || opts[:collection].size != 2
+          opts[:collection] = ["No", "Yes"]
+        end
+        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.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]}'" unless opts[:activator].blank?
+      out << " data-nil='#{opts[:nil].to_s}'" unless opts[:nil].blank?
+      out << " data-type='#{opts[:type].to_s}'"
+      out << " data-inner-class='#{opts[:inner_class].to_s}'" if opts[:inner_class]
+      out << " data-html-attrs='#{opts[:html_attrs].to_json}'" unless opts[:html_attrs].blank?
+      if !opts[:sanitize].nil? && !opts[:sanitize]
+        out << " data-sanitize='false'>"
+        out << sanitize(value.to_s, :tags => %w(b i u s a strong em p h1 h2 h3 h4 h5 ul li ol hr pre span img br), :attributes => %w(id class href))
+      else
+        out << ">#{sanitize(value.to_s, :tags => nil, :attributes => nil)}"
+      end
+      out << "</span>"
+      raw out
+    end
+
+    def best_in_place_if(condition, object, field, opts={})
+      if condition
+        best_in_place(object, field, opts)
+      else
+        object.send field
+      end
+    end
+  end
+end
+

data/lib/best_in_place/test_helpers.rb

@@ -0,0 +1,26 @@
+module BestInPlace
+  module TestHelpers
+    def bip_text(model, attr, new_value)
+      page.execute_script <<-JS
+        $("#best_in_place_#{model}_#{attr}").click();
+        $("#best_in_place_#{model}_#{attr} input[name='#{attr}']").val('#{new_value}');
+        $("#best_in_place_#{model}_#{attr} form").submit();
+      JS
+    end
+
+    def bip_bool(model, attr)
+      page.execute_script("$('#best_in_place_#{model}_#{attr}').click();")
+    end
+
+    def bip_select(model, attr, name)
+      page.execute_script <<-JS
+        (function() {
+          $("#best_in_place_#{model}_#{attr}").click();
+          var opt_value = $("#best_in_place_#{model}_#{attr} select option:contains('#{name}')").attr('value');
+          $("#best_in_place_#{model}_#{attr} select option[value='" + opt_value + "']").attr('selected', true);
+          $("#best_in_place_#{model}_#{attr} select").change();
+        })();
+      JS
+    end
+  end
+end

data/lib/best_in_place/version.rb

@@ -1,3 +1,3 @@
 module BestInPlace
-  VERSION = "0.1.9"
-end
+  VERSION = "0.2.0"
+end

data/public/javascripts/best_in_place.js

@@ -31,7 +31,7 @@ BestInPlaceEditor.prototype = {
   // Public Interface Functions //////////////////////////////////////////////
 
   activate : function() {
-		var elem = this.isNil ? "" : this.element.html();
+    var elem = this.isNil ? "" : this.element.html();
     this.oldValue = elem;
     $(this.activator).unbind("click", this.clickHandler);
     this.activateForm();
@@ -69,7 +69,7 @@ BestInPlaceEditor.prototype = {
     } else if (this.formType == "checkbox") {
       editor.element.html(this.getValue() ? this.values[1] : this.values[0]);
     } else {
-      editor.element.html(this.getValue());
+      editor.element.html(this.getValue() != "" ? this.getValue() : this.nil);
     }
   },
 
@@ -89,6 +89,8 @@ BestInPlaceEditor.prototype = {
       self.objectName    = self.objectName    || jQuery(this).attr("data-object");
       self.attributeName = self.attributeName || jQuery(this).attr("data-attribute");
       self.nil           = self.nil           || jQuery(this).attr("data-nil");
+      self.inner_class   = self.inner_class   || jQuery(this).attr("data-inner-class");
+      self.html_attrs    = self.html_attrs    || jQuery(this).attr("data-html-attrs");
     });
 
     // Try Rails-id based if parents did not explicitly supply something
@@ -107,6 +109,8 @@ BestInPlaceEditor.prototype = {
     self.attributeName = self.element.attr("data-attribute")    || self.attributeName;
     self.activator     = self.element.attr("data-activator")    || self.element;
     self.nil           = self.element.attr("data-nil")          || self.nil      || "-";
+    self.inner_class   = self.element.attr("data-inner-class")  || self.inner_class   || null;
+    self.html_attrs    = self.element.attr("data-html-attrs") || self.html_attrs;
 
     if (!self.element.attr("data-sanitize")) {
       self.sanitize = true;
@@ -160,7 +164,7 @@ BestInPlaceEditor.prototype = {
 
     if (csrf_param !== undefined && csrf_token !== undefined) {
       data += "&" + csrf_param + "=" + encodeURIComponent(csrf_token);
-		}
+    }
     return data;
   },
 
@@ -174,7 +178,9 @@ BestInPlaceEditor.prototype = {
 
   loadSuccessCallback : function(data) {
     this.element.html(data[this.objectName]);
-		// Binding back after being clicked
+    this.element.trigger($.Event("ajax:success"), data);
+
+    // Binding back after being clicked
     $(this.activator).bind('click', {editor: this}, this.clickHandler);
   },
 
@@ -183,16 +189,25 @@ BestInPlaceEditor.prototype = {
 
     // Display all error messages from server side validation
     $.each(jQuery.parseJSON(request.responseText), function(index, value) {
+      if( typeof(value) == "object") {value = index + " " + value.toString(); }
       var container = $("<span class='flash-error'></span>").html(value);
       container.purr();
     });
 
-		// Binding back after being clicked
+    // Binding back after being clicked
     $(this.activator).bind('click', {editor: this}, this.clickHandler);
   },
 
   clickHandler : function(event) {
     event.data.editor.activate();
+  },
+
+  setHtmlAttributes : function() {
+    var formField = this.element.find(this.formType);
+    var attrs = jQuery.parseJSON(this.html_attrs);
+    for(var key in attrs){
+      formField.attr(key, attrs[key]);
+    }
   }
 };
 
@@ -201,8 +216,13 @@ BestInPlaceEditor.forms = {
   "input" : {
     activateForm : function() {
       var output = '<form class="form_in_place" action="javascript:void(0)" style="display:inline;">';
-      output += '<input type="text" value="' + this.sanitizeValue(this.oldValue) + '"></form>';
+      output += '<input type="text" name="'+ this.attributeName + '" value="' + this.sanitizeValue(this.oldValue) + '"';
+      if (this.inner_class != null) {
+        output += ' class="' + this.inner_class + '"';
+      }
+      output += '></form>'
       this.element.html(output);
+      this.setHtmlAttributes();
       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);
@@ -239,6 +259,7 @@ BestInPlaceEditor.forms = {
        });
       output += "</select></form>";
       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('keyup', {editor: this}, BestInPlaceEditor.forms.select.keyupHandler);
@@ -263,6 +284,7 @@ BestInPlaceEditor.forms = {
       var newValue = Boolean(this.oldValue != this.values[1]);
       var output = newValue ? this.values[1] : this.values[0];
       this.element.html(output);
+      this.setHtmlAttributes();
       this.update();
     },
 
@@ -282,6 +304,7 @@ BestInPlaceEditor.forms = {
       output += this.sanitizeValue(this.oldValue);
       output += '</textarea></form>';
       this.element.html(output);
+      this.setHtmlAttributes();
 
       // set width and height of textarea
       jQuery(this.element.find("textarea")[0]).css({ 'min-width': width, 'min-height': height });
@@ -324,132 +347,132 @@ jQuery.fn.best_in_place = function() {
 
 
 /**
-*	@name							Elastic
-*	@descripton						Elastic is Jquery plugin that grow and shrink your textareas automaticliy
-*	@version						1.6.5
-*	@requires						Jquery 1.2.6+
+* @name             Elastic
+* @descripton           Elastic is Jquery plugin that grow and shrink your textareas automaticliy
+* @version            1.6.5
+* @requires           Jquery 1.2.6+
 *
-*	@author							Jan Jarfalk
-*	@author-email					jan.jarfalk@unwrongest.com
-*	@author-website					http://www.unwrongest.com
+* @author             Jan Jarfalk
+* @author-email         jan.jarfalk@unwrongest.com
+* @author-website         http://www.unwrongest.com
 *
-*	@licens							MIT License - http://www.opensource.org/licenses/mit-license.php
+* @licens             MIT License - http://www.opensource.org/licenses/mit-license.php
 */
 
 (function(jQuery){
-	jQuery.fn.extend({
-		elastic: function() {
-			//	We will create a div clone of the textarea
-			//	by copying these attributes from the textarea to the div.
-			var mimics = [
-				'paddingTop',
-				'paddingRight',
-				'paddingBottom',
-				'paddingLeft',
-				'fontSize',
-				'lineHeight',
-				'fontFamily',
-				'width',
-				'fontWeight'];
-
-			return this.each( function() {
-
-				// Elastic only works on textareas
-				if ( this.type != 'textarea' ) {
-					return false;
-				}
-
-				var $textarea	=	jQuery(this),
-					$twin		=	jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}),
-					lineHeight	=	parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
-					minheight	=	parseInt($textarea.css('height'),10) || lineHeight*3,
-					maxheight	=	parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
-					goalheight	=	0,
-					i 			=	0;
-
-				// Opera returns max-height of -1 if not set
-				if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
-
-				// Append the twin to the DOM
-				// We are going to meassure the height of this, not the textarea.
-				$twin.appendTo($textarea.parent());
-
-				// Copy the essential styles (mimics) from the textarea to the twin
-				var i = mimics.length;
-				while(i--){
-					$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
-				}
-
-
-				// Sets a given height and overflow state on the textarea
-				function setHeightAndOverflow(height, overflow){
-					curratedHeight = Math.floor(parseInt(height,10));
-					if($textarea.height() != curratedHeight){
-						$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
-
-					}
-				}
-
-
-				// This function will update the height of the textarea if necessary
-				function update() {
-
-					// Get curated content from the textarea.
-					var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
-
-					// Compare curated content with curated twin.
-					var twinContent = $twin.html().replace(/<br>/ig,'<br />');
-
-					if(textareaContent+'&nbsp;' != twinContent){
-
-						// Add an extra white space so new rows are added when you are at the end of a row.
-						$twin.html(textareaContent+'&nbsp;');
-
-						// Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
-						if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
-
-							var goalheight = $twin.height()+lineHeight;
-							if(goalheight >= maxheight) {
-								setHeightAndOverflow(maxheight,'auto');
-							} else if(goalheight <= minheight) {
-								setHeightAndOverflow(minheight,'hidden');
-							} else {
-								setHeightAndOverflow(goalheight,'hidden');
-							}
-
-						}
-
-					}
-
-				}
-
-				// Hide scrollbars
-				$textarea.css({'overflow':'hidden'});
-
-				// Update textarea size on keyup, change, cut and paste
-				$textarea.bind('keyup change cut paste', function(){
-					update();
-				});
-
-				// Compact textarea on blur
-				// Lets animate this....
-				$textarea.bind('blur',function(){
-					if($twin.height() < maxheight){
-						if($twin.height() > minheight) {
-							$textarea.height($twin.height());
-						} else {
-							$textarea.height(minheight);
-						}
-					}
-				});
-
-				// And this line is to catch the browser paste event
-				$textarea.live('input paste',function(e){ setTimeout( update, 250); });
+  jQuery.fn.extend({
+    elastic: function() {
+      //  We will create a div clone of the textarea
+      //  by copying these attributes from the textarea to the div.
+      var mimics = [
+        'paddingTop',
+        'paddingRight',
+        'paddingBottom',
+        'paddingLeft',
+        'fontSize',
+        'lineHeight',
+        'fontFamily',
+        'width',
+        'fontWeight'];
+
+      return this.each( function() {
+
+        // Elastic only works on textareas
+        if ( this.type != 'textarea' ) {
+          return false;
+        }
+
+        var $textarea = jQuery(this),
+          $twin   = jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}),
+          lineHeight  = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
+          minheight = parseInt($textarea.css('height'),10) || lineHeight*3,
+          maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
+          goalheight  = 0,
+          i       = 0;
+
+        // Opera returns max-height of -1 if not set
+        if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
+
+        // Append the twin to the DOM
+        // We are going to meassure the height of this, not the textarea.
+        $twin.appendTo($textarea.parent());
+
+        // Copy the essential styles (mimics) from the textarea to the twin
+        var i = mimics.length;
+        while(i--){
+          $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
+        }
+
+
+        // Sets a given height and overflow state on the textarea
+        function setHeightAndOverflow(height, overflow){
+          curratedHeight = Math.floor(parseInt(height,10));
+          if($textarea.height() != curratedHeight){
+            $textarea.css({'height': curratedHeight + 'px','overflow':overflow});
+
+          }
+        }
+
+
+        // This function will update the height of the textarea if necessary
+        function update() {
+
+          // Get curated content from the textarea.
+          var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
+
+          // Compare curated content with curated twin.
+          var twinContent = $twin.html().replace(/<br>/ig,'<br />');
+
+          if(textareaContent+'&nbsp;' != twinContent){
 
-				// Run update once when elastic is initialized
-				update();
+            // Add an extra white space so new rows are added when you are at the end of a row.
+            $twin.html(textareaContent+'&nbsp;');
+
+            // Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
+            if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
+
+              var goalheight = $twin.height()+lineHeight;
+              if(goalheight >= maxheight) {
+                setHeightAndOverflow(maxheight,'auto');
+              } else if(goalheight <= minheight) {
+                setHeightAndOverflow(minheight,'hidden');
+              } else {
+                setHeightAndOverflow(goalheight,'hidden');
+              }
+
+            }
+
+          }
+
+        }
 
-			});
+        // Hide scrollbars
+        $textarea.css({'overflow':'hidden'});
+
+        // Update textarea size on keyup, change, cut and paste
+        $textarea.bind('keyup change cut paste', function(){
+          update();
+        });
+
+        // Compact textarea on blur
+        // Lets animate this....
+        $textarea.bind('blur',function(){
+          if($twin.height() < maxheight){
+            if($twin.height() > minheight) {
+              $textarea.height($twin.height());
+            } else {
+              $textarea.height(minheight);
+            }
+          }
+        });
+
+        // And this line is to catch the browser paste event
+        $textarea.live('input paste',function(e){ setTimeout( update, 250); });
+
+        // Run update once when elastic is initialized
+        update();
+
+      });
 
         }
     });