colonymech / docs / www / colonyscout / internal / js / jquery.editableText.js @ f59acf11
History | View | Annotate | Download (2.72 KB)
| 1 |
/**
|
|---|---|
| 2 |
* editableText plugin that uses contentEditable property (FF2 is not supported)
|
| 3 |
* Project page - http://github.com/valums/editableText
|
| 4 |
* Copyright (c) 2009 Andris Valums, http://valums.com
|
| 5 |
* Licensed under the MIT license (http://valums.com/mit-license/)
|
| 6 |
*/
|
| 7 |
(function(){
|
| 8 |
/**
|
| 9 |
* The dollar sign could be overwritten globally,
|
| 10 |
* but jQuery should always stay accesible
|
| 11 |
*/
|
| 12 |
var $ = jQuery; |
| 13 |
/**
|
| 14 |
* Extending jQuery namespace, we
|
| 15 |
* could add public methods here
|
| 16 |
*/
|
| 17 |
$.editableText = {};
|
| 18 |
$.editableText.defaults = {
|
| 19 |
/**
|
| 20 |
* Pass true to enable line breaks.
|
| 21 |
* Useful with divs that contain paragraphs.
|
| 22 |
*/
|
| 23 |
newlinesEnabled : false, |
| 24 |
/**
|
| 25 |
* Event that is triggered when editable text is changed
|
| 26 |
*/
|
| 27 |
changeEvent : 'change' |
| 28 |
}; |
| 29 |
/**
|
| 30 |
* Usage $('selector).editableText(optionArray);
|
| 31 |
* See $.editableText.defaults for valid options
|
| 32 |
*/
|
| 33 |
$.fn.editableText = function(options){ |
| 34 |
var options = $.extend({}, $.editableText.defaults, options); |
| 35 |
|
| 36 |
return this.each(function(){ |
| 37 |
// Add jQuery methods to the element
|
| 38 |
var editable = $(this); |
| 39 |
|
| 40 |
/**
|
| 41 |
* Save value to restore if user presses cancel
|
| 42 |
*/
|
| 43 |
var prevValue = editable.html();
|
| 44 |
|
| 45 |
// Create edit/save buttons
|
| 46 |
var buttons = $( |
| 47 |
"<div class='editableToolbar'>" +
|
| 48 |
"<a href='#' class='edit'></a>" +
|
| 49 |
"<a href='#' class='save'></a>" +
|
| 50 |
"<a href='#' class='cancel'></a>" +
|
| 51 |
"</div>")
|
| 52 |
.insertBefore(editable); |
| 53 |
|
| 54 |
// Save references and attach events
|
| 55 |
var editEl = buttons.find('.edit').click(function() { |
| 56 |
startEditing(); |
| 57 |
return false; |
| 58 |
}); |
| 59 |
|
| 60 |
buttons.find('.save').click(function(){ |
| 61 |
stopEditing(); |
| 62 |
editable.trigger(options.changeEvent); |
| 63 |
return false; |
| 64 |
}); |
| 65 |
|
| 66 |
buttons.find('.cancel').click(function(){ |
| 67 |
stopEditing(); |
| 68 |
editable.html(prevValue); |
| 69 |
return false; |
| 70 |
}); |
| 71 |
|
| 72 |
// Display only edit button
|
| 73 |
buttons.children().css('display', 'none'); |
| 74 |
editEl.show(); |
| 75 |
|
| 76 |
if (!options.newlinesEnabled){
|
| 77 |
// Prevents user from adding newlines to headers, links, etc.
|
| 78 |
editable.keypress(function(event){
|
| 79 |
// event is cancelled if enter is pressed
|
| 80 |
return event.which != 13; |
| 81 |
}); |
| 82 |
} |
| 83 |
|
| 84 |
/**
|
| 85 |
* Makes element editable
|
| 86 |
*/
|
| 87 |
function startEditing(){ |
| 88 |
buttons.children().show(); |
| 89 |
editEl.hide(); |
| 90 |
|
| 91 |
editable.attr('contentEditable', true); |
| 92 |
} |
| 93 |
/**
|
| 94 |
* Makes element non-editable
|
| 95 |
*/
|
| 96 |
function stopEditing(){ |
| 97 |
buttons.children().hide(); |
| 98 |
editEl.show(); |
| 99 |
editable.attr('contentEditable', false); |
| 100 |
} |
| 101 |
}); |
| 102 |
} |
| 103 |
})(); |