annotate src/bbcode/bbcode.js @ 50:0d99cec5142c

minor
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 17 Nov 2022 22:00:59 -0700
parents f225e82b2bf8
children 78b2d6995244
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 = `\
50
Franklin Schmidt <fschmidt@gmail.com>
parents: 49
diff changeset
41 <div bbcode_editor>
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>
49
f225e82b2bf8 add code bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents: 48
diff changeset
52 <button type=button code_block title="Code block"><img src="/bbcode/icons/code_blocks.svg"></button>
f225e82b2bf8 add code bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents: 48
diff changeset
53 <button type=button code_inline title="Inline code"><img src="/bbcode/icons/code.svg"></button>
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
54 <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
55 <input type=file>
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
56 <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
57 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
58 if(save) {
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
59 html += `\
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
60 <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
61 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
62 }
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
63 if(cancel) {
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
64 html += `\
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
65 <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
66 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
67 }
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
68 html += `\
45
2d4f00755092 bcode editor work
Franklin Schmidt <fschmidt@gmail.com>
parents: 44
diff changeset
69 </div>
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
70 </div>
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
71 ` ;
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
72 div.innerHTML = html;
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
73
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
74 if(save)
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
75 div.querySelector('button[save]').onclick = save;
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
76 if(cancel)
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
77 div.querySelector('button[cancel]').onclick = cancel;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
78
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
79 let textarea = div.querySelector('textarea');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
80 function fixTextarea() {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
81 let height = textarea.scrollHeight;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
82 if( height > textarea.clientHeight ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
83 textarea.style.height = (height+2) + "px";
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
84 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
85 };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
86 textarea.oninput = fixTextarea;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
87 fixTextarea();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
88
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
89 let moreButton = div.querySelector('button[more]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
90 function more() {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
91 let button = moreButton;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
92 let checked = button.getAttribute('checked') !== null;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
93 let buttons = button.parentNode.querySelectorAll('button');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
94 if( checked ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
95 button.removeAttribute('checked');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
96 for( let b of buttons ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
97 if( b === button )
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
98 break;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
99 b.setAttribute('hidden','');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
100 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
101 } else {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
102 button.setAttribute('checked','');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
103 for( let b of buttons ) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
104 if( b === button )
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
105 break;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
106 b.removeAttribute('hidden');
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 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
109 };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
110 moreButton.onclick = more;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
111 more();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
112
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
113 function add(tag,openTag,closeTag) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
114 let button = div.querySelector('button['+tag+']');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
115 button.onclick = function() {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
116 let start = textarea.selectionStart;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
117 let end = textarea.selectionEnd;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
118 textarea.setRangeText(closeTag,end,end);
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
119 textarea.setRangeText(openTag,start,start);
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
120 let len = openTag.length;
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
121 textarea.setSelectionRange(start+len,end+len);
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
122 fixTextarea();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
123 textarea.focus();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
124 };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
125 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
126 add('bold','[b]','[/b]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
127 add('italic','[i]','[/i]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
128 add('underline','[u]','[/u]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
129 add('strikethrough','[s]','[/s]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
130 add('sub','[sub]','[/sub]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
131 add('sup','[sup]','[/sup]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
132 add('ul','[list]\n[item]','[/item]\n[/list]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
133 add('ol','[list=1]\n[item]','[/item]\n[/list]');
49
f225e82b2bf8 add code bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents: 48
diff changeset
134 add('code_block','[code]','[/code]');
f225e82b2bf8 add code bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents: 48
diff changeset
135 add('code_inline','[code=inline]','[/code]');
48
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
136
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
137 let fileInput = div.querySelector('input[type="file"]');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
138 div.querySelector('button[upload]').onclick = function(){ fileInput.click(); };
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
139 function uploaded(input,url,filename) {
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
140 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
141 textarea.focus();
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
142 }
4e1a01db19ec add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 47
diff changeset
143 fileInput.onchange = function() { upload(fileInput,uploaded); };
44
96f0c3d65698 add /bbcode
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
144 }