Fossil SCM

pikchrshow: refactored layout to use fieldsets for the input/output area wrappers and moved their button controls into the LEGEND elements. Various minor layout tweaks.

stephan 2022-06-07 09:07 pikchrshow-wasm
Commit 577ab3bede8d87f00dbbc8cc8a4fbebdbb6865de13525f81a4e6ef925af6bbdf
Parent 997bb954f404fab…
3 files changed +3 -3 +18 -17 +36 -40
~ src/fossil.page.pikchrshowasm.js ~ src/pikchrshow.c ~ src/style.pikchrshow.css
M src/fossil.page.pikchrshowasm.js
+3 -3
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -420,14 +420,14 @@
420420
 stdout("Cancelled loading of",f.name+".");
421421
 });
422422
 r.readAsArrayBuffer(f);
423423
 });
424424
425
- EAll('.fieldset.collapsible').forEach(function(fs){
426
- const legend = E(fs,'span.legend'),
425
+ EAll('fieldset.collapsible').forEach(function(fs){
426
+ const btnToggle = E(fs,'legend > #btn-options-toggle'),
427427
 content = EAll(fs,':scope > div');
428
- legend.addEventListener('click', function(){
428
+ btnToggle.addEventListener('click', function(){
429429
 fs.classList.toggle('collapsed');
430430
 content.forEach((d)=>d.classList.toggle('hidden'));
431431
 }, false);
432432
 });
433433
434434
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -420,14 +420,14 @@
420 stdout("Cancelled loading of",f.name+".");
421 });
422 r.readAsArrayBuffer(f);
423 });
424
425 EAll('.fieldset.collapsible').forEach(function(fs){
426 const legend = E(fs,'span.legend'),
427 content = EAll(fs,':scope > div');
428 legend.addEventListener('click', function(){
429 fs.classList.toggle('collapsed');
430 content.forEach((d)=>d.classList.toggle('hidden'));
431 }, false);
432 });
433
434
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -420,14 +420,14 @@
420 stdout("Cancelled loading of",f.name+".");
421 });
422 r.readAsArrayBuffer(f);
423 });
424
425 EAll('fieldset.collapsible').forEach(function(fs){
426 const btnToggle = E(fs,'legend > #btn-options-toggle'),
427 content = EAll(fs,':scope > div');
428 btnToggle.addEventListener('click', function(){
429 fs.classList.toggle('collapsed');
430 content.forEach((d)=>d.classList.toggle('hidden'));
431 }, false);
432 });
433
434
M src/pikchrshow.c
+18 -17
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -437,12 +437,12 @@
437437
 CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
438438
 "</progress>");
439439
 } CX("</div><!-- .emscripten -->");
440440
 /* Main view... */
