Dotclear

source: admin/js/jsToolBar/jsToolBar.js @ 0:54703be25dd6

Revision 0:54703be25dd6, 14.9 KB checked in by Dsls <dsls@…>, 14 years ago (diff)

2.3 branch (trunk) first checkin
Line 
1/* ***** BEGIN LICENSE BLOCK *****
2 * This file is part of DotClear.
3 * Copyright (c) 2005 Nicolas Martin & Olivier Meunier and contributors. All
4 * rights reserved.
5 *
6 * DotClear is free software; you can redistribute it and/or modify
7 * it under the terms of the GNU General Public License as published by
8 * the Free Software Foundation; either version 2 of the License, or
9 * (at your option) any later version.
10 *
11 * DotClear is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14 * GNU General Public License for more details.
15 *
16 * You should have received a copy of the GNU General Public License
17 * along with DotClear; if not, write to the Free Software
18 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
19 *
20 * ***** END LICENSE BLOCK *****
21*/
22
23function jsToolBar(textarea) {
24     if (!document.createElement) { return; }
25     
26     if (!textarea) { return; }
27     
28     if ((typeof(document["selection"]) == "undefined")
29     && (typeof(textarea["setSelectionRange"]) == "undefined")) {
30          return;
31     }
32     
33     this.textarea = textarea;
34     
35     this.editor = document.createElement('div');
36     this.editor.className = 'jstEditor';
37     
38     this.textarea.parentNode.insertBefore(this.editor,this.textarea);
39     this.editor.appendChild(this.textarea);
40     
41     this.toolbar = document.createElement("div");
42     this.toolbar.className = 'jstElements';
43     this.editor.parentNode.insertBefore(this.toolbar,this.editor);
44     
45     // Dragable resizing (only for gecko)
46     if (this.editor.addEventListener)
47     {
48          this.handle = document.createElement('div');
49          this.handle.className = 'jstHandle';
50          var dragStart = this.resizeDragStart;
51          var This = this;
52          this.handle.addEventListener('mousedown',function(event) { dragStart.call(This,event); },false);
53          // fix memory leak in Firefox (bug #241518)
54          window.addEventListener('unload',function() {
55                    var del = This.handle.parentNode.removeChild(This.handle);
56                    delete(This.handle);
57          },false);
58         
59          this.editor.parentNode.insertBefore(this.handle,this.editor.nextSibling);
60     }
61     
62     this.context = null;
63     this.toolNodes = {}; // lorsque la toolbar est dessinée , cet objet est garni
64                         // de raccourcis vers les éléments DOM correspondants aux outils.
65};
66
67function jsButton(title, fn, scope, className) {
68     this.title = title || null;
69     this.fn = fn || function(){};
70     this.scope = scope || null;
71     this.className = className || null;
72};
73jsButton.prototype.draw = function() {
74     if (!this.scope) return null;
75     
76     var button = document.createElement('button');
77     button.setAttribute('type','button');
78     if (this.className) button.className = this.className;
79     button.title = this.title;
80     var span = document.createElement('span');
81     span.appendChild(document.createTextNode(this.title));
82     button.appendChild(span);
83     
84     if (this.icon != undefined) {
85          button.style.backgroundImage = 'url('+this.icon+')';
86     }
87     if (typeof(this.fn) == 'function') {
88          var This = this;
89          button.onclick = function() { try { This.fn.apply(This.scope, arguments) } catch (e) {} return false; };
90     }
91     return button;
92};
93
94function jsSpace(id) {
95     this.id = id || null;
96     this.width = null;
97};
98jsSpace.prototype.draw = function() {
99     var span = document.createElement('span');
100     if (this.id) span.id = this.id;
101     span.appendChild(document.createTextNode(String.fromCharCode(160)));
102     span.className = 'jstSpacer';
103     if (this.width) span.style.marginRight = this.width+'px';
104     
105     return span;
106};
107
108function jsCombo(title, options, scope, fn, className) {
109     this.title = title || null;
110     this.options = options || null;
111     this.scope = scope || null;
112     this.fn = fn || function(){};
113     this.className = className || null;
114};
115jsCombo.prototype.draw = function() {
116     if (!this.scope || !this.options) return null;
117     
118     var select = document.createElement('select');
119     if (this.className) select.className = className;
120     select.title = this.title;
121     
122     for (var o in this.options) {
123          //var opt = this.options[o];
124          var option = document.createElement('option');
125          option.value = o;
126          option.appendChild(document.createTextNode(this.options[o]));
127          select.appendChild(option);
128     }
129     
130     var This = this;
131     select.onchange = function() {
132          try { 
133               This.fn.call(This.scope, this.value);
134          } catch (e) { alert(e); }
135         
136          return false;
137     };
138     
139     return select;
140};
141
142
143jsToolBar.prototype = {
144     base_url: '',
145     mode: 'xhtml',
146     elements: {},
147     
148     getMode: function() {
149          return this.mode;
150     },
151     
152     setMode: function(mode) {
153          this.mode = mode || 'xhtml';
154     },
155     
156     switchMode: function(mode) {
157          mode = mode || 'xhtml';
158          this.draw(mode);
159     },
160     
161     button: function(toolName) {
162          var tool = this.elements[toolName];
163          if (typeof tool.fn[this.mode] != 'function') return null;
164          var b = new jsButton(tool.title, tool.fn[this.mode], this, 'jstb_'+toolName);
165          if (tool.icon != undefined) {
166               b.icon = tool.icon;
167          }
168          return b;
169     },
170     space: function(toolName) {
171          var tool = new jsSpace(toolName);
172          if (this.elements[toolName].width !== undefined) {
173               tool.width = this.elements[toolName].width;
174          }
175          return tool;
176     },
177     combo: function(toolName) {
178          var tool = this.elements[toolName];
179          var length = tool[this.mode].list.length;
180         
181          if (typeof tool[this.mode].fn != 'function' || length == 0) {
182               return null;
183          } else {
184               var options = {};
185               for (var i=0; i < length; i++) {
186                    var opt = tool[this.mode].list[i];
187                    options[opt] = tool.options[opt];
188               }
189               return new jsCombo(tool.title, options, this, tool[this.mode].fn);
190          }
191     },
192     draw: function(mode) {
193          this.setMode(mode);
194         
195          // Empty toolbar
196          while (this.toolbar.hasChildNodes()) {
197               this.toolbar.removeChild(this.toolbar.firstChild)
198          }
199          this.toolNodes = {}; // vide les raccourcis DOM/**/
200         
201          // Draw toolbar elements
202          var b, tool, newTool;
203         
204          for (var i in this.elements) {
205               b = this.elements[i];
206               
207               var disabled =
208               b.type == undefined || b.type == ''
209               || (b.disabled != undefined && b.disabled)
210               || (b.context != undefined && b.context != null && b.context != this.context);
211               
212               if (!disabled && typeof this[b.type] == 'function') {
213                    tool = this[b.type](i);
214                    if (tool) newTool = tool.draw();
215                    if (newTool) {
216                         this.toolNodes[i] = newTool; //mémorise l'accès DOM pour usage éventuel ultérieur
217                         this.toolbar.appendChild(newTool);
218                    }
219               }
220          }
221     },
222     
223     singleTag: function(stag,etag) {
224          stag = stag || null;
225          etag = etag || stag;
226         
227          if (!stag || !etag) { return; }
228         
229          this.encloseSelection(stag,etag);
230     },
231     
232     encloseSelection: function(prefix, suffix, fn) {
233          this.textarea.focus();
234         
235          prefix = prefix || '';
236          suffix = suffix || '';
237         
238          var start, end, sel, scrollPos, subst, res;
239         
240          if (typeof(document["selection"]) != "undefined") {
241               sel = document.selection.createRange().text;
242          } else if (typeof(this.textarea["setSelectionRange"]) != "undefined") {
243               start = this.textarea.selectionStart;
244               end = this.textarea.selectionEnd;
245               scrollPos = this.textarea.scrollTop;
246               sel = this.textarea.value.substring(start, end);
247          }
248         
249          if (sel.match(/ $/)) { // exclude ending space char, if any
250               sel = sel.substring(0, sel.length - 1);
251               suffix = suffix + " ";
252          }
253         
254          if (typeof(fn) == 'function') {
255               res = (sel) ? fn.call(this,sel) : fn('');
256          } else {
257               res = (sel) ? sel : '';
258          }
259         
260          subst = prefix + res + suffix;
261         
262          if (typeof(document["selection"]) != "undefined") {
263               var range = document.selection.createRange().text = subst;
264               this.textarea.caretPos -= suffix.length;
265          } else if (typeof(this.textarea["setSelectionRange"]) != "undefined") {
266               this.textarea.value = this.textarea.value.substring(0, start) + subst +
267               this.textarea.value.substring(end);
268               if (sel) {
269                    this.textarea.setSelectionRange(start + subst.length, start + subst.length);
270               } else {
271                    this.textarea.setSelectionRange(start + prefix.length, start + prefix.length);
272               }
273               this.textarea.scrollTop = scrollPos;
274          }
275     },
276     
277     stripBaseURL: function(url) {
278          if (this.base_url != '') {
279               var pos = url.indexOf(this.base_url);
280               if (pos == 0) {
281                    url = url.substr(this.base_url.length);
282               }
283          }
284         
285          return url;
286     }
287};
288
289/** Resizer
290-------------------------------------------------------- */
291jsToolBar.prototype.resizeSetStartH = function() {
292     this.dragStartH = this.textarea.offsetHeight + 0;
293};
294jsToolBar.prototype.resizeDragStart = function(event) {
295     var This = this;
296     this.dragStartY = event.clientY;
297     this.resizeSetStartH();
298     document.addEventListener('mousemove', this.dragMoveHdlr=function(event){This.resizeDragMove(event);}, false);
299     document.addEventListener('mouseup', this.dragStopHdlr=function(event){This.resizeDragStop(event);}, false);
300};
301
302jsToolBar.prototype.resizeDragMove = function(event) {
303     this.textarea.style.height = (this.dragStartH+event.clientY-this.dragStartY)+'px';
304};
305
306jsToolBar.prototype.resizeDragStop = function(event) {
307     document.removeEventListener('mousemove', this.dragMoveHdlr, false);
308     document.removeEventListener('mouseup', this.dragStopHdlr, false);
309};
310
311// Elements definition ------------------------------------
312// block format (paragraph, headers)
313jsToolBar.prototype.elements.blocks = {
314     type: 'combo',
315     title: 'block format',
316     options: {
317          none: '-- none --', // only for wysiwyg mode
318          nonebis: '- block format -', // only for xhtml mode
319          p: 'Paragraph',
320          h1: 'Header 1',
321          h2: 'Header 2',
322          h3: 'Header 3',
323          h4: 'Header 4',
324          h5: 'Header 5',
325          h6: 'Header 6'
326     },
327     xhtml: {
328          list: ['nonebis','p','h1','h2','h3','h4','h5','h6'],
329          fn: function(opt) {
330               if (opt=='nonebis')
331                    this.textarea.focus();
332               else
333                    try {this.singleTag('<'+opt+'>','</'+opt+'>');} catch(e){};
334               this.toolNodes.blocks.value = 'nonebis';
335          }
336     },
337     wiki: {
338          list: ['nonebis','h2','h3','h4','h5'],
339          fn: function(opt) {
340               switch (opt) {
341                    case 'nonebis': this.textarea.focus(); break;
342                    case 'h2': this.encloseSelection('!!!!'); break;
343                    case 'h3': this.encloseSelection('!!!'); break;
344                    case 'h4': this.encloseSelection('!!'); break;
345                    case 'h5': this.encloseSelection('!'); break;
346               }
347               this.toolNodes.blocks.value = 'nonebis';
348          }
349     }
350};
351
352// spacer
353jsToolBar.prototype.elements.space0 = {type: 'space'};
354
355// strong
356jsToolBar.prototype.elements.strong = {
357     type: 'button',
358     title: 'Strong emphasis',
359     fn: {
360          wiki: function() { this.singleTag('__') },
361          xhtml: function() { this.singleTag('<strong>','</strong>') }
362     }
363};
364
365// em
366jsToolBar.prototype.elements.em = {
367     type: 'button',
368     title: 'Emphasis',
369     fn: {
370          wiki: function() { this.singleTag("''") },
371          xhtml: function() { this.singleTag('<em>','</em>') }
372     }
373};
374
375// ins
376jsToolBar.prototype.elements.ins = {
377     type: 'button',
378     title: 'Inserted',
379     fn: {
380          wiki: function() { this.singleTag('++') },
381          xhtml: function() { this.singleTag('<ins>','</ins>') }
382     }
383};
384
385// del
386jsToolBar.prototype.elements.del = {
387     type: 'button',
388     title: 'Deleted',
389     fn: {
390          wiki: function() { this.singleTag('--') },
391          xhtml: function() { this.singleTag('<del>','</del>') }
392     }
393};
394
395// quote
396jsToolBar.prototype.elements.quote = {
397     type: 'button',
398     title: 'Inline quote',
399     fn: {
400          wiki: function() { this.singleTag('{{','}}') },
401          xhtml: function() { this.singleTag('<q>','</q>') }
402     }
403};
404
405// code
406jsToolBar.prototype.elements.code = {
407     type: 'button',
408     title: 'Code',
409     fn: {
410          wiki: function() { this.singleTag('@@') },
411          xhtml: function() { this.singleTag('<code>','</code>')}
412     }
413};
414
415// spacer
416jsToolBar.prototype.elements.space1 = {type: 'space'};
417
418// br
419jsToolBar.prototype.elements.br = {
420     type: 'button',
421     title: 'Line break',
422     fn: {
423          wiki: function() { this.encloseSelection("%%%\n",'') },
424          xhtml: function() { this.encloseSelection("<br />\n",'')}
425     }
426};
427
428// spacer
429jsToolBar.prototype.elements.space2 = {type: 'space'};
430
431// blockquote
432jsToolBar.prototype.elements.blockquote = {
433     type: 'button',
434     title: 'Blockquote',
435     fn: {
436          xhtml: function() { this.singleTag('<blockquote>','</blockquote>') },
437          wiki: function() {
438               this.encloseSelection("\n",'',
439               function(str) {
440                    str = str.replace(/\r/g,'');
441                    return '> '+str.replace(/\n/g,"\n> ");
442               });
443          }
444     }
445};
446
447// pre
448jsToolBar.prototype.elements.pre = {
449     type: 'button',
450     title: 'Preformated text',
451     fn: {
452          wiki: function() { this.singleTag("///\n","\n///") },
453          xhtml: function() { this.singleTag('<pre>','</pre>') }
454     }
455};
456
457// ul
458jsToolBar.prototype.elements.ul = {
459     type: 'button',
460     title: 'Unordered list',
461     fn: {
462          wiki: function() {
463               this.encloseSelection('','',function(str) {
464                    str = str.replace(/\r/g,'');
465                    return '* '+str.replace(/\n/g,"\n* ");
466               });
467          },
468          xhtml: function() {
469               this.encloseSelection('','',function(str) {
470                    str = str.replace(/\r/g,'');
471                    str = str.replace(/\n/g,"</li>\n <li>");
472                    return "<ul>\n <li>"+str+"</li>\n</ul>";
473               });
474          }
475     }
476};
477
478// ol
479jsToolBar.prototype.elements.ol = {
480     type: 'button',
481     title: 'Ordered list',
482     fn: {
483          wiki: function() {
484               this.encloseSelection('','',function(str) {
485                    str = str.replace(/\r/g,'');
486                    return '# '+str.replace(/\n/g,"\n# ");
487               });
488          },
489          xhtml: function() {
490               this.encloseSelection('','',function(str) {
491                    str = str.replace(/\r/g,'');
492                    str = str.replace(/\n/g,"</li>\n <li>");
493                    return "<ol>\n <li>"+str+"</li>\n</ol>";
494               });
495          }
496     }
497};
498
499// spacer
500jsToolBar.prototype.elements.space3 = {type: 'space'};
501
502// link
503jsToolBar.prototype.elements.link = {
504     type: 'button',
505     title: 'Link',
506     fn: {},
507     href_prompt: 'Please give page URL:',
508     hreflang_prompt: 'Language of this page:',
509     default_hreflang: '',
510     prompt: function(href,hreflang) {
511          href = href || '';
512          hreflang = hreflang || this.elements.link.default_hreflang;
513         
514          href = window.prompt(this.elements.link.href_prompt,href);
515          if (!href) { return false; }
516         
517          hreflang = window.prompt(this.elements.link.hreflang_prompt,
518          hreflang);
519         
520          return { href: this.stripBaseURL(href), hreflang: hreflang };
521     }
522};
523
524jsToolBar.prototype.elements.link.fn.xhtml = function() {
525     var link = this.elements.link.prompt.call(this);
526     if (link) {
527          var stag = '<a href="'+link.href+'"';
528          if (link.hreflang) { stag = stag+' hreflang="'+link.hreflang+'"'; }
529          stag = stag+'>';
530          var etag = '</a>';
531         
532          this.encloseSelection(stag,etag);
533     }
534};
535jsToolBar.prototype.elements.link.fn.wiki = function() {
536     var link = this.elements.link.prompt.call(this);
537     if (link) {
538          var stag = '[';
539          var etag = '|'+link.href;
540          if (link.hreflang) { etag = etag+'|'+link.hreflang; }
541          etag = etag+']';
542         
543          this.encloseSelection(stag,etag);
544     }
545};
546
547// img
548jsToolBar.prototype.elements.img = {
549          type: 'button',
550          title: 'External image',
551          src_prompt: 'Please give image URL:',
552          fn: {},
553          prompt: function(src) {
554               src = src || '';
555               return this.stripBaseURL(window.prompt(this.elements.img.src_prompt,src));
556          }
557};
558jsToolBar.prototype.elements.img.fn.xhtml = function() {
559     var src = this.elements.img.prompt.call(this);
560     if (src) {
561          this.encloseSelection('','',function(str) {
562               if (str) {
563                    return '<img src="'+src+'" alt="'+str+'" />';
564               } else {
565                    return '<img src="'+src+'" alt="" />';
566               }
567          });
568     }
569};
570jsToolBar.prototype.elements.img.fn.wiki = function() {
571     var src = this.elements.img.prompt.call(this);
572     if (src) {
573          this.encloseSelection('','',function(str) {
574               if (str) {
575                    return '(('+src+'|'+str+'))';
576               } else {
577                    return '(('+src+'))';
578               }
579          });
580     }
581};
Note: See TracBrowser for help on using the repository browser.

Sites map