406b3dbc0e63be793d7ffa6e52fd1fab076da78e
[infodrom.org/service.infodrom.org] / src / jquery.editable.js
1 /*
2 * jQuery plugin that makes elements editable
3 *
4 * @author Victor Jonsson (http://victorjonsson.se/)
5 * @website https://github.com/victorjonsson/jquery-editable/
6 * @license GPLv2 http://www.gnu.org/licenses/gpl-2.0.html
7 * @version 1.3.6.dev
8 * @donations http://victorjonsson.se/donations/
9 */
10 (function($, window) {
11
12     'use strict';
13
14     var $win = $(window), // Reference to window
15
16     // Reference to textarea
17     $textArea = false,
18
19     // Reference to currently edit element
20     $currentlyEdited = false,
21
22     // Some constants
23     EVENT_ATTR = 'data-edit-event',
24     IS_EDITING_ATTR = 'data-is-editing',
25     EMPTY_ATTR = 'data-is-empty',
26     DBL_TAP_EVENT = 'dbltap',
27     SUPPORTS_TOUCH = 'ontouchend' in window,
28     TINYMCE_INSTALLED = 'tinyMCE' in window && typeof window.tinyMCE.init == 'function',
29
30     // reference to old is function
31     oldjQueryIs = $.fn.is,
32
33     /*
34      * Function responsible of triggering double tap event
35      */
36     lastTap = 0,
37     tapper = function() {
38         var now = new Date().getTime();
39         if( (now-lastTap) < 250 ) {
40             $(this).trigger(DBL_TAP_EVENT);
41         }
42         lastTap = now;
43     },
44
45     /**
46      * Event listener that largens font size
47      */
48     keyHandler = function(e) {
49         if( e.keyCode == 13 && e.data.closeOnEnter ) {
50             $currentlyEdited.editable('close');
51         }
52         else if( e.keyCode == 27 ) {
53             $textArea.val($currentlyEdited.attr('orig-text'));
54             $currentlyEdited.editable('close');
55         }
56         else if( e.data.toggleFontSize && (e.metaKey && (e.keyCode == 38 || e.keyCode == 40)) ) {
57             var fontSize = parseInt($textArea.css('font-size'), 10);
58             fontSize += e.keyCode == 40 ? -1 : 1;
59             $textArea.css('font-size', fontSize+'px');
60             return false;
61         }
62     },
63
64     /**
65      * Adjusts the height of the textarea to remove scroll
66      * @todo This way of doing it does not make the textarea smaller when the number of text lines gets smaller
67      */
68     adjustTextAreaHeight = function() {
69         if( $textArea[0].scrollHeight !== parseInt($textArea.attr('data-scroll'), 10) ) {
70             $textArea.css('height', $textArea[0].scrollHeight +'px');
71             $textArea.attr('data-scroll', $textArea[0].scrollHeight);
72         }
73     },
74
75     /**
76      * @param {jQuery} $el
77      * @param {String} newText
78      */
79     resetElement = function($el, newText, emptyMessage) {
80         $el.removeAttr(IS_EDITING_ATTR);
81
82         if (newText.length == 0 && emptyMessage) {
83             $el.html(emptyMessage);
84             $el.attr(EMPTY_ATTR, 'empty');
85         } else {
86             $el.html( newText );
87             $el.removeAttr(EMPTY_ATTR);
88         }
89         $textArea.remove();
90     },
91
92
93     /**
94      * Function creating editor
95      */
96     elementEditor = function($el, opts) {
97
98         if( $el.is(':editing') )
99             return;
100
101         $currentlyEdited = $el;
102         $el.attr(IS_EDITING_ATTR, '1');
103
104         if ($el.is(':empty')) {
105             $el.removeAttr(EMPTY_ATTR);
106             $el.html('');
107         }
108
109         var defaultText = $.trim( $el.html() ),
110             defaultFontSize = $el.css('font-size'),
111             elementHeight = $el.height(),
112             textareaStyle = 'width: 96%; padding:0; margin:0; border:0; background:none;'+
113                             'font-family: '+$el.css('font-family')+'; font-size: '+$el.css('font-size')+';'+
114                             'font-weight: '+$el.css('font-weight')+';';
115
116         $el.attr('orig-text', defaultText);
117         if( opts.lineBreaks ) {
118             defaultText = defaultText.replace(/<br( |)(|\/)>/g, '\n');
119         }
120
121         $textArea = $('<textarea></textarea>');
122         $el.text('');
123
124         if( navigator.userAgent.match(/webkit/i) !== null ) {
125             textareaStyle = document.defaultView.getComputedStyle($el.get(0), "").cssText;
126         }
127
128         // The editor should always be static
129         textareaStyle += 'position: static';
130
131         /*
132           TINYMCE EDITOR
133          */
134         if( opts.tinyMCE !== false ) {
135             var id = 'editable-area-'+(new Date().getTime());
136             $textArea
137                 .val(defaultText)
138                 .appendTo($el)
139                 .attr('id', id);
140
141             if( typeof opts.tinyMCE != 'object' )
142                 opts.tinyMCE = {};
143
144             opts.tinyMCE.mode = 'exact';
145             opts.tinyMCE.elements = id;
146             opts.tinyMCE.width = $el.innerWidth();
147             opts.tinyMCE.height = $el.height() + 200;
148             opts.tinyMCE.theme_advanced_resize_vertical = true;
149
150             opts.tinyMCE.setup = function (ed) {
151                 ed.onInit.add(function(editor, evt) {
152                     var editorWindow = editor.getWin();
153                     var hasPressedKey = false;
154                     var editorBlur = function() {
155
156                         var newText = $(editor.getDoc()).find('body').html();
157                         if( $(newText).get(0).nodeName == $el.get(0).nodeName ) {
158                             newText = $(newText).html();
159                         }
160
161                         // Update element and remove editor
162                         resetElement($el, newText, opts.emptyMessage);
163                         editor.remove();
164                         $textArea = false;
165                         $win.unbind('click', editorBlur);
166                         $currentlyEdited = false;
167
168                         // Run callback
169                         if( typeof opts.callback == 'function' ) {
170                             opts.callback({
171                                 content : newText == defaultText || !hasPressedKey ? false : newText,
172                                 fontSize : false,
173                                 $el : $el
174                             });
175                         }
176                     };
177
178                     // Blur editor when user clicks outside the editor
179                     setTimeout(function() {
180                         $win.bind('click', editorBlur);
181                     }, 500);
182
183                     // Create a dummy textarea that will called upon when
184                     // programmatically interacting with the editor
185                     $textArea = $('<textarea></textarea>');
186                     $textArea.bind('blur', editorBlur);
187
188                     editorWindow.onkeydown = function() {
189                         hasPressedKey = true;
190                     };
191
192                     editorWindow.focus();
193                 });
194             };
195
196             tinyMCE.init(opts.tinyMCE);
197         }
198
199         /*
200          TEXTAREA EDITOR
201          */
202         else {
203
204             if( opts.toggleFontSize || opts.closeOnEnter ) {
205                 $win.bind('keydown', opts, keyHandler);
206             }
207             $win.bind('keyup', adjustTextAreaHeight);
208
209             $textArea
210                 .val(defaultText)
211                 .blur(function() {
212                     
213                     $currentlyEdited = false;
214
215                     // Get new text and font size
216                     var newText = $.trim( $textArea.val() ),
217                         newFontSize = $textArea.css('font-size');
218                     if( opts.lineBreaks ) {
219                         newText = newText.replace(new RegExp('\n','g'), '<br />');
220                     }
221
222                     // Update element
223                     resetElement($el, newText, opts.emptyMessage);
224                     if( newFontSize != defaultFontSize ) {
225                         $el.css('font-size', newFontSize);
226                     }
227
228                     // remove textarea and size toggles
229                     $win.unbind('keydown', keyHandler);
230                     $win.unbind('keyup', adjustTextAreaHeight);
231
232                     // Run callback
233                     if( typeof opts.callback == 'function' ) {
234                         opts.callback({
235                             content : newText == defaultText ? false : newText,
236                             fontSize : newFontSize == defaultFontSize ? false : newFontSize,
237                             $el : $el
238                         });
239                     }
240                 })
241                 .attr('style', textareaStyle)
242                 .appendTo($el)
243                 .css({
244                     margin: 0,
245                     padding: 0,
246                     height : elementHeight +'px',
247                     overflow : 'hidden'
248                 })
249                 .css(opts.editorStyle)
250                 .focus()
251                 .get(0).select();
252
253             adjustTextAreaHeight();
254
255         }
256
257         $el.trigger('edit', [$textArea]);
258     },
259
260     /**
261      * Event listener
262      */
263     editEvent = function(event) {
264         
265         if( $currentlyEdited !== false && !$currentlyEdited.children("textarea").is(clickedElement)) {
266             // Not closing the currently open editor before opening a new
267             // editor makes things go crazy
268             $currentlyEdited.editable('close');
269             elementEditor($(this), event.data);
270         }
271         else {
272             elementEditor($(this), event.data);
273         }
274         return false;
275     };
276
277     /**
278      * Jquery plugin that makes elments editable
279      * @param {Object|String} [opts] Either callback function or the string 'destroy' if wanting to remove the editor event
280      * @return {jQuery|Boolean}
281      */
282     $.fn.editable = function(opts) {
283
284         if(typeof opts == 'string') {
285
286             if( this.is(':editable') ) {
287
288                 switch (opts) {
289                     case 'open':
290                         if( !this.is(':editing') ) {
291                             this.trigger(this.attr(EVENT_ATTR));
292                         }
293                         break;
294                     case 'close':
295                         if( this.is(':editing') ) {
296                             $textArea.trigger('blur');
297                         }
298                         break;
299                     case 'destroy':
300                         if( this.is(':editing') ) {
301                             $textArea.trigger('blur');
302                         }
303                         this.unbind(this.attr(EVENT_ATTR));
304                         this.removeAttr(EVENT_ATTR);
305                         break;
306                     default:
307                         console.warn('Unknown command "'+opts+'" for jquery.editable');
308                 }
309
310             } else {
311                 console.error('Calling .editable() on an element that is not editable, call .editable() first');
312             }
313         }
314         else {
315
316             if( this.is(':editable') ) {
317                 console.warn('Making an already editable element editable, call .editable("destroy") first');
318                 this.editable('destroy');
319             }
320
321             opts = $.extend({
322                 event : 'dblclick',
323                 touch : true,
324                 lineBreaks : true,
325                 toggleFontSize : true,
326                 closeOnEnter : false,
327                 emptyMessage : false,
328                 tinyMCE : false,
329                 editorStyle : {}
330             }, opts);
331
332             if( opts.tinyMCE !== false && !TINYMCE_INSTALLED ) {
333                 console.warn('Trying to use tinyMCE as editor but id does not seem to be installed');
334                 opts.tinyMCE = false;
335             }
336
337             if( SUPPORTS_TOUCH && opts.touch ) {
338                 opts.event = DBL_TAP_EVENT;
339                 this.unbind('touchend', tapper);
340                 this.bind('touchend', tapper);
341             }
342             else {
343                 opts.event += '.textEditor';
344             }
345
346             this.bind(opts.event, opts, editEvent);
347             this.attr(EVENT_ATTR, opts.event);
348
349             // If it is empty to start with, apply the empty message
350             if (this.html().length == 0 && opts.emptyMessage) {
351                 this.html(opts.emptyMessage);
352                 this.attr(EMPTY_ATTR, 'empty');
353             } else {
354                 this.removeAttr(EMPTY_ATTR);
355             }
356         }
357
358         return this;
359     };
360
361     /**
362      * Add :editable :editing to $.is()
363      * @param {Object} statement
364      * @return {*}
365      */
366     $.fn.is = function(statement) {
367         if( typeof statement == 'string' && statement.indexOf(':') === 0) {
368             if( statement == ':editable' ) {
369                 return this.attr(EVENT_ATTR) !== undefined;
370             } else if( statement == ':editing' ) {
371                 return this.attr(IS_EDITING_ATTR) !== undefined;
372             } else if( statement == ':empty' ) {
373                 return this.attr(EMPTY_ATTR) !== undefined;
374             }
375         }
376         return oldjQueryIs.apply(this, arguments);
377     };
378     
379     // The latest element clicked
380     var clickedElement;
381     $(document).mousedown(function(e) {
382         clickedElement = $(e.target);
383     });
384
385 })(jQuery, window);