441441
 CX("<div id='view-split' class='app-view initially-hidden'>"); {
442
- CX("<div class='fieldset options collapsible'>"); {
443
- CX("<span class='legend'><span>Options</span></span>");
442
+ CX("<fieldset class='options collapsible'>"); {
443
+ CX("<legend><button id='btn-options-toggle'>Options</button></legend>");
444444
 CX("<div>");
445445
 CX("<span class='labeled-input'>");
446446
 CX("<input type='checkbox' id='opt-cb-sbs' ");
447447
 CX("data-csstgt='#main-wrapper' ");
448448
 CX("data-cssclass='side-by-side' ");
@@ -470,34 +470,35 @@
470470
 CX("</span>");
471471
 CX("<span class='labeled-input'>");
472472
 CX("<a href='?legacy'>Legacy mode</a>");
473473
 CX("</span>");
474474
 CX("</div><!-- options wrapper -->");
475
- } CX("</div><!-- .fieldset -->");
475
+ } CX("</fieldset>");
476476
 CX("<div id='main-wrapper' class=''>"); {
477
- CX("<div class='zone-wrapper input'>"); {
478
- CX("<textarea id='input'");
477
+ CX("<fieldset class='zone-wrapper input'>"); {
478
+ CX("<legend><div class='button-bar'>");
479
+ CX("<button id='btn-render' "
480
+ "title='Ctrl-Enter/Shift-Enter'>Render</button>");
481
+ CX("<button id='btn-clear'>Clear Input</button>");
482
+ CX("</div></legend>");
483
+ CX("<div><textarea id='input'");
479484
 CX("placeholder='Pikchr input. Ctrl-enter/shift-enter runs it.'>");
480485
 CX("/**\n");
481486
 CX(" Use ctrl-enter or shift-enter to execute\n");
482487
 CX(" pikchr code. If only a subset is currently\n");
483488
 CX(" selected, only that part is evaluated.\n*/\n");
484
- CX("%s</textarea>",zContent/*safe-for-%s*/);
485
- CX("<div class='button-bar'>");
486
- CX("<button id='btn-render'>Render</button>");
487
- CX("<button id='btn-clear'>Clear Input</button>");
488
- CX("</div><!-- .button-bar -->");
489
- } CX("</div><!-- .zone-wrapper.input -->");
490
- CX("<div class='splitter-handle hidden'></div>");
491
- CX("<div class='zone-wrapper output'>"); {
489
+ CX("%s</textarea></div>",zContent/*safe-for-%s*/);
490
+ } CX("</fieldset><!-- .zone-wrapper.input -->");
491
+ /*CX("<div class='splitter-handle hidden'></div>");*/
492
+ CX("<fieldset class='zone-wrapper output'>"); {
493
+ CX("<legend><div class='button-bar'>");
494
+ CX("<button id='btn-render-mode'>Toggle Render Mode</button>");
495
+ CX("</div></legend>");
492496
 CX("<div id='pikchr-output-wrapper'>");
493497
 CX("<div id='pikchr-output'></div>");
494498
 CX("</div>");
495
- CX("<div class='button-bar'>");
496
- CX("<button id='btn-render-mode'>Toggle Render Mode</button>");
497
- CX("</div><!-- .button-bar -->");
498
- } CX("</div> <!-- .zone-wrapper.output -->");
499
+ } CX("</fieldset> <!-- .zone-wrapper.output -->");
499500
 } CX("</div><!-- #main-wrapper -->");
500501
 } CX("</div><!-- #view-split -->");
501502
 builtin_fossil_js_bundle_or("dom", "storage", NULL);
502503
 builtin_request_js("fossil.page.pikchrshowasm.js");
503504
 builtin_fulfill_js_requests();
