Fossil SCM

Added support for pikchr 'indent' alignment and expanded the fossil.dom.checkbox/radio() methods.

stephan 2020-09-12 07:14 trunk
Commit 57c7128b958857be167afa8a577680052536cb690628b6e2c8d4e7482931b885
Parent ef7912ce4dee1e0…
3 files changed +49 -1 +52 -27 +5 -3
~ src/fossil.dom.js ~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/fossil.dom.js
+49 -1
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -250,11 +250,59 @@
250250
 };
251251
252252
 dom.input = function(type){
253253
 return this.attr(this.create('input'), 'type', type);
254254
 };
255
- dom.checkbox = ()=>dom.input('checkbox');
255
+ /**
256
+ Returns a new CHECKBOX input element.
257
+
258
+ Usages:
259
+
260
+ ([boolean checked = false])
261
+ (non-boolean value [,boolean checked])
262
+ */
263
+ dom.checkbox = function(value, checked){
264
+ const rc = this.input('checkbox');
265
+ if(1===arguments.length && 'boolean'===typeof value){
266
+ checked = !!value;
267
+ value = undefined;
268
+ }
269
+ if(undefined !== value) rc.value = value;
270
+ if(!!checked) rc.checked = true;
271
+ return rc;
272
+ };
273
+ /**
274
+ Returns a new RADIO input element.
275
+
276
+ ([boolean checked = false])
277
+ (string name [,boolean checked])
278
+ (string name, non-boolean value [,boolean checked])
279
+ */
280
+ dom.radio = function(){
281
+ const rc = this.input('radio');
282
+ let name, value, checked;
283
+ if(1===arguments.length && 'boolean'===typeof name){
284
+ checked = arguments[0];
285
+ name = value = undefined;
286
+ }else if(2===arguments.length){
287
+ name = arguments[0];
288
+ if('boolean'===typeof arguments[1]){
289
+ checked = arguments[1];
290
+ }else{
291
+ value = arguments[1];
292
+ checked = undefined;
293
+ }
294
+ }else if(arguments.length){
295
+ name = arguments[0];
296
+ value = arguments[1];
297
+ checked = arguments[2];
298
+ }
299
+ if(name) this.attr(rc, 'name', name);
300
+ if(undefined!==value) rc.value = value;
301
+ if(!!checked) rc.checked = true;
302
+ return rc;
303
+ };
256304
257305
 /**
258306
 Internal impl for addClass(), removeClass().
259307
 */
260308
 const domAddRemoveClass = function f(action,e){
261309
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -250,11 +250,59 @@
250 };
251
252 dom.input = function(type){
253 return this.attr(this.create('input'), 'type', type);
254 };
255 dom.checkbox = ()=>dom.input('checkbox');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
256
257 /**
258 Internal impl for addClass(), removeClass().
259 */
260 const domAddRemoveClass = function f(action,e){
261
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -250,11 +250,59 @@
250 };
251
252 dom.input = function(type){
253 return this.attr(this.create('input'), 'type', type);
254 };
255 /**
256 Returns a new CHECKBOX input element.
257
258 Usages:
259
260 ([boolean checked = false])
261 (non-boolean value [,boolean checked])
262 */
263 dom.checkbox = function(value, checked){
264 const rc = this.input('checkbox');
265 if(1===arguments.length && 'boolean'===typeof value){
266 checked = !!value;
267 value = undefined;
268 }
269 if(undefined !== value) rc.value = value;
270 if(!!checked) rc.checked = true;
271 return rc;
272 };
273 /**
274 Returns a new RADIO input element.
275
276 ([boolean checked = false])
277 (string name [,boolean checked])
278 (string name, non-boolean value [,boolean checked])
279 */
280 dom.radio = function(){
281 const rc = this.input('radio');
282 let name, value, checked;
283 if(1===arguments.length && 'boolean'===typeof name){
284 checked = arguments[0];
285 name = value = undefined;
286 }else if(2===arguments.length){
287 name = arguments[0];
288 if('boolean'===typeof arguments[1]){
289 checked = arguments[1];
290 }else{
291 value = arguments[1];
292 checked = undefined;
293 }
294 }else if(arguments.length){
295 name = arguments[0];
296 value = arguments[1];
297 checked = arguments[2];
298 }
299 if(name) this.attr(rc, 'name', name);
300 if(undefined!==value) rc.value = value;
301 if(!!checked) rc.checked = true;
302 return rc;
303 };
304
305 /**
306 Internal impl for addClass(), removeClass().
307 */
308 const domAddRemoveClass = function f(action,e){
309
M src/fossil.page.pikchrshow.js
+52 -27
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -32,27 +32,45 @@
3232
 taContent: E('#content'),
3333
 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
3434
 'readonly', true),
