Fossil SCM

pikchrshow: moved markup alignment selection into the fieldset legend and only show it when the preview is showing one of the markup types.

stephan 2020-09-12 00:46 trunk
Commit be99269dc3ffb06f8861bba78ebed8f6d58bb8ccbc9debcbb047ff515fb8930f
Parent bb31279a19aeba4…
2 files changed +35 -21 +5 -1
~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/fossil.page.pikchrshow.js
+35 -21
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -29,26 +29,37 @@
2929
 taContent: E('#content'),
3030
 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
3131
 'readonly', true),
3232
 uiControls: E('#pikchrshow-controls'),
3333
 previewModeToggle: D.button("Preview mode"),
34
- selectMarkupAlignment: D.select()
34
+ selectAlignment: D.append(
35
+ D.select(/*alignment for markup blocks*/),
36
+ D.option('', 'Markup Alignment'),
37
+ D.option('', 'left (default)'),
38
+ D.option('center', 'center')
39
+ )
3540
 };
41
+
42
+ ////////////////////////////////////////////////////////////
43
+ // Setup markup alignment selection...
44
+ D.disable(P.e.selectAlignment.options[0]
45
+ /*has to be done after creation for default selection to work*/
46
+ );
47
+ P.e.selectAlignment.addEventListener('change', function(ev){
48
+ /* Update markdown/fossil wiki preview if it's active */
49
+ if(P.previewMode==1 || P.previewMode==2){
50
+ P.renderPreview();
51
+ }
52
+ }, false);
53
+
3654
 ////////////////////////////////////////////////////////////
3755
 // Setup the preview fieldset's LEGEND element...
3856
 D.append( P.e.previewLegend,
3957
 P.e.previewModeToggle,
4058
 P.e.previewModeLabel,
41
- P.e.previewCopyButton );
42
-
43
- ////////////////////////////////////////////////////////////
44
- // Setup markup alignment selection...
45
- D.append(P.e.uiControls, P.e.selectMarkupAlignment);
46
- D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
47
- ['left', 'center'].forEach(function(val,ndx){
48
- D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
49
- });
59
+ P.e.previewCopyButton,
60
+ D.addClass(P.e.selectAlignment, 'hidden') );
5061
5162
 ////////////////////////////////////////////////////////////
5263
 // Setup clipboard-copy of markup/SVG...
5364
 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
5465
 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
@@ -66,16 +77,10 @@
6677
 P.e.btnSubmit.addEventListener('click', ()=>P.preview(), false);
6778
 P.e.previewModeToggle.addEventListener('click', function(){
6879
 /* Rotate through the 4 available preview modes */
6980
 P.previewMode = ++P.previewMode % 4;
7081
 P.renderPreview();
71
- }, false);
72
- P.e.selectMarkupAlignment.addEventListener('change', function(ev){
73
- /* Update markdown/fossil wiki preview if it's active */
74
- if(P.previewMode==1 || P.previewMode==2){
75
- P.renderPreview();
76
- }
7782
 }, false);
7883
7984
 ////////////////////////////////////////////////////////////
8085
 // Set up selection list of predefined scripts...
8186
 if(true){
@@ -173,10 +178,15 @@
173178
 P.response.raw = P.e.previewTarget.innerHTML;
174179
 P.renderPreview()/*it's already rendered, but this gets all
175180
 labels/headers in sync.*/;
176181
 }
177182
 }/*F.onPageLoad()*/);
183
+
184
+ /* Shows or hides P.e.selectAlignment */
185
+ const showMarkupAlignment = function(showIt){
186
+ P.e.selectAlignment.classList[showIt ? 'remove' : 'add']('hidden');
187
+ };
178188
179189
 /**
180190
 Updates the preview view based on the current preview mode and
181191
 error state.
182192
 */
@@ -196,33 +206,37 @@
196206
 D.enable(this.e.previewModeToggle);
197207
 let label;
