Mercurial Hosting > freedit

comparison src/bbcode/bbcode.js @ 52:9f8ebc757814

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add convert urls
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 23 Nov 2022 23:29:16 -0700
parents 78b2d6995244
children cac477dd1f82
comparison
equal deleted inserted replaced
51:78b2d6995244 52:9f8ebc757814
68 <button type=button sup title="Superscript"><img src="/bbcode/icons/superscript.svg"></button> 68 <button type=button sup title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
69 <button type=button ul title="Bullet list"><img src="/bbcode/icons/format_list_bulleted.svg"></button> 69 <button type=button ul title="Bullet list"><img src="/bbcode/icons/format_list_bulleted.svg"></button>
70 <button type=button ol title="Numbered list"><img src="/bbcode/icons/format_list_numbered.svg"></button> 70 <button type=button ol title="Numbered list"><img src="/bbcode/icons/format_list_numbered.svg"></button>
71 <button type=button code_block title="Code block"><img src="/bbcode/icons/code_blocks.svg"></button> 71 <button type=button code_block title="Code block"><img src="/bbcode/icons/code_blocks.svg"></button>
72 <button type=button code_inline title="Inline code"><img src="/bbcode/icons/code.svg"></button> 72 <button type=button code_inline title="Inline code"><img src="/bbcode/icons/code.svg"></button>
73 <button type=button convert_urls checked title="Convert URLs"><img src="/bbcode/icons/media_link.svg"></button>
74 <input type=hidden name=convert_urls value=true>
73 <button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button> 75 <button type=button more checked title="More..."><img src="/bbcode/icons/more_horiz.svg"></button>
74 <input type=file> 76 <input type=file>
75 <button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button> 77 <button type=button upload title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
76 <button type=button preview title="Preview"><img src="/bbcode/icons/preview.svg"></button> 78 <button type=button preview title="Preview"><img src="/bbcode/icons/preview.svg"></button>
77 ` ; 79 ` ;
90 </div> 92 </div>
91 ` ; 93 ` ;
92 div.innerHTML = html; 94 div.innerHTML = html;
93 95
94 let enabledInPreview = []; 96 let enabledInPreview = [];
97 let convertUrls = true;
95 98
96 if(save) { 99 if(save) {
97 let button = div.querySelector('button[save]'); 100 let button = div.querySelector('button[save]');
98 button.onclick = save; 101 button.onclick = function(event) {
102 event.convertUrls = convertUrls;
103 save(event);
104 };
99 enabledInPreview.push(button); 105 enabledInPreview.push(button);
100 } 106 }
101 if(cancel) { 107 if(cancel) {
102 let button = div.querySelector('button[cancel]'); 108 let button = div.querySelector('button[cancel]');
103 button.onclick = cancel; 109 button.onclick = cancel;
112 } 118 }
113 }; 119 };
114 textarea.oninput = fixTextarea; 120 textarea.oninput = fixTextarea;
115 fixTextarea(); 121 fixTextarea();
116 122
123 function toggle(button) {
124 let checked = button.getAttribute('checked') !== null;
125 checked = !checked; // toggle
126 if( checked ) {
127 button.setAttribute('checked','');
128 } else {
129 button.removeAttribute('checked');
130 }
131 return checked;
132 }
133
117 let moreButton = div.querySelector('button[more]'); 134 let moreButton = div.querySelector('button[more]');
118 function more() { 135 function more() {
119 let button = moreButton; 136 let checked = toggle(moreButton);
120 let checked = button.getAttribute('checked') !== null; 137 let buttons = moreButton.parentNode.querySelectorAll('button');
121 let buttons = button.parentNode.querySelectorAll('button');
122 if( checked ) { 138 if( checked ) {
123 button.removeAttribute('checked'); 139 for( let b of buttons ) {
124 for( let b of buttons ) { 140 if( b === moreButton )
125 if( b === button ) 141 break;
142 b.removeAttribute('hidden');
143 }
144 } else {
145 for( let b of buttons ) {
146 if( b === moreButton )
126 break; 147 break;
127 b.setAttribute('hidden',''); 148 b.setAttribute('hidden','');
128 }
129 } else {
130 button.setAttribute('checked','');
131 for( let b of buttons ) {
132 if( b === button )
133 break;
134 b.removeAttribute('hidden');
135 } 149 }
136 } 150 }
137 }; 151 };
138 moreButton.onclick = more; 152 moreButton.onclick = more;
139 more(); 153 more();
140 enabledInPreview.push(moreButton); 154 enabledInPreview.push(moreButton);
141 155
142 let divPreview = div.querySelector('div[preview]'); 156 let divPreview = div.querySelector('div[preview]');
143 function contextPreview(html) { 157 function contextPreview(bbcode,html) {
158 textarea.value = bbcode;
144 divPreview.innerHTML = html; 159 divPreview.innerHTML = html;
145 } 160 }
146 let previewButton = div.querySelector('button[preview]'); 161 let previewButton = div.querySelector('button[preview]');
147 function preview() { 162 function preview() {
148 let button = previewButton; 163 let checked = toggle(previewButton);
149 let checked = button.getAttribute('checked') !== null; 164 let buttons = previewButton.parentNode.querySelectorAll('button');
150 let buttons = button.parentNode.querySelectorAll('button');
151 if( checked ) { 165 if( checked ) {
152 button.removeAttribute('checked'); 166 for( let b of buttons ) {
167 if( !enabledInPreview.includes(b) )
168 b.disabled = true;
169 }
170 textarea.style.display = 'none';
171 divPreview.style.display = 'block';
172 let url = '/bbcode/preview.js?text=' + encodeURIComponent(textarea.value) + '&convert_urls=' + convertUrls;
173 ajax( url, null, {preview: contextPreview} );
174 } else {
153 for( let b of buttons ) { 175 for( let b of buttons ) {
154 b.disabled = false; 176 b.disabled = false;
155 } 177 }
156 textarea.style.display = 'initial'; 178 textarea.style.display = 'initial';
157 divPreview.style.display = 'none'; 179 divPreview.style.display = 'none';
158 textarea.focus(); 180 textarea.focus();
159 } else {
160 window.enabledInPreview = enabledInPreview;
161 button.setAttribute('checked','');
162 for( let b of buttons ) {
163 if( !enabledInPreview.includes(b) )
164 b.disabled = true;
165 }
166 textarea.style.display = 'none';
167 divPreview.style.display = 'block';
168 let url = '/bbcode/preview.js?text=' + encodeURIComponent(textarea.value);
169 ajax( url, null, {preview: contextPreview} );
170 } 181 }
171 } 182 }
172 previewButton.onclick = preview; 183 previewButton.onclick = preview;
173 enabledInPreview.push(previewButton); 184 enabledInPreview.push(previewButton);
185
186 let convertUrlsButton = div.querySelector('button[convert_urls]');
187 let convertUrlsInput = div.querySelector('input[name="convert_urls"]');
188 function toggleConvertUrls() {
189 convertUrls = toggle(convertUrlsButton);
190 convertUrlsInput.value = convertUrls;
191 }
192 convertUrlsButton.onclick = toggleConvertUrls;
174 193
175 function add(tag,openTag,closeTag) { 194 function add(tag,openTag,closeTag) {
176 let button = div.querySelector('button['+tag+']'); 195 let button = div.querySelector('button['+tag+']');
177 button.onclick = function() { 196 button.onclick = function() {
178 let start = textarea.selectionStart; 197 let start = textarea.selectionStart;