Fossil SCM

pikchrshow: tapping the preview mode label now activates the neighboring copy button.

stephan 2020-09-12 03:34 trunk
Commit 3e10ece71e3cc12fd5b33f3ae30e43ee02cc749de8737891b2153fc459f781e1
Parent 62a5d0cfb9f36f6…
2 files changed +6 -2 +3 -5
~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/fossil.page.pikchrshow.js
+6 -2
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -20,12 +20,15 @@
2020
 F.onPageLoad(function() {
2121
 document.body.classList.add('pikchrshow');
2222
 P.e = { /* various DOM elements we work with... */
2323
 previewTarget: E('#pikchrshow-output'),
2424
 previewLegend: E('#pikchrshow-output-wrapper > legend'),
25
- previewModeLabel: D.span(/*holds the text for the preview mode label*/),
26
- previewCopyButton: D.addClass(D.span(), 'copy-button'),
25
+ previewCopyButton: D.attr(
26
+ D.addClass(D.span(),'copy-button'),
27
+ 'id','preview-copy-button'
28
+ ),
29
+ previewModeLabel: D.label('preview-copy-button'),
2730
 btnSubmit: E('#pikchr-submit-preview'),
2831
 cbDarkMode: E('#flipcolors-wrapper > input[type=checkbox]'),
2932
 taContent: E('#content'),
3033
 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
3134
 'readonly', true),
@@ -58,10 +61,11 @@
5861
5962
 ////////////////////////////////////////////////////////////
6063
 // Setup clipboard-copy of markup/SVG...
6164
 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
6265
 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
66
+ P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
6367
6468
 ////////////////////////////////////////////////////////////
6569
 // Set up dark mode simulator...
6670
 P.e.cbDarkMode.addEventListener('change', function(ev){
6771
 if(ev.target.checked) D.addClass(P.e.previewTarget, 'dark-mode');
6872
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -20,12 +20,15 @@
20 F.onPageLoad(function() {
21 document.body.classList.add('pikchrshow');
22 P.e = { /* various DOM elements we work with... */
23 previewTarget: E('#pikchrshow-output'),
24 previewLegend: E('#pikchrshow-output-wrapper > legend'),
25 previewModeLabel: D.span(/*holds the text for the preview mode label*/),
26 previewCopyButton: D.addClass(D.span(), 'copy-button'),
 
 
 
27 btnSubmit: E('#pikchr-submit-preview'),
28 cbDarkMode: E('#flipcolors-wrapper > input[type=checkbox]'),
29 taContent: E('#content'),
30 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
31 'readonly', true),
@@ -58,10 +61,11 @@
58
59 ////////////////////////////////////////////////////////////
60 // Setup clipboard-copy of markup/SVG...
61 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
62 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
 
63
64 ////////////////////////////////////////////////////////////
65 // Set up dark mode simulator...
66 P.e.cbDarkMode.addEventListener('change', function(ev){
67 if(ev.target.checked) D.addClass(P.e.previewTarget, 'dark-mode');
68
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -20,12 +20,15 @@
20 F.onPageLoad(function() {
21 document.body.classList.add('pikchrshow');
22 P.e = { /* various DOM elements we work with... */
23 previewTarget: E('#pikchrshow-output'),
24 previewLegend: E('#pikchrshow-output-wrapper > legend'),
25 previewCopyButton: D.attr(
26 D.addClass(D.span(),'copy-button'),
27 'id','preview-copy-button'
28 ),
29 previewModeLabel: D.label('preview-copy-button'),
30 btnSubmit: E('#pikchr-submit-preview'),
31 cbDarkMode: E('#flipcolors-wrapper > input[type=checkbox]'),
32 taContent: E('#content'),
33 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
34 'readonly', true),
@@ -58,10 +61,11 @@
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 P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
67
68 ////////////////////////////////////////////////////////////
69 // Set up dark mode simulator...
70 P.e.cbDarkMode.addEventListener('change', function(ev){
71 if(ev.target.checked) D.addClass(P.e.previewTarget, 'dark-mode');
72
M src/pikchrshow.c
+3 -5
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -114,15 +114,13 @@
114114
 "}");
115115
 CX("#pikchrshow-output-wrapper > legend {"
116116
 "display: flex; flex-direction: row;"
117117
 "align-items: center;"
118118
 "}");
119
- CX("#pikchrshow-output-wrapper > legend > *,"
120
- "#pikchrshow-output-wrapper > legend > .copy-button"
121
- /* ^^^ better-match .copy-button selector required to override
122
- default */
123
- "{margin-right: 0.5em}");
119
+ CX("#pikchrshow-output-wrapper > legend > *:not(.copy-button)"
120
+ "{margin-right: 0.5em}"
121
+ );
124122
 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
125123
 CX("</style>");
126124
 CX("<div>Input pikchr code and tap Preview to render it:</div>");
127125
 CX("<div id='sbs-wrapper'>");
128126
 CX("<div id='pikchrshow-form'>");
129127
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -114,15 +114,13 @@
114 "}");
115 CX("#pikchrshow-output-wrapper > legend {"
116 "display: flex; flex-direction: row;"
117 "align-items: center;"
118 "}");
119 CX("#pikchrshow-output-wrapper > legend > *,"
120 "#pikchrshow-output-wrapper > legend > .copy-button"
121 /* ^^^ better-match .copy-button selector required to override
122 default */
123 "{margin-right: 0.5em}");
124 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
125 CX("</style>");
126 CX("<div>Input pikchr code and tap Preview to render it:</div>");
127 CX("<div id='sbs-wrapper'>");
128 CX("<div id='pikchrshow-form'>");
129
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -114,15 +114,13 @@
114 "}");
115 CX("#pikchrshow-output-wrapper > legend {"
116 "display: flex; flex-direction: row;"
117 "align-items: center;"
118 "}");
119 CX("#pikchrshow-output-wrapper > legend > *:not(.copy-button)"
120 "{margin-right: 0.5em}"
121 );
 
 
122 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
123 CX("</style>");
124 CX("<div>Input pikchr code and tap Preview to render it:</div>");
125 CX("<div id='sbs-wrapper'>");
126 CX("<div id='pikchrshow-form'>");
127

Keyboard Shortcuts

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