Fossil SCM

pikchrshow: saved some space in the button bar and added help buttonlets to explain its two checkboxes.

stephan 2020-09-11 22:24 trunk
Commit 7ddd2781a0b568d2fad90aefd25359965f5b77bcd07c4af8a1e06064c8b2f73d
Parent d4bb5251b342eb5…
2 files changed +29 -5 +3 -2
~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/fossil.page.pikchrshow.js
+29 -5
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -2,11 +2,11 @@
22
 "use strict";
33
 /**
44
 Client-side implementation of the /pikchrshow app. Requires that
55
 the fossil JS bootstrapping is complete and that these fossil JS
66
 APIs have been installed: fossil.fetch, fossil.dom,
7
- fossil.copybutton
7
+ fossil.copybutton, fossil.popupwidget
88
 */
99
 const E = (s)=>document.querySelector(s),
1010
 D = F.dom,
1111
 P = F.page;
1212
@@ -77,11 +77,23 @@
7777
 ;
7878
 D.append(
7979
 cbWrap,
8080
 selectScript,
8181
 cbAutoPreview,
82
- D.label(cbAutoPreview,"Auto-preview?")
82
+ D.label(cbAutoPreview,"Auto-preview?"),
83
+ F.helpButtonlets.create(
84
+ D.append(D.div(),
85
+ 'Auto-preview automatically previews selected ',
86
+ 'built-in pikchr scripts by sending them to ',
87
+ 'the server for rendering. Not recommended on a ',
88
+ 'slow connection/server.',
89
+ D.br(),D.br(),
90
+ 'Pikchr scripts may also be dragged/dropped from ',
91
+ 'the local filesystem into the text area, but ',
92
+ 'the auto-preview option does not apply to them.'
93
+ )
94
+ )
8395
 ).childNodes.forEach(function(ch){
8496
 ch.style.margin = "0 0.25em";
8597
 });
8698
 D.append(P.e.uiControls, cbWrap);
8799
 P.predefinedPiks.forEach(function(script,ndx){
@@ -97,12 +109,25 @@
97109
 P.e.taContent.value = val;
98110
 if(cbAutoPreview.checked) P.preview();
99111
 }, false);
100112
 }
101113
102
- // Move dark mode checkbox to the end
103
- D.append(P.e.uiControls, P.e.cbDarkMode.parentNode);
114
+ // Move dark mode checkbox to the end and add a help buttonlet
115
+ D.append(
116
+ P.e.uiControls,
117
+ D.append(
118
+ P.e.cbDarkMode.parentNode,
119
+ F.helpButtonlets.create(
120
+ D.span(),
121
+ 'Dark mode changes the colors of rendered SVG to ',
122
+ 'make them more visible in dark-themed skins. ',
123
+ 'This only changes (using CSS) how they are rendered, ',
124
+ 'not any actual colors written in the script.'
125
+ )
126
+ )
127
+ );
128
+
104129
105130
 // File drag/drop pikchr scripts into P.e.taContent.
106131
 // Adapted from: https://stackoverflow.com/a/58677161
107132
 const dropfile = function(file){
108133
 const reader = new FileReader();
@@ -253,11 +278,10 @@
253278
254279
 }
255280
 */
256281
 P.predefinedPiks = [
257282
 {name: "--Predefined Scripts--"},
258
- {name: "Tip: drag/drop pikchr files into the textarea"},
259283
 /*
260284
 The following were imported from the pikchr test scripts:
261285
262286
 https://fossil-scm.org/pikchr/dir/tests
263287
 */
264288
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -2,11 +2,11 @@
2 "use strict";
3 /**
4 Client-side implementation of the /pikchrshow app. Requires that
5 the fossil JS bootstrapping is complete and that these fossil JS
6 APIs have been installed: fossil.fetch, fossil.dom,
7 fossil.copybutton
8 */
9 const E = (s)=>document.querySelector(s),
10 D = F.dom,
11 P = F.page;
12
@@ -77,11 +77,23 @@
77 ;
78 D.append(
79 cbWrap,
80 selectScript,
81 cbAutoPreview,
82 D.label(cbAutoPreview,"Auto-preview?")
 
 
 
 
 
 
 
 
 
 
 
 
83 ).childNodes.forEach(function(ch){
84 ch.style.margin = "0 0.25em";
85 });
86 D.append(P.e.uiControls, cbWrap);
87 P.predefinedPiks.forEach(function(script,ndx){
@@ -97,12 +109,25 @@
97 P.e.taContent.value = val;
98 if(cbAutoPreview.checked) P.preview();
99 }, false);
100 }
101
102 // Move dark mode checkbox to the end
103 D.append(P.e.uiControls, P.e.cbDarkMode.parentNode);
 
 
 
 
 
 
 
 
 
 
 
 
 
