Fossil SCM

Minor code readability tweaks, nothing functional.

stephan 2020-09-11 22:30 trunk
Commit f73f1e36adc6685fb4413202939f8731bbb8139968dbf28a399c59d1a05bd8ef
Parent 7ddd2781a0b568d…
1 file changed +21 -12
~ src/fossil.page.pikchrshow.js
M src/fossil.page.pikchrshow.js
+21 -12
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -32,30 +32,34 @@
3232
 btnTogglePreviewMode: D.button("Preview mode"),
3333
 selectMarkupAlignment: D.select()
3434
 };
3535
 D.append(P.e.uiControls, P.e.btnTogglePreviewMode);
3636
37
+ ////////////////////////////////////////////////////////////
3738
 // Setup markup alignment selection...
3839
 D.append(P.e.uiControls, P.e.selectMarkupAlignment);
3940
 D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
4041
 ['left', 'center'].forEach(function(val,ndx){
4142
 D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
4243
 });
4344
45
+ ////////////////////////////////////////////////////////////
4446
 // Setup clipboard-copy of markup/SVG...
4547
 F.copyButton(P.e.btnCopy, {copyFromElement: P.e.taPreviewText});
4648
 P.e.btnCopy.addEventListener('text-copied',function(ev){
4749
 D.flashOnce(ev.target);
4850
 },false);
4951
52
+ ////////////////////////////////////////////////////////////
5053
 // Set up dark mode simulator...
5154
 P.e.cbDarkMode.addEventListener('change', function(ev){
5255
 if(ev.target.checked) D.addClass(P.e.previewTarget, 'dark-mode');
5356
 else D.removeClass(P.e.previewTarget, 'dark-mode');
5457
 }, false);
5558
 if(P.e.cbDarkMode.checked) D.addClass(P.e.previewTarget, 'dark-mode');
5659
60
+ ////////////////////////////////////////////////////////////
5761
 // Set up preview update and preview mode toggle...
5862
 P.e.btnSubmit.addEventListener('click', ()=>P.preview(), false);
5963
 P.e.btnTogglePreviewMode.addEventListener('click', function(){
6064
 /* Rotate through the 4 available preview modes */
6165
 P.previewMode = ++P.previewMode % 4;
@@ -66,10 +70,11 @@
6670
 if(P.previewMode==1 || P.previewMode==2){
6771
 P.renderPreview();
6872
 }
6973
 }, false);
7074
75
+ ////////////////////////////////////////////////////////////
7176
 // Set up selection list of predefined scripts...
7277
 if(true){
7378
 const selectScript = P.e.selectScript = D.select(),
7479
 cbAutoPreview = P.e.cbAutoPreview =
7580
 D.attr(D.checkbox(),'id', 'cb-auto-preview','checked',true),
@@ -109,26 +114,27 @@
109114
 P.e.taContent.value = val;
110115
 if(cbAutoPreview.checked) P.preview();
111116
 }, false);
112117
 }
113118
119
+ ////////////////////////////////////////////////////////////
114120
 // Move dark mode checkbox to the end and add a help buttonlet
115121
 D.append(
116122
 P.e.uiControls,
117123
 D.append(
118
- P.e.cbDarkMode.parentNode,
124
+ P.e.cbDarkMode.parentNode/*the .input-with-label element*/,
119125
 F.helpButtonlets.create(
120126
 D.span(),
121127
 'Dark mode changes the colors of rendered SVG to ',
122128
 'make them more visible in dark-themed skins. ',
123129
 'This only changes (using CSS) how they are rendered, ',
124130
 'not any actual colors written in the script.'
125131
 )
126132
 )
127133
 );
128
-
129134
135
+ ////////////////////////////////////////////////////////////
130136
 // File drag/drop pikchr scripts into P.e.taContent.
131137
 // Adapted from: https://stackoverflow.com/a/58677161
132138
 const dropfile = function(file){
133139
 const reader = new FileReader();
134140
 reader.onload = function(e) {P.e.taContent.value = e.target.result};
@@ -140,24 +146,25 @@
140146
 ev.preventDefault();
141147
 const file = ev.dataTransfer.files[0];
142148
 if(file) dropfile(file);
143149
 }, false);
