Dotclear

source: admin/js/jsToolBar/jsToolBar.js @ 2566:9bf417837888

Revision 2566:9bf417837888, 15.0 KB checked in by franck <carnet.franck.paul@…>, 12 years ago (diff)

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

Sites map