504505
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -437,12 +437,12 @@
437 CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
438 "</progress>");
439 } CX("</div><!-- .emscripten -->");
440 /* Main view... */
441 CX("<div id='view-split' class='app-view initially-hidden'>"); {
442 CX("<div class='fieldset options collapsible'>"); {
443 CX("<span class='legend'><span>Options</span></span>");
444 CX("<div>");
445 CX("<span class='labeled-input'>");
446 CX("<input type='checkbox' id='opt-cb-sbs' ");
447 CX("data-csstgt='#main-wrapper' ");
448 CX("data-cssclass='side-by-side' ");
@@ -470,34 +470,35 @@
470 CX("</span>");
471 CX("<span class='labeled-input'>");
472 CX("<a href='?legacy'>Legacy mode</a>");
473 CX("</span>");
474 CX("</div><!-- options wrapper -->");
475 } CX("</div><!-- .fieldset -->");
476 CX("<div id='main-wrapper' class=''>"); {
477 CX("<div class='zone-wrapper input'>"); {
478 CX("<textarea id='input'");
 
 
 
 
 
479 CX("placeholder='Pikchr input. Ctrl-enter/shift-enter runs it.'>");
480 CX("/**\n");
481 CX(" Use ctrl-enter or shift-enter to execute\n");
482 CX(" pikchr code. If only a subset is currently\n");
483 CX(" selected, only that part is evaluated.\n*/\n");
484 CX("%s</textarea>",zContent/*safe-for-%s*/);
485 CX("<div class='button-bar'>");
486 CX("<button id='btn-render'>Render</button>");
487 CX("<button id='btn-clear'>Clear Input</button>");
488 CX("</div><!-- .button-bar -->");
489 } CX("</div><!-- .zone-wrapper.input -->");
490 CX("<div class='splitter-handle hidden'></div>");
491 CX("<div class='zone-wrapper output'>"); {
492 CX("<div id='pikchr-output-wrapper'>");
493 CX("<div id='pikchr-output'></div>");
494 CX("</div>");
495 CX("<div class='button-bar'>");
496 CX("<button id='btn-render-mode'>Toggle Render Mode</button>");
497 CX("</div><!-- .button-bar -->");
498 } CX("</div> <!-- .zone-wrapper.output -->");
499 } CX("</div><!-- #main-wrapper -->");
500 } CX("</div><!-- #view-split -->");
501 builtin_fossil_js_bundle_or("dom", "storage", NULL);
502 builtin_request_js("fossil.page.pikchrshowasm.js");
503 builtin_fulfill_js_requests();
504
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -437,12 +437,12 @@
437 CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
438 "</progress>");
439 } CX("</div><!-- .emscripten -->");
440 /* Main view... */
441 CX("<div id='view-split' class='app-view initially-hidden'>"); {
442 CX("<fieldset class='options collapsible'>"); {
443 CX("<legend><button id='btn-options-toggle'>Options</button></legend>");
444 CX("<div>");
445 CX("<span class='labeled-input'>");
446 CX("<input type='checkbox' id='opt-cb-sbs' ");
447 CX("data-csstgt='#main-wrapper' ");
448 CX("data-cssclass='side-by-side' ");
@@ -470,34 +470,35 @@
470 CX("</span>");
471 CX("<span class='labeled-input'>");
472 CX("<a href='?legacy'>Legacy mode</a>");
473 CX("</span>");
474 CX("</div><!-- options wrapper -->");
475 } CX("</fieldset>");
476 CX("<div id='main-wrapper' class=''>"); {
477 CX("<fieldset class='zone-wrapper input'>"); {
478 CX("<legend><div class='button-bar'>");
479 CX("<button id='btn-render' "
480 "title='Ctrl-Enter/Shift-Enter'>Render</button>");
481 CX("<button id='btn-clear'>Clear Input</button>");
482 CX("</div></legend>");
483 CX("<div><textarea id='input'");
484 CX("placeholder='Pikchr input. Ctrl-enter/shift-enter runs it.'>");
485 CX("/**\n");
486 CX(" Use ctrl-enter or shift-enter to execute\n");
487 CX(" pikchr code. If only a subset is currently\n");
488 CX(" selected, only that part is evaluated.\n*/\n");
489 CX("%s</textarea></div>",zContent/*safe-for-%s*/);
490 } CX("</fieldset><!-- .zone-wrapper.input -->");
491 /*CX("<div class='splitter-handle hidden'></div>");*/
492 CX("<fieldset class='zone-wrapper output'>"); {
493 CX("<legend><div class='button-bar'>");
494 CX("<button id='btn-render-mode'>Toggle Render Mode</button>");
495 CX("</div></legend>");
 
496 CX("<div id='pikchr-output-wrapper'>");
497 CX("<div id='pikchr-output'></div>");
498 CX("</div>");
499 } CX("</fieldset> <!-- .zone-wrapper.output -->");
 
 
 
500 } CX("</div><!-- #main-wrapper -->");
501 } CX("</div><!-- #view-split -->");
502 builtin_fossil_js_bundle_or("dom", "storage", NULL);
503 builtin_request_js("fossil.page.pikchrshowasm.js");
504 builtin_fulfill_js_requests();
505
M src/style.pikchrshow.css
+36 -40
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -39,10 +39,17 @@
3939
 overflow: hidden;
4040
 }
4141
 #main-wrapper.side-by-side {
