diff src/bbcode/bbcode.js @ 51:78b2d6995244

add preview
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 22 Nov 2022 22:57:43 -0700
parents 0d99cec5142c
children 9f8ebc757814
line wrap: on
line diff
--- 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+']');