Mercurial Hosting > freedit

comparison src/bbcode/bbcode.js @ 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
comparison
equal deleted inserted replaced
50:0d99cec5142c 51:78b2d6995244
1 // https://fonts.google.com/icons 1 // https://fonts.google.com/icons
2
3 function ajax(url,postData,context) {
4 let request = new XMLHttpRequest();
5 let method = postData ? 'POST' : 'GET';
6 request.open( method, url );
7 if( postData )
8 request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
9 request.onload = function() {
10 if( request.status !== 200 ) {
11 window.console && console.log( 'ajax failed: ' + request.status );
12 if( request.responseText )
13 document.write('<pre>'+request.responseText+'</pre>');
14 return;
15 }
16 eval( request.responseText );
17 };
18 request.send(postData);
19 }
2 20
3 function upload(input,callback) { 21 function upload(input,callback) {
4 let file = input.files[0]; 22 let file = input.files[0];
5 input.value = null; 23 input.value = null;
6 let request = new XMLHttpRequest(); 24 let request = new XMLHttpRequest();
38 let save = options.save; 56 let save = options.save;
39 let cancel = options.cancel; 57 let cancel = options.cancel;
40 let html = `\ 58 let html = `\
41 <div bbcode_editor> 59 <div bbcode_editor>
42 <textarea name=bbcode>${content}</textarea> 60 <textarea name=bbcode>${content}</textarea>
61 <div preview from_bbcode></div>
43 <div buttons> 62 <div buttons>
44 <button type=button bold title="Bold"><img src="/bbcode/icons/format_bold.svg"></button> 63 <button type=button bold title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
45 <button type=button italic title="Italic"><img src="/bbcode/icons/format_italic.svg"></button> 64 <button type=button italic title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
46 <button type=button underline title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button> 65 <button type=button underline title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button>
47 <button type=button strikethrough title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button> 66 <button type=button strikethrough title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
52 <button type=button code_block title="Code block"><img src="/bbcode/icons/code_blocks.svg"></button> 71 <button type=button code_block title="Code block"><img src="/bbcode/icons/code_blocks.svg"></button>
53 <button type=button code_inline title="Inline code"><img src="/bbcode/icons/code.svg"></button> 72 <button type=button code_inline title="Inline code"><img src="/bbcode/icons/code.svg"></button>
54 <button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button> 73 <button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button>
55 <input type=file> 74 <input type=file>
56 <button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button> 75 <button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
76 <button type=button preview title="Preview"><img src="/bbcode/icons/preview.svg"></button>
57 ` ; 77 ` ;
58 if(save) { 78 if(save) {
59 html += `\ 79 html += `\
60 <button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button> 80 <button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button>
61 ` ; 81 ` ;
69 </div> 89 </div>
70 </div> 90 </div>
71 ` ; 91 ` ;
72 div.innerHTML = html; 92 div.innerHTML = html;
73 93
74 if(save) 94 let enabledInPreview = [];
75 div.querySelector('button[save]').onclick = save; 95
76 if(cancel) 96 if(save) {
77 div.querySelector('button[cancel]').onclick = cancel; 97 let button = div.querySelector('button[save]');
98 button.onclick = save;
99 enabledInPreview.push(button);
100 }
101 if(cancel) {
102 let button = div.querySelector('button[cancel]');
103 button.onclick = cancel;
104 enabledInPreview.push(button);
105 }
78 106
79 let textarea = div.querySelector('textarea'); 107 let textarea = div.querySelector('textarea');
80 function fixTextarea() { 108 function fixTextarea() {
81 let height = textarea.scrollHeight; 109 let height = textarea.scrollHeight;
82 if( height > textarea.clientHeight ) { 110 if( height > textarea.clientHeight ) {
107 } 135 }
108 } 136 }
109 }; 137 };
110 moreButton.onclick = more; 138 moreButton.onclick = more;
111 more(); 139 more();
140 enabledInPreview.push(moreButton);
141
142 let divPreview = div.querySelector('div[preview]');
143 function contextPreview(html) {
144 divPreview.innerHTML = html;
145 }
146 let previewButton = div.querySelector('button[preview]');
147 function preview() {
148 let button = previewButton;
149 let checked = button.getAttribute('checked') !== null;
150 let buttons = button.parentNode.querySelectorAll('button');
151 if( checked ) {
152 button.removeAttribute('checked');
153 for( let b of buttons ) {
154 b.disabled = false;
155 }
156 textarea.style.display = 'initial';
157 divPreview.style.display = 'none';
158 textarea.focus();
159 } else {
160 window.enabledInPreview = enabledInPreview;
161 button.setAttribute('checked','');
162 for( let b of buttons ) {
163 if( !enabledInPreview.includes(b) )
164 b.disabled = true;
165 }
166 textarea.style.display = 'none';
167 divPreview.style.display = 'block';
168 let url = '/bbcode/preview.js?text=' + encodeURIComponent(textarea.value);
169 ajax( url, null, {preview: contextPreview} );
170 }
171 }
172 previewButton.onclick = preview;
173 enabledInPreview.push(previewButton);
112 174
113 function add(tag,openTag,closeTag) { 175 function add(tag,openTag,closeTag) {
114 let button = div.querySelector('button['+tag+']'); 176 let button = div.querySelector('button['+tag+']');
115 button.onclick = function() { 177 button.onclick = function() {
116 let start = textarea.selectionStart; 178 let start = textarea.selectionStart;