Browse files

Leaving the user the choice to strip html of inputs or not, and savin…

…g one request in case no modifications are made
  • Loading branch information...
1 parent cbf4799 commit 5bd6b1062e998ca49f9348d0e532b2fc9da48448 @bernat bernat committed Jan 26, 2011
View
19 lib/best_in_place.rb
@@ -21,15 +21,16 @@ def best_in_place(object, field, opts = {})
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].to_s}'" unless opts[:activator].blank?
- out += " data-type='#{opts[:type].to_s}'>"
- out += value.to_s
- out += "</span>"
+ 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-sanitize='#{!!opts[:sanitize]}'" unless opts[:sanitize].nil?
+ out << " data-type='#{opts[:type].to_s}'>"
+ out << value.to_s
+ out << "</span>"
raw(out)
end
end
View
2 lib/best_in_place/version.rb
@@ -1,3 +1,3 @@
module BestInPlace
- VERSION = "0.1.5"
+ VERSION = "0.1.6"
end
View
45 public/javascripts/best_in_place.js
@@ -43,6 +43,12 @@ BestInPlaceEditor.prototype = {
update : function() {
var editor = this
+ if (this.formType in {"input":1, "textarea":1} && this.getValue() == this.oldValue)
+ { // Avoid request if no change is made
+ editor.element.html(this.getValue())
+ $(this.activator).bind('click', {editor: this}, this.clickHandler)
+ return true
+ }
editor.ajax({
"type" : "post",
"dataType" : "text",
@@ -74,6 +80,7 @@ BestInPlaceEditor.prototype = {
self.objectName = self.objectName || jQuery(this).attr("data-object")
self.attributeName = self.attributeName || jQuery(this).attr("data-attribute")
})
+
// Try Rails-id based if parents did not explicitly supply something
self.element.parents().each(function(){
var res
@@ -83,12 +90,16 @@ BestInPlaceEditor.prototype = {
})
// Load own attributes (overrides all others)
- self.url = self.element.attr("data-url") || self.url || document.location.pathname
- 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
+ self.url = self.element.attr("data-url") || self.url || document.location.pathname
+ 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.element.attr("data-sanitize")) self.sanitize = true
+ else self.sanitize = (self.element.attr("data-sanitize") == "true")
+
if ((self.formType == "select" || self.formType == "checkbox") && self.collection != null)
{
@@ -106,10 +117,14 @@ BestInPlaceEditor.prototype = {
},
// Trim and Strips HTML from text
- sanitize : function(s) {
- var tmp = document.createElement("DIV")
- tmp.innerHTML = s
- return jQuery.trim(tmp.textContent||tmp.innerText)
+ sanitizeValue : function(s) {
+ if (this.sanitize)
+ {
+ var tmp = document.createElement("DIV")
+ tmp.innerHTML = s
+ s = tmp.textContent || tmp.innerText
+ }
+ return jQuery.trim(s)
},
/* Generate the data sent in the POST request */
@@ -162,7 +177,7 @@ BestInPlaceEditor.prototype = {
BestInPlaceEditor.forms = {
"input" : {
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>'
+ var form = '<form class="form_in_place" action="javascript:void(0)" style="display:inline;"><input type="text" value="' + this.sanitizeValue(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)
@@ -171,7 +186,7 @@ BestInPlaceEditor.forms = {
},
getValue : function() {
- return this.sanitize(this.element.find("input").val())
+ return this.sanitizeValue(this.element.find("input").val())
},
inputBlurHandler : function(event) {
@@ -202,7 +217,7 @@ BestInPlaceEditor.forms = {
},
getValue : function() {
- return this.sanitize(this.element.find("select").val())
+ return this.sanitizeValue(this.element.find("select").val())
},
blurHandler : function(event) {
@@ -225,14 +240,14 @@ BestInPlaceEditor.forms = {
"textarea" : {
activateForm : function() {
- this.element.html('<form action="javascript:void(0)" style="display:inline;"><textarea>' + this.sanitize(this.oldValue) + '</textarea></form>')
+ this.element.html('<form action="javascript:void(0)" style="display:inline;"><textarea>' + this.sanitizeValue(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() {
- return this.sanitize(this.element.find("textarea").val())
+ return this.sanitizeValue(this.element.find("textarea").val())
},
blurHandler : function(event) {
View
3 test_app/app/views/users/show.html.erb
@@ -38,7 +38,6 @@
<td>Country</td>
<td>
<%= best_in_place @user, :country, {:type => :select, :collection => @countries} %>
- <!-- <%= @countries.inspect %> -->
</td>
</tr>
<tr>
@@ -50,7 +49,7 @@
<tr>
<td>User description</td>
<td>
- <%= best_in_place @user, :description, :type => :textarea %>
+ <%= best_in_place @user, :description, :type => :textarea, :sanitize => false %>
</td>
</table>
<br />
View
45 test_app/public/javascripts/best_in_place.js
@@ -43,6 +43,12 @@ BestInPlaceEditor.prototype = {
update : function() {
var editor = this
+ if (this.formType in {"input":1, "textarea":1} && this.getValue() == this.oldValue)
+ { // Avoid request if no change is made
+ editor.element.html(this.getValue())
+ $(this.activator).bind('click', {editor: this}, this.clickHandler)
+ return true
+ }
editor.ajax({
"type" : "post",
"dataType" : "text",
@@ -74,6 +80,7 @@ BestInPlaceEditor.prototype = {
self.objectName = self.objectName || jQuery(this).attr("data-object")
self.attributeName = self.attributeName || jQuery(this).attr("data-attribute")
})
+
// Try Rails-id based if parents did not explicitly supply something
self.element.parents().each(function(){
var res
@@ -83,12 +90,16 @@ BestInPlaceEditor.prototype = {
})
// Load own attributes (overrides all others)
- self.url = self.element.attr("data-url") || self.url || document.location.pathname
- 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
+ self.url = self.element.attr("data-url") || self.url || document.location.pathname
+ 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.element.attr("data-sanitize")) self.sanitize = true
+ else self.sanitize = (self.element.attr("data-sanitize") == "true")
+
if ((self.formType == "select" || self.formType == "checkbox") && self.collection != null)
{
@@ -106,10 +117,14 @@ BestInPlaceEditor.prototype = {
},
// Trim and Strips HTML from text
- sanitize : function(s) {
- var tmp = document.createElement("DIV")
- tmp.innerHTML = s
- return jQuery.trim(tmp.textContent||tmp.innerText)
+ sanitizeValue : function(s) {
+ if (this.sanitize)
+ {
+ var tmp = document.createElement("DIV")
+ tmp.innerHTML = s
+ s = tmp.textContent || tmp.innerText
+ }
+ return jQuery.trim(s)
},
/* Generate the data sent in the POST request */
@@ -162,7 +177,7 @@ BestInPlaceEditor.prototype = {
BestInPlaceEditor.forms = {
"input" : {
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>'
+ var form = '<form class="form_in_place" action="javascript:void(0)" style="display:inline;"><input type="text" value="' + this.sanitizeValue(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)
@@ -171,7 +186,7 @@ BestInPlaceEditor.forms = {
},
getValue : function() {
- return this.sanitize(this.element.find("input").val())
+ return this.sanitizeValue(this.element.find("input").val())
},
inputBlurHandler : function(event) {
@@ -202,7 +217,7 @@ BestInPlaceEditor.forms = {
},
getValue : function() {
- return this.sanitize(this.element.find("select").val())
+ return this.sanitizeValue(this.element.find("select").val())
},
blurHandler : function(event) {
@@ -225,14 +240,14 @@ BestInPlaceEditor.forms = {
"textarea" : {
activateForm : function() {
- this.element.html('<form action="javascript:void(0)" style="display:inline;"><textarea>' + this.sanitize(this.oldValue) + '</textarea></form>')
+ this.element.html('<form action="javascript:void(0)" style="display:inline;"><textarea>' + this.sanitizeValue(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() {
- return this.sanitize(this.element.find("textarea").val())
+ return this.sanitizeValue(this.element.find("textarea").val())
},
blurHandler : function(event) {

0 comments on commit 5bd6b10

Please sign in to comment.