4242
 flex-direction: row;
4343
 }
44
+#main-wrapper.side-by-side > fieldset {
45
+ margin-left: 0.25em;
46
+ margin-right: 0.25em;
47
+}
48
+#main-wrapper:not(.side-by-side) > fieldset {
49
+ margin-bottom: 0.25em;
50
+}
4451
 #main-wrapper.swapio {
4552
 flex-direction: column;
4653
 }
4754
 #main-wrapper.side-by-side.swapio {
4855
 flex-direction: row-reverse;
@@ -58,17 +65,23 @@
5865
 width: 100%;
5966
 height: 2px;
6067
 }
6168
 .zone-wrapper{
6269
 display: flex;
70
+ margin: 0;
71
+ flex: 1 1 0%;
72
+ border-radius: 0.5em;
73
+ min-width: inherit/*important: resolves inability to scroll fieldset child element!*/;
74
+ padding: 0.35em 0 0 0;
75
+}
76
+.zone-wrapper > div {
77
+ display:flex;
6378
 flex-direction: column;
6479
 align-items: stretch;
65
- margin: 0 0.25em;
6680
 flex: 1 1 0%;
6781
 }
6882
 .zone-wrapper.output {
69
- /*flex: 1 1 0%;*/
7083
 }
7184
 #main-wrapper.side-by-side .zone-wrapper {
7285
 /* Keep the layout from "flopping around" when
7386
 render-while-typing mode is on. */
7487
 /*max-width: 50%;*/
@@ -90,18 +103,31 @@
90103
 align-items: stretch;
91104
 flex: 1 1 auto;
92105
 }
93106
 #pikchr-output-wrapper.text > #pikchr-output > textarea {
94107
 flex: 1 1 auto;
108
+}
109
+.zone-wrapper > legend {
110
+ font-size: 85%;
95111
 }
96112
 .zone-wrapper textarea {
113
+ border-radius: 0.5em;
97114
 flex: 1 1 auto;
115
+ /*min/max width resolve an inexplicable margin on the RHS. The -1em
116
+ is for the padding, else we overlap the parent boundaries.*/
117
+ min-width: calc(100% - 1em);
118
+ max-width: calc(100% - 1em);
119
+ padding: 0 0.5em;
98120
 }
99121
 .zone-wrapper.input {
100122
 min-height: 10em;
101123
 /*width: 50%;*/
102124
 min-width: 20em;
125
+}
126
+.zone-wrapper textarea {
127
+ border: 0;
128
+ outline: 0;
103129
 }
104130
 .zone-wrapper.output {
105131
 overflow: auto;
106132
 justify-content: space-between;
107133
 }
@@ -110,56 +136,29 @@
110136
 justify-content: center;
111137
 flex: 0 1 auto;
112138
 flex-wrap: wrap;
113139
 }
114140
 .button-bar button {
115
- margin: 0.25em 1em;
141
+ margin: 0 0.5em;
116142
 }
117
-/* Safari supports neither styling of nor event handling on a
118
- fieldset legend, so we emulate a fieldset-like widget. */
119
-.fieldset {
143
+fieldset.options {
120144
 border-radius: 0.5em;
121145
 border: 1px inset;
122
- border-top: none;
123146
 display: flex;
124147
 flex-direction: column;
125
-}
126
-.fieldset > .legend {
127
- position: relative;
128
- top: -1.25ex;
129
- padding: 0 0.5em;
130
- font-size: 85%;
131
- margin-left: 0.5em;
132
- flex: 0 1 auto;
133
- align-self: self-start;
134
- cursor: pointer;
135
-}
136
-.fieldset.options > div {
148
+ padding: 0.25em;
149
+}
150
+fieldset.options > div {
137151
 display: flex;
138152
 flex-wrap: wrap;
139153
 font-size: 85%;
140
- margin: 0 0.5em 0.5em 0.5em;
141
-}
142
-.fieldset > .legend > span {
143
- position: relative;
144
-}
145
-.fieldset > .legend::before {
146
- /* Hide the parent element's top border where this
147
- element intersects it. */
148
- content: ' ';
149
- width: 100%;
150
- height: 100%;
151
- opacity: 1;
152
- position: absolute;
153
- top: 0;
154
- left: 0;
155
-}
156
-.fieldset > .legend::after {
154
+}
155
+fieldset.options > legend > #btn-options-toggle::after {
157156
 content: " [hide]";
158157
 position: relative;
159158
 }
