best_in_place 0.1.9 → 0.2.0

data/test_app/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,7 @@ BestInPlaceEditor.prototype = {
 
   loadSuccessCallback : function(data) {
     this.element.html(data[this.objectName]);
-		// Binding back after being clicked
+    // Binding back after being clicked
     $(this.activator).bind('click', {editor: this}, this.clickHandler);
   },
 
@@ -183,16 +187,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 +214,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 +257,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 +282,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 +302,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 +345,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});
+
+          }
+        }
 
-				// Run update once when elastic is initialized
-				update();
 
-			});
+        // 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); });
+
+        // Run update once when elastic is initialized
+        update();
+
+      });
 
         }
     });

data/test_app/public/stylesheets/style.css

@@ -52,14 +52,14 @@ textarea {
 /* Missatges Flotants */
 
 .purr {
-	position: fixed;
-	width: 324px;
-	top: 20px;
-	right: 15px;
-	padding: 20px;
-	background-color: #000000;
-	color: #FFFFFF;
-	border: 2px solid #AAA;
+  position: fixed;
+  width: 324px;
+  top: 20px;
+  right: 15px;
+  padding: 20px;
+  background-color: #000000;
+  color: #FFFFFF;
+  border: 2px solid #AAA;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
@@ -67,13 +67,13 @@ textarea {
   -khtml-border-radius: 10px;
   border-radius: 10px;
 }
-.purr:hover .close	{
-	position: absolute;
-	top: 5px;
-	right: 3px;
-	display: block;
-	width: 25px;
-	height: 25px;
-	text-indent: -9999px;
-	background: url("/images/close-button.gif") no-repeat;
+.purr:hover .close  {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+  display: block;
+  width: 25px;
+  height: 25px;
+  text-indent: -9999px;
+  background: url("/images/close-button.gif") no-repeat;
 }

metadata

@@ -1,62 +1,89 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: best_in_place
-version: !ruby/object:Gem::Version 
-  hash: 9
-  prerelease: false
-  segments: 
-  - 0
-  - 1
-  - 9
-  version: 0.1.9
+version: !ruby/object:Gem::Version
+  version: 0.2.0
+  prerelease: 
 platform: ruby
-authors: 
+authors:
 - Bernat Farrero
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2011-02-12 00:00:00 +01:00
-default_executable: 
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2011-10-26 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: rails
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
+  requirement: &84765280 !ruby/object:Gem::Requirement
     none: false
-    requirements: 
+    requirements:
     - - ~>
-      - !ruby/object:Gem::Version 
-        hash: 7
-        segments: 
-        - 3
-        - 0
-        - 0
+      - !ruby/object:Gem::Version
         version: 3.0.0
   type: :runtime
-  version_requirements: *id001
-description: BestInPlace is a jQuery script and a Rails 3 helper that provide the method best_in_place to display any object field easily editable for the user by just clicking on it. It supports input data, text data, boolean data and custom dropdown data. It works with RESTful controllers.
-email: 
+  prerelease: false
+  version_requirements: *84765280
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: &84764870 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 2.7.0
+  type: :development
+  prerelease: false
+  version_requirements: *84764870
+- !ruby/object:Gem::Dependency
+  name: nokogiri
+  requirement: &84764560 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.5.0
+  type: :development
+  prerelease: false
+  version_requirements: *84764560
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: &84763970 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.1
+  type: :development
+  prerelease: false
+  version_requirements: *84763970
+description: BestInPlace is a jQuery script and a Rails 3 helper that provide the
+  method best_in_place to display any object field easily editable for the user by
+  just clicking on it. It supports input data, text data, boolean data and custom
+  dropdown data. It works with RESTful controllers.
+email:
 - bernat@itnig.net
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - .gitignore
+- .rspec
+- .travis.yml
 - Gemfile
-- Gemfile.lock
 - README.md
 - Rakefile
 - best_in_place.gemspec
 - lib/best_in_place.rb
+- lib/best_in_place/helper.rb
+- lib/best_in_place/test_helpers.rb
 - lib/best_in_place/version.rb
 - lib/generators/best_in_place/setup_generator.rb
 - public/javascripts/best_in_place.js
 - public/javascripts/jquery-1.4.4.js
 - public/javascripts/jquery.purr.js
-- test_app/.gitignore
+- spec/helpers/best_in_place_spec.rb
+- spec/integration/double_init_spec.rb
+- spec/integration/js_spec.rb
+- spec/spec_helper.rb
 - test_app/Gemfile
 - test_app/Gemfile.lock
 - test_app/README
@@ -68,6 +95,7 @@ files:
 - test_app/app/models/user.rb
 - test_app/app/views/layouts/application.html.erb
 - test_app/app/views/users/_form.html.erb
+- test_app/app/views/users/double_init.html.erb
 - test_app/app/views/users/index.html.erb
 - test_app/app/views/users/new.html.erb
 - test_app/app/views/users/show.html.erb
@@ -105,7 +133,6 @@ files:
 - test_app/public/javascripts/best_in_place.js
 - test_app/public/javascripts/jquery-1.4.4.min.js
 - test_app/public/javascripts/jquery.purr.js
-- test_app/public/javascripts/jquery.rest_in_place.js
 - test_app/public/javascripts/rails.js
 - test_app/public/robots.txt
 - test_app/public/stylesheets/.gitkeep
@@ -119,39 +146,35 @@ files:
 - test_app/test/unit/helpers/users_helper_test.rb
 - test_app/test/unit/user_test.rb
 - test_app/vendor/plugins/.gitkeep
-has_rdoc: true
 homepage: http://github.com/bernat/best_in_place
 licenses: []
-
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
+required_ruby_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
       - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
+      hash: 982211869
+required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
       - 0
-      version: "0"
+      hash: 982211869
 requirements: []
-
 rubyforge_project: best_in_place
-rubygems_version: 1.3.7
+rubygems_version: 1.8.10
 signing_key: 
 specification_version: 3
-summary: It makes any field in place editable by clicking on it, it works for inputs, textareas, select dropdowns and checkboxes
+summary: It makes any field in place editable by clicking on it, it works for inputs,
+  textareas, select dropdowns and checkboxes
 test_files: []
-