|
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 = `\
|
|
|
41 <div bbcode>
|
|
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>
|
|
|
52 <button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button>
|
|
|
53 <input type=file>
|
|
|
54 <button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
|
|
44
|
55 ` ;
|
|
|
56 if(save) {
|
|
|
57 html += `\
|
|
45
|
58 <button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button>
|
|
44
|
59 ` ;
|
|
|
60 }
|
|
|
61 if(cancel) {
|
|
|
62 html += `\
|
|
45
|
63 <button type=button cancel title="Cancel"><img src="/bbcode/icons/cancel.svg"></button>
|
|
44
|
64 ` ;
|
|
|
65 }
|
|
|
66 html += `\
|
|
45
|
67 </div>
|
|
44
|
68 </div>
|
|
|
69 ` ;
|
|
|
70 div.innerHTML = html;
|
|
48
|
71
|
|
44
|
72 if(save)
|
|
48
|
73 div.querySelector('button[save]').onclick = save;
|
|
44
|
74 if(cancel)
|
|
48
|
75 div.querySelector('button[cancel]').onclick = cancel;
|
|
|
76
|
|
|
77 let textarea = div.querySelector('textarea');
|
|
|
78 function fixTextarea() {
|
|
|
79 let height = textarea.scrollHeight;
|
|
|
80 if( height > textarea.clientHeight ) {
|
|
|
81 textarea.style.height = (height+2) + "px";
|
|
|
82 }
|
|
|
83 };
|
|
|
84 textarea.oninput = fixTextarea;
|
|
|
85 fixTextarea();
|
|
|
86
|
|
|
87 let moreButton = div.querySelector('button[more]');
|
|
|
88 function more() {
|
|
|
89 let button = moreButton;
|
|
|
90 let checked = button.getAttribute('checked') !== null;
|
|
|
91 let buttons = button.parentNode.querySelectorAll('button');
|
|
|
92 if( checked ) {
|
|
|
93 button.removeAttribute('checked');
|
|
|
94 for( let b of buttons ) {
|
|
|
95 if( b === button )
|
|
|
96 break;
|
|
|
97 b.setAttribute('hidden','');
|
|
|
98 }
|
|
|
99 } else {
|
|
|
100 button.setAttribute('checked','');
|
|
|
101 for( let b of buttons ) {
|
|
|
102 if( b === button )
|
|
|
103 break;
|
|
|
104 b.removeAttribute('hidden');
|
|
|
105 }
|
|
|
106 }
|
|
|
107 };
|
|
|
108 moreButton.onclick = more;
|
|
|
109 more();
|
|
|
110
|
|
|
111 function add(tag,openTag,closeTag) {
|
|
|
112 let button = div.querySelector('button['+tag+']');
|
|
|
113 button.onclick = function() {
|
|
|
114 let start = textarea.selectionStart;
|
|
|
115 let end = textarea.selectionEnd;
|
|
|
116 textarea.setRangeText(closeTag,end,end);
|
|
|
117 textarea.setRangeText(openTag,start,start);
|
|
|
118 let len = openTag.length;
|
|
|
119 textarea.setSelectionRange(start+len,end+len);
|
|
|
120 fixTextarea();
|
|
|
121 textarea.focus();
|
|
|
122 };
|
|
|
123 }
|
|
|
124 add('bold','[b]','[/b]');
|
|
|
125 add('italic','[i]','[/i]');
|
|
|
126 add('underline','[u]','[/u]');
|
|
|
127 add('strikethrough','[s]','[/s]');
|
|
|
128 add('sub','[sub]','[/sub]');
|
|
|
129 add('sup','[sup]','[/sup]');
|
|
|
130 add('ul','[list]\n[item]','[/item]\n[/list]');
|
|
|
131 add('ol','[list=1]\n[item]','[/item]\n[/list]');
|
|
|
132
|
|
|
133 let fileInput = div.querySelector('input[type="file"]');
|
|
|
134 div.querySelector('button[upload]').onclick = function(){ fileInput.click(); };
|
|
|
135 function uploaded(input,url,filename) {
|
|
|
136 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
|
|
|
137 textarea.focus();
|
|
|
138 }
|
|
|
139 fileInput.onchange = function() { upload(fileInput,uploaded); };
|
|
44
|
140 }
|
