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="&lt;h2&gt;...&lt;/h2&gt;"/> or <t.example2.bold text="&lt;h3&gt;...&lt;/h3&gt;"/> 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="&lt;nabble_embed&gt;...&lt;/nabble_embed&gt;"/> 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