160
-.fieldset.collapsed > .legend::after {
159
+fieldset.options.collapsed > legend > #btn-options-toggle::after {
161160
 content: " [show]";
162161
 position: relative;
163162
 }
164163
 span.labeled-input {
165164
 padding: 0.25em;
@@ -184,8 +183,5 @@
184183
 }
185184
 #view-split {
186185
 display: flex;
187186
 flex-direction: column-reverse;
188187
 }
189
-#view-split > .fieldset.options {
190
- margin-top: 0.5em;
191
-}
192188
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -39,10 +39,17 @@
39 overflow: hidden;
40 }
41 #main-wrapper.side-by-side {
42 flex-direction: row;
43 }
 
 
 
 
 
 
 
44 #main-wrapper.swapio {
45 flex-direction: column;
46 }
47 #main-wrapper.side-by-side.swapio {
48 flex-direction: row-reverse;
@@ -58,17 +65,23 @@
58 width: 100%;
59 height: 2px;
60 }
61 .zone-wrapper{
62 display: flex;
 
 
 
 
 
 
 
 
63 flex-direction: column;
64 align-items: stretch;
65 margin: 0 0.25em;
66 flex: 1 1 0%;
67 }
68 .zone-wrapper.output {
69 /*flex: 1 1 0%;*/
70 }
71 #main-wrapper.side-by-side .zone-wrapper {
72 /* Keep the layout from "flopping around" when
73 render-while-typing mode is on. */
74 /*max-width: 50%;*/
@@ -90,18 +103,31 @@
90 align-items: stretch;
91 flex: 1 1 auto;
92 }
93 #pikchr-output-wrapper.text > #pikchr-output > textarea {
94 flex: 1 1 auto;
 
 
 