144150
 dropTarget.addEventListener('dragenter', function(ev){
145
- //ev.stopPropagation();
146
- //ev.preventDefault();
151
+ ev.stopPropagation();
152
+ ev.preventDefault();
147153
 console.debug("dragenter");
148154
 D.addClass(dropTarget, 'dragover');
149155
 }, false);
150156
 dropTarget.addEventListener('dragleave', function(ev){
151
- //ev.stopPropagation();
152
- //ev.preventDefault();
157
+ ev.stopPropagation();
158
+ ev.preventDefault();
153159
 console.debug("dragleave");
154160
 D.removeClass(dropTarget, 'dragover');
155161
 }, false);
156162
157
- // If we start with content, get it in sync with the state generated
158
- // by P.preview().
163
+ ////////////////////////////////////////////////////////////
164
+ // If we start with content, get it in sync with the state
165
+ // generated by P.preview().
159166
 if(P.e.taContent.value/*was pre-filled server-side*/){
160167
 /* Fill our "response" state so that renderPreview() can work */
161168
 P.response.inputText = P.e.taContent.value;
162169
 P.response.raw = P.e.previewTarget.innerHTML;
163170
 P.renderPreview()/*it's already rendered, but this gets all
@@ -169,11 +176,11 @@
169176
 Updates the preview view based on the current preview mode and
170177
 error state.
171178
 */
172179
 P.renderPreview = function f(){
173180
 if(!f.hasOwnProperty('rxNonce')){
174
- f.rxNonce = /<!--.+-->\r?\n?/g /*nonce comments*/;
181
+ f.rxNonce = /<!--.+-->\r?\n?/g /*pikchr nonce comments*/;
175182
 }
176183
 const preTgt = this.e.previewTarget;
177184
 if(this.response.isError){
178185
 preTgt.innerHTML = this.response.raw;
179186
 D.addClass(preTgt, 'error');
@@ -215,19 +222,21 @@
215222
 }
216223
 D.append(D.clearElement(this.e.previewModeLabel),
217224
 label, this.e.btnCopy);
218225
 };
219226
220
- /** Fetches the preview from the server and updates the preview to
221
- the rendered SVG content or error report. */
227
+ /**
228
+ Fetches the preview from the server and updates the preview to
229
+ the rendered SVG content or error report.
230
+ */
222231
 P.preview = function fp(){
223232
 if(!fp.hasOwnProperty('toDisable')){
224233
 fp.toDisable = [
225234
 /* input elements to disable during ajax operations */
226235
 this.e.btnSubmit, this.e.taContent,
227236
 this.e.selectMarkupAlignment,
228
- this.e.cbAutoPreview, this.e.selectScript,
237
+ this.e.cbAutoPreview, this.e.selectScript
229238
 /* this.e.btnTogglePreviewMode is handled separately */
230239
 ];
231240
 fp.target = this.e.previewTarget;
232241
 fp.updateView = function(c,isError){
233242
 P.previewMode = 0;
234243
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -32,30 +32,34 @@
32 btnTogglePreviewMode: D.button("Preview mode"),
33 selectMarkupAlignment: D.select()
34 };
35 D.append(P.e.uiControls, P.e.btnTogglePreviewMode);
36
 
37 // Setup markup alignment selection...
38 D.append(P.e.uiControls, P.e.selectMarkupAlignment);
39 D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
40 ['left', 'center'].forEach(function(val,ndx){
41 D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
42 });
43
 
44 // Setup clipboard-copy of markup/SVG...
45 F.copyButton(P.e.btnCopy, {copyFromElement: P.e.taPreviewText});
46 P.e.btnCopy.addEventListener('text-copied',function(ev){
47 D.flashOnce(ev.target);
48 },false);
49
 
50 // Set up dark mode simulator...
51 P.e.cbDarkMode.addEventListener('change', function(ev){
52 if(ev.target.checked) D.addClass(P.e.previewTarget, 'dark-mode');
53 else D.removeClass(P.e.previewTarget, 'dark-mode');
54 }, false);
55 if(P.e.cbDarkMode.checked) D.addClass(P.e.previewTarget, 'dark-mode');
56
 
57 // Set up preview update and preview mode toggle...
58 P.e.btnSubmit.addEventListener('click', ()=>P.preview(), false);
59 P.e.btnTogglePreviewMode.addEventListener('click', function(){
60 /* Rotate through the 4 available preview modes */
61 P.previewMode = ++P.previewMode % 4;
@@ -66,10 +70,11 @@
66 if(P.previewMode==1 || P.previewMode==2){
67 P.renderPreview();
68 }
69 }, false);
70
 
71 // Set up selection list of predefined scripts...
72 if(true){
73 const selectScript = P.e.selectScript = D.select(),
74 cbAutoPreview = P.e.cbAutoPreview =
75 D.attr(D.checkbox(),'id', 'cb-auto-preview','checked',true),
@@ -109,26 +114,27 @@
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();
134 reader.onload = function(e) {P.e.taContent.value = e.target.result};
@@ -140,24 +146,25 @@
140 ev.preventDefault();
141 const file = ev.dataTransfer.files[0];
142 if(file) dropfile(file);
143 }, false);
144 dropTarget.addEventListener('dragenter', function(ev){
145 //ev.stopPropagation();
146 //ev.preventDefault();
147 console.debug("dragenter");
148 D.addClass(dropTarget, 'dragover');
149 }, false);
150 dropTarget.addEventListener('dragleave', function(ev){
151 //ev.stopPropagation();
152 //ev.preventDefault();
153 console.debug("dragleave");
154 D.removeClass(dropTarget, 'dragover');
155 }, false);
156
157 // If we start with content, get it in sync with the state generated
158 // by P.preview().
 
159 if(P.e.taContent.value/*was pre-filled server-side*/){
160 /* Fill our "response" state so that renderPreview() can work */
161 P.response.inputText = P.e.taContent.value;
162 P.response.raw = P.e.previewTarget.innerHTML;
163 P.renderPreview()/*it's already rendered, but this gets all
@@ -169,11 +176,11 @@
169 Updates the preview view based on the current preview mode and
170 error state.
171 */
172 P.renderPreview = function f(){
173 if(!f.hasOwnProperty('rxNonce')){
174 f.rxNonce = /<!--.+-->\r?\n?/g /*nonce comments*/;
175 }
176 const preTgt = this.e.previewTarget;
177 if(this.response.isError){
178 preTgt.innerHTML = this.response.raw;
179 D.addClass(preTgt, 'error');
@@ -215,19 +222,21 @@
215 }
216 D.append(D.clearElement(this.e.previewModeLabel),
217 label, this.e.btnCopy);
218 };
219
220 /** Fetches the preview from the server and updates the preview to
221 the rendered SVG content or error report. */
 
 
222 P.preview = function fp(){
223 if(!fp.hasOwnProperty('toDisable')){
224 fp.toDisable = [
225 /* input elements to disable during ajax operations */
226 this.e.btnSubmit, this.e.taContent,
227 this.e.selectMarkupAlignment,
228 this.e.cbAutoPreview, this.e.selectScript,
229 /* this.e.btnTogglePreviewMode is handled separately */
230 ];
231 fp.target = this.e.previewTarget;
232 fp.updateView = function(c,isError){
233 P.previewMode = 0;
234
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -32,30 +32,34 @@
32 btnTogglePreviewMode: D.button("Preview mode"),
33 selectMarkupAlignment: D.select()
34 };
35 D.append(P.e.uiControls, P.e.btnTogglePreviewMode);
36
37 ////////////////////////////////////////////////////////////
38 // Setup markup alignment selection...
39 D.append(P.e.uiControls, P.e.selectMarkupAlignment);
40 D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
41 ['left', 'center'].forEach(function(val,ndx){
42 D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
43 });
44
45 ////////////////////////////////////////////////////////////
46 // Setup clipboard-copy of markup/SVG...
47 F.copyButton(P.e.btnCopy, {copyFromElement: P.e.taPreviewText});
48 P.e.btnCopy.addEventListener('text-copied',function(ev){
49 D.flashOnce(ev.target);
50 },false);
51
52 ////////////////////////////////////////////////////////////
53 // Set up dark mode simulator...
54 P.e.cbDarkMode.addEventListener('change', function(ev){
55 if(ev.target.checked) D.addClass(P.e.previewTarget, 'dark-mode');
56 else D.removeClass(P.e.previewTarget, 'dark-mode');
57 }, false);
58 if(P.e.cbDarkMode.checked) D.addClass(P.e.previewTarget, 'dark-mode');
59
60 ////////////////////////////////////////////////////////////
61 // Set up preview update and preview mode toggle...
62 P.e.btnSubmit.addEventListener('click', ()=>P.preview(), false);
63 P.e.btnTogglePreviewMode.addEventListener('click', function(){
64 /* Rotate through the 4 available preview modes */
65 P.previewMode = ++P.previewMode % 4;
@@ -66,10 +70,11 @@
70 if(P.previewMode==1 || P.previewMode==2){
71 P.renderPreview();
72 }
73 }, false);
74
75 ////////////////////////////////////////////////////////////
76 // Set up selection list of predefined scripts...
77 if(true){
78 const selectScript = P.e.selectScript = D.select(),
79 cbAutoPreview = P.e.cbAutoPreview =
80 D.attr(D.checkbox(),'id', 'cb-auto-preview','checked',true),
@@ -109,26 +114,27 @@
114 P.e.taContent.value = val;
115 if(cbAutoPreview.checked) P.preview();
116 }, false);
117 }
118
119 ////////////////////////////////////////////////////////////
120 // Move dark mode checkbox to the end and add a help buttonlet
121 D.append(
122 P.e.uiControls,
123 D.append(
124 P.e.cbDarkMode.parentNode/*the .input-with-label element*/,
125 F.helpButtonlets.create(
126 D.span(),
127 'Dark mode changes the colors of rendered SVG to ',
128 'make them more visible in dark-themed skins. ',
129 'This only changes (using CSS) how they are rendered, ',
130 'not any actual colors written in the script.'
131 )
132 )
133 );
 
134
135 ////////////////////////////////////////////////////////////
136 // File drag/drop pikchr scripts into P.e.taContent.
137 // Adapted from: https://stackoverflow.com/a/58677161
138 const dropfile = function(file){
139 const reader = new FileReader();
140 reader.onload = function(e) {P.e.taContent.value = e.target.result};
@@ -140,24 +146,25 @@
146 ev.preventDefault();
147 const file = ev.dataTransfer.files[0];
148 if(file) dropfile(file);
149 }, false);
150 dropTarget.addEventListener('dragenter', function(ev){
151 ev.stopPropagation();
152 ev.preventDefault();
153 console.debug("dragenter");
154 D.addClass(dropTarget, 'dragover');
155 }, false);
156 dropTarget.addEventListener('dragleave', function(ev){
157 ev.stopPropagation();
158 ev.preventDefault();
159 console.debug("dragleave");
160 D.removeClass(dropTarget, 'dragover');
161 }, false);
162
163 ////////////////////////////////////////////////////////////
164 // If we start with content, get it in sync with the state
165 // generated by P.preview().
166 if(P.e.taContent.value/*was pre-filled server-side*/){
167 /* Fill our "response" state so that renderPreview() can work */
168 P.response.inputText = P.e.taContent.value;
169 P.response.raw = P.e.previewTarget.innerHTML;
170 P.renderPreview()/*it's already rendered, but this gets all
@@ -169,11 +176,11 @@
176 Updates the preview view based on the current preview mode and
177 error state.
178 */
179 P.renderPreview = function f(){
180 if(!f.hasOwnProperty('rxNonce')){
181 f.rxNonce = /<!--.+-->\r?\n?/g /*pikchr nonce comments*/;
182 }
183 const preTgt = this.e.previewTarget;
184 if(this.response.isError){
185 preTgt.innerHTML = this.response.raw;
186 D.addClass(preTgt, 'error');
@@ -215,19 +222,21 @@
222 }
223 D.append(D.clearElement(this.e.previewModeLabel),
224 label, this.e.btnCopy);
225 };
226
227 /**
228 Fetches the preview from the server and updates the preview to
229 the rendered SVG content or error report.
230 */
231 P.preview = function fp(){
232 if(!fp.hasOwnProperty('toDisable')){
233 fp.toDisable = [
234 /* input elements to disable during ajax operations */
235 this.e.btnSubmit, this.e.taContent,
236 this.e.selectMarkupAlignment,
237 this.e.cbAutoPreview, this.e.selectScript
238 /* this.e.btnTogglePreviewMode is handled separately */
239 ];
240 fp.target = this.e.previewTarget;
241 fp.updateView = function(c,isError){
242 P.previewMode = 0;
243

Keyboard Shortcuts

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