Mercurial Hosting > freedit

changeset 51:78b2d6995244

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add preview
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 22 Nov 2022 22:57:43 -0700
parents 0d99cec5142c
children 9f8ebc757814
files src/bbcode/bbcode.css src/bbcode/bbcode.js src/bbcode/icons/preview.svg src/bbcode/preview.js.luan src/bbcode/test.html src/bbcode/test.js.luan src/lib/Shared.luan src/new_thread.html.luan src/site.js src/thread.html.luan
diffstat 10 files changed, 105 insertions(+), 80 deletions(-) [+]
line wrap: on
line diff
diff -r 0d99cec5142c -r 78b2d6995244 src/bbcode/bbcode.css
--- a/src/bbcode/bbcode.css	Thu Nov 17 22:00:59 2022 -0700
+++ b/src/bbcode/bbcode.css	Tue Nov 22 22:57:43 2022 -0700
@@ -20,20 +20,31 @@
 	display: flex;
 	justify-content: flex-end;
 }
-div[bbcode_editor] div[buttons] button {
+div[bbcode_editor] button {
 	border: 0;
 	background-color: transparent;
 	border-radius: 4px;
 }
-div[bbcode_editor] div[buttons] button:hover {
+div[bbcode_editor] button:hover {
 	background-color: lightgrey;
 }
-div[bbcode_editor] div[buttons] button[checked] {
+div[bbcode_editor] button[checked] {
 	background-color: lightblue;
 }
+div[bbcode_editor] button:disabled {
+	cursor: not-allowed;
+	background-color: initial;
+	opacity: 0.3;
+}
 div[bbcode_editor] div[buttons] img {
 	height: 24px;
 }
+div[bbcode_editor] div[preview] {
+	display: none;
+	border: solid #888888;
+	padding: 7px;
+	margin-bottom: 4px;
+}
 
 
 div[from_bbcode] {
diff -r 0d99cec5142c -r 78b2d6995244 src/bbcode/bbcode.js
--- a/src/bbcode/bbcode.js	Thu Nov 17 22:00:59 2022 -0700
+++ b/src/bbcode/bbcode.js	Tue Nov 22 22:57:43 2022 -0700
@@ -1,5 +1,23 @@
 // https://fonts.google.com/icons
 
+function ajax(url,postData,context) {
+	let request = new XMLHttpRequest();
+	let method = postData ? 'POST' : 'GET';
+	request.open( method, url );
+	if( postData )
+		request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
+	request.onload = function() {
+		if( request.status !== 200 ) {
+			window.console && console.log( 'ajax failed: ' + request.status );
+			if( request.responseText )
+				document.write('<pre>'+request.responseText+'</pre>');
+			return;
+		}
+		eval( request.responseText );
+	};
+	request.send(postData);
+}
+
 function upload(input,callback) {
 	let file = input.files[0];
 	input.value = null;
@@ -40,6 +58,7 @@
 	let html = `\
 		<div bbcode_editor>
 			<textarea name=bbcode>${content}</textarea>
+			<div preview from_bbcode></div>
 			<div buttons>
 				<button type=button bold title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
 				<button type=button italic title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
@@ -54,6 +73,7 @@
 				<button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button>
 				<input type=file>
 				<button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
+				<button type=button preview title="Preview"><img src="/bbcode/icons/preview.svg"></button>
 `	;
 	if(save) {
 		html += `\
@@ -71,10 +91,18 @@
 `	;
 	div.innerHTML = html;
 
-	if(save)
-		div.querySelector('button[save]').onclick = save;
-	if(cancel)
-		div.querySelector('button[cancel]').onclick = cancel;
+	let enabledInPreview = [];
+
+	if(save) {
+		let button = div.querySelector('button[save]');
+		button.onclick = save;
+		enabledInPreview.push(button);
+	}
+	if(cancel) {
+		let button = div.querySelector('button[cancel]');
+		button.onclick = cancel;
+		enabledInPreview.push(button);
+	}
 
 	let textarea = div.querySelector('textarea');
 	function fixTextarea() {
@@ -109,6 +137,40 @@
 	};
 	moreButton.onclick = more;
 	more();
+	enabledInPreview.push(moreButton);
+
+	let divPreview = div.querySelector('div[preview]');
+	function contextPreview(html) {
+		divPreview.innerHTML = html;
+	}
+	let previewButton = div.querySelector('button[preview]');
+	function preview() {
+		let button = previewButton;
+		let checked = button.getAttribute('checked') !== null;
+		let buttons = button.parentNode.querySelectorAll('button');
+		if( checked ) {
+			button.removeAttribute('checked');
+			for( let b of buttons ) {
+					b.disabled = false;
+			}
+			textarea.style.display = 'initial';
+			divPreview.style.display = 'none';
+			textarea.focus();
+		} else {
+			window.enabledInPreview = enabledInPreview;
+			button.setAttribute('checked','');
+			for( let b of buttons ) {
+				if( !enabledInPreview.includes(b) )
+					b.disabled = true;
+			}
+			textarea.style.display = 'none';
+			divPreview.style.display = 'block';
+			let url = '/bbcode/preview.js?text=' + encodeURIComponent(textarea.value);
+			ajax( url, null, {preview: contextPreview} );
+		}
+	}
+	previewButton.onclick = preview;
+	enabledInPreview.push(previewButton);
 
 	function add(tag,openTag,closeTag) {
 		let button = div.querySelector('button['+tag+']');
diff -r 0d99cec5142c -r 78b2d6995244 src/bbcode/icons/preview.svg
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/preview.svg	Tue Nov 22 22:57:43 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M9 42q-1.25 0-2.125-.875T6 39V9q0-1.25.875-2.125T9 6h30q1.25 0 2.125.875T42 9v30q0 1.25-.875 2.125T39 42Zm0-3h30V13H9v26Zm15-5.25q-4 0-7.15-2.15-3.15-2.15-4.6-5.6 1.45-3.45 4.6-5.6Q20 18.25 24 18.25t7.15 2.15q3.15 2.15 4.6 5.6-1.45 3.45-4.6 5.6Q28 33.75 24 33.75Zm0-2.5q2.85 0 5.25-1.4T33 26q-1.35-2.45-3.75-3.85T24 20.75q-2.85 0-5.25 1.4T15 26q1.35 2.45 3.75 3.85t5.25 1.4Zm0-2.75q-1.05 0-1.775-.725Q21.5 27.05 21.5 26q0-1.05.725-1.775Q22.95 23.5 24 23.5q1.05 0 1.775.725.725.725.725 1.775 0 1.05-.725 1.775-.725.725-1.775.725Z"/></svg>
\ No newline at end of file
diff -r 0d99cec5142c -r 78b2d6995244 src/bbcode/preview.js.luan
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/preview.js.luan	Tue Nov 22 22:57:43 2022 -0700
@@ -0,0 +1,19 @@
+local Luan = require "luan:Luan.luan"
+local error = Luan.error
+local Parsers = require "luan:Parsers.luan"
+local json_string = Parsers.json_string or error()
+local Io = require "luan:Io.luan"
+local output_of = Io.output_of or error()
+local Http = require "luan:http/Http.luan"
+local Bbcode = require "site:/bbcode/Bbcode.luan"
+local bbcode_to_html = Bbcode.to_html or error()
+
+
+return function()
+	local text = Http.request.parameters.text or error()
+	local html = output_of(function() bbcode_to_html(text) end)
+	Io.stdout = Http.response.text_writer()
+%>
+	context.preview(<%= json_string(html) %>);
+<%
+end
diff -r 0d99cec5142c -r 78b2d6995244 src/bbcode/test.html
--- a/src/bbcode/test.html	Thu Nov 17 22:00:59 2022 -0700
+++ b/src/bbcode/test.html	Tue Nov 22 22:57:43 2022 -0700
@@ -6,43 +6,13 @@
 			@import "bbcode.css";
 		</style>
 		<script src="bbcode.js"></script>
-		<script>
-			// from /site.js
-			function ajax(url,postData) {
-				let request = new XMLHttpRequest();
-				let method = postData ? 'POST' : 'GET';
-				request.open( method, url );
-				if( postData )
-					request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
-				request.onload = function() {
-					if( request.status !== 200 ) {
-						window.console && console.log( 'ajax failed: ' + request.status );
-						if( request.responseText )
-							document.write('<pre>'+request.responseText+'</pre>');
-						return;
-					}
-					eval( request.responseText );
-				};
-				request.send(postData);
-			}
-
-			function save(event) {
-				let text = document.querySelector('textarea').value;
-				ajax( 'test.js?text=' + encodeURIComponent(text) );
-			}
-
-			function init() {
-				bbcodeCreate('p[edit]',{
-					save: save
-				});
-			}
-		</script>
 	</head>
-	<body onload='init()'>
+	<body>
 		<p>top</p>
 		<p edit></p>
-		<p>result:</p>
-		<p result></p>
 		<p>bottom</p>
 	</body>
+	<script>
+		bbcodeCreate('p[edit]');
+	</script>
 </html>
diff -r 0d99cec5142c -r 78b2d6995244 src/bbcode/test.js.luan
--- a/src/bbcode/test.js.luan	Thu Nov 17 22:00:59 2022 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,19 +0,0 @@
-local Luan = require "luan:Luan.luan"
-local error = Luan.error
-local Parsers = require "luan:Parsers.luan"
-local json_string = Parsers.json_string or error()
-local Io = require "luan:Io.luan"
-local output_of = Io.output_of or error()
-local Http = require "luan:http/Http.luan"
-local Bbcode = require "site:/bbcode/Bbcode.luan"
-local bbcode_to_html = Bbcode.to_html or error()
-
-
-return function()
-	local text = Http.request.parameters.text or error()
-	local html = output_of(function() bbcode_to_html(text) end)
-	Io.stdout = Http.response.text_writer()
-%>
-	document.querySelector('p[result]').innerHTML = <%= json_string(html) %>;
-<%
-end
diff -r 0d99cec5142c -r 78b2d6995244 src/lib/Shared.luan
--- a/src/lib/Shared.luan	Thu Nov 17 22:00:59 2022 -0700
+++ b/src/lib/Shared.luan	Tue Nov 22 22:57:43 2022 -0700
@@ -27,6 +27,7 @@
 			@import "/site.css";
 		</style>
 		<script src="/site.js"></script>
+		<script src="/bbcode/bbcode.js"></script>
 <%
 end
 
diff -r 0d99cec5142c -r 78b2d6995244 src/new_thread.html.luan
--- a/src/new_thread.html.luan	Thu Nov 17 22:00:59 2022 -0700
+++ b/src/new_thread.html.luan	Tue Nov 22 22:57:43 2022 -0700
@@ -32,7 +32,6 @@
 		<style>
 			@import "/bbcode/bbcode.css";
 		</style>
-		<script src="/bbcode/bbcode.js"></script>
 	<body>
 <%		header() %>
 		<div content>
diff -r 0d99cec5142c -r 78b2d6995244 src/site.js
--- a/src/site.js	Thu Nov 17 22:00:59 2022 -0700
+++ b/src/site.js	Tue Nov 22 22:57:43 2022 -0700
@@ -1,21 +1,3 @@
-
-function ajax(url,postData) {
-	let request = new XMLHttpRequest();
-	let method = postData ? 'POST' : 'GET';
-	request.open( method, url );
-	if( postData )
-		request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
-	request.onload = function() {
-		if( request.status !== 200 ) {
-			window.console && console.log( 'ajax failed: ' + request.status );
-			if( request.responseText )
-				document.write('<pre>'+request.responseText+'</pre>');
-			return;
-		}
-		eval( request.responseText );
-	};
-	request.send(postData);
-}
 
 window.onerror = function(msg, url, line, col, error) {
 	if (!url)
diff -r 0d99cec5142c -r 78b2d6995244 src/thread.html.luan
--- a/src/thread.html.luan	Thu Nov 17 22:00:59 2022 -0700
+++ b/src/thread.html.luan	Tue Nov 22 22:57:43 2022 -0700
@@ -73,7 +73,6 @@
 				display: initial;
 			}
 		</style>
-		<script src="/bbcode/bbcode.js"></script>
 		<script>
 			function getPostDiv(node) {
 				do {