3535
 uiControls: E('#pikchrshow-controls'),
3636
 previewModeToggle: D.button("Preview mode"),
37
- markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
38
- markupAlignWrapper: D.span()
37
+ markupAlignDefault: D.attr(D.radio('markup-align','',true),
38
+ 'id','markup-align-default'),
39
+ markupAlignCenter: D.attr(D.radio('markup-align','center'),
40
+ 'id','markup-align-center'),
41
+ markupAlignIndent: D.attr(D.radio('markup-align','indent'),
42
+ 'id','markup-align-indent'),
43
+ markupAlignWrapper: D.addClass(D.span(), 'input-with-label')
3944
 };
4045
4146
 ////////////////////////////////////////////////////////////
4247
 // Setup markup alignment selection...
43
- P.e.markupAlignCenter.addEventListener('change', function(ev){
48
+ const alignEvent = function(ev){
4449
 /* Update markdown/fossil wiki preview if it's active */
4550
 if(P.previewMode==1 || P.previewMode==2){
4651
 P.renderPreview();
4752
 }
48
- }, false);
53
+ };
54
+ P.e.markupAlignRadios = [
55
+ P.e.markupAlignDefault,
56
+ P.e.markupAlignCenter,
57
+ P.e.markupAlignIndent
58
+ ];
4959
 D.append(P.e.markupAlignWrapper,
50
- D.addClass([
51
- P.e.markupAlignCenter,
52
- D.label(P.e.markupAlignCenter, "Align center?")
53
- ], 'v-align-middle') );
60
+ D.addClass(D.append(D.span(),"align:"),
61
+ 'v-align-middle'));
62
+ P.e.markupAlignRadios.forEach(
63
+ function(e){
64
+ e.addEventListener('change', alignEvent, false);
65
+ D.append(P.e.markupAlignWrapper,
66
+ D.addClass([
67
+ e,
68
+ D.label(e, e.value || "left")
69
+ ], 'v-align-middle'));
70
+ }
71
+ );
5472
5573
 ////////////////////////////////////////////////////////////
5674
 // Setup the preview fieldset's LEGEND element...
5775
 D.append( P.e.previewLegend,
5876
 P.e.previewModeToggle,
@@ -87,11 +105,11 @@
87105
 ////////////////////////////////////////////////////////////
88106
 // Set up selection list of predefined scripts...
89107
 if(true){
90108
 const selectScript = P.e.selectScript = D.select(),
91109
 cbAutoPreview = P.e.cbAutoPreview =
92
- D.attr(D.checkbox(),'id', 'cb-auto-preview','checked',true),
110
+ D.attr(D.checkbox(true),'id', 'cb-auto-preview'),
93111
 cbWrap = D.addClass(D.div(),'input-with-label')
94112
 ;
95113
 D.append(
96114
 cbWrap,
97115
 selectScript,
@@ -103,12 +121,13 @@
103121
 'built-in pikchr scripts by sending them to ',
104122
 'the server for rendering. Not recommended on a ',
105123
 'slow connection/server.',
106124
 D.br(),D.br(),
107125
 'Pikchr scripts may also be dragged/dropped from ',
108
- 'the local filesystem into the text area, but ',
109
- 'the auto-preview option does not apply to them.'
126
+ 'the local filesystem into the text area, if the ',
127
+ 'environment supports it, but the auto-preview ',
128
+ 'option does not apply to them.'
110129
 )
111130
 )
112131
 )/*.childNodes.forEach(function(ch){
113132
 ch.style.margin = "0 0.25em";
114133
 })*/;