104
105 // File drag/drop pikchr scripts into P.e.taContent.
106 // Adapted from: https://stackoverflow.com/a/58677161
107 const dropfile = function(file){
108 const reader = new FileReader();
@@ -253,11 +278,10 @@
253
254 }
255 */
256 P.predefinedPiks = [
257 {name: "--Predefined Scripts--"},
258 {name: "Tip: drag/drop pikchr files into the textarea"},
259 /*
260 The following were imported from the pikchr test scripts:
261
262 https://fossil-scm.org/pikchr/dir/tests
263 */
264
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -2,11 +2,11 @@
2 "use strict";
3 /**
4 Client-side implementation of the /pikchrshow app. Requires that
5 the fossil JS bootstrapping is complete and that these fossil JS
6 APIs have been installed: fossil.fetch, fossil.dom,
7 fossil.copybutton, fossil.popupwidget
8 */
9 const E = (s)=>document.querySelector(s),
10 D = F.dom,
11 P = F.page;
12
@@ -77,11 +77,23 @@
77 ;
78 D.append(
79 cbWrap,
80 selectScript,
81 cbAutoPreview,
82 D.label(cbAutoPreview,"Auto-preview?"),
83 F.helpButtonlets.create(
84 D.append(D.div(),
85 'Auto-preview automatically previews selected ',
86 'built-in pikchr scripts by sending them to ',
87 'the server for rendering. Not recommended on a ',
88 'slow connection/server.',
89 D.br(),D.br(),
90 'Pikchr scripts may also be dragged/dropped from ',
91 'the local filesystem into the text area, but ',
92 'the auto-preview option does not apply to them.'
93 )
94 )
95 ).childNodes.forEach(function(ch){
96 ch.style.margin = "0 0.25em";
97 });
98 D.append(P.e.uiControls, cbWrap);
99 P.predefinedPiks.forEach(function(script,ndx){
@@ -97,12 +109,25 @@
109 P.e.taContent.value = val;
110 if(cbAutoPreview.checked) P.preview();
111 }, false);
112 }
113
114 // Move dark mode checkbox to the end and add a help buttonlet
115 D.append(
116 P.e.uiControls,
117 D.append(
118 P.e.cbDarkMode.parentNode,
119 F.helpButtonlets.create(
120 D.span(),
121 'Dark mode changes the colors of rendered SVG to ',
122 'make them more visible in dark-themed skins. ',
123 'This only changes (using CSS) how they are rendered, ',
124 'not any actual colors written in the script.'
125 )
126 )
127 );
128
129
130 // File drag/drop pikchr scripts into P.e.taContent.
131 // Adapted from: https://stackoverflow.com/a/58677161
132 const dropfile = function(file){
133 const reader = new FileReader();
@@ -253,11 +278,10 @@
278
279 }
280 */
281 P.predefinedPiks = [
282 {name: "--Predefined Scripts--"},
 
283 /*
284 The following were imported from the pikchr test scripts:
285
286 https://fossil-scm.org/pikchr/dir/tests
287 */
288
M src/pikchrshow.c
+3 -2
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -117,11 +117,11 @@
117117
 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
118118
 zContent/*safe-for-%s*/);
119119
 CX("<div id='pikchrshow-controls'>");
120120
 CX("<button id='pikchr-submit-preview'>Preview</button>");
121121
 style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
122
- "Simulate dark theme?",
122
+ "Dark mode?",
123123
 "1", flipColors, 0);
124124
 CX("</div>"/*#pikchrshow-controls*/);
125125
 CX("</div>"/*#pikchrshow-form*/);
126126
 CX("<fieldset id='pikchrshow-output-wrapper'>");
127127
 CX("<legend>Preview <span class='copy-button'></span></legend>");
@@ -140,11 +140,12 @@
140140
 }
141141
 CX("</div>"/*#pikchrshow-output*/);
142142
 CX("</fieldset>");
143143
 CX("</div>"/*sbs-wrapper*/);
144144
 if(!builtin_bundle_all_fossil_js_apis()){
145
- builtin_emit_fossil_js_apis("dom", "fetch", "copybutton", 0);
145
+ builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
146
+ "popupwidget", 0);
146147
 }
147148
 builtin_emit_fossil_js_apis("page.pikchrshow", 0);
148149
 builtin_fulfill_js_requests();
149150
 style_footer();
150151
 }
151152
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -117,11 +117,11 @@
117 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
118 zContent/*safe-for-%s*/);
119 CX("<div id='pikchrshow-controls'>");
120 CX("<button id='pikchr-submit-preview'>Preview</button>");
121 style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
122 "Simulate dark theme?",
123 "1", flipColors, 0);
124 CX("</div>"/*#pikchrshow-controls*/);
125 CX("</div>"/*#pikchrshow-form*/);
126 CX("<fieldset id='pikchrshow-output-wrapper'>");
127 CX("<legend>Preview <span class='copy-button'></span></legend>");
@@ -140,11 +140,12 @@
140 }
141 CX("</div>"/*#pikchrshow-output*/);
142 CX("</fieldset>");
143 CX("</div>"/*sbs-wrapper*/);
144 if(!builtin_bundle_all_fossil_js_apis()){
145 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton", 0);
 
146 }
147 builtin_emit_fossil_js_apis("page.pikchrshow", 0);
148 builtin_fulfill_js_requests();
149 style_footer();
150 }
151
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -117,11 +117,11 @@
117 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
118 zContent/*safe-for-%s*/);
119 CX("<div id='pikchrshow-controls'>");
120 CX("<button id='pikchr-submit-preview'>Preview</button>");
121 style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
122 "Dark mode?",
123 "1", flipColors, 0);
124 CX("</div>"/*#pikchrshow-controls*/);
125 CX("</div>"/*#pikchrshow-form*/);
126 CX("<fieldset id='pikchrshow-output-wrapper'>");
127 CX("<legend>Preview <span class='copy-button'></span></legend>");
@@ -140,11 +140,12 @@
140 }
141 CX("</div>"/*#pikchrshow-output*/);
142 CX("</fieldset>");
143 CX("</div>"/*sbs-wrapper*/);
144 if(!builtin_bundle_all_fossil_js_apis()){
145 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
146 "popupwidget", 0);
147 }
148 builtin_emit_fossil_js_apis("page.pikchrshow", 0);
149 builtin_fulfill_js_requests();
150 style_footer();
151 }
152

Keyboard Shortcuts

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