annotate src/bbcode/bbcode.js @ 48:4e1a01db19ec

add lists
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 17 Nov 2022 00:11:44 -0700
parents 7ef9222474e2
children f225e82b2bf8
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
1 // https://fonts.google.com/icons
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
2
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
3 function upload(input,callback) {
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
4 let file = input.files[0];
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
5 input.value = null;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
6 let request = new XMLHttpRequest();
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
7 let url = 'https://upload.uploadcare.com/base/';
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
8 request.open( 'POST', url );
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
9 request.onload = function() {
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
10 if( request.status !== 200 ) {
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
11 let err = 'ajax failed: ' + request.status;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
12 if( request.responseText ) {
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
13 err += '\n' + request.responseText;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
14 document.write('<pre>'+request.responseText+'</pre>');
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
15 }
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
16 console.log(err);
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
17 ajax( '/error_log.js', 'err='+encodeURIComponent(err) );
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
18 return;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19 }
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 let response = JSON.parse(request.responseText);
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
21 let filename = file.name;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
22 let url = 'https://ucarecdn.com/' + response.file + '/' + filename;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
23 callback(input,url,filename);
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
24 };
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25 let formData = new FormData();
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
26 formData.append( 'UPLOADCARE_PUB_KEY', 'fe3d30f3088a50941d45' );
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
27 formData.append( 'file', file );
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
28 request.send(formData);
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
29 }
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
30
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
31 function bbcodeCreate(div,options) {
46
289718f121e4 use bbcode editor
Franklin Schmidt <fschmidt@gmail.com>
parents: 45
diff changeset
32 if( typeof(div) === 'string' ) {
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
33 div = document.querySelector(div);
46
289718f121e4 use bbcode editor
Franklin Schmidt <fschmidt@gmail.com>
parents: 45
diff changeset
34 if(!div) throw 'selector not found';
289718f121e4 use bbcode editor
Franklin Schmidt <fschmidt@gmail.com>
parents: 45
diff changeset
35 }
289718f121e4 use bbcode editor
Franklin Schmidt <fschmidt@gmail.com>
parents: 45
diff changeset
36 options = options || {};
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
37 let content = options.content || '';
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
38 let save = options.save;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
39 let cancel = options.cancel;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
40 let html = `\
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
41 <div bbcode>
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
42 <textarea name=bbcode>${content}</textarea>
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
43 <div buttons>
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
44 <button type=button bold title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
45 <button type=button italic title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
46 <button type=button underline title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
47 <button type=button strikethrough title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
48 <button type=button sub title="Subscript"><img src="/bbcode/icons/subscript.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
49 <button type=button sup title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
50 <button type=button ul title="Bullet list"><img src="/bbcode/icons/format_list_bulleted.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
51 <button type=button ol title="Numbered list"><img src="/bbcode/icons/format_list_numbered.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
52 <button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
53 <input type=file>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
54 <button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
55 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
56 if(save) {
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
57 html += `\
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
58 <button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button>
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
59 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
60 }
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
61 if(cancel) {
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
62 html += `\
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
63 <button type=button cancel title="Cancel"><img src="/bbcode/icons/cancel.svg"></button>
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
64 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
65 }
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
66 html += `\
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
67 </div>
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
68 </div>
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
69 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
70 div.innerHTML = html;
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
71
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
72 if(save)
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
73 div.querySelector('button[save]').onclick = save;
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
74 if(cancel)
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
75 div.querySelector('button[cancel]').onclick = cancel;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
76
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
77 let textarea = div.querySelector('textarea');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
78 function fixTextarea() {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
79 let height = textarea.scrollHeight;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
80 if( height > textarea.clientHeight ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
81 textarea.style.height = (height+2) + "px";
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
82 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
83 };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
84 textarea.oninput = fixTextarea;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
85 fixTextarea();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
86
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
87 let moreButton = div.querySelector('button[more]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
88 function more() {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
89 let button = moreButton;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
90 let checked = button.getAttribute('checked') !== null;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
91 let buttons = button.parentNode.querySelectorAll('button');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
92 if( checked ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
93 button.removeAttribute('checked');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
94 for( let b of buttons ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
95 if( b === button )
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
96 break;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
97 b.setAttribute('hidden','');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
98 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
99 } else {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
100 button.setAttribute('checked','');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
101 for( let b of buttons ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
102 if( b === button )
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
103 break;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
104 b.removeAttribute('hidden');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
105 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
106 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
107 };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
108 moreButton.onclick = more;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
109 more();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
110
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
111 function add(tag,openTag,closeTag) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
112 let button = div.querySelector('button['+tag+']');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
113 button.onclick = function() {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
114 let start = textarea.selectionStart;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
115 let end = textarea.selectionEnd;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
116 textarea.setRangeText(closeTag,end,end);
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
117 textarea.setRangeText(openTag,start,start);
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
118 let len = openTag.length;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
119 textarea.setSelectionRange(start+len,end+len);
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
120 fixTextarea();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
121 textarea.focus();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
122 };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
123 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
124 add('bold','[b]','[/b]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
125 add('italic','[i]','[/i]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
126 add('underline','[u]','[/u]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
127 add('strikethrough','[s]','[/s]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
128 add('sub','[sub]','[/sub]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
129 add('sup','[sup]','[/sup]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
130 add('ul','[list]\n[item]','[/item]\n[/list]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
131 add('ol','[list=1]\n[item]','[/item]\n[/list]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
132
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
133 let fileInput = div.querySelector('input[type="file"]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
134 div.querySelector('button[upload]').onclick = function(){ fileInput.click(); };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
135 function uploaded(input,url,filename) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
136 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
137 textarea.focus();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
138 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
139 fileInput.onchange = function() { upload(fileInput,uploaded); };
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
140 }