198208
 switch(this.previewMode){
199209
 case 0:
200210
 label = "Rendered SVG";
211
+ showMarkupAlignment(false);
201212
 preTgt.innerHTML = this.response.raw;
202213
 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
203214
 break;
204215
 case 1:
205216
 label = "Markdown";
217
+ showMarkupAlignment(true);
206218
 this.e.taPreviewText.value = [
207
- '```pikchr'+(this.e.selectMarkupAlignment.value
208
- ? ' '+this.e.selectMarkupAlignment.value : ''),
219
+ '```pikchr'+(this.e.selectAlignment.value
220
+ ? ' '+this.e.selectAlignment.value : ''),
209221
 this.response.inputText, '```'
210222
 ].join('\n');
211223
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
212224
 break;
213225
 case 2:
214226
 label = "Fossil wiki";
227
+ showMarkupAlignment(true);
215228
 this.e.taPreviewText.value = [
216229
 '<verbatim type="pikchr',
217
- this.e.selectMarkupAlignment.value ? ' '+this.e.selectMarkupAlignment.value : '',
230
+ this.e.selectAlignment.value ? ' '+this.e.selectAlignment.value : '',
218231
 '">', this.response.inputText, '</verbatim>'
219232
 ].join('');
220233
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
221234
 break;
222235
 case 3:
223236
 label = "Raw SVG";
237
+ showMarkupAlignment(false);
224238
 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '');
225239
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
226240
 break;
227241
 }
228242
 this.e.previewModeLabel.innerText = label;
@@ -235,13 +249,13 @@
235249
 P.preview = function fp(){
236250
 if(!fp.hasOwnProperty('toDisable')){
237251
 fp.toDisable = [
238252
 /* input elements to disable during ajax operations */
239253
 this.e.btnSubmit, this.e.taContent,
240
- this.e.selectMarkupAlignment,
254
+ this.e.selectAlignment,
241255
 this.e.cbAutoPreview, this.e.selectScript
242
- /* this.e.previewModeToggle is handled separately */
256
+ /* handled separately: previewModeToggle, previewCopyButton */
243257
 ];
244258
 fp.target = this.e.previewTarget;
245259
 fp.updateView = function(c,isError){
246260
 P.previewMode = 0;
247261
 P.response.raw = c;
248262
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -29,26 +29,37 @@
29 taContent: E('#content'),
30 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
31 'readonly', true),
32 uiControls: E('#pikchrshow-controls'),
33 previewModeToggle: D.button("Preview mode"),
34 selectMarkupAlignment: D.select()
 
 
 
 
 
35 };
 
 
 
 
 
 
 
 
 
 
 
 
 
36 ////////////////////////////////////////////////////////////
37 // Setup the preview fieldset's LEGEND element...
38 D.append( P.e.previewLegend,
39 P.e.previewModeToggle,
40 P.e.previewModeLabel,
41 P.e.previewCopyButton );
42
43 ////////////////////////////////////////////////////////////
44 // Setup markup alignment selection...
45 D.append(P.e.uiControls, P.e.selectMarkupAlignment);
46 D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
47 ['left', 'center'].forEach(function(val,ndx){
48 D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
49 });
50
51 ////////////////////////////////////////////////////////////
52 // Setup clipboard-copy of markup/SVG...
53 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
54 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
@@ -66,16 +77,10 @@
66 P.e.btnSubmit.addEventListener('click', ()=>P.preview(), false);
67 P.e.previewModeToggle.addEventListener('click', function(){
68 /* Rotate through the 4 available preview modes */
69 P.previewMode = ++P.previewMode % 4;
70 P.renderPreview();
71 }, false);
72 P.e.selectMarkupAlignment.addEventListener('change', function(ev){
73 /* Update markdown/fossil wiki preview if it's active */
74 if(P.previewMode==1 || P.previewMode==2){
75 P.renderPreview();
76 }
77 }, false);
78
79 ////////////////////////////////////////////////////////////
80 // Set up selection list of predefined scripts...
81 if(true){
@@ -173,10 +178,15 @@
173 P.response.raw = P.e.previewTarget.innerHTML;
174 P.renderPreview()/*it's already rendered, but this gets all
175 labels/headers in sync.*/;
176 }
177 }/*F.onPageLoad()*/);
 
 
 
 
 
