comparison src/bbcode/bbcode.js @ 45:2d4f00755092

bcode editor work
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 13 Nov 2022 22:07:18 -0700
parents 96f0c3d65698
children 289718f121e4
comparison
equal deleted inserted replaced
44:96f0c3d65698 45:2d4f00755092
1 function fixTextarea(textarea) { 1 // https://fonts.google.com/icons
2
3 function bb_fixTextarea(textarea) {
2 let height = textarea.scrollHeight; 4 let height = textarea.scrollHeight;
3 if( height > textarea.clientHeight ) { 5 if( height > textarea.clientHeight ) {
4 textarea.style.height = (height+2) + "px"; 6 textarea.style.height = (height+2) + "px";
5 } 7 }
6 } 8 }
7 9
8 function fileButtonClick(button) { 10 function bb_fileButtonClick(button) {
9 button.parentNode.querySelector('input[type="file"]').click(); 11 button.parentNode.querySelector('input[type="file"]').click();
10 } 12 }
11 13
12 function upload(input,callback) { 14 function bb_upload(input,callback) {
13 let file = input.files[0]; 15 let file = input.files[0];
14 input.value = null; 16 input.value = null;
15 let request = new XMLHttpRequest(); 17 let request = new XMLHttpRequest();
16 let url = 'https://upload.uploadcare.com/base/'; 18 let url = 'https://upload.uploadcare.com/base/';
17 request.open( 'POST', url ); 19 request.open( 'POST', url );
43 if( node.getAttribute('bbcode') !== null ) 45 if( node.getAttribute('bbcode') !== null )
44 return node; 46 return node;
45 } while( node = node.parentNode ); 47 } while( node = node.parentNode );
46 } 48 }
47 49
48 function uploaded(input,url,filename) { 50 function bb_uploaded(input,url,filename) {
49 let div = getBbcodeDiv(input); 51 let div = getBbcodeDiv(input);
50 let textarea = div.querySelector('textarea'); 52 let textarea = div.querySelector('textarea');
53 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
51 textarea.focus(); 54 textarea.focus();
52 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select'); 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();
53 } 67 }
54 68
55 function bbcodeCreate(div,options) { 69 function bbcodeCreate(div,options) {
56 if( typeof(div) === 'string' ) 70 if( typeof(div) === 'string' )
57 div = document.querySelector(div); 71 div = document.querySelector(div);
58 let content = options.content || ''; 72 let content = options.content || '';
59 let save = options.save; 73 let save = options.save;
60 let cancel = options.cancel; 74 let cancel = options.cancel;
61 let html = `\ 75 let html = `\
62 <div bbcode> 76 <div bbcode>
63 <textarea oninput="fixTextarea(this)"></textarea> 77 <textarea oninput="bb_fixTextarea(this)"></textarea>
64 <p> 78 <div buttons>
65 <input type=file onchange="upload(this,uploaded)"> 79 <button type=button onclick="bb_add(this,'[b]','[/b]')" title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
66 <button type=button onclick="fileButtonClick(this)">Upload File</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>
67 ` ; 87 ` ;
68 if(save) { 88 if(save) {
69 html += `\ 89 html += `\
70 <button type=button save>save</button> 90 <button type=button save title="Send message"><img src="/bbcode/icons/send.svg"></button>
71 ` ; 91 ` ;
72 } 92 }
73 if(cancel) { 93 if(cancel) {
74 html += `\ 94 html += `\
75 <button type=button cancel>cancel</button> 95 <button type=button cancel title="Cancel"><img src="/bbcode/icons/cancel.svg"></button>
76 ` ; 96 ` ;
77 } 97 }
78 html += `\ 98 html += `\
79 </p> 99 </div>
80 </div> 100 </div>
81 ` ; 101 ` ;
82 div.innerHTML = html; 102 div.innerHTML = html;
83 if(save) 103 if(save)
84 div.querySelector('button[save]').addEventListener('click',save); 104 div.querySelector('button[save]').addEventListener('click',save);