Mercurial Hosting > nabble

comparison src/nabble/view/naml/text_editor.naml @ 0:7ecd1a4ef557

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add content
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 21 Mar 2019 19:15:52 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:7ecd1a4ef557
1 <macro name="editor_toolbar" parameters="textarea_id, original_text, node_id">
2 <n.put_in_head.>
3 <n.editor_stylesheet/>
4 <n.editor_shared_scripts textarea_id="[n.textarea_id/]" node_id="[n.node_id/]"/>
5 <script type="text/javascript" src="/util/minmax.js"></script>
6 </n.put_in_head.>
7
8 <div class="toolbar rounded-top shaded-bg-color">
9 <table class="toobar">
10 <tr>
11 <n.editor_quote_button original_text="[n.original_text/]"/>
12 <n.editor_insert_image_button/>
13 <n.editor_bold_button/>
14 <n.editor_italic_button/>
15 <n.editor_link_button/>
16 <n.editor_smiley_button/>
17 <n.editor_subheaders_button/>
18 <n.editor_embed_button/>
19 <n.editor_more_options_button/>
20 </tr>
21 </table>
22 </div>
23 </macro>
24
25 <macro name="editor_shared_scripts" parameters="textarea_id, node_id">
26 <script type="text/javascript">
27 var textareaID = "<n.textarea_id/>";
28 var nodeId = "<n.hide_null.node_id/>";
29 <![CDATA[
30 Nabble.closeWindows = function() {
31 $('div.editor-dropdown').fadeOut('fast');
32 };
33
34 Nabble.insert = function(t) {
35 Nabble.insertTag(t);
36 Nabble.closeWindows();
37 };
38
39 Nabble.insertTag = function(tag) {
40 var textarea = Nabble.get(textareaID);
41 var s = this.getSelection(textarea);
42 if( s != "") {
43 this.setSelection( textarea, "<" + tag + ">" + s + "</" + tag + ">" );
44 } else {
45 this.setSelection( textarea, "<" + tag + "></" + tag + ">" );
46 }
47 textarea.focus();
48 };
49
50 Nabble.getSelection = function(textarea) {
51 if (document.selection) {
52 textarea.focus();
53 return document.selection.createRange().text;
54 } else if (textarea.selectionStart) {
55 return textarea.value.substr(textarea.selectionStart,textarea.selectionEnd-textarea.selectionStart);
56 } else if (textarea.selectionEnd) {
57 return textarea.value.substr(0,textarea.selectionEnd);
58 }
59 return '';
60 };
61
62 Nabble.setSelection = function(textarea,text) {
63 var hasStart = typeof (textarea.selectionStart) != 'undefined';
64 var hasEnd = typeof (textarea.selectionEnd) != 'undefined';
65 if (hasStart || hasEnd) {
66 var start = textarea.selectionStart? textarea.selectionStart : 0;
67 var t = textarea.value;
68 var s = start + text.length;
69 var scrollTop;
70 if (textarea.scrollTop)
71 scrollTop = textarea.scrollTop;
72
73 textarea.value = t.substr(0,start) + text + t.substr(textarea.selectionEnd);
74
75 if (typeof scrollTop != 'undefined')
76 textarea.scrollTop = scrollTop;
77
78 textarea.setSelectionRange(s,s);
79 return;
80 }
81 if( document.selection ) {
82 var r = document.selection.createRange();
83 if( r.parentElement()==textarea ) {
84 r.text = text;
85 r.select();
86 return;
87 }
88 }
89 textarea.value += text;
90 };
91
92 $(document).ready(function() {
93 var $buttons = $('td button.toolbar');
94 var h = $buttons.eq(0).outerHeight();
95 $buttons.each(function() {
96 $(this).height(h);
97 });
98 $(document).click(function(o){
99 var $btn = $(o.target).parents();
100 if ($btn.hasClass('has-dropdown'))
101 return;
102 Nabble.closeWindows();
103 });
104 });
105 ]]>
106 </script>
107 </macro>
108
109 <macro name="editor_quote_button" parameters="original_text">
110 <n.if.not.is_empty.original_text>
111 <then>
112 <n.put_in_head.>
113 <script type="text/javascript">
114 Nabble.quoteOriginal = function(f) {
115 var $m = $("[name='message']");
116 $m.val($m.val() + $('#original').val());
117 $m.focus();
118 };
119 </script>
120 </n.put_in_head.>
121 <td class="nowrap">
122 <input type="hidden" id="original" name="original" value="[n.encode.original_text/]"/>
123 <button type="button" onclick="Nabble.quoteOriginal()" class="toolbar" title="[t]Quote the original message[/t]">
124 <img src="/images/quote.png" border="0" height="12" alt="Quote" style="vertical-align:middle"/>
125 <t>Quote</t>
126 </button>
127 <n.tooltip use_title="true"/>
128 </td>
129 </then>
130 </n.if.not.is_empty.original_text>
131 </macro>
132
133 <macro name="editor_insert_image_button">
134 <n.put_in_head.>
135 <script type="text/javascript">
136 <![CDATA[
137 Nabble.uploadImage = function() {
138 Nabble.closeWindows();
139 var $imgDiv = $('#image-upload');
140 var isOpen = $imgDiv.css("display") != 'none';
141 var alreadyLoaded = window.imageuploader && $('#image-upload-form', window.imageuploader.document).size() == 1;
142 if (isOpen)
143 return;
144 else if (alreadyLoaded)
145 $imgDiv.show();
146 else {
147 var f = '';
148 if ($.browser.msie)
149 f += '<br style="line-height:1px"/>';
150 f += "<iframe id='imageuploader' name='imageuploader' src='/forum/UploadImage.jtp?node=" + nodeId + "' width='20em' height='20em' frameBorder='0' scrolling='no' allowtransparency='true'>";
151 $imgDiv.html(f).show();
152 }
153 };
154 Nabble.uploadedImage = function(name,float,desc) {
155 var textarea = Nabble.get(textareaID);
156 var tag = '<nabble_img src="' + name + '" border="0"';
157 if (float == 'left')
158 tag += ' style="float:left; margin:.4em;"';
159 else if (float == 'right')
160 tag += ' style="float:right; margin:.4em;"';
161 else if (float == 'center')
162 tag += ' style="display: block; margin-left:auto; margin-right:auto;"';
163 if (desc)
164 tag += ' alt="' + desc + '"';
165 tag += '/>';
166 this.setSelection(textarea, tag);
167 textarea.focus();
168 Nabble.closeWindows();
169 };
170 ]]>
171 </script>
172 </n.put_in_head.>
173 <td class="nowrap has-dropdown">
174 <div id="image-upload" class="editor-dropdown image-upload medium-border-color light-bg-color drop-shadow"></div>
175 <button type="button" onclick="Nabble.uploadImage()" class="toolbar image-upload" title="[t]Add an image to your post[/t]">
176 <img src="/images/image.png" border="0" height="12" alt="Picture" style="vertical-align:middle"/>
177 <t>Insert Image</t>
178 </button>
179 <n.tooltip use_title="true"/>
180 </td>
181 </macro>
182
183 <macro name="editor_bold_button">
184 <n.put_in_head.>
185 <script type="text/javascript">
186 Nabble.bold = function() {
187 var textarea = Nabble.get(textareaID);
188 var s = this.getSelection(textarea);
189 if( s != "" || (s=prompt("Enter text to make bold:","")) != null ) {
190 this.setSelection( textarea, "<b>" + s + "</b>" );
191 }
192 textarea.focus();
193 };
194 </script>
195 </n.put_in_head.>
196 <td class="nowrap">
197 <button type="button" onclick="Nabble.bold()" class="toolbar bold" style="height:1.65em" title="[t]Bold[/t]">
198 <img src="/images/bold.png"/>
199 </button>
200 <n.tooltip use_title="true"/>
201 </td>
202 </macro>
203
204 <macro name="editor_italic_button">
205 <n.put_in_head.>
206 <script type="text/javascript">
207 Nabble.italics = function() {
208 var textarea = Nabble.get(textareaID);
209 var s = this.getSelection(textarea);
210 if( s != "" || (s=prompt("Enter text to make italics:","")) != null ) {
211 this.setSelection( textarea, "<i>" + s + "</i>" );
212 }
213 textarea.focus();
214 };
215 </script>
216 </n.put_in_head.>
217 <td class="nowrap">
218 <button type="button" onclick="Nabble.italics()" class="toolbar" style="font-style:italic;height:1.65em" title="[t]Italic[/t]">
219 <img src="/images/italic.png"/>
220 </button>
221 <n.tooltip use_title="true"/>
222 </td>
223 </macro>
224
225 <macro name="editor_link_button">
226 <n.put_in_head.>
227 <script type="text/javascript">
228 <![CDATA[
229 Nabble.link = function() {
230 var textarea = Nabble.get(textareaID);
231 var url = prompt("Enter URL:","http://");
232 if (url != null) {
233 if (url.indexOf('http') != 0 && url.indexOf('ftp:') != 0)
234 url = 'http://' + url;
235 var text = this.getSelection(textarea);
236 if (text!="" || (text = prompt("Enter link text:",url)) != null) {
237 this.setSelection( textarea, "<a href=\"" + url + "\">" + text + "</a>" );
238 }
239 }
240 textarea.focus();
241 };
242 ]]>
243 </script>
244 </n.put_in_head.>
245 <td class="nowrap">
246 <button type="button" onclick="Nabble.link()" class="toolbar" title="[t]Add a link to another page[/t]">
247 <img src="/images/link.png" width="13" height="12" alt="Link" style="vertical-align:middle"/> <t>Link</t>
248 </button>
249 <n.tooltip use_title="true"/>
250 </td>
251 </macro>
252
253 <macro name="editor_smiley_button">
254 <n.put_in_head.>
255 <script type="text/javascript">
256 var smileyTable = "<n.javascript_string_encode.compress.smiley_table/>";
257 <![CDATA[
258 Nabble.smiley = function(image) {
259 var textarea = Nabble.get(textareaID);
260 if (image.indexOf('http://')==0)
261 this.setSelection( textarea, "<img src=\""+image+"\"/>" );
262 else
263 this.setSelection( textarea, "<smiley image=\""+image+"\"/>" );
264 textarea.focus();
265 Nabble.closeWindows();
266 };
267 var smileysLoaded = false;
268 Nabble.openSmileys = function() {
269 Nabble.closeWindows();
270 var $smileys = $('#smiley-dropdown');
271 if (!smileysLoaded) {
272 $smileys.html(smileyTable);
273 smileysLoaded = true;
274 }
275 $smileys.show();
276 };
277 ]]>
278 </script>
279 </n.put_in_head.>
280
281 <td class="has-dropdown">
282 <div id="smiley-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:-15em"></div>
283 <button type="button" onclick="Nabble.openSmileys()" class="toolbar" title="[t]Add smileys and funny animations[/t]">
284 <img src="/images/icon_happy.png" border="0" style="vertical-align:middle"/>
285 <img src="/images/more.png" width="10" height="10"/>
286 </button>
287 <n.tooltip use_title="true"/>
288 </td>
289 </macro>
290
291 <macro name="editor_subheaders_button">
292 <n.put_in_head.>
293 <script type="text/javascript">
294 Nabble.headersDropdown = function() {
295 Nabble.closeWindows();
296 $('#headers-dropdown').show();
297 };
298 </script>
299 </n.put_in_head.>
300
301 <td class="has-dropdown">
302 <div id="headers-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="padding:.5em;width:25em;margin-left:-15em">
303 <h2><t>Adding Sub-Headers</t></h2>
304 <t>Use tags like <t.example1.bold text="&lt;h2&gt;...&lt;/h2&gt;"/> or <t.example2.bold text="&lt;h3&gt;...&lt;/h3&gt;"/> to create sub-headers.</t>
305 <div style="margin:.5em 0 1em;">
306 <t>Insert</t>
307 <button type="button" class="toolbar" onclick="Nabble.insert('h2')"><t>H2</t></button>
308 <button type="button" class="toolbar" onclick="Nabble.insert('h3')"><t>H3</t></button>
309 <button type="button" class="toolbar" onclick="Nabble.insert('h4')"><t>H4</t></button>
310 <button type="button" class="toolbar" onclick="Nabble.insert('h5')"><t>H5</t></button>
311 <button type="button" class="toolbar" onclick="Nabble.insert('h6')"><t>H6</t></button>
312 </div>
313 </div>
314 <button type="button" class="toolbar" onclick="Nabble.headersDropdown()">
315 <t>H2</t><img src="/images/more.png" width="10" height="10"/>
316 </button>
317 </td>
318 </macro>
319
320 <macro name="editor_embed_button">
321 <n.put_in_head.>
322 <script type="text/javascript">
323 Nabble.embedDropdown = function() {
324 Nabble.closeWindows();
325 $('#tips-dropdown').show();
326 };
327 </script>
328 </n.put_in_head.>
329
330 <td class="has-dropdown">
331 <div id="tips-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="padding:.5em;width:25em;margin-left:-15em">
332 <h2><t>Embedding Contents</t></h2>
333 <t>Use <t.tag_names.bold text="&lt;nabble_embed&gt;...&lt;/nabble_embed&gt;"/> to embed widgets from other websites.</t>
334 <t>Currently Nabble supports</t>:
335 <ul style="margin:.3em">
336 <li><t>Videos from Youtube, Vimeo and LiveLeak.</t></li>
337 <li><t>Polls from Polldaddy.com (flash polls only)</t></li>
338 </ul>
339 <t>Just paste the code (provided by the sites above) within these tags and you are ready to post it.</t>
340 <div style="margin-top:.5em">
341 <t>Insert</t>
342 <button type="button" class="toolbar" onclick="Nabble.insert('nabble_embed')"><t>Embed Tags</t></button>
343 </div>
344 </div>
345 <button type="button" class="toolbar" onclick="Nabble.embedDropdown()">
346 <t>Embed</t><img src="/images/more.png" width="10" height="10"/>
347 </button>
348 </td>
349 </macro>
350
351 <macro name="editor_more_options_button">
352 <n.put_in_head.>
353 <script type="text/javascript">
354 <![CDATA[
355 Nabble.hideEmail = function() {
356 var textarea = Nabble.get(textareaID);
357 var s = this.getSelection(textarea);
358 if( s != "" || (s=prompt("Enter the email address to obfuscate/hide (e.g., show user@host.com as user@...):","")) != null ) {
359 this.setSelection( textarea, "<email>" + s + "</email>" );
360 }
361 textarea.focus();
362 }
363 Nabble.uploadFile = function() {
364 Nabble.closeWindows();
365 var $fileDiv = $('#file-upload');
366 var isOpen = $fileDiv.css("display") != 'none';
367 var alreadyLoaded = window.fileuploader && $('#file-upload-form', window.fileuploader.document).size() == 1;
368 if (isOpen)
369 return;
370 else if (alreadyLoaded)
371 $fileDiv.show();
372 else {
373 var f = '';
374 if ($.browser.msie)
375 f += '<br style="line-height:1px"/>';
376 f += "<iframe id='fileuploader' name='fileuploader' src='/forum/UploadFile.jtp?node=" + nodeId + "' width='380' height='100' frameBorder='0' scrolling='no' allowtransparency='true'>";
377 $fileDiv.html(f).show();
378 }
379 };
380 Nabble.uploadedFile = function(name) {
381 var textarea = Nabble.get(textareaID);
382 this.setSelection( textarea, '<nabble_a href="'+name+'">'+name+'</nabble_a>' );
383 textarea.focus();
384 Nabble.closeWindows();
385 };
386 ]]>
387 </script>
388 </n.put_in_head.>
389 <td class="nowrap has-dropdown">
390 <div id="file-upload" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:-5em"></div>
391 <span id="tb-dropdown" class="dropdown">
392 <button class="toolbar" title="[t]Click for more options[/t]" onclick="return false;"><t>More</t><img src="/images/more.png" width="10" height="10"/></button>
393 <n.tooltip use_title="true"/>
394 <table class="light-bg-color medium-border-color drop-shadow">
395 <tr><td title="[t]Upload a file[/t]"><a href="javascript:void Nabble.uploadFile();"><t>Upload a file</t></a></td></tr>
396 <tr><td title="[t]Hide email address (e.g., user@host.com to [n.lt/]hidden email[n.gt/] link)[/t]"><a href="javascript:void Nabble.hideEmail();"><t>Hide email</t></a></td></tr>
397 <tr><td title="[t]Add content that should not be encoded (e.g., code)[/t]"><a href="javascript:void Nabble.insert('raw');"><t>Raw text</t></a></td></tr>
398 </table>
399 </span>
400 <script type="text/javascript">
401 dropdownInit('tb-dropdown');
402 </script>
403 </td>
404 </macro>
405
406 <macro name="smiley_table">
407 <n.comment.>
408 You can edit the table below if you want to customize the list of smileys.
409 Use the 'smiley' command just like in the default cases, but you can print the
410 full URL of your smileys in the 'src' attribute. Example:
411 <n.smiley name="My Smiley" src="http://domain.com/image.gif"/>
412 </n.comment.>
413
414 <table style="text-align:center">
415 <tr>
416 <td><n.smiley name="Working" src="anim_working.gif"/></td>
417 <td><n.smiley name="Super" src="smiley_super.gif"/></td>
418 <td><n.smiley name="Whistling" src="smiley_whistling.gif"/></td>
419 <td><n.smiley name="Clapping" src="anim_claps.gif"/></td>
420 <td colspan="2"><n.smiley name="Handshake" src="anim_handshake.gif"/></td>
421 <td><n.smiley name="Jumping" src="anim_jump.gif"/></td>
422 <td colspan="2"><n.smiley name="Rules" src="anim_rules.gif"/></td>
423 <td><n.smiley name="Drunk" src="anim_drunk.gif"/></td>
424 </tr>
425 <tr>
426 <td><n.smiley name="What?" src="smiley_what.gif"/></td>
427 <td><n.smiley name="Confused" src="anim_confused.gif"/></td>
428 <td><n.smiley name="Uh?" src="smiley_uh.gif"/></td>
429 <td><n.smiley name="Crazy" src="anim_crazy.gif"/></td>
430 <td><n.smiley name="Angry" src="smiley_angry.gif"/></td>
431 <td><n.smiley name="Hurt" src="smiley_hurt.gif"/></td>
432 <td><n.smiley name="Pirate" src="smiley_pirate.gif"/></td>
433 <td><n.smiley name="Mustach" src="smiley_mustach.gif"/></td>
434 <td><n.smiley name="Ninja" src="smiley_ninja.gif"/></td>
435 <td><n.smiley name="Music" src="smiley_music.gif"/></td>
436 </tr>
437 <tr>
438 <td><n.smiley name="Unhappy" src="smiley_unhappy.gif"/></td>
439 <td><n.smiley name="Sad" src="smiley_sad.gif"/></td>
440 <td><n.smiley name="Cry" src="smiley_cry.gif"/></td>
441 <td><n.smiley name="Sleep" src="smiley_sleep.gif"/></td>
442 <td><n.smiley name="Argh" src="smiley_argh.gif"/></td>
443 <td><n.smiley name="Scared" src="smiley_scared.gif"/></td>
444 <td><n.smiley name="Oh No" src="smiley_oh_no.gif"/></td>
445 <td><n.smiley name="Oh" src="smiley_oh.gif"/></td>
446 <td><n.smiley name="Evil" src="smiley_evil.gif"/></td>
447 <td><n.smiley name="Teeth" src="smiley_teeth.gif"/></td>
448 </tr>
449 <tr>
450 <td><n.smiley name="Smile" src="smiley_beam.gif"/></td>
451 <td><n.smiley name="Happy" src="smiley_happy.gif"/></td>
452 <td><n.smiley name="Wink" src="smiley_wink.gif"/></td>
453 <td><n.smiley name="Thinking" src="smiley_thinking.gif"/></td>
454 <td><n.smiley name="Grin" src="smiley_grin.gif"/></td>
455 <td><n.smiley name="Good" src="smiley_good.gif"/></td>
456 <td><n.smiley name="Cool" src="smiley_cool.gif"/></td>
457 <td><n.smiley name="Blush" src="smiley_blush.gif"/></td>
458 <td><n.smiley name="Tongue" src="smiley_tongue.gif"/></td>
459 <td><n.smiley name="Blbl" src="anim_blbl.gif"/></td>
460 </tr>
461 </table>
462 </macro>
463
464 <macro name="smiley" parameters="name,src">
465 <a href="javascript:Nabble.smiley('[n.src/]')">
466 <n.if.starts_with text="[n.src/]" prefix="http://">
467 <then><img src="[n.src/]" alt="[n.name/]" border="0" /></then>
468 <else><img src="/images/smiley/[n.src/]" alt="[n.name/]" border="0" /></else>
469 </n.if.starts_with>
470 </a>
471 </macro>
472
473 <macro name="editor_stylesheet">
474 <style type="text/css">
475 div.editor-dropdown {
476 margin-top:1.8em;
477 position:absolute;
478 display:none;
479 z-index:1000;
480 border-width:1px;
481 border-style:solid;
482 }
483 .nabble div.toolbar {
484 min-width:30em;
485 max-width:55em;
486 width:100%;
487 padding:.1em;
488 }
489 table.toolbar {
490 border-spacing:0;
491 }
492 table.toolbar td {
493 padding:0;
494 }
495 button {
496 white-space:nowrap;
497 }
498 div > h2 {
499 margin:0;
500 padding:0;
501 }
502 </style>
503 </macro>