Mercurial Hosting > freedit
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+']');