95 }
96 .zone-wrapper textarea {
 
97 flex: 1 1 auto;
 
 
 
 
 
98 }
99 .zone-wrapper.input {
100 min-height: 10em;
101 /*width: 50%;*/
102 min-width: 20em;
 
 
 
 
103 }
104 .zone-wrapper.output {
105 overflow: auto;
106 justify-content: space-between;
107 }
@@ -110,56 +136,29 @@
110 justify-content: center;
111 flex: 0 1 auto;
112 flex-wrap: wrap;
113 }
114 .button-bar button {
115 margin: 0.25em 1em;
116 }
117 /* Safari supports neither styling of nor event handling on a
118 fieldset legend, so we emulate a fieldset-like widget. */
119 .fieldset {
120 border-radius: 0.5em;
121 border: 1px inset;
122 border-top: none;
123 display: flex;
124 flex-direction: column;
125 }
126 .fieldset > .legend {
127 position: relative;
128 top: -1.25ex;
129 padding: 0 0.5em;
130 font-size: 85%;
131 margin-left: 0.5em;
132 flex: 0 1 auto;
133 align-self: self-start;
134 cursor: pointer;
135 }
136 .fieldset.options > div {
137 display: flex;
138 flex-wrap: wrap;
139 font-size: 85%;
140 margin: 0 0.5em 0.5em 0.5em;
141 }
142 .fieldset > .legend > span {
143 position: relative;
144 }
145 .fieldset > .legend::before {
146 /* Hide the parent element's top border where this
147 element intersects it. */
148 content: ' ';
149 width: 100%;
150 height: 100%;
151 opacity: 1;
152 position: absolute;
153 top: 0;
154 left: 0;
155 }
156 .fieldset > .legend::after {
157 content: " [hide]";
158 position: relative;
159 }
160 .fieldset.collapsed > .legend::after {
161 content: " [show]";
162 position: relative;
163 }
164 span.labeled-input {
165 padding: 0.25em;
@@ -184,8 +183,5 @@
184 }
185 #view-split {
186 display: flex;
187 flex-direction: column-reverse;
188 }
189 #view-split > .fieldset.options {
190 margin-top: 0.5em;
191 }
192
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -39,10 +39,17 @@
39 overflow: hidden;
40 }
41 #main-wrapper.side-by-side {
42 flex-direction: row;
43 }
44 #main-wrapper.side-by-side > fieldset {
45 margin-left: 0.25em;
46 margin-right: 0.25em;
47 }
48 #main-wrapper:not(.side-by-side) > fieldset {
49 margin-bottom: 0.25em;
50 }
51 #main-wrapper.swapio {
52 flex-direction: column;
53 }
54 #main-wrapper.side-by-side.swapio {
55 flex-direction: row-reverse;
@@ -58,17 +65,23 @@
65 width: 100%;
66 height: 2px;
67 }
68 .zone-wrapper{
69 display: flex;
70 margin: 0;
71 flex: 1 1 0%;
72 border-radius: 0.5em;
73 min-width: inherit/*important: resolves inability to scroll fieldset child element!*/;
74 padding: 0.35em 0 0 0;
75 }
76 .zone-wrapper > div {
77 display:flex;
78 flex-direction: column;
79 align-items: stretch;
 
80 flex: 1 1 0%;
81 }
82 .zone-wrapper.output {
 
83 }
84 #main-wrapper.side-by-side .zone-wrapper {
85 /* Keep the layout from "flopping around" when
86 render-while-typing mode is on. */
87 /*max-width: 50%;*/
@@ -90,18 +103,31 @@
103 align-items: stretch;
104 flex: 1 1 auto;
105 }
106 #pikchr-output-wrapper.text > #pikchr-output > textarea {
107 flex: 1 1 auto;
108 }
109 .zone-wrapper > legend {
110 font-size: 85%;
111 }
112 .zone-wrapper textarea {
113 border-radius: 0.5em;
114 flex: 1 1 auto;
115 /*min/max width resolve an inexplicable margin on the RHS. The -1em
116 is for the padding, else we overlap the parent boundaries.*/
117 min-width: calc(100% - 1em);
118 max-width: calc(100% - 1em);
119 padding: 0 0.5em;
120 }
121 .zone-wrapper.input {
122 min-height: 10em;
123 /*width: 50%;*/
124 min-width: 20em;
125 }
126 .zone-wrapper textarea {
127 border: 0;
128 outline: 0;
129 }
130 .zone-wrapper.output {
131 overflow: auto;
132 justify-content: space-between;
133 }
@@ -110,56 +136,29 @@
136 justify-content: center;
137 flex: 0 1 auto;
138 flex-wrap: wrap;
139 }
140 .button-bar button {
141 margin: 0 0.5em;
142 }
143 fieldset.options {
 
 
144 border-radius: 0.5em;
145 border: 1px inset;
 
146 display: flex;
147 flex-direction: column;
148 padding: 0.25em;
149 }
150 fieldset.options > div {
 
 
 
 
 
 
 
 
 
151 display: flex;
152 flex-wrap: wrap;
153 font-size: 85%;
154 }
155 fieldset.options > legend > #btn-options-toggle::after {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156 content: " [hide]";
157 position: relative;
158 }
159 fieldset.options.collapsed > legend > #btn-options-toggle::after {
160 content: " [show]";
161 position: relative;
162 }
163 span.labeled-input {
164 padding: 0.25em;
@@ -184,8 +183,5 @@
183 }
184 #view-split {
185 display: flex;
186 flex-direction: column-reverse;
187 }
 
 
 
188

Keyboard Shortcuts

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