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