Fossil SCM

Work on the pikchrshow drag/drop handling.

stephan 2020-09-12 04:33 trunk
Commit 3ffd3be3dc4b279a07f5a3f9d22128b5f7de527a7d3dd32a3a06f1fbdb4e0c39
Parent be125040540e605…
2 files changed +55 -23 +3 -3
~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/fossil.page.pikchrshow.js
+55 -23
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -148,34 +148,66 @@
148148
 );
149149
150150
 ////////////////////////////////////////////////////////////
151151
 // File drag/drop pikchr scripts into P.e.taContent.
152152
 // Adapted from: https://stackoverflow.com/a/58677161
153
- const dropfile = function(file){
154
- const reader = new FileReader();
155
- reader.onload = function(e) {P.e.taContent.value = e.target.result};
156
- reader.readAsText(file, "UTF-8");
153
+ const dropHighlight = P.e.taContent;
154
+ const dropEvents = {
155
+ drop: function(ev){
156
+ //ev.stopPropagation();
157
+ ev.preventDefault();
158
+ D.removeClass(dropHighlight, 'dragover');
159
+ const file = ev.dataTransfer.files[0];
160
+ if(file) {
161
+ const reader = new FileReader();
162
+ reader.addEventListener(
163
+ 'load', function(e) {P.e.taContent.value = e.target.result}, false
164
+ );
165
+ reader.readAsText(file, "UTF-8");
166
+ }
167
+ },
168
+ dragenter: function(ev){
169
+ //ev.stopPropagation();
170
+ ev.preventDefault();
171
+ ev.dataTransfer.dropEffect = "copy";
172
+ D.addClass(dropHighlight, 'dragover');
173
+ //console.debug("dragenter");
174
+ },
175
+ dragover: function(ev){
176
+ //ev.stopPropagation();
177
+ ev.preventDefault();
178
+ //console.debug("dragover");
179
+ },
180
+ dragend: function(ev){
181
+ //ev.stopPropagation();
182
+ ev.preventDefault();
183
+ //console.debug("dragend");
184
+ },
185
+ dragleave: function(ev){
186
+ //ev.stopPropagation();
187
+ ev.preventDefault();
188
+ D.removeClass(dropHighlight, 'dragover');
189
+ //console.debug("dragleave");
190
+ }
157191
 };
158
- const dropTarget = P.e.taContent /* document.body does not behave how i'd like */;
159
- dropTarget.addEventListener('drop', function(ev){
160
- D.removeClass(dropTarget, 'dragover');
161
- ev.preventDefault();
162
- const file = ev.dataTransfer.files[0];
163
- if(file) dropfile(file);
164
- }, false);
165
- dropTarget.addEventListener('dragenter', function(ev){
166
- ev.stopPropagation();
167
- ev.preventDefault();
168
- console.debug("dragenter");
169
- D.addClass(dropTarget, 'dragover');
170
- }, false);
171
- dropTarget.addEventListener('dragleave', function(ev){
172
- ev.stopPropagation();
173
- ev.preventDefault();
174
- console.debug("dragleave");
175
- D.removeClass(dropTarget, 'dragover');
176
- }, false);
192
+ /*
193
+ The idea here is to accept drops at multiple points or, ideally,
194
+ document.body, and apply them to P.e.taContent, but the precise
195
+ combination of event handling needed to pull this off is eluding
196
+ me.
197
+ */
198
+ [P.e.taContent
199
+ //P.e.previewTarget,// works only until we drag over the SVG element!
200
+ //document.body
201
+ /* ideally we'd link only to document.body, but the events seem to
202
+ get out of whack, with dropleave being triggered
203
+ at unexpected points. */
204
+ ].forEach(function(e){
205
+ Object.keys(dropEvents).forEach(
206
+ (k)=>e.addEventListener(k, dropEvents[k], true)
207
+ );
208
+ });
177209
178210
 ////////////////////////////////////////////////////////////
179211
 // If we start with content, get it in sync with the state
180212
 // generated by P.preview().
181213
 if(P.e.taContent.value/*was pre-filled server-side*/){
182214
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -148,34 +148,66 @@
148 );
149
150 ////////////////////////////////////////////////////////////
151 // File drag/drop pikchr scripts into P.e.taContent.
152 // Adapted from: https://stackoverflow.com/a/58677161
153 const dropfile = function(file){
154 const reader = new FileReader();
155 reader.onload = function(e) {P.e.taContent.value = e.target.result};
156 reader.readAsText(file, "UTF-8");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157 };
158 const dropTarget = P.e.taContent /* document.body does not behave how i'd like */;
159 dropTarget.addEventListener('drop', function(ev){
160 D.removeClass(dropTarget, 'dragover');
161 ev.preventDefault();
162 const file = ev.dataTransfer.files[0];
163 if(file) dropfile(file);
164 }, false);
165 dropTarget.addEventListener('dragenter', function(ev){
166 ev.stopPropagation();
167 ev.preventDefault();
168 console.debug("dragenter");
169 D.addClass(dropTarget, 'dragover');
170 }, false);
171 dropTarget.addEventListener('dragleave', function(ev){
172 ev.stopPropagation();
173 ev.preventDefault();
174 console.debug("dragleave");
175 D.removeClass(dropTarget, 'dragover');
176 }, false);
177
178 ////////////////////////////////////////////////////////////
179 // If we start with content, get it in sync with the state
180 // generated by P.preview().
181 if(P.e.taContent.value/*was pre-filled server-side*/){
182
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -148,34 +148,66 @@
148 );
149
150 ////////////////////////////////////////////////////////////
151 // File drag/drop pikchr scripts into P.e.taContent.
152 // Adapted from: https://stackoverflow.com/a/58677161
153 const dropHighlight = P.e.taContent;
154 const dropEvents = {
155 drop: function(ev){
156 //ev.stopPropagation();
157 ev.preventDefault();
158 D.removeClass(dropHighlight, 'dragover');
159 const file = ev.dataTransfer.files[0];
160 if(file) {
161 const reader = new FileReader();
162 reader.addEventListener(
163 'load', function(e) {P.e.taContent.value = e.target.result}, false
164 );
165 reader.readAsText(file, "UTF-8");
166 }
167 },
168 dragenter: function(ev){
169 //ev.stopPropagation();
170 ev.preventDefault();
171 ev.dataTransfer.dropEffect = "copy";
172 D.addClass(dropHighlight, 'dragover');
173 //console.debug("dragenter");
174 },
175 dragover: function(ev){
176 //ev.stopPropagation();
177 ev.preventDefault();
178 //console.debug("dragover");
179 },
180 dragend: function(ev){
181 //ev.stopPropagation();
182 ev.preventDefault();
183 //console.debug("dragend");
184 },
185 dragleave: function(ev){
186 //ev.stopPropagation();
187 ev.preventDefault();
188 D.removeClass(dropHighlight, 'dragover');
189 //console.debug("dragleave");
190 }
191 };
192 /*
193 The idea here is to accept drops at multiple points or, ideally,
194 document.body, and apply them to P.e.taContent, but the precise
195 combination of event handling needed to pull this off is eluding
196 me.
197 */
198 [P.e.taContent
199 //P.e.previewTarget,// works only until we drag over the SVG element!
200 //document.body
201 /* ideally we'd link only to document.body, but the events seem to
202 get out of whack, with dropleave being triggered
203 at unexpected points. */
204 ].forEach(function(e){
205 Object.keys(dropEvents).forEach(
206 (k)=>e.addEventListener(k, dropEvents[k], true)
207 );
208 });
 
 
209
210 ////////////////////////////////////////////////////////////
211 // If we start with content, get it in sync with the state
212 // generated by P.preview().
213 if(P.e.taContent.value/*was pre-filled server-side*/){
214
M src/pikchrshow.c
+3 -3
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -109,19 +109,19 @@
109109
 /* Flip the colors to approximate a dark theme look */
110110
 "filter: invert(1) hue-rotate(180deg);"
111111
 "}");
112112
 CX("#pikchrshow-output-wrapper {"
113113
 "padding: 0.25em 0.5em; border-radius: 0.25em;"
114
+ "border-width: 1px;"/*some skins disable fieldset borders*/
114115
 "}");
115116
 CX("#pikchrshow-output-wrapper > legend {"
116117
 "display: flex; flex-direction: row;"
117118
 "align-items: center;"
118119
 "}");
119120
 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)}");
