Mercurial Hosting > nabble
diff src/nabble/view/naml/text_editor.naml @ 0:7ecd1a4ef557
add content
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Thu, 21 Mar 2019 19:15:52 -0600 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/nabble/view/naml/text_editor.naml Thu Mar 21 19:15:52 2019 -0600 @@ -0,0 +1,503 @@ +<macro name="editor_toolbar" parameters="textarea_id, original_text, node_id"> + <n.put_in_head.> + <n.editor_stylesheet/> + <n.editor_shared_scripts textarea_id="[n.textarea_id/]" node_id="[n.node_id/]"/> + <script type="text/javascript" src="/util/minmax.js"></script> + </n.put_in_head.> + + <div class="toolbar rounded-top shaded-bg-color"> + <table class="toobar"> + <tr> + <n.editor_quote_button original_text="[n.original_text/]"/> + <n.editor_insert_image_button/> + <n.editor_bold_button/> + <n.editor_italic_button/> + <n.editor_link_button/> + <n.editor_smiley_button/> + <n.editor_subheaders_button/> + <n.editor_embed_button/> + <n.editor_more_options_button/> + </tr> + </table> + </div> +</macro> + +<macro name="editor_shared_scripts" parameters="textarea_id, node_id"> + <script type="text/javascript"> + var textareaID = "<n.textarea_id/>"; + var nodeId = "<n.hide_null.node_id/>"; + <![CDATA[ + Nabble.closeWindows = function() { + $('div.editor-dropdown').fadeOut('fast'); + }; + + Nabble.insert = function(t) { + Nabble.insertTag(t); + Nabble.closeWindows(); + }; + + Nabble.insertTag = function(tag) { + var textarea = Nabble.get(textareaID); + var s = this.getSelection(textarea); + if( s != "") { + this.setSelection( textarea, "<" + tag + ">" + s + "</" + tag + ">" ); + } else { + this.setSelection( textarea, "<" + tag + "></" + tag + ">" ); + } + textarea.focus(); + }; + + Nabble.getSelection = function(textarea) { + if (document.selection) { + textarea.focus(); + return document.selection.createRange().text; + } else if (textarea.selectionStart) { + return textarea.value.substr(textarea.selectionStart,textarea.selectionEnd-textarea.selectionStart); + } else if (textarea.selectionEnd) { + return textarea.value.substr(0,textarea.selectionEnd); + } + return ''; + }; + + Nabble.setSelection = function(textarea,text) { + var hasStart = typeof (textarea.selectionStart) != 'undefined'; + var hasEnd = typeof (textarea.selectionEnd) != 'undefined'; + if (hasStart || hasEnd) { + var start = textarea.selectionStart? textarea.selectionStart : 0; + var t = textarea.value; + var s = start + text.length; + var scrollTop; + if (textarea.scrollTop) + scrollTop = textarea.scrollTop; + + textarea.value = t.substr(0,start) + text + t.substr(textarea.selectionEnd); + + if (typeof scrollTop != 'undefined') + textarea.scrollTop = scrollTop; + + textarea.setSelectionRange(s,s); + return; + } + if( document.selection ) { + var r = document.selection.createRange(); + if( r.parentElement()==textarea ) { + r.text = text; + r.select(); + return; + } + } + textarea.value += text; + }; + + $(document).ready(function() { + var $buttons = $('td button.toolbar'); + var h = $buttons.eq(0).outerHeight(); + $buttons.each(function() { + $(this).height(h); + }); + $(document).click(function(o){ + var $btn = $(o.target).parents(); + if ($btn.hasClass('has-dropdown')) + return; + Nabble.closeWindows(); + }); + }); + ]]> + </script> +</macro> + +<macro name="editor_quote_button" parameters="original_text"> + <n.if.not.is_empty.original_text> + <then> + <n.put_in_head.> + <script type="text/javascript"> + Nabble.quoteOriginal = function(f) { + var $m = $("[name='message']"); + $m.val($m.val() + $('#original').val()); + $m.focus(); + }; + </script> + </n.put_in_head.> + <td class="nowrap"> + <input type="hidden" id="original" name="original" value="[n.encode.original_text/]"/> + <button type="button" onclick="Nabble.quoteOriginal()" class="toolbar" title="[t]Quote the original message[/t]"> + <img src="/images/quote.png" border="0" height="12" alt="Quote" style="vertical-align:middle"/> + <t>Quote</t> + </button> + <n.tooltip use_title="true"/> + </td> + </then> + </n.if.not.is_empty.original_text> +</macro> + +<macro name="editor_insert_image_button"> + <n.put_in_head.> + <script type="text/javascript"> + <![CDATA[ + Nabble.uploadImage = function() { + Nabble.closeWindows(); + var $imgDiv = $('#image-upload'); + var isOpen = $imgDiv.css("display") != 'none'; + var alreadyLoaded = window.imageuploader && $('#image-upload-form', window.imageuploader.document).size() == 1; + if (isOpen) + return; + else if (alreadyLoaded) + $imgDiv.show(); + else { + var f = ''; + if ($.browser.msie) + f += '<br style="line-height:1px"/>'; + f += "<iframe id='imageuploader' name='imageuploader' src='/forum/UploadImage.jtp?node=" + nodeId + "' width='20em' height='20em' frameBorder='0' scrolling='no' allowtransparency='true'>"; + $imgDiv.html(f).show(); + } + }; + Nabble.uploadedImage = function(name,float,desc) { + var textarea = Nabble.get(textareaID); + var tag = '<nabble_img src="' + name + '" border="0"'; + if (float == 'left') + tag += ' style="float:left; margin:.4em;"'; + else if (float == 'right') + tag += ' style="float:right; margin:.4em;"'; + else if (float == 'center') + tag += ' style="display: block; margin-left:auto; margin-right:auto;"'; + if (desc) + tag += ' alt="' + desc + '"'; + tag += '/>'; + this.setSelection(textarea, tag); + textarea.focus(); + Nabble.closeWindows(); + }; + ]]> + </script> + </n.put_in_head.> + <td class="nowrap has-dropdown"> + <div id="image-upload" class="editor-dropdown image-upload medium-border-color light-bg-color drop-shadow"></div> + <button type="button" onclick="Nabble.uploadImage()" class="toolbar image-upload" title="[t]Add an image to your post[/t]"> + <img src="/images/image.png" border="0" height="12" alt="Picture" style="vertical-align:middle"/> + <t>Insert Image</t> + </button> + <n.tooltip use_title="true"/> + </td> +</macro> + +<macro name="editor_bold_button"> + <n.put_in_head.> + <script type="text/javascript"> + Nabble.bold = function() { + var textarea = Nabble.get(textareaID); + var s = this.getSelection(textarea); + if( s != "" || (s=prompt("Enter text to make bold:","")) != null ) { + this.setSelection( textarea, "<b>" + s + "</b>" ); + } + textarea.focus(); + }; + </script> + </n.put_in_head.> + <td class="nowrap"> + <button type="button" onclick="Nabble.bold()" class="toolbar bold" style="height:1.65em" title="[t]Bold[/t]"> + <img src="/images/bold.png"/> + </button> + <n.tooltip use_title="true"/> + </td> +</macro> + +<macro name="editor_italic_button"> + <n.put_in_head.> + <script type="text/javascript"> + Nabble.italics = function() { + var textarea = Nabble.get(textareaID); + var s = this.getSelection(textarea); + if( s != "" || (s=prompt("Enter text to make italics:","")) != null ) { + this.setSelection( textarea, "<i>" + s + "</i>" ); + } + textarea.focus(); + }; + </script> + </n.put_in_head.> + <td class="nowrap"> + <button type="button" onclick="Nabble.italics()" class="toolbar" style="font-style:italic;height:1.65em" title="[t]Italic[/t]"> + <img src="/images/italic.png"/> + </button> + <n.tooltip use_title="true"/> + </td> +</macro> + +<macro name="editor_link_button"> + <n.put_in_head.> + <script type="text/javascript"> + <![CDATA[ + Nabble.link = function() { + var textarea = Nabble.get(textareaID); + var url = prompt("Enter URL:","http://"); + if (url != null) { + if (url.indexOf('http') != 0 && url.indexOf('ftp:') != 0) + url = 'http://' + url; + var text = this.getSelection(textarea); + if (text!="" || (text = prompt("Enter link text:",url)) != null) { + this.setSelection( textarea, "<a href=\"" + url + "\">" + text + "</a>" ); + } + } + textarea.focus(); + }; + ]]> + </script> + </n.put_in_head.> + <td class="nowrap"> + <button type="button" onclick="Nabble.link()" class="toolbar" title="[t]Add a link to another page[/t]"> + <img src="/images/link.png" width="13" height="12" alt="Link" style="vertical-align:middle"/> <t>Link</t> + </button> + <n.tooltip use_title="true"/> + </td> +</macro> + +<macro name="editor_smiley_button"> + <n.put_in_head.> + <script type="text/javascript"> + var smileyTable = "<n.javascript_string_encode.compress.smiley_table/>"; + <![CDATA[ + Nabble.smiley = function(image) { + var textarea = Nabble.get(textareaID); + if (image.indexOf('http://')==0) + this.setSelection( textarea, "<img src=\""+image+"\"/>" ); + else + this.setSelection( textarea, "<smiley image=\""+image+"\"/>" ); + textarea.focus(); + Nabble.closeWindows(); + }; + var smileysLoaded = false; + Nabble.openSmileys = function() { + Nabble.closeWindows(); + var $smileys = $('#smiley-dropdown'); + if (!smileysLoaded) { + $smileys.html(smileyTable); + smileysLoaded = true; + } + $smileys.show(); + }; + ]]> + </script> + </n.put_in_head.> + + <td class="has-dropdown"> + <div id="smiley-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:-15em"></div> + <button type="button" onclick="Nabble.openSmileys()" class="toolbar" title="[t]Add smileys and funny animations[/t]"> + <img src="/images/icon_happy.png" border="0" style="vertical-align:middle"/> + <img src="/images/more.png" width="10" height="10"/> + </button> + <n.tooltip use_title="true"/> + </td> +</macro> + +<macro name="editor_subheaders_button"> + <n.put_in_head.> + <script type="text/javascript"> + Nabble.headersDropdown = function() { + Nabble.closeWindows(); + $('#headers-dropdown').show(); + }; + </script> + </n.put_in_head.> + + <td class="has-dropdown"> + <div id="headers-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="padding:.5em;width:25em;margin-left:-15em"> + <h2><t>Adding Sub-Headers</t></h2> + <t>Use tags like <t.example1.bold text="<h2>...</h2>"/> or <t.example2.bold text="<h3>...</h3>"/> to create sub-headers.</t> + <div style="margin:.5em 0 1em;"> + <t>Insert</t> + <button type="button" class="toolbar" onclick="Nabble.insert('h2')"><t>H2</t></button> + <button type="button" class="toolbar" onclick="Nabble.insert('h3')"><t>H3</t></button> + <button type="button" class="toolbar" onclick="Nabble.insert('h4')"><t>H4</t></button> + <button type="button" class="toolbar" onclick="Nabble.insert('h5')"><t>H5</t></button> + <button type="button" class="toolbar" onclick="Nabble.insert('h6')"><t>H6</t></button> + </div> + </div> + <button type="button" class="toolbar" onclick="Nabble.headersDropdown()"> + <t>H2</t><img src="/images/more.png" width="10" height="10"/> + </button> + </td> +</macro> + +<macro name="editor_embed_button"> + <n.put_in_head.> + <script type="text/javascript"> + Nabble.embedDropdown = function() { + Nabble.closeWindows(); + $('#tips-dropdown').show(); + }; + </script> + </n.put_in_head.> + + <td class="has-dropdown"> + <div id="tips-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="padding:.5em;width:25em;margin-left:-15em"> + <h2><t>Embedding Contents</t></h2> + <t>Use <t.tag_names.bold text="<nabble_embed>...</nabble_embed>"/> to embed widgets from other websites.</t> + <t>Currently Nabble supports</t>: + <ul style="margin:.3em"> + <li><t>Videos from Youtube, Vimeo and LiveLeak.</t></li> + <li><t>Polls from Polldaddy.com (flash polls only)</t></li> + </ul> + <t>Just paste the code (provided by the sites above) within these tags and you are ready to post it.</t> + <div style="margin-top:.5em"> + <t>Insert</t> + <button type="button" class="toolbar" onclick="Nabble.insert('nabble_embed')"><t>Embed Tags</t></button> + </div> + </div> + <button type="button" class="toolbar" onclick="Nabble.embedDropdown()"> + <t>Embed</t><img src="/images/more.png" width="10" height="10"/> + </button> + </td> +</macro> + +<macro name="editor_more_options_button"> + <n.put_in_head.> + <script type="text/javascript"> + <![CDATA[ + Nabble.hideEmail = function() { + var textarea = Nabble.get(textareaID); + var s = this.getSelection(textarea); + if( s != "" || (s=prompt("Enter the email address to obfuscate/hide (e.g., show user@host.com as user@...):","")) != null ) { + this.setSelection( textarea, "<email>" + s + "</email>" ); + } + textarea.focus(); + } + Nabble.uploadFile = function() { + Nabble.closeWindows(); + var $fileDiv = $('#file-upload'); + var isOpen = $fileDiv.css("display") != 'none'; + var alreadyLoaded = window.fileuploader && $('#file-upload-form', window.fileuploader.document).size() == 1; + if (isOpen) + return; + else if (alreadyLoaded) + $fileDiv.show(); + else { + var f = ''; + if ($.browser.msie) + f += '<br style="line-height:1px"/>'; + f += "<iframe id='fileuploader' name='fileuploader' src='/forum/UploadFile.jtp?node=" + nodeId + "' width='380' height='100' frameBorder='0' scrolling='no' allowtransparency='true'>"; + $fileDiv.html(f).show(); + } + }; + Nabble.uploadedFile = function(name) { + var textarea = Nabble.get(textareaID); + this.setSelection( textarea, '<nabble_a href="'+name+'">'+name+'</nabble_a>' ); + textarea.focus(); + Nabble.closeWindows(); + }; + ]]> + </script> + </n.put_in_head.> + <td class="nowrap has-dropdown"> + <div id="file-upload" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:-5em"></div> + <span id="tb-dropdown" class="dropdown"> + <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> + <n.tooltip use_title="true"/> + <table class="light-bg-color medium-border-color drop-shadow"> + <tr><td title="[t]Upload a file[/t]"><a href="javascript:void Nabble.uploadFile();"><t>Upload a file</t></a></td></tr> + <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> + <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> + </table> + </span> + <script type="text/javascript"> + dropdownInit('tb-dropdown'); + </script> + </td> +</macro> + +<macro name="smiley_table"> + <n.comment.> + You can edit the table below if you want to customize the list of smileys. + Use the 'smiley' command just like in the default cases, but you can print the + full URL of your smileys in the 'src' attribute. Example: + <n.smiley name="My Smiley" src="http://domain.com/image.gif"/> + </n.comment.> + + <table style="text-align:center"> + <tr> + <td><n.smiley name="Working" src="anim_working.gif"/></td> + <td><n.smiley name="Super" src="smiley_super.gif"/></td> + <td><n.smiley name="Whistling" src="smiley_whistling.gif"/></td> + <td><n.smiley name="Clapping" src="anim_claps.gif"/></td> + <td colspan="2"><n.smiley name="Handshake" src="anim_handshake.gif"/></td> + <td><n.smiley name="Jumping" src="anim_jump.gif"/></td> + <td colspan="2"><n.smiley name="Rules" src="anim_rules.gif"/></td> + <td><n.smiley name="Drunk" src="anim_drunk.gif"/></td> + </tr> + <tr> + <td><n.smiley name="What?" src="smiley_what.gif"/></td> + <td><n.smiley name="Confused" src="anim_confused.gif"/></td> + <td><n.smiley name="Uh?" src="smiley_uh.gif"/></td> + <td><n.smiley name="Crazy" src="anim_crazy.gif"/></td> + <td><n.smiley name="Angry" src="smiley_angry.gif"/></td> + <td><n.smiley name="Hurt" src="smiley_hurt.gif"/></td> + <td><n.smiley name="Pirate" src="smiley_pirate.gif"/></td> + <td><n.smiley name="Mustach" src="smiley_mustach.gif"/></td> + <td><n.smiley name="Ninja" src="smiley_ninja.gif"/></td> + <td><n.smiley name="Music" src="smiley_music.gif"/></td> + </tr> + <tr> + <td><n.smiley name="Unhappy" src="smiley_unhappy.gif"/></td> + <td><n.smiley name="Sad" src="smiley_sad.gif"/></td> + <td><n.smiley name="Cry" src="smiley_cry.gif"/></td> + <td><n.smiley name="Sleep" src="smiley_sleep.gif"/></td> + <td><n.smiley name="Argh" src="smiley_argh.gif"/></td> + <td><n.smiley name="Scared" src="smiley_scared.gif"/></td> + <td><n.smiley name="Oh No" src="smiley_oh_no.gif"/></td> + <td><n.smiley name="Oh" src="smiley_oh.gif"/></td> + <td><n.smiley name="Evil" src="smiley_evil.gif"/></td> + <td><n.smiley name="Teeth" src="smiley_teeth.gif"/></td> + </tr> + <tr> + <td><n.smiley name="Smile" src="smiley_beam.gif"/></td> + <td><n.smiley name="Happy" src="smiley_happy.gif"/></td> + <td><n.smiley name="Wink" src="smiley_wink.gif"/></td> + <td><n.smiley name="Thinking" src="smiley_thinking.gif"/></td> + <td><n.smiley name="Grin" src="smiley_grin.gif"/></td> + <td><n.smiley name="Good" src="smiley_good.gif"/></td> + <td><n.smiley name="Cool" src="smiley_cool.gif"/></td> + <td><n.smiley name="Blush" src="smiley_blush.gif"/></td> + <td><n.smiley name="Tongue" src="smiley_tongue.gif"/></td> + <td><n.smiley name="Blbl" src="anim_blbl.gif"/></td> + </tr> + </table> +</macro> + +<macro name="smiley" parameters="name,src"> + <a href="javascript:Nabble.smiley('[n.src/]')"> + <n.if.starts_with text="[n.src/]" prefix="http://"> + <then><img src="[n.src/]" alt="[n.name/]" border="0" /></then> + <else><img src="/images/smiley/[n.src/]" alt="[n.name/]" border="0" /></else> + </n.if.starts_with> + </a> +</macro> + +<macro name="editor_stylesheet"> + <style type="text/css"> + div.editor-dropdown { + margin-top:1.8em; + position:absolute; + display:none; + z-index:1000; + border-width:1px; + border-style:solid; + } + .nabble div.toolbar { + min-width:30em; + max-width:55em; + width:100%; + padding:.1em; + } + table.toolbar { + border-spacing:0; + } + table.toolbar td { + padding:0; + } + button { + white-space:nowrap; + } + div > h2 { + margin:0; + padding:0; + } + </style> +</macro> \ No newline at end of file