178
179 /**
180 Updates the preview view based on the current preview mode and
181 error state.
182 */
@@ -196,33 +206,37 @@
196 D.enable(this.e.previewModeToggle);
197 let label;
198 switch(this.previewMode){
199 case 0:
200 label = "Rendered SVG";
 
201 preTgt.innerHTML = this.response.raw;
202 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
203 break;
204 case 1:
205 label = "Markdown";
 
206 this.e.taPreviewText.value = [
207 '```pikchr'+(this.e.selectMarkupAlignment.value
208 ? ' '+this.e.selectMarkupAlignment.value : ''),
209 this.response.inputText, '```'
210 ].join('\n');
211 D.append(D.clearElement(preTgt), this.e.taPreviewText);
212 break;
213 case 2:
214 label = "Fossil wiki";
 
215 this.e.taPreviewText.value = [
216 '<verbatim type="pikchr',
217 this.e.selectMarkupAlignment.value ? ' '+this.e.selectMarkupAlignment.value : '',
218 '">', this.response.inputText, '</verbatim>'
219 ].join('');
220 D.append(D.clearElement(preTgt), this.e.taPreviewText);
221 break;
222 case 3:
223 label = "Raw SVG";
 
224 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '');
225 D.append(D.clearElement(preTgt), this.e.taPreviewText);
226 break;
227 }
228 this.e.previewModeLabel.innerText = label;
@@ -235,13 +249,13 @@
235 P.preview = function fp(){
236 if(!fp.hasOwnProperty('toDisable')){
237 fp.toDisable = [
238 /* input elements to disable during ajax operations */
239 this.e.btnSubmit, this.e.taContent,
240 this.e.selectMarkupAlignment,
241 this.e.cbAutoPreview, this.e.selectScript
242 /* this.e.previewModeToggle is handled separately */
243 ];
244 fp.target = this.e.previewTarget;
245 fp.updateView = function(c,isError){
246 P.previewMode = 0;
247 P.response.raw = c;
248
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -29,26 +29,37 @@
29 taContent: E('#content'),
30 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
31 'readonly', true),
32 uiControls: E('#pikchrshow-controls'),
33 previewModeToggle: D.button("Preview mode"),
34 selectAlignment: D.append(
35 D.select(/*alignment for markup blocks*/),
36 D.option('', 'Markup Alignment'),
37 D.option('', 'left (default)'),
38 D.option('center', 'center')
39 )
40 };
41
42 ////////////////////////////////////////////////////////////
43 // Setup markup alignment selection...
44 D.disable(P.e.selectAlignment.options[0]
45 /*has to be done after creation for default selection to work*/
46 );
47 P.e.selectAlignment.addEventListener('change', function(ev){
48 /* Update markdown/fossil wiki preview if it's active */
49 if(P.previewMode==1 || P.previewMode==2){
50 P.renderPreview();
51 }
52 }, false);
53
54 ////////////////////////////////////////////////////////////
55 // Setup the preview fieldset's LEGEND element...
56 D.append( P.e.previewLegend,
57 P.e.previewModeToggle,
58 P.e.previewModeLabel,
59 P.e.previewCopyButton,
60 D.addClass(P.e.selectAlignment, 'hidden') );
 
 
 
 
 
 
 
61
62 ////////////////////////////////////////////////////////////
63 // Setup clipboard-copy of markup/SVG...
64 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
65 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
@@ -66,16 +77,10 @@
77 P.e.btnSubmit.addEventListener('click', ()=>P.preview(), false);
78 P.e.previewModeToggle.addEventListener('click', function(){
79 /* Rotate through the 4 available preview modes */
80 P.previewMode = ++P.previewMode % 4;
81 P.renderPreview();
 
 
 
 
 
 
82 }, false);
83
84 ////////////////////////////////////////////////////////////
85 // Set up selection list of predefined scripts...
86 if(true){
@@ -173,10 +178,15 @@
178 P.response.raw = P.e.previewTarget.innerHTML;
179 P.renderPreview()/*it's already rendered, but this gets all
180 labels/headers in sync.*/;
181 }
182 }/*F.onPageLoad()*/);
183
184 /* Shows or hides P.e.selectAlignment */
185 const showMarkupAlignment = function(showIt){
186 P.e.selectAlignment.classList[showIt ? 'remove' : 'add']('hidden');
187 };
188
189 /**
190 Updates the preview view based on the current preview mode and
191 error state.
192 */
@@ -196,33 +206,37 @@
206 D.enable(this.e.previewModeToggle);
207 let label;
208 switch(this.previewMode){
209 case 0:
210 label = "Rendered SVG";
211 showMarkupAlignment(false);
212 preTgt.innerHTML = this.response.raw;
213 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
214 break;
215 case 1:
216 label = "Markdown";
217 showMarkupAlignment(true);
218 this.e.taPreviewText.value = [
219 '```pikchr'+(this.e.selectAlignment.value
220 ? ' '+this.e.selectAlignment.value : ''),
221 this.response.inputText, '```'
222 ].join('\n');
223 D.append(D.clearElement(preTgt), this.e.taPreviewText);
224 break;
225 case 2:
226 label = "Fossil wiki";
227 showMarkupAlignment(true);
228 this.e.taPreviewText.value = [
229 '<verbatim type="pikchr',
230 this.e.selectAlignment.value ? ' '+this.e.selectAlignment.value : '',
231 '">', this.response.inputText, '</verbatim>'
232 ].join('');
233 D.append(D.clearElement(preTgt), this.e.taPreviewText);
234 break;
235 case 3:
236 label = "Raw SVG";
237 showMarkupAlignment(false);
238 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '');
239 D.append(D.clearElement(preTgt), this.e.taPreviewText);
240 break;
241 }
242 this.e.previewModeLabel.innerText = label;
@@ -235,13 +249,13 @@
249 P.preview = function fp(){
250 if(!fp.hasOwnProperty('toDisable')){
251 fp.toDisable = [
252 /* input elements to disable during ajax operations */
253 this.e.btnSubmit, this.e.taContent,
254 this.e.selectAlignment,
255 this.e.cbAutoPreview, this.e.selectScript
256 /* handled separately: previewModeToggle, previewCopyButton */
257 ];
258 fp.target = this.e.previewTarget;
259 fp.updateView = function(c,isError){
260 P.previewMode = 0;
261 P.response.raw = c;
262
M src/pikchrshow.c
+5 -1
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -107,11 +107,15 @@
107107
 "filter: invert(1) hue-rotate(180deg);"
108108
 "}");
109109
 CX("#sbs-wrapper > fieldset {"
110110
 "padding: 0.25em 0.5em; border-radius: 0.25em;"
111111
 "}");
112
- CX("fieldset > legend > * {margin-right: 0.25em}");
112
+ CX("fieldset > legend > *,"
113
+ "fieldset > legend > .copy-button"
114
+ /* ^^^ better-match .copy-button selector required to override
115
+ default */
116
+ "{margin-right: 0.5em}");
113117
 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
114118
 CX("</style>");
115119
 CX("<div>Input pikchr code and tap Preview to render it:</div>");
116120
 CX("<div id='sbs-wrapper'>");
117121
 CX("<div id='pikchrshow-form'>");
118122
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -107,11 +107,15 @@
107 "filter: invert(1) hue-rotate(180deg);"
108 "}");
109 CX("#sbs-wrapper > fieldset {"
110 "padding: 0.25em 0.5em; border-radius: 0.25em;"
111 "}");
112 CX("fieldset > legend > * {margin-right: 0.25em}");
 
 
 
 
113 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
114 CX("</style>");
115 CX("<div>Input pikchr code and tap Preview to render it:</div>");
116 CX("<div id='sbs-wrapper'>");
117 CX("<div id='pikchrshow-form'>");
118
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -107,11 +107,15 @@
107 "filter: invert(1) hue-rotate(180deg);"
108 "}");
109 CX("#sbs-wrapper > fieldset {"
110 "padding: 0.25em 0.5em; border-radius: 0.25em;"
111 "}");
112 CX("fieldset > legend > *,"
113 "fieldset > legend > .copy-button"
114 /* ^^^ better-match .copy-button selector required to override
115 default */
116 "{margin-right: 0.5em}");
117 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
118 CX("</style>");
119 CX("<div>Input pikchr code and tap Preview to render it:</div>");
120 CX("<div id='sbs-wrapper'>");
121 CX("<div id='pikchrshow-form'>");
122

Keyboard Shortcuts

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