diff src/bbcode/bbcode.js @ 45:2d4f00755092

bcode editor work
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 13 Nov 2022 22:07:18 -0700
parents 96f0c3d65698
children 289718f121e4
line wrap: on
line diff
--- a/src/bbcode/bbcode.js	Thu Nov 10 23:18:58 2022 -0700
+++ b/src/bbcode/bbcode.js	Sun Nov 13 22:07:18 2022 -0700
@@ -1,15 +1,17 @@
-function fixTextarea(textarea) {
+// https://fonts.google.com/icons
+
+function bb_fixTextarea(textarea) {
 	let height = textarea.scrollHeight;
 	if( height > textarea.clientHeight ) {
 		textarea.style.height = (height+2) + "px";
 	}
 }
 
-function fileButtonClick(button) {
+function bb_fileButtonClick(button) {
 	button.parentNode.querySelector('input[type="file"]').click();
 }
 
-function upload(input,callback) {
+function bb_upload(input,callback) {
 	let file = input.files[0];
 	input.value = null;
 	let request = new XMLHttpRequest();
@@ -45,11 +47,23 @@
 	} while( node = node.parentNode );
 }
 
-function uploaded(input,url,filename) {
+function bb_uploaded(input,url,filename) {
 	let div = getBbcodeDiv(input);
 	let textarea = div.querySelector('textarea');
+	textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
 	textarea.focus();
-	textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
+}
+
+function bb_add(input,openTag,closeTag) {
+	let div = getBbcodeDiv(input);
+	let textarea = div.querySelector('textarea');
+	let start = textarea.selectionStart;
+	let end = textarea.selectionEnd;
+	textarea.setRangeText(closeTag,end,end);
+	textarea.setRangeText(openTag,start,start);
+	let len = openTag.length;
+	textarea.setSelectionRange(start+len,end+len);
+	textarea.focus();
 }
 
 function bbcodeCreate(div,options) {
@@ -60,23 +74,29 @@
 	let cancel = options.cancel;
 	let html = `\
 		<div bbcode>
-			<textarea oninput="fixTextarea(this)"></textarea>
-			<p>
-				<input type=file onchange="upload(this,uploaded)">
-				<button type=button onclick="fileButtonClick(this)">Upload File</button>
+			<textarea oninput="bb_fixTextarea(this)"></textarea>
+			<div buttons>
+				<button type=button onclick="bb_add(this,'[b]','[/b]')" title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
+				<button type=button onclick="bb_add(this,'[i]','[/i]')" title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
+				<button type=button onclick="bb_add(this,'[u]','[/u]')" title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button>
+				<button type=button onclick="bb_add(this,'[s]','[/s]')" title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
+				<button type=button onclick="bb_add(this,'[sub]','[/sub]')" title="Subscript"><img src="/bbcode/icons/subscript.svg"></button>
+				<button type=button onclick="bb_add(this,'[sup]','[/sup]')" title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
+				<input type=file onchange="bb_upload(this,bb_uploaded)">
+				<button type=button onclick="bb_fileButtonClick(this)" title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
 `	;
 	if(save) {
 		html += `\
-				<button type=button save>save</button>
+				<button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button>
 `		;
 	}
 	if(cancel) {
 		html += `\
-				<button type=button cancel>cancel</button>
+				<button type=button cancel title="Cancel"><img src="/bbcode/icons/cancel.svg"></button>
 `		;
 	}
 	html += `\
-			</p>
+			</div>
 		</div>
 `	;
 	div.innerHTML = html;