@@ -223,63 +242,68 @@
223242
 P.renderPreview()/*it's already rendered, but this gets all
224243
 labels/headers in sync.*/;
225244
 }
226245
 }/*F.onPageLoad()*/);
227246
228
- /* Shows or hides P.e.markupAlignWrapper */
229
- const showMarkupAlignment = function(showIt){
230
- P.e.markupAlignWrapper.classList[showIt ? 'remove' : 'add']('hidden');
231
- };
232
-
233247
 /**
234248
 Updates the preview view based on the current preview mode and
235249
 error state.
236250
 */
237251
 P.renderPreview = function f(){
238252
 if(!f.hasOwnProperty('rxNonce')){
239253
 f.rxNonce = /<!--.+-->\r?\n?/g /*pikchr nonce comments*/;
254
+ f.showMarkupAlignment = function(showIt){
255
+ P.e.markupAlignWrapper.classList[showIt ? 'remove' : 'add']('hidden');
256
+ };
257
+ f.getMarkupAlignmentClass = function(){
258
+ if(P.e.markupAlignCenter.checked) return ' center';
259
+ else if(P.e.markupAlignIndent.checked) return ' indent';
260
+ return '';
261
+ };
240262
 }
241263
 const preTgt = this.e.previewTarget;
242264
 if(this.response.isError){
243265
 preTgt.innerHTML = this.response.raw;
244266
 D.addClass(preTgt, 'error');
245267
 this.e.previewModeLabel.innerText = "Error";
246268
 return;
247269
 }
248270
 D.removeClass(preTgt, 'error');
249
- D.removeClass(P.e.previewCopyButton, 'disabled');
250
- D.enable(this.e.previewModeToggle, this.e.markupAlignCenter);
271
+ D.removeClass(this.e.previewCopyButton, 'disabled');
272
+ D.removeClass(this.e.markupAlignWrapper, 'hidden');
273
+ D.enable(this.e.previewModeToggle, this.e.markupAlignRadios);
251274
 let label;
252275
 switch(this.previewMode){
253276
 case 0:
254277
 label = "SVG";
255
- showMarkupAlignment(false);
278
+ f.showMarkupAlignment(false);
256279
 preTgt.innerHTML = this.response.raw;
257
- this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
280
+ this.e.taPreviewText.value =
281
+ this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
258282
 break;
259283
 case 1:
260284
 label = "Markdown";
261
- showMarkupAlignment(true);
285
+ f.showMarkupAlignment(true);
262286
 this.e.taPreviewText.value = [
263
- '```pikchr'+(this.e.markupAlignCenter.checked? ' center' : ''),
287
+ '```pikchr'+f.getMarkupAlignmentClass(),
264288
 this.response.inputText, '```'
265289
 ].join('\n');
266290
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
267291
 break;
268292
 case 2:
269293
 label = "Fossil wiki";
270
- showMarkupAlignment(true);
294
+ f.showMarkupAlignment(true);
271295
 this.e.taPreviewText.value = [
272296
 '<verbatim type="pikchr',
273
- this.e.markupAlignCenter.checked ? ' center' : '',
297
+ f.getMarkupAlignmentClass(),
274298
 '">', this.response.inputText, '</verbatim>'
275299
 ].join('');
276300
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
277301
 break;
278302
 case 3:
279303
 label = "Raw SVG";
280
- showMarkupAlignment(false);
304
+ f.showMarkupAlignment(false);
281305
 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '');
282306
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
283307
 break;
284308
 }
285309
 this.e.previewModeLabel.innerText = label;
@@ -294,11 +318,11 @@
294318
 fp.toDisable = [
295319
 /* input elements to disable during ajax operations */
296320
 this.e.btnSubmit, this.e.taContent,
297321
 this.e.cbAutoPreview, this.e.selectScript
298322
 /* handled separately: previewModeToggle, previewCopyButton,
299
- markupAlignCenter */
323
+ markupAlignRadios */
300324
 ];
301325
 fp.target = this.e.previewTarget;
302326
 fp.updateView = function(c,isError){
303327
 P.previewMode = 0;
304328
 P.response.raw = c;
@@ -305,11 +329,12 @@
305329
 P.response.isError = isError;
306330
 D.enable(fp.toDisable);
307331
 P.renderPreview();
308332
 };
309333
 }
310
- D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignCenter);
334
+ D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignRadios);
335
+ D.addClass(this.e.markupAlignWrapper, 'hidden');
311336
 D.addClass(this.e.previewCopyButton, 'disabled');
312337
 const content = this.e.taContent.value.trim();
313338
 this.response.raw = undefined;
314339
 this.response.inputText = content;
315340
 const sampleScript = fp.$_sampleScript;
316341
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -32,27 +32,45 @@
32 taContent: E('#content'),
33 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
34 'readonly', true),
35 uiControls: E('#pikchrshow-controls'),
36 previewModeToggle: D.button("Preview mode"),
37 markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
38 markupAlignWrapper: D.span()
 
 
 
 
 
39 };
40
41 ////////////////////////////////////////////////////////////
42 // Setup markup alignment selection...
43 P.e.markupAlignCenter.addEventListener('change', function(ev){
44 /* Update markdown/fossil wiki preview if it's active */
45 if(P.previewMode==1 || P.previewMode==2){
46 P.renderPreview();
47 }
48 }, false);
 
 
 
 
 
49 D.append(P.e.markupAlignWrapper,
50 D.addClass([
51 P.e.markupAlignCenter,
52 D.label(P.e.markupAlignCenter, "Align center?")
53 ], 'v-align-middle') );
 
 
 
 
 
 
 
 
54
55 ////////////////////////////////////////////////////////////
56 // Setup the preview fieldset's LEGEND element...
57 D.append( P.e.previewLegend,
58 P.e.previewModeToggle,
@@ -87,11 +105,11 @@
87 ////////////////////////////////////////////////////////////
88 // Set up selection list of predefined scripts...
89 if(true){
90 const selectScript = P.e.selectScript = D.select(),
91 cbAutoPreview = P.e.cbAutoPreview =
92 D.attr(D.checkbox(),'id', 'cb-auto-preview','checked',true),
93 cbWrap = D.addClass(D.div(),'input-with-label')
94 ;
95 D.append(
96 cbWrap,
97 selectScript,
@@ -103,12 +121,13 @@
103 'built-in pikchr scripts by sending them to ',
104 'the server for rendering. Not recommended on a ',
105 'slow connection/server.',
106 D.br(),D.br(),
107 'Pikchr scripts may also be dragged/dropped from ',
108 'the local filesystem into the text area, but ',
109 'the auto-preview option does not apply to them.'
 
110 )
111 )
112 )/*.childNodes.forEach(function(ch){
113 ch.style.margin = "0 0.25em";
114 })*/;
@@ -223,63 +242,68 @@
223 P.renderPreview()/*it's already rendered, but this gets all
224 labels/headers in sync.*/;
225 }
226 }/*F.onPageLoad()*/);
227
228 /* Shows or hides P.e.markupAlignWrapper */
229 const showMarkupAlignment = function(showIt){
230 P.e.markupAlignWrapper.classList[showIt ? 'remove' : 'add']('hidden');
231 };
232
233 /**
234 Updates the preview view based on the current preview mode and
235 error state.
236 */
237 P.renderPreview = function f(){
238 if(!f.hasOwnProperty('rxNonce')){
239 f.rxNonce = /<!--.+-->\r?\n?/g /*pikchr nonce comments*/;
 
 
 
 
 
 
 
 
240 }
241 const preTgt = this.e.previewTarget;
242 if(this.response.isError){
243 preTgt.innerHTML = this.response.raw;
244 D.addClass(preTgt, 'error');
245 this.e.previewModeLabel.innerText = "Error";
246 return;
247 }
248 D.removeClass(preTgt, 'error');
249 D.removeClass(P.e.previewCopyButton, 'disabled');
250 D.enable(this.e.previewModeToggle, this.e.markupAlignCenter);
 
251 let label;
252 switch(this.previewMode){
253 case 0:
254 label = "SVG";
255 showMarkupAlignment(false);
256 preTgt.innerHTML = this.response.raw;
257 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
 
258 break;
259 case 1:
260 label = "Markdown";
261 showMarkupAlignment(true);
262 this.e.taPreviewText.value = [
263 '```pikchr'+(this.e.markupAlignCenter.checked? ' center' : ''),
264 this.response.inputText, '```'
265 ].join('\n');
266 D.append(D.clearElement(preTgt), this.e.taPreviewText);
267 break;
268 case 2:
269 label = "Fossil wiki";
270 showMarkupAlignment(true);
271 this.e.taPreviewText.value = [
272 '<verbatim type="pikchr',
273 this.e.markupAlignCenter.checked ? ' center' : '',
274 '">', this.response.inputText, '</verbatim>'
275 ].join('');
276 D.append(D.clearElement(preTgt), this.e.taPreviewText);
277 break;
278 case 3:
279 label = "Raw SVG";
280 showMarkupAlignment(false);
281 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '');
282 D.append(D.clearElement(preTgt), this.e.taPreviewText);
283 break;
284 }
285 this.e.previewModeLabel.innerText = label;
@@ -294,11 +318,11 @@
294 fp.toDisable = [
295 /* input elements to disable during ajax operations */
296 this.e.btnSubmit, this.e.taContent,
297 this.e.cbAutoPreview, this.e.selectScript
298 /* handled separately: previewModeToggle, previewCopyButton,
299 markupAlignCenter */
300 ];
301 fp.target = this.e.previewTarget;
302 fp.updateView = function(c,isError){
303 P.previewMode = 0;
304 P.response.raw = c;
@@ -305,11 +329,12 @@
305 P.response.isError = isError;
306 D.enable(fp.toDisable);
307 P.renderPreview();
308 };
309 }
310 D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignCenter);
 
311 D.addClass(this.e.previewCopyButton, 'disabled');
312 const content = this.e.taContent.value.trim();
313 this.response.raw = undefined;
314 this.response.inputText = content;
315 const sampleScript = fp.$_sampleScript;
316
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -32,27 +32,45 @@
32 taContent: E('#content'),
33 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
34 'readonly', true),
35 uiControls: E('#pikchrshow-controls'),
36 previewModeToggle: D.button("Preview mode"),
37 markupAlignDefault: D.attr(D.radio('markup-align','',true),
38 'id','markup-align-default'),
39 markupAlignCenter: D.attr(D.radio('markup-align','center'),
40 'id','markup-align-center'),
41 markupAlignIndent: D.attr(D.radio('markup-align','indent'),
42 'id','markup-align-indent'),
43 markupAlignWrapper: D.addClass(D.span(), 'input-with-label')
44 };
45
46 ////////////////////////////////////////////////////////////
47 // Setup markup alignment selection...
48 const alignEvent = function(ev){
49 /* Update markdown/fossil wiki preview if it's active */
50 if(P.previewMode==1 || P.previewMode==2){
51 P.renderPreview();
52 }
53 };
54 P.e.markupAlignRadios = [
55 P.e.markupAlignDefault,
56 P.e.markupAlignCenter,
57 P.e.markupAlignIndent
58 ];
59 D.append(P.e.markupAlignWrapper,
60 D.addClass(D.append(D.span(),"align:"),
61 'v-align-middle'));
62 P.e.markupAlignRadios.forEach(
63 function(e){
64 e.addEventListener('change', alignEvent, false);
65 D.append(P.e.markupAlignWrapper,
66 D.addClass([
67 e,
68 D.label(e, e.value || "left")
69 ], 'v-align-middle'));
70 }
71 );
72
73 ////////////////////////////////////////////////////////////
74 // Setup the preview fieldset's LEGEND element...
75 D.append( P.e.previewLegend,
76 P.e.previewModeToggle,
@@ -87,11 +105,11 @@
105 ////////////////////////////////////////////////////////////
106 // Set up selection list of predefined scripts...
107 if(true){
108 const selectScript = P.e.selectScript = D.select(),
109 cbAutoPreview = P.e.cbAutoPreview =
110 D.attr(D.checkbox(true),'id', 'cb-auto-preview'),
111 cbWrap = D.addClass(D.div(),'input-with-label')
112 ;
113 D.append(
114 cbWrap,
115 selectScript,
@@ -103,12 +121,13 @@
121 'built-in pikchr scripts by sending them to ',
122 'the server for rendering. Not recommended on a ',
123 'slow connection/server.',
124 D.br(),D.br(),
125 'Pikchr scripts may also be dragged/dropped from ',
126 'the local filesystem into the text area, if the ',
127 'environment supports it, but the auto-preview ',
128 'option does not apply to them.'
129 )
130 )
131 )/*.childNodes.forEach(function(ch){
132 ch.style.margin = "0 0.25em";
133 })*/;
@@ -223,63 +242,68 @@
242 P.renderPreview()/*it's already rendered, but this gets all
243 labels/headers in sync.*/;
244 }
245 }/*F.onPageLoad()*/);
246
 
 
 
 
 
247 /**
248 Updates the preview view based on the current preview mode and
249 error state.
250 */
251 P.renderPreview = function f(){
252 if(!f.hasOwnProperty('rxNonce')){
253 f.rxNonce = /<!--.+-->\r?\n?/g /*pikchr nonce comments*/;
254 f.showMarkupAlignment = function(showIt){
255 P.e.markupAlignWrapper.classList[showIt ? 'remove' : 'add']('hidden');
256 };
257 f.getMarkupAlignmentClass = function(){
258 if(P.e.markupAlignCenter.checked) return ' center';
259 else if(P.e.markupAlignIndent.checked) return ' indent';
260 return '';
261 };
262 }
263 const preTgt = this.e.previewTarget;
264 if(this.response.isError){
265 preTgt.innerHTML = this.response.raw;
266 D.addClass(preTgt, 'error');
267 this.e.previewModeLabel.innerText = "Error";
268 return;
269 }
270 D.removeClass(preTgt, 'error');
271 D.removeClass(this.e.previewCopyButton, 'disabled');
272 D.removeClass(this.e.markupAlignWrapper, 'hidden');
273 D.enable(this.e.previewModeToggle, this.e.markupAlignRadios);
274 let label;
275 switch(this.previewMode){
276 case 0:
277 label = "SVG";
278 f.showMarkupAlignment(false);
279 preTgt.innerHTML = this.response.raw;
280 this.e.taPreviewText.value =
281 this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
282 break;
283 case 1:
284 label = "Markdown";
285 f.showMarkupAlignment(true);
286 this.e.taPreviewText.value = [
287 '```pikchr'+f.getMarkupAlignmentClass(),
288 this.response.inputText, '```'
289 ].join('\n');
290 D.append(D.clearElement(preTgt), this.e.taPreviewText);
291 break;
292 case 2:
293 label = "Fossil wiki";
294 f.showMarkupAlignment(true);
295 this.e.taPreviewText.value = [
296 '<verbatim type="pikchr',
297 f.getMarkupAlignmentClass(),
298 '">', this.response.inputText, '</verbatim>'
299 ].join('');
300 D.append(D.clearElement(preTgt), this.e.taPreviewText);
301 break;
302 case 3:
303 label = "Raw SVG";
304 f.showMarkupAlignment(false);
305 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '');
306 D.append(D.clearElement(preTgt), this.e.taPreviewText);
307 break;
308 }
309 this.e.previewModeLabel.innerText = label;
@@ -294,11 +318,11 @@
318 fp.toDisable = [
319 /* input elements to disable during ajax operations */
320 this.e.btnSubmit, this.e.taContent,
321 this.e.cbAutoPreview, this.e.selectScript
322 /* handled separately: previewModeToggle, previewCopyButton,
323 markupAlignRadios */
324 ];
325 fp.target = this.e.previewTarget;
326 fp.updateView = function(c,isError){
327 P.previewMode = 0;
328 P.response.raw = c;
@@ -305,11 +329,12 @@
329 P.response.isError = isError;
330 D.enable(fp.toDisable);
331 P.renderPreview();
332 };
333 }
334 D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignRadios);
335 D.addClass(this.e.markupAlignWrapper, 'hidden');
336 D.addClass(this.e.previewCopyButton, 'disabled');
337 const content = this.e.taContent.value.trim();
338 this.response.raw = undefined;
339 this.response.inputText = content;
340 const sampleScript = fp.$_sampleScript;
341
M src/pikchrshow.c
+5 -3
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -101,11 +101,14 @@
101101
 "}\n");
102102
 CX("#pikchrshow-output-wrapper label {"
103103
 "cursor: pointer;"
104104
 "}\n");
105105
 CX("body.pikchrshow .input-with-label > * {"
106
- "margin: 0 0.2em; cursor: pointer;"
106
+ "margin: 0 0.2em;"
107
+ "}\n");
108
+ CX("body.pikchrshow .input-with-label > label {"
109
+ "cursor: pointer;"
107110
 "}\n");
108111
 CX("#pikchrshow-output.dark-mode svg {"
109112
 /* Flip the colors to approximate a dark theme look */
110113
 "filter: invert(1) hue-rotate(180deg);"
111114
 "}\n");
@@ -134,12 +137,11 @@
134137
 CX("</div>"/*#pikchrshow-controls*/);
135138
 CX("</div>"/*#pikchrshow-form*/);
136139
 CX("<fieldset id='pikchrshow-output-wrapper'>");
137140
 CX("<legend></legend>"
138141
 /* Reminder: Firefox does not properly flexbox a LEGEND element,
139
- always flowing it in column mode (at least when its fieldset
140
- has a flexbox column layout). */);
142
+ always flowing it in column mode. */);
141143
 CX("<div id='pikchrshow-output'>");
142144
 if(*zContent){
143145
 int w = 0, h = 0;
144146
 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
145147
 if( w>0 && h>0 ){
146148
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -101,11 +101,14 @@
101 "}\n");
102 CX("#pikchrshow-output-wrapper label {"
103 "cursor: pointer;"
104 "}\n");
105 CX("body.pikchrshow .input-with-label > * {"
106 "margin: 0 0.2em; cursor: pointer;"
 
 
 
107 "}\n");
108 CX("#pikchrshow-output.dark-mode svg {"
109 /* Flip the colors to approximate a dark theme look */
110 "filter: invert(1) hue-rotate(180deg);"
111 "}\n");
@@ -134,12 +137,11 @@
134 CX("</div>"/*#pikchrshow-controls*/);
135 CX("</div>"/*#pikchrshow-form*/);
136 CX("<fieldset id='pikchrshow-output-wrapper'>");
137 CX("<legend></legend>"
138 /* Reminder: Firefox does not properly flexbox a LEGEND element,
139 always flowing it in column mode (at least when its fieldset
140 has a flexbox column layout). */);
141 CX("<div id='pikchrshow-output'>");
142 if(*zContent){
143 int w = 0, h = 0;
144 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
145 if( w>0 && h>0 ){
146
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -101,11 +101,14 @@
101 "}\n");
102 CX("#pikchrshow-output-wrapper label {"
103 "cursor: pointer;"
104 "}\n");
105 CX("body.pikchrshow .input-with-label > * {"
106 "margin: 0 0.2em;"
107 "}\n");
108 CX("body.pikchrshow .input-with-label > label {"
109 "cursor: pointer;"
110 "}\n");
111 CX("#pikchrshow-output.dark-mode svg {"
112 /* Flip the colors to approximate a dark theme look */
113 "filter: invert(1) hue-rotate(180deg);"
114 "}\n");
@@ -134,12 +137,11 @@
137 CX("</div>"/*#pikchrshow-controls*/);
138 CX("</div>"/*#pikchrshow-form*/);
139 CX("<fieldset id='pikchrshow-output-wrapper'>");
140 CX("<legend></legend>"
141 /* Reminder: Firefox does not properly flexbox a LEGEND element,
142 always flowing it in column mode. */);
 
143 CX("<div id='pikchrshow-output'>");
144 if(*zContent){
145 int w = 0, h = 0;
146 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
147 if( w>0 && h>0 ){
148

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button