45
|
1 // https://fonts.google.com/icons
|
|
2
|
|
3 function bb_fixTextarea(textarea) {
|
44
|
4 let height = textarea.scrollHeight;
|
|
5 if( height > textarea.clientHeight ) {
|
|
6 textarea.style.height = (height+2) + "px";
|
|
7 }
|
|
8 }
|
|
9
|
45
|
10 function bb_fileButtonClick(button) {
|
44
|
11 button.parentNode.querySelector('input[type="file"]').click();
|
|
12 }
|
|
13
|
45
|
14 function bb_upload(input,callback) {
|
44
|
15 let file = input.files[0];
|
|
16 input.value = null;
|
|
17 let request = new XMLHttpRequest();
|
|
18 let url = 'https://upload.uploadcare.com/base/';
|
|
19 request.open( 'POST', url );
|
|
20 request.onload = function() {
|
|
21 if( request.status !== 200 ) {
|
|
22 let err = 'ajax failed: ' + request.status;
|
|
23 if( request.responseText ) {
|
|
24 err += '\n' + request.responseText;
|
|
25 document.write('<pre>'+request.responseText+'</pre>');
|
|
26 }
|
|
27 console.log(err);
|
|
28 ajax( '/error_log.js', 'err='+encodeURIComponent(err) );
|
|
29 return;
|
|
30 }
|
|
31 let response = JSON.parse(request.responseText);
|
|
32 let filename = file.name;
|
|
33 let url = 'https://ucarecdn.com/' + response.file + '/' + filename;
|
|
34 callback(input,url,filename);
|
|
35 };
|
|
36 let formData = new FormData();
|
|
37 formData.append( 'UPLOADCARE_PUB_KEY', 'fe3d30f3088a50941d45' );
|
|
38 formData.append( 'file', file );
|
|
39 request.send(formData);
|
|
40 }
|
|
41
|
|
42 function getBbcodeDiv(node) {
|
|
43 do {
|
|
44 //console.log(node);
|
|
45 if( node.getAttribute('bbcode') !== null )
|
|
46 return node;
|
|
47 } while( node = node.parentNode );
|
|
48 }
|
|
49
|
45
|
50 function bb_uploaded(input,url,filename) {
|
44
|
51 let div = getBbcodeDiv(input);
|
|
52 let textarea = div.querySelector('textarea');
|
45
|
53 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
|
44
|
54 textarea.focus();
|
45
|
55 }
|
|
56
|
|
57 function bb_add(input,openTag,closeTag) {
|
|
58 let div = getBbcodeDiv(input);
|
|
59 let textarea = div.querySelector('textarea');
|
|
60 let start = textarea.selectionStart;
|
|
61 let end = textarea.selectionEnd;
|
|
62 textarea.setRangeText(closeTag,end,end);
|
|
63 textarea.setRangeText(openTag,start,start);
|
|
64 let len = openTag.length;
|
|
65 textarea.setSelectionRange(start+len,end+len);
|
|
66 textarea.focus();
|
44
|
67 }
|
|
68
|
|
69 function bbcodeCreate(div,options) {
|
|
70 if( typeof(div) === 'string' )
|
|
71 div = document.querySelector(div);
|
|
72 let content = options.content || '';
|
|
73 let save = options.save;
|
|
74 let cancel = options.cancel;
|
|
75 let html = `\
|
|
76 <div bbcode>
|
45
|
77 <textarea oninput="bb_fixTextarea(this)"></textarea>
|
|
78 <div buttons>
|
|
79 <button type=button onclick="bb_add(this,'[b]','[/b]')" title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
|
|
80 <button type=button onclick="bb_add(this,'[i]','[/i]')" title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
|
|
81 <button type=button onclick="bb_add(this,'[u]','[/u]')" title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button>
|
|
82 <button type=button onclick="bb_add(this,'[s]','[/s]')" title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
|
|
83 <button type=button onclick="bb_add(this,'[sub]','[/sub]')" title="Subscript"><img src="/bbcode/icons/subscript.svg"></button>
|
|
84 <button type=button onclick="bb_add(this,'[sup]','[/sup]')" title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
|
|
85 <input type=file onchange="bb_upload(this,bb_uploaded)">
|
|
86 <button type=button onclick="bb_fileButtonClick(this)" title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
|
44
|
87 ` ;
|
|
88 if(save) {
|
|
89 html += `\
|
45
|
90 <button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button>
|
44
|
91 ` ;
|
|
92 }
|
|
93 if(cancel) {
|
|
94 html += `\
|
45
|
95 <button type=button cancel title="Cancel"><img src="/bbcode/icons/cancel.svg"></button>
|
44
|
96 ` ;
|
|
97 }
|
|
98 html += `\
|
45
|
99 </div>
|
44
|
100 </div>
|
|
101 ` ;
|
|
102 div.innerHTML = html;
|
|
103 if(save)
|
|
104 div.querySelector('button[save]').addEventListener('click',save);
|
|
105 if(cancel)
|
|
106 div.querySelector('button[cancel]').addEventListener('click',cancel);
|
|
107 }
|