Mercurial Hosting > freedit

changeset 45:2d4f00755092

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bcode editor work
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 13 Nov 2022 22:07:18 -0700
parents 96f0c3d65698
children 289718f121e4
files src/bbcode/Bbcode.luan src/bbcode/bbcode.css src/bbcode/bbcode.js src/bbcode/icons/cancel.svg src/bbcode/icons/file_upload.svg src/bbcode/icons/format_bold.svg src/bbcode/icons/format_italic.svg src/bbcode/icons/format_strikethrough.svg src/bbcode/icons/format_underlined.svg src/bbcode/icons/send.svg src/bbcode/icons/subscript.svg src/bbcode/icons/superscript.svg
diffstat 12 files changed, 61 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/src/bbcode/Bbcode.luan	Thu Nov 10 23:18:58 2022 -0700
+++ b/src/bbcode/Bbcode.luan	Sun Nov 13 22:07:18 2022 -0700
@@ -52,6 +52,10 @@
 	%><sup><% to_html(bbcode.contents,options) %></sup><%
 end
 
+function html.sub(bbcode,options)
+	%><sub><% to_html(bbcode.contents,options) %></sub><%
+end
+
 function html.brackets(bbcode,options)
 	%>[<% to_html(bbcode.contents,options) %>]<%
 end
--- a/src/bbcode/bbcode.css	Thu Nov 10 23:18:58 2022 -0700
+++ b/src/bbcode/bbcode.css	Sun Nov 13 22:07:18 2022 -0700
@@ -11,3 +11,19 @@
 div[bbcode] input[type="file"] {
 	display: none;
 }
+
+div[bbcode] button:hover {
+	cursor: pointer;
+}
+
+div[bbcode] div[buttons] {
+	display: flex;
+	justify-content: flex-end;
+}
+div[bbcode] div[buttons] button {
+	border: 0;
+	background-color: transparent;
+}
+div[bbcode] div[buttons] img {
+	height: 24px;
+}
--- 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;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/cancel.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m16.5 33.6 7.5-7.5 7.5 7.5 2.1-2.1-7.5-7.5 7.5-7.5-2.1-2.1-7.5 7.5-7.5-7.5-2.1 2.1 7.5 7.5-7.5 7.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/file_upload.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm11.5-7.65V13.8l-6 6-2.15-2.15L24 8l9.65 9.65-2.15 2.15-6-6v18.55Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/format_bold.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M14 36V8h11.4q3.3 0 5.725 2.1t2.425 5.3q0 1.9-1.05 3.5t-2.8 2.45v.3q2.15.7 3.475 2.5 1.325 1.8 1.325 4.05 0 3.4-2.625 5.6Q29.25 36 25.75 36Zm4.3-16.15h6.8q1.75 0 3.025-1.15t1.275-2.9q0-1.75-1.275-2.925Q26.85 11.7 25.1 11.7h-6.8Zm0 12.35h7.2q1.9 0 3.3-1.25t1.4-3.15q0-1.85-1.4-3.1t-3.3-1.25h-7.2Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/format_italic.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M10 40v-5h6.85l8.9-22H18V8h20v5h-6.85l-8.9 22H30v5Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/format_strikethrough.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M4 27.5v-3h40v3Zm17.5-6V13H10V8h28v5H26.5v8.5Zm0 18.5v-9.5h5V40Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/format_underlined.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M10 42v-3h28v3Zm14-8q-5.05 0-8.525-3.45Q12 27.1 12 22.1V6h4v16.2q0 3.3 2.3 5.55T24 30q3.4 0 5.7-2.25Q32 25.5 32 22.2V6h4v16.1q0 5-3.475 8.45Q29.05 34 24 34Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/send.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/subscript.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M38.5 40v-4.25q0-.7.4-1.1.4-.4 1.1-.4h4.5V31.5h-6V30h6q.7 0 1.1.4.4.4.4 1.1v2.75q0 .7-.4 1.1-.4.4-1.1.4H40v2.75h6V40Zm-26.75-4L21 21.45 12.4 8h4.3l6.75 10.65L30.2 8h4.3l-8.6 13.45L35.15 36H30.9l-7.45-11.7L16 36Z"/></svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/superscript.svg	Sun Nov 13 22:07:18 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M38.5 18v-4.25q0-.7.4-1.1.4-.4 1.1-.4h4.5V9.5h-6V8h6q.7 0 1.1.4.4.4.4 1.1v2.75q0 .7-.4 1.1-.4.4-1.1.4H40v2.75h6V18ZM11.75 40 21 25.45 12.4 12h4.3l6.75 10.65L30.2 12h4.3l-8.6 13.45L35.15 40H30.9l-7.45-11.7L16 40Z"/></svg>
\ No newline at end of file