Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Edit-In-Place: Added functionality for textarea inline-editors.

  • Loading branch information...
commit 80670bece3780c7e75354c8ebcdb1571469c4a85 1 parent b7c4a56
dcparker authored
Showing with 43 additions and 19 deletions.
  1. +43 −19 edit_in_place/jquery.edit_in_place.js
View
62 edit_in_place/jquery.edit_in_place.js
@@ -4,7 +4,10 @@
on page load: for example, call it from the onclick of a link or
dbclick of a paragraph:
$('#editable-thing').bind('click', function(){
- $(this).edit_in_place(function(editable_thing, value){alert("You typed "+value)});
+ $(this).edit_in_place(function(value){
+ // 'this' is the editable element
+ alert("You typed "+value);
+ });
});
How it works:
@@ -14,26 +17,47 @@
!! NOTE !! It is up to the callback to change the original object if necessary.
*/
-$.fn.edit_in_place = function(callback){
+$.fn.edit_in_place = function(init_value_or_options, callback){
+ var init_value=init_value_or_options, options={};
+ if(init_value_or_options.constructor!=String){
+ options = init_value_or_options;
+ init_value = options.init_value;
+ }
var $element = this;
- if($element.length>1){console.error("Call $().edit_in_place only on a singular jquery object.");return null;}
- var $edit = $('<input type="text" class="edit_in_place" />');
- $edit.css({'height' : $element.height()-2, 'width' : $element.width()-2}); // don't know why 2, but it seems to work. Tweak this css stuff if you want, or add a class instead and style that.
+ if(!options.input_type) options.input_type = $element.attr('data-input-type') || 'text';
+ if($element.length>1){console.error("Call $().edit_in_place only on a singular jquery object.");}
+ var $edit = (options.input_type == 'textarea' ? $('<span class="edit_in_place"><textarea id="inline_editing" /><button>save</button> <button>cancel</button></span>') : $('<input id="inline_editing" type="text" class="edit_in_place" />'));
+ var font_size = parseFloat($element.css('font-size').match(/([\d\.]+)/)[1]);
+ var font_weight = $element.css('font-weight');
+ var font_style = $element.css('font-style');
+ var font_family = $element.css('font_family');
+ var font_unit = $element.css('font-size').match(/\d+(.+)/)[1];
+ $edit.css({'height' : $element.height()-3, 'width' : $element.width()+1, 'font-size' : ''+((font_size-2)*3/4+2)+font_unit, 'font-weight' : font_weight, 'font-style' : font_style, 'font-family' : font_family});
$element.hide();
$element.after($edit);
- $edit.focus();
- $edit.bind('blur', function(){ // on blur, forget edits, forget input box, revert everything.
+ var $field = $('#inline_editing');
+ if(init_value)$field.val($element.text());
+ $('#inline_editing').focus();
+ var save = function(){
+ $edit.hide();
+ $element.show();
+ if($field.val()!=='') callback.apply($element, [$field.val()]);
+ $edit.remove();
+ };
+ var cancel = function(){
$edit.remove();
$element.show();
- });
- $edit.keydown(function(e){
- if(e.which===27)$edit.blur(); // Esc: just blur - see above
- if(e.which===13 || e.which===9){ // Enter or Tab: reverts stuff and runs your callback with the value.
- e.preventDefault();
- var value = $edit.val();
- $edit.remove();
- $element.show();
- if(value!=='') callback.apply($element, [value]);
- }
- });
-};
+ };
+ if(options.input_type == 'textarea'){
+ $edit.find('button:first').bind('click', save);
+ $edit.find('button:last').bind('click', cancel);
+ }else{
+ $field.bind('blur', cancel).keydown(function(e){ // on blur, forget edits and reset.
+ if(e.which===27)$edit.blur(); // blur on Esc: see above
+ if(e.which===13 || e.which===9){ // Enter or Tab: run the callback with the value
+ e.preventDefault();
+ save();
+ }
+ });
+ }
+};
Please sign in to comment.
Something went wrong with that request. Please try again.