121
+ "{margin-right: 0.5em}");
122
+ CX(".dragover {border: 3px dotted rgba(0,255,0,0.6)}");
123123
 CX("</style>");
124124
 CX("<div>Input pikchr code and tap Preview to render it:</div>");
125125
 CX("<div id='sbs-wrapper'>");
126126
 CX("<div id='pikchrshow-form'>");
127127
 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
128128
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -109,19 +109,19 @@
109 /* Flip the colors to approximate a dark theme look */
110 "filter: invert(1) hue-rotate(180deg);"
111 "}");
112 CX("#pikchrshow-output-wrapper {"
113 "padding: 0.25em 0.5em; border-radius: 0.25em;"
 
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 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
128
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -109,19 +109,19 @@
109 /* Flip the colors to approximate a dark theme look */
110 "filter: invert(1) hue-rotate(180deg);"
111 "}");
112 CX("#pikchrshow-output-wrapper {"
113 "padding: 0.25em 0.5em; border-radius: 0.25em;"
114 "border-width: 1px;"/*some skins disable fieldset borders*/
115 "}");
116 CX("#pikchrshow-output-wrapper > legend {"
117 "display: flex; flex-direction: row;"
118 "align-items: center;"
119 "}");
120 CX("#pikchrshow-output-wrapper > legend > *:not(.copy-button)"
121 "{margin-right: 0.5em}");
122 CX(".dragover {border: 3px 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 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
128

Keyboard Shortcuts

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