colonymech / docs / www / colonyscout / internal / js / jquery.editableText.js @ f59acf11
History | View | Annotate | Download (2.72 KB)
1 | f59acf11 | Dan Shope | /**
|
---|---|---|---|
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 | })(); |