Fossil SCM

Reimplemented pikchr show/hide entirely in CSS, so it's now controlled by toggling the 'source' class on the outermost DIV element. Less JS and easier to implement in 3rd-party pikchr clients.

stephan 2020-09-18 19:06 trunk
Commit 947c0390735ef1e39c71e926dbadca317403601be8e6d565de3f7676446aa873
Parent d825fcc11a5acee…
4 files changed +40 -2 +7 -14 +1 -1 +23 -33
~ src/default.css ~ src/fossil.pikchr.js ~ src/markdown_html.c ~ src/pikchrshow.c
M src/default.css
+40 -2
--- src/default.css
+++ src/default.css
@@ -1386,12 +1386,23 @@
13861386
 noscript > .error {
13871387
 /* Part of the style_emit_noscript_for_js_page() interface. */
13881388
 padding: 1em;
13891389
 font-size: 150%;
13901390
 }
1391
+
1392
+/************************************************************
1393
+ pikchr...
1394
+ DOM structure:
1395
+ <DIV.pikchr-wrapper>
1396
+ <DIV.pikchr-svg>
1397
+ <SVG.pikchr>...</SVG>
1398
+ </DIV.pikchr-svg>
1399
+ <PRE.pikchr-src>...</PRE>
1400
+ </DIV.pikchr-wrapper>
1401
+************************************************************/
13911402
 div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
1392
-div.pikchr {/*wrapper for SVG.pikchr element*/}
1403
+div.pikchr-svg {/*wrapper for SVG.pikchr element*/}
13931404
 svg.pikchr {/*pikchr SVG*/}
13941405
 pre.pikchr-src {/*source code view for a pikchr (see fossil.pikchr.js)*/
13951406
 box-sizing: border-box;
13961407
 overflow: auto;
13971408
 text-align: left;
@@ -1402,7 +1413,34 @@
14021413
 div.pikchr-wrapper.center > div.pikchr-svg {
14031414
 width: 100%/*necessary for Chrome!*/;
14041415
 }
14051416
 div.pikchr-wrapper.center > pre.pikchr-src,
14061417
 div.pikchr-wrapper.center > div.pikchr-svg{
1407
- display:inline-block;
1418
+ display:inline-block/*allows text-align to do the alignment*/;
1419
+}
1420
+div.pikchr-wrapper.indent {
1421
+ margin-left: 4em;
1422
+}
1423
+div.pikchr-wrapper.float-left {
1424
+ float: left;
1425
+ padding: 4em;
1426
+}
1427
+div.pikchr-wrapper.float-right {
1428
+ float: right;
1429
+ padding: 4em;
1430
+}
1431
+
1432
+div.pikchr-wrapper.source > pre.pikchr-src {
1433
+}
1434
+/* For non-source view, pre.pikchr-src and reveal svg.pikchr... */
1435
+div.pikchr-wrapper:not(.source) > pre.pikchr-src {
1436
+ position: absolute !important;
1437
+ opacity: 0 !important;
1438
+ pointer-events: none !important;
1439
+ display: none !important;
1440
+}
1441
+div.pikchr-wrapper.source > div.pikchr-svg {
1442
+ position: absolute !important;
1443
+ opacity: 0 !important;
1444
+ pointer-events: none !important;
1445
+ display: none !important;
14081446
 }
14091447
--- src/default.css
+++ src/default.css
@@ -1386,12 +1386,23 @@
1386 noscript > .error {
1387 /* Part of the style_emit_noscript_for_js_page() interface. */
1388 padding: 1em;
1389 font-size: 150%;
1390 }
 
 
 
 
 
 
 
 
 
 
 
1391 div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
1392 div.pikchr {/*wrapper for SVG.pikchr element*/}
1393 svg.pikchr {/*pikchr SVG*/}
1394 pre.pikchr-src {/*source code view for a pikchr (see fossil.pikchr.js)*/
1395 box-sizing: border-box;
1396 overflow: auto;
1397 text-align: left;
@@ -1402,7 +1413,34 @@
1402 div.pikchr-wrapper.center > div.pikchr-svg {
1403 width: 100%/*necessary for Chrome!*/;
1404 }
1405 div.pikchr-wrapper.center > pre.pikchr-src,
1406 div.pikchr-wrapper.center > div.pikchr-svg{
1407 display:inline-block;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1408 }
1409
--- src/default.css
+++ src/default.css
@@ -1386,12 +1386,23 @@
1386 noscript > .error {
1387 /* Part of the style_emit_noscript_for_js_page() interface. */
1388 padding: 1em;
1389 font-size: 150%;
1390 }
1391
1392 /************************************************************
1393 pikchr...
1394 DOM structure:
1395 <DIV.pikchr-wrapper>
1396 <DIV.pikchr-svg>
1397 <SVG.pikchr>...</SVG>
1398 </DIV.pikchr-svg>
1399 <PRE.pikchr-src>...</PRE>
1400 </DIV.pikchr-wrapper>
1401 ************************************************************/
1402 div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
1403 div.pikchr-svg {/*wrapper for SVG.pikchr element*/}
1404 svg.pikchr {/*pikchr SVG*/}
1405 pre.pikchr-src {/*source code view for a pikchr (see fossil.pikchr.js)*/
1406 box-sizing: border-box;
1407 overflow: auto;
1408 text-align: left;
@@ -1402,7 +1413,34 @@
1413 div.pikchr-wrapper.center > div.pikchr-svg {
1414 width: 100%/*necessary for Chrome!*/;
1415 }
1416 div.pikchr-wrapper.center > pre.pikchr-src,
1417 div.pikchr-wrapper.center > div.pikchr-svg{
1418 display:inline-block/*allows text-align to do the alignment*/;
1419 }
1420 div.pikchr-wrapper.indent {
1421 margin-left: 4em;
1422 }
1423 div.pikchr-wrapper.float-left {
1424 float: left;
1425 padding: 4em;
1426 }
1427 div.pikchr-wrapper.float-right {
1428 float: right;
1429 padding: 4em;
1430 }
1431
1432 div.pikchr-wrapper.source > pre.pikchr-src {
1433 }
1434 /* For non-source view, pre.pikchr-src and reveal svg.pikchr... */
1435 div.pikchr-wrapper:not(.source) > pre.pikchr-src {
1436 position: absolute !important;
1437 opacity: 0 !important;
1438 pointer-events: none !important;
1439 display: none !important;
1440 }
1441 div.pikchr-wrapper.source > div.pikchr-svg {
1442 position: absolute !important;
1443 opacity: 0 !important;
1444 pointer-events: none !important;
1445 display: none !important;
1446 }
1447
M src/fossil.pikchr.js
+7 -14
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -36,12 +36,12 @@
3636
 already dealt with.
3737
3838
 This code expects the following structure around the SVGs, and
3939
 will not process any which don't match this:
4040
41
- <DIV>
42
- <DIV><SVG.pikchr></SVG></DIV>
41
+ <DIV.pikchr-wrapper>
42
+ <DIV.pikchr-svg><SVG.pikchr></SVG></DIV>
4343
 <PRE.pikchr-src></PRE>
4444
 </DIV>
4545
 */
4646
 P.addSrcView = function f(svg){
4747
 if(!f.hasOwnProperty('parentClick')){
@@ -53,11 +53,13 @@
5353
 intercepted by most Linux window managers to control
5454
 window movement! So... we just listen for *any* of them
5555
 (except Shift) and the user will need to find one which
5656
 works on on their environment. */
5757
 || this.classList.contains('toggle')){
58
- this._toHide.forEach((e)=>e.classList.toggle('hidden'));
58
+ this.classList.toggle('source');
59
+ ev.stopPropagation();
60
+ ev.preventDefault();
5961
 }
6062
 };
6163
 };
6264
 if(!svg) svg = 'svg.pikchr';
6365
 if('string' === typeof svg){
@@ -69,23 +71,14 @@
6971
 }
7072
 if(svg.dataset.pikchrProcessed){
7173
 return this;
7274
 }
7375
 svg.dataset.pikchrProcessed = 1;
74
- const parent = svg.parentNode;
75
- const srcView = parent.nextElementSibling;
76
+ const parent = svg.parentNode.parentNode /* outermost div.pikchr-wrapper */;
77
+ const srcView = parent ? svg.parentNode.nextElementSibling : undefined;
7678
 if(!srcView || !srcView.classList.contains('pikchr-src')){
7779
 /* Without this element, there's nothing for us to do here. */
7880
 return this;
7981
 }
80
- parent._toHide = [parent, srcView];
81
- D.addClass(srcView, 'hidden');
82
- D.removeClass(svg, 'hidden');
8382
 parent.addEventListener('click', f.parentClick, false);
84
- /* When the parent is hidden, it has 0 height so cannot be clicked, so... */
85
- srcView.addEventListener('click', (ev)=>f.parentClick.call(parent, ev), false);
86
- if(parent.classList.contains('source')){
87
- /* Start off in source-view mode via a very fake click event */
88
- f.parentClick.call(parent, {ctrlKey:true});
89
- }
9083
 };
9184
 })(window.fossil);
9285
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -36,12 +36,12 @@
36 already dealt with.
37
38 This code expects the following structure around the SVGs, and
39 will not process any which don't match this:
40
41 <DIV>
42 <DIV><SVG.pikchr></SVG></DIV>
43 <PRE.pikchr-src></PRE>
44 </DIV>
45 */
46 P.addSrcView = function f(svg){
47 if(!f.hasOwnProperty('parentClick')){
@@ -53,11 +53,13 @@
53 intercepted by most Linux window managers to control
54 window movement! So... we just listen for *any* of them
55 (except Shift) and the user will need to find one which
56 works on on their environment. */
57 || this.classList.contains('toggle')){
58 this._toHide.forEach((e)=>e.classList.toggle('hidden'));
 
 
59 }
60 };
61 };
62 if(!svg) svg = 'svg.pikchr';
63 if('string' === typeof svg){
@@ -69,23 +71,14 @@
69 }
70 if(svg.dataset.pikchrProcessed){
71 return this;
72 }
73 svg.dataset.pikchrProcessed = 1;
74 const parent = svg.parentNode;
75 const srcView = parent.nextElementSibling;
76 if(!srcView || !srcView.classList.contains('pikchr-src')){
77 /* Without this element, there's nothing for us to do here. */
78 return this;
79 }
80 parent._toHide = [parent, srcView];
81 D.addClass(srcView, 'hidden');
82 D.removeClass(svg, 'hidden');
83 parent.addEventListener('click', f.parentClick, false);
84 /* When the parent is hidden, it has 0 height so cannot be clicked, so... */
85 srcView.addEventListener('click', (ev)=>f.parentClick.call(parent, ev), false);
86 if(parent.classList.contains('source')){
87 /* Start off in source-view mode via a very fake click event */
88 f.parentClick.call(parent, {ctrlKey:true});
89 }
90 };
91 })(window.fossil);
92
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -36,12 +36,12 @@
36 already dealt with.
37
38 This code expects the following structure around the SVGs, and
39 will not process any which don't match this:
40
41 <DIV.pikchr-wrapper>
42 <DIV.pikchr-svg><SVG.pikchr></SVG></DIV>
43 <PRE.pikchr-src></PRE>
44 </DIV>
45 */
46 P.addSrcView = function f(svg){
47 if(!f.hasOwnProperty('parentClick')){
@@ -53,11 +53,13 @@
53 intercepted by most Linux window managers to control
54 window movement! So... we just listen for *any* of them
55 (except Shift) and the user will need to find one which
56 works on on their environment. */
57 || this.classList.contains('toggle')){
58 this.classList.toggle('source');
59 ev.stopPropagation();
60 ev.preventDefault();
61 }
62 };
63 };
64 if(!svg) svg = 'svg.pikchr';
65 if('string' === typeof svg){
@@ -69,23 +71,14 @@
71 }
72 if(svg.dataset.pikchrProcessed){
73 return this;
74 }
75 svg.dataset.pikchrProcessed = 1;
76 const parent = svg.parentNode.parentNode /* outermost div.pikchr-wrapper */;
77 const srcView = parent ? svg.parentNode.nextElementSibling : undefined;
78 if(!srcView || !srcView.classList.contains('pikchr-src')){
79 /* Without this element, there's nothing for us to do here. */
80 return this;
81 }
 
 
 
82 parent.addEventListener('click', f.parentClick, false);
 
 
 
 
 
 
83 };
84 })(window.fossil);
85
M src/markdown_html.c
+1 -1
--- src/markdown_html.c
+++ src/markdown_html.c
@@ -344,11 +344,11 @@
344344
 const char *zSrc, int nSrc, /* The Pikchr source text */
345345
 const char *zArg, int nArg /* Addition arguments */
346346
 ){
347347
 int pikFlags = PIKCHR_PROCESS_NONCE
348348
 | PIKCHR_PROCESS_DIV
349
- | PIKCHR_PROCESS_SRC_HIDDEN;
349
+ | PIKCHR_PROCESS_SRC;
350350
 Blob bSrc = empty_blob;
351351
352352
 while( nArg>0 ){
353353
 int i;
354354
 for(i=0; i<nArg && !fossil_isspace(zArg[i]); i++){}
355355
--- src/markdown_html.c
+++ src/markdown_html.c
@@ -344,11 +344,11 @@
344 const char *zSrc, int nSrc, /* The Pikchr source text */
345 const char *zArg, int nArg /* Addition arguments */
346 ){
347 int pikFlags = PIKCHR_PROCESS_NONCE
348 | PIKCHR_PROCESS_DIV
349 | PIKCHR_PROCESS_SRC_HIDDEN;
350 Blob bSrc = empty_blob;
351
352 while( nArg>0 ){
353 int i;
354 for(i=0; i<nArg && !fossil_isspace(zArg[i]); i++){}
355
--- src/markdown_html.c
+++ src/markdown_html.c
@@ -344,11 +344,11 @@
344 const char *zSrc, int nSrc, /* The Pikchr source text */
345 const char *zArg, int nArg /* Addition arguments */
346 ){
347 int pikFlags = PIKCHR_PROCESS_NONCE
348 | PIKCHR_PROCESS_DIV
349 | PIKCHR_PROCESS_SRC;
350 Blob bSrc = empty_blob;
351
352 while( nArg>0 ){
353 int i;
354 for(i=0; i<nArg && !fossil_isspace(zArg[i]); i++){}
355
M src/pikchrshow.c
+23 -33
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -27,12 +27,11 @@
2727
 #define PIKCHR_PROCESS_TH1 0x01
2828
 #define PIKCHR_PROCESS_TH1_NOSVG 0x02
2929
 #define PIKCHR_PROCESS_NONCE 0x04
3030
 #define PIKCHR_PROCESS_ERR_PRE 0x08
3131
 #define PIKCHR_PROCESS_SRC 0x10
32
-#define PIKCHR_PROCESS_SRC_HIDDEN 0x20
33
-#define PIKCHR_PROCESS_DIV 0x40
32
+#define PIKCHR_PROCESS_DIV 0x20
3433
 #define PIKCHR_PROCESS_DIV_INDENT 0x0100
3534
 #define PIKCHR_PROCESS_DIV_CENTER 0x0200
3635
 #define PIKCHR_PROCESS_DIV_FLOAT_LEFT 0x0400
3736
 #define PIKCHR_PROCESS_DIV_FLOAT_RIGHT 0x0800
3837
 #define PIKCHR_PROCESS_DIV_TOGGLE 0x1000
@@ -97,17 +96,13 @@
9796
 ** of wiki/embedded doc processing, but not (e.g.) when fetching
9897
 ** an image for /pikchrpage.
9998
 **
10099
 ** - PIKCHR_PROCESS_SRC: if set, a new PRE.pikchr-src element is
101100
 ** injected adjacent to the SVG element which contains the
102
-** HTML-escaped content of the input script.
103
-**
104
-** - PIKCHR_PROCESS_SRC_HIDDEN: exactly like PIKCHR_PROCESS_SRC but
105
-** the .pikchr-src tag also gets the CSS class 'hidden' (which, in
106
-** fossil's default CSS, will hide that element). This is almost
107
-** always what client code will want to do if it includes the source
108
-** at all.
101
+** HTML-escaped content of the input script. If
102
+** PIKCHR_PROCESS_DIV_SOURCE is set, this flag is automatically
103
+** implied.
109104
 **
110105
 ** - PIKCHR_PROCESS_ERR_PRE: if set and pikchr() fails, the resulting
111106
 ** error report is wrapped in a PRE element, else it is retained
112107
 ** as-is (intended only for console output).
113108
 */
@@ -162,46 +157,40 @@
162157
 ? safe_html_nonce(1) : 0;
163158
 if(zNonce){
164159
 blob_appendf(pOut, "%s\n", zNonce);
165160
 }
166161
 if(PIKCHR_PROCESS_DIV & pikFlags){
167
- Blob css = empty_blob;
168
- blob_appendf(&css, "max-width:%dpx;", w);
169162
 if(PIKCHR_PROCESS_DIV_CENTER & pikFlags){
170163
 /*blob_append(&css, "display:block;margin:auto;", -1);*/
171164
 zWrapperClass = " center";
172165
 }else if(PIKCHR_PROCESS_DIV_INDENT & pikFlags){
173
- blob_append(&css, "margin-left:4em", -1);
166
+ zWrapperClass = " indent";
174167
 }else if(PIKCHR_PROCESS_DIV_FLOAT_LEFT & pikFlags){
175
- blob_append(&css, "float:left;padding=4em;", -1);
168
+ zWrapperClass = " float-left";
176169
 }else if(PIKCHR_PROCESS_DIV_FLOAT_RIGHT & pikFlags){
177
- blob_append(&css, "float:right;padding=4em;", -1);
170
+ zWrapperClass = " float-right";
178171
 }
179172
 if(PIKCHR_PROCESS_DIV_TOGGLE & pikFlags){
180173
 zClassToggle = " toggle";
181174
 }
182175
 if(PIKCHR_PROCESS_DIV_SOURCE & pikFlags){
183176
 zClassSource = " source";
177
+ pikFlags |= PIKCHR_PROCESS_SRC;
184178
 }
185
- blob_appendf(pOut,"<div class='pikchr-wrapper%s'>"
186
- "<div class=\"pikchr-svg%s%s\" "
187
- "style=\"%b\">\n",
179
+ blob_appendf(pOut,"<div class='pikchr-wrapper%s%s%s'>"
180
+ "<div class=\"pikchr-svg\" "
181
+ "style=\"max-width:%dpx\">\n",
188182
 zWrapperClass/*safe-for-%s*/,
189183
 zClassToggle/*safe-for-%s*/,
190
- zClassSource/*safe-for-%s*/, &css);
191
- blob_reset(&css);
184
+ zClassSource/*safe-for-%s*/, w);
192185
 }
193186
 blob_append(pOut, zOut, -1);
194187
 if(PIKCHR_PROCESS_DIV & pikFlags){
195188
 blob_append(pOut, "</div>\n", 7);
196189
 }
197
- if((PIKCHR_PROCESS_SRC & pikFlags)
198
- || (PIKCHR_PROCESS_SRC_HIDDEN & pikFlags)){
199
- blob_appendf(pOut, "<pre class='pikchr-src%s'>"
200
- "%h</pre>\n",
201
- (PIKCHR_PROCESS_SRC_HIDDEN & pikFlags)
202
- ? " hidden" : "",
190
+ if(PIKCHR_PROCESS_SRC & pikFlags){
191
+ blob_appendf(pOut, "<pre class='pikchr-src'>%h</pre>\n",
203192
 blob_str(&bIn));
204193
 }
205194
 if(PIKCHR_PROCESS_DIV & pikFlags){
206195
 blob_append(pOut, "</div>\n", 7);
207196
 }
@@ -237,11 +226,11 @@
237226
 */
238227
 void pikchrshow_page(void){
239228
 const char *zContent = 0;
240229
 int isDark; /* true if the current skin is "dark" */
241230
 int pikFlags = PIKCHR_PROCESS_DIV
242
- | PIKCHR_PROCESS_SRC_HIDDEN
231
+ | PIKCHR_PROCESS_SRC
243232
 | PIKCHR_PROCESS_ERR_PRE;
244233
245234
 login_check_credentials();
246235
 if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
247236
 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
@@ -392,19 +381,20 @@
392381
 **
393382
 ** -div-left Like -div but floats the div left.
394383
 **
395384
 ** -div-right Like -div but floats the div right.
396385
 **
397
-** -div-toggle Sets the 'toggle' flag on the div (used by the
386
+** -div-toggle Sets the 'toggle' CSS class on the div (used by the
398387
 ** JavaScript-side post-processor).
399388
 **
400
-** -div-source Sets the 'source' flag on the div (used by the
401
-** JavaScript-side post-processor).
389
+** -div-source Sets the 'source' CSS class on the div, which tells
390
+** CSS to hide the SVG and reveal the source by default.
402391
 **
403392
 ** -src Stores the input pikchr's source code in the output as
404
-** a separate element adjacent to the SVG one. The
405
-** source element initially has the "hidden" CSS class.
393
+** a separate element adjacent to the SVG one. Implied
394
+** by -div-source.
395
+**
406396
 **
407397
 ** -th Process the input using TH1 before passing it to pikchr.
408398
 **
409399
 ** -th-novar Disable $var and $<var> TH1 processing. Use this if the
410400
 ** pikchr script uses '$' for its own purposes and that
@@ -444,11 +434,11 @@
444434
 const char * zOutfile = "-";
445435
 const int fTh1 = find_option("th",0,0)!=0;
446436
 const int fNosvg = find_option("th-nosvg",0,0)!=0;
447437
 int isErr = 0;
448438
 int pikFlags = find_option("src",0,0)!=0
449
- ? PIKCHR_PROCESS_SRC_HIDDEN : 0;
439
+ ? PIKCHR_PROCESS_SRC : 0;
450440
 u32 fThFlags = TH_INIT_NO_ENCODE
451441
 | (find_option("th-novar",0,0)!=0 ? TH_R2B_NO_VARS : 0);
452442
453443
 Th_InitTraceLog()/*processes -th-trace flag*/;
454444
@@ -465,11 +455,11 @@
465455
 }
466456
 if(find_option("div-toggle",0,0)!=0){
467457
 pikFlags |= PIKCHR_PROCESS_DIV_TOGGLE;
468458
 }
469459
 if(find_option("div-source",0,0)!=0){
470
- pikFlags |= PIKCHR_PROCESS_DIV_SOURCE;
460
+ pikFlags |= PIKCHR_PROCESS_DIV_SOURCE | PIKCHR_PROCESS_SRC;
471461
 }
472462
473463
 verify_all_options();
474464
 if(g.argc>4){
475465
 usage("?INFILE? ?OUTFILE?");
476466
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -27,12 +27,11 @@
27 #define PIKCHR_PROCESS_TH1 0x01
28 #define PIKCHR_PROCESS_TH1_NOSVG 0x02
29 #define PIKCHR_PROCESS_NONCE 0x04
30 #define PIKCHR_PROCESS_ERR_PRE 0x08
31 #define PIKCHR_PROCESS_SRC 0x10
32 #define PIKCHR_PROCESS_SRC_HIDDEN 0x20
33 #define PIKCHR_PROCESS_DIV 0x40
34 #define PIKCHR_PROCESS_DIV_INDENT 0x0100
35 #define PIKCHR_PROCESS_DIV_CENTER 0x0200
36 #define PIKCHR_PROCESS_DIV_FLOAT_LEFT 0x0400
37 #define PIKCHR_PROCESS_DIV_FLOAT_RIGHT 0x0800
38 #define PIKCHR_PROCESS_DIV_TOGGLE 0x1000
@@ -97,17 +96,13 @@
97 ** of wiki/embedded doc processing, but not (e.g.) when fetching
98 ** an image for /pikchrpage.
99 **
100 ** - PIKCHR_PROCESS_SRC: if set, a new PRE.pikchr-src element is
101 ** injected adjacent to the SVG element which contains the
102 ** HTML-escaped content of the input script.
103 **
104 ** - PIKCHR_PROCESS_SRC_HIDDEN: exactly like PIKCHR_PROCESS_SRC but
105 ** the .pikchr-src tag also gets the CSS class 'hidden' (which, in
106 ** fossil's default CSS, will hide that element). This is almost
107 ** always what client code will want to do if it includes the source
108 ** at all.
109 **
110 ** - PIKCHR_PROCESS_ERR_PRE: if set and pikchr() fails, the resulting
111 ** error report is wrapped in a PRE element, else it is retained
112 ** as-is (intended only for console output).
113 */
@@ -162,46 +157,40 @@
162 ? safe_html_nonce(1) : 0;
163 if(zNonce){
164 blob_appendf(pOut, "%s\n", zNonce);
165 }
166 if(PIKCHR_PROCESS_DIV & pikFlags){
167 Blob css = empty_blob;
168 blob_appendf(&css, "max-width:%dpx;", w);
169 if(PIKCHR_PROCESS_DIV_CENTER & pikFlags){
170 /*blob_append(&css, "display:block;margin:auto;", -1);*/
171 zWrapperClass = " center";
172 }else if(PIKCHR_PROCESS_DIV_INDENT & pikFlags){
173 blob_append(&css, "margin-left:4em", -1);
174 }else if(PIKCHR_PROCESS_DIV_FLOAT_LEFT & pikFlags){
175 blob_append(&css, "float:left;padding=4em;", -1);
176 }else if(PIKCHR_PROCESS_DIV_FLOAT_RIGHT & pikFlags){
177 blob_append(&css, "float:right;padding=4em;", -1);
178 }
179 if(PIKCHR_PROCESS_DIV_TOGGLE & pikFlags){
180 zClassToggle = " toggle";
181 }
182 if(PIKCHR_PROCESS_DIV_SOURCE & pikFlags){
183 zClassSource = " source";
 
184 }
185 blob_appendf(pOut,"<div class='pikchr-wrapper%s'>"
186 "<div class=\"pikchr-svg%s%s\" "
187 "style=\"%b\">\n",
188 zWrapperClass/*safe-for-%s*/,
189 zClassToggle/*safe-for-%s*/,
190 zClassSource/*safe-for-%s*/, &css);
191 blob_reset(&css);
192 }
193 blob_append(pOut, zOut, -1);
194 if(PIKCHR_PROCESS_DIV & pikFlags){
195 blob_append(pOut, "</div>\n", 7);
196 }
197 if((PIKCHR_PROCESS_SRC & pikFlags)
198 || (PIKCHR_PROCESS_SRC_HIDDEN & pikFlags)){
199 blob_appendf(pOut, "<pre class='pikchr-src%s'>"
200 "%h</pre>\n",
201 (PIKCHR_PROCESS_SRC_HIDDEN & pikFlags)
202 ? " hidden" : "",
203 blob_str(&bIn));
204 }
205 if(PIKCHR_PROCESS_DIV & pikFlags){
206 blob_append(pOut, "</div>\n", 7);
207 }
@@ -237,11 +226,11 @@
237 */
238 void pikchrshow_page(void){
239 const char *zContent = 0;
240 int isDark; /* true if the current skin is "dark" */
241 int pikFlags = PIKCHR_PROCESS_DIV
242 | PIKCHR_PROCESS_SRC_HIDDEN
243 | PIKCHR_PROCESS_ERR_PRE;
244
245 login_check_credentials();
246 if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
247 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
@@ -392,19 +381,20 @@
392 **
393 ** -div-left Like -div but floats the div left.
394 **
395 ** -div-right Like -div but floats the div right.
396 **
397 ** -div-toggle Sets the 'toggle' flag on the div (used by the
398 ** JavaScript-side post-processor).
399 **
400 ** -div-source Sets the 'source' flag on the div (used by the
401 ** JavaScript-side post-processor).
402 **
403 ** -src Stores the input pikchr's source code in the output as
404 ** a separate element adjacent to the SVG one. The
405 ** source element initially has the "hidden" CSS class.
 
406 **
407 ** -th Process the input using TH1 before passing it to pikchr.
408 **
409 ** -th-novar Disable $var and $<var> TH1 processing. Use this if the
410 ** pikchr script uses '$' for its own purposes and that
@@ -444,11 +434,11 @@
444 const char * zOutfile = "-";
445 const int fTh1 = find_option("th",0,0)!=0;
446 const int fNosvg = find_option("th-nosvg",0,0)!=0;
447 int isErr = 0;
448 int pikFlags = find_option("src",0,0)!=0
449 ? PIKCHR_PROCESS_SRC_HIDDEN : 0;
450 u32 fThFlags = TH_INIT_NO_ENCODE
451 | (find_option("th-novar",0,0)!=0 ? TH_R2B_NO_VARS : 0);
452
453 Th_InitTraceLog()/*processes -th-trace flag*/;
454
@@ -465,11 +455,11 @@
465 }
466 if(find_option("div-toggle",0,0)!=0){
467 pikFlags |= PIKCHR_PROCESS_DIV_TOGGLE;
468 }
469 if(find_option("div-source",0,0)!=0){
470 pikFlags |= PIKCHR_PROCESS_DIV_SOURCE;
471 }
472
473 verify_all_options();
474 if(g.argc>4){
475 usage("?INFILE? ?OUTFILE?");
476
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -27,12 +27,11 @@
27 #define PIKCHR_PROCESS_TH1 0x01
28 #define PIKCHR_PROCESS_TH1_NOSVG 0x02
29 #define PIKCHR_PROCESS_NONCE 0x04
30 #define PIKCHR_PROCESS_ERR_PRE 0x08
31 #define PIKCHR_PROCESS_SRC 0x10
32 #define PIKCHR_PROCESS_DIV 0x20
 
33 #define PIKCHR_PROCESS_DIV_INDENT 0x0100
34 #define PIKCHR_PROCESS_DIV_CENTER 0x0200
35 #define PIKCHR_PROCESS_DIV_FLOAT_LEFT 0x0400
36 #define PIKCHR_PROCESS_DIV_FLOAT_RIGHT 0x0800
37 #define PIKCHR_PROCESS_DIV_TOGGLE 0x1000
@@ -97,17 +96,13 @@
96 ** of wiki/embedded doc processing, but not (e.g.) when fetching
97 ** an image for /pikchrpage.
98 **
99 ** - PIKCHR_PROCESS_SRC: if set, a new PRE.pikchr-src element is
100 ** injected adjacent to the SVG element which contains the
101 ** HTML-escaped content of the input script. If
102 ** PIKCHR_PROCESS_DIV_SOURCE is set, this flag is automatically
103 ** implied.
 
 
 
 
104 **
105 ** - PIKCHR_PROCESS_ERR_PRE: if set and pikchr() fails, the resulting
106 ** error report is wrapped in a PRE element, else it is retained
107 ** as-is (intended only for console output).
108 */
@@ -162,46 +157,40 @@
157 ? safe_html_nonce(1) : 0;
158 if(zNonce){
159 blob_appendf(pOut, "%s\n", zNonce);
160 }
161 if(PIKCHR_PROCESS_DIV & pikFlags){
 
 
162 if(PIKCHR_PROCESS_DIV_CENTER & pikFlags){
163 /*blob_append(&css, "display:block;margin:auto;", -1);*/
164 zWrapperClass = " center";
165 }else if(PIKCHR_PROCESS_DIV_INDENT & pikFlags){
166 zWrapperClass = " indent";
167 }else if(PIKCHR_PROCESS_DIV_FLOAT_LEFT & pikFlags){
168 zWrapperClass = " float-left";
169 }else if(PIKCHR_PROCESS_DIV_FLOAT_RIGHT & pikFlags){
170 zWrapperClass = " float-right";
171 }
172 if(PIKCHR_PROCESS_DIV_TOGGLE & pikFlags){
173 zClassToggle = " toggle";
174 }
175 if(PIKCHR_PROCESS_DIV_SOURCE & pikFlags){
176 zClassSource = " source";
177 pikFlags |= PIKCHR_PROCESS_SRC;
178 }
179 blob_appendf(pOut,"<div class='pikchr-wrapper%s%s%s'>"
180 "<div class=\"pikchr-svg\" "
181 "style=\"max-width:%dpx\">\n",
182 zWrapperClass/*safe-for-%s*/,
183 zClassToggle/*safe-for-%s*/,
184 zClassSource/*safe-for-%s*/, w);
 
185 }
186 blob_append(pOut, zOut, -1);
187 if(PIKCHR_PROCESS_DIV & pikFlags){
188 blob_append(pOut, "</div>\n", 7);
189 }
190 if(PIKCHR_PROCESS_SRC & pikFlags){
191 blob_appendf(pOut, "<pre class='pikchr-src'>%h</pre>\n",
 
 
 
 
192 blob_str(&bIn));
193 }
194 if(PIKCHR_PROCESS_DIV & pikFlags){
195 blob_append(pOut, "</div>\n", 7);
196 }
@@ -237,11 +226,11 @@
226 */
227 void pikchrshow_page(void){
228 const char *zContent = 0;
229 int isDark; /* true if the current skin is "dark" */
230 int pikFlags = PIKCHR_PROCESS_DIV
231 | PIKCHR_PROCESS_SRC
232 | PIKCHR_PROCESS_ERR_PRE;
233
234 login_check_credentials();
235 if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
236 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
@@ -392,19 +381,20 @@
381 **
382 ** -div-left Like -div but floats the div left.
383 **
384 ** -div-right Like -div but floats the div right.
385 **
386 ** -div-toggle Sets the 'toggle' CSS class on the div (used by the
387 ** JavaScript-side post-processor).
388 **
389 ** -div-source Sets the 'source' CSS class on the div, which tells
390 ** CSS to hide the SVG and reveal the source by default.
391 **
392 ** -src Stores the input pikchr's source code in the output as
393 ** a separate element adjacent to the SVG one. Implied
394 ** by -div-source.
395 **
396 **
397 ** -th Process the input using TH1 before passing it to pikchr.
398 **
399 ** -th-novar Disable $var and $<var> TH1 processing. Use this if the
400 ** pikchr script uses '$' for its own purposes and that
@@ -444,11 +434,11 @@
434 const char * zOutfile = "-";
435 const int fTh1 = find_option("th",0,0)!=0;
436 const int fNosvg = find_option("th-nosvg",0,0)!=0;
437 int isErr = 0;
438 int pikFlags = find_option("src",0,0)!=0
439 ? PIKCHR_PROCESS_SRC : 0;
440 u32 fThFlags = TH_INIT_NO_ENCODE
441 | (find_option("th-novar",0,0)!=0 ? TH_R2B_NO_VARS : 0);
442
443 Th_InitTraceLog()/*processes -th-trace flag*/;
444
@@ -465,11 +455,11 @@
455 }
456 if(find_option("div-toggle",0,0)!=0){
457 pikFlags |= PIKCHR_PROCESS_DIV_TOGGLE;
458 }
459 if(find_option("div-source",0,0)!=0){
460 pikFlags |= PIKCHR_PROCESS_DIV_SOURCE | PIKCHR_PROCESS_SRC;
461 }
462
463 verify_all_options();
464 if(g.argc>4){
465 usage("?INFILE? ?OUTFILE?");
466

Keyboard Shortcuts

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