228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
|
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
|
-
+
-
+
+
+
+
+
-
+
-
+
+
+
+
+
|
blob_appendf(pOut, "%s\n", zNonce);
}
blob_reset(&bIn);
return isErr;
}
/*
** WEBPAGE: pikchrshow
** WEBPAGE: pikchrshowcs*
**
** A pikchr code editor and previewer, allowing users to experiment
** with pikchr code or prototype it for use in copy/pasting into forum
** posts, wiki pages, or embedded docs.
** posts, wiki pages, or embedded docs. This version of pikchrshow
** uses JavaScript to send pikchr code to the server for
** processing. The newer /pikchrshow applications runs pikchr on the
** client machine, without the need for back-and-forth network
** traffic.
**
** It optionally accepts a p=pikchr-script-code URL parameter or POST
** value to pre-populate the editor with that code.
*/
void pikchrshow_page(void){
void pikchrshowcs_page(void){
const char *zContent = 0;
int isDark; /* true if the current skin is "dark" */
int pikFlags =
PIKCHR_PROCESS_DIV
| PIKCHR_PROCESS_SRC
| PIKCHR_PROCESS_ERR_PRE;
login_check_credentials();
if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
cgi_redirectf("%R/login?g=pikchrshow");
cgi_redirectf("%R/login?g=pikchrshowcs");
}
if(P("wasm")){
pikchrshow_page();
return;
}
zContent = PD("content",P("p"));
if(P("ajax")!=0){
/* Called from the JS-side preview updater.
TODO: respond with JSON instead.*/
cgi_set_content_type("text/html");
if(zContent && *zContent){
|
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
|
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
|
-
+
|
if(!zContent){
zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
"box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
"arrow right 200% \"HTML+SVG\" \"Output\"\n"
"arrow <-> down from last box.s\n"
"box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
}
style_header("PikchrShow");
style_header("PikchrShow Client/Server");
CX("<style>"); {
CX("div.content { padding-top: 0.5em }\n");
CX("#sbs-wrapper {"
"display: flex; flex-direction: column;"
"}\n");
CX("#sbs-wrapper > * {"
"margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
|
374
375
376
377
378
379
380
381
382
383
384
385
386
387
|
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
|
} CX("</div>"/*sbs-wrapper*/);
builtin_fossil_js_bundle_or("fetch", "copybutton", "popupwidget",
"storage", "pikchr", NULL);
builtin_request_js("fossil.page.pikchrshow.js");
builtin_fulfill_js_requests();
style_finish_page();
}
/*
** WEBPAGE: pikchrshow
**
** A pikchr code editor and previewer, allowing users to experiment
** with pikchr code or prototype it for use in copy/pasting into forum
** posts, wiki pages, or embedded docs. This version of pikchrshow
** uses WebAssembly to run entirely in the client browser, without a
** need for back-and-forth client/server traffic to perform the
** rendering. The "legacy" version of this application can be found at
** /pikchrshowcs.
*/
void pikchrshow_page(void){
const char *zContent = 0;
login_check_credentials();
if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
cgi_redirectf("%R/login?g=pikchrshow");
}
if(P("legacy")){
pikchrshowcs_page();
return;
}
style_emit_noscript_for_js_page();
style_header("PikchrShow");
zContent = PD("content",P("p"));
if(!zContent){
zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
"box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
"arrow right 200% \"HTML+SVG\" \"Output\"\n"
"arrow <-> down from last box.s\n"
"box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
}
CX("<div class='emscripten'>"); {
CX("<figure id='module-spinner'>");
CX("<div class='spinner'></div>");
CX("<div class='center'><strong>Initializing app...</strong></div>");
CX("<div class='center'>");
CX("On a slow internet connection this may take a moment. If this ");
CX("message displays for \"a long time\", intialization may have ");
CX("failed and the JavaScript console may contain clues as to why. ");
CX("</div>");
CX("<div><a href='?legacy'>Switch to legacy mode</a></div>");
CX("</figure>");
CX("<div class='emscripten' id='module-status'>Downloading...</div>");
CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
"</progress>");
} CX("</div><!-- .emscripten -->");
CX("<div id='view-split' class='app-view initially-hidden'>"); {
CX("<div class='fieldset options collapsible'>"); {
CX("<span class='legend'><span>Options</span></span>");
CX("<div>");
CX("<span class='labeled-input'>");
CX("<input type='checkbox' id='opt-cb-sbs'");
CX("data-csstgt='#main-wrapper'");
CX("data-cssclass='side-by-side'");
CX("data-config='sideBySide'>");
CX("<label for='opt-cb-sbs'>Side-by-side</label>");
CX("</span>");
CX("<span class='labeled-input'>");
CX("<input type='checkbox' id='opt-cb-swapio'");
CX("data-csstgt='#main-wrapper'");
CX("data-cssclass='swapio'");
CX("data-config='swapInOut'>");
CX("<label for='opt-cb-swapio'>Swap in/out</label>");
CX("</span>");
CX("<span class='labeled-input'>");
CX("<input type='checkbox' id='opt-cb-autoscale'");
CX("data-config='renderAutoScale'>");
CX("<label for='opt-cb-autoscale'>Auto-scale SVG</label>");
CX("</span>");
CX("<span class='labeled-input'>");
CX("<input type='checkbox' id='opt-cb-autorender'");
CX("data-config='renderWhileTyping'>");
CX("<label for='opt-cb-autorender'>Render while typing</label>");
CX("</span>");
CX("<span class='labeled-input'>");
CX("<a href='?legacy'>Legacy mode</a>");
CX("</span>");
CX("</div><!-- options wrapper -->");
} CX("</div><!-- .fieldset -->");
CX("<div id='main-wrapper' class=''>"); {
CX("<div class='zone-wrapper input'>"); {
CX("<textarea id='input'");
CX("placeholder='Shell input. Ctrl-enter/shift-enter runs it.'>");
CX("/**\n");
CX(" Use ctrl-enter or shift-enter to execute\n");
CX(" pikchr code. If only a subset is currently\n");
CX(" selected, only that part is evaluated.\n*/\n");
CX("%s</textarea>",zContent/*safe-for-%s*/);
CX("<div class='button-bar'>");
CX("<button id='btn-render'>Render</button>");
CX("<button id='btn-clear'>Clear Input</button>");
CX("</div><!-- .button-bar -->");
} CX("</div><!-- .zone-wrapper.input -->");
CX("<div class='zone-wrapper output'>"); {
CX("<div id='pikchr-output-wrapper'>");
CX("<div id='pikchr-output'></div>");
CX("</div>");
CX("<div class='button-bar'>");
CX("<button id='btn-render-mode'>Toggle Render Mode</button>");
CX("</div><!-- .button-bar -->");
} CX("</div> <!-- .zone-wrapper.output -->");
} CX("</div><!-- #main-wrapper -->");
} CX("</div><!-- #view-split -->");
builtin_fossil_js_bundle_or("storage", NULL);
builtin_request_js("fossil.page.pikchrshowasm.js");
builtin_fulfill_js_requests();
style_finish_page();
}
/*
** COMMAND: pikchr*
**
** Usage: %fossil pikchr [options] ?INFILE? ?OUTFILE?
**
** Accepts a pikchr script as input and outputs the rendered script as
|