Fossil SCM

Added UI control to toggle arbitrary pikchr SVG files between SVG and source views, along with a copy button to copy the source of the currently-selected view. Requires pikchr.c code which is not currently in the fossil tree, but once that code is imported, this feature will activate automatically. Currently only used by pikchrshow, but is trivial to activate in arbitrary pages. fossil.copybutton API now uses flashOnce as its default oncopy event handler, to simplify its most common usage.

stephan 2020-09-14 09:05 trunk
Commit 475b3a7fbb0ce338a153bf827de7e93870a7ff4b5570077408f04866dbaf4b85
Parent 120558e50da34cc…
8 files changed +4 -1 +13 +3 -1 +1 +1 +1 -1 +1 +2
~ src/fossil.copybutton.js ~ src/fossil.dom.js ~ src/fossil.page.pikchrshow.js + src/fossil.pikchr-util.js ~ src/main.mk ~ src/pikchrshow.c ~ win/Makefile.mingw ~ win/Makefile.msc
M src/fossil.copybutton.js
+4 -1
--- src/fossil.copybutton.js
+++ src/fossil.copybutton.js
@@ -40,11 +40,13 @@
4040
4141
 .oncopy: an optional callback function which is added as an event
4242
 listener for the 'text-copied' event (see below). There is
4343
 functionally no difference from setting this option or adding a
4444
 'text-copied' event listener to the element, and this option is
45
- considered to be a convenience form of that.
45
+ considered to be a convenience form of that. For the sake of
46
+ framework-level consistency, the default value is a callback
47
+ which passes the copy button to fossil.dom.flashOnce().
4648
4749
 Note that this function's own defaultOptions object holds default
4850
 values for some options. Any changes made to that object affect
4951
 any future calls to this function.
5052
@@ -115,9 +117,10 @@
115117
 return e;
116118
 };
117119
118120
 F.copyButton.defaultOptions = {
119121
 cssClass: 'copy-button',
122
+ oncopy: D.flashOnce.eventHandler,
120123
 style: {/*properties copied as-is into element.style*/}
121124
 };
122125
123126
 })(window.fossil);
124127
--- src/fossil.copybutton.js
+++ src/fossil.copybutton.js
@@ -40,11 +40,13 @@
40
41 .oncopy: an optional callback function which is added as an event
42 listener for the 'text-copied' event (see below). There is
43 functionally no difference from setting this option or adding a
44 'text-copied' event listener to the element, and this option is
45 considered to be a convenience form of that.
 
 
46
47 Note that this function's own defaultOptions object holds default
48 values for some options. Any changes made to that object affect
49 any future calls to this function.
50
@@ -115,9 +117,10 @@
115 return e;
116 };
117
118 F.copyButton.defaultOptions = {
119 cssClass: 'copy-button',
 
120 style: {/*properties copied as-is into element.style*/}
121 };
122
123 })(window.fossil);
124
--- src/fossil.copybutton.js
+++ src/fossil.copybutton.js
@@ -40,11 +40,13 @@
40
41 .oncopy: an optional callback function which is added as an event
42 listener for the 'text-copied' event (see below). There is
43 functionally no difference from setting this option or adding a
44 'text-copied' event listener to the element, and this option is
45 considered to be a convenience form of that. For the sake of
46 framework-level consistency, the default value is a callback
47 which passes the copy button to fossil.dom.flashOnce().
48
49 Note that this function's own defaultOptions object holds default
50 values for some options. Any changes made to that object affect
51 any future calls to this function.
52
@@ -115,9 +117,10 @@
117 return e;
118 };
119
120 F.copyButton.defaultOptions = {
121 cssClass: 'copy-button',
122 oncopy: D.flashOnce.eventHandler,
123 style: {/*properties copied as-is into element.style*/}
124 };
125
126 })(window.fossil);
127
M src/fossil.dom.js
+13
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -410,10 +410,23 @@
410410
 dom.removeClass = function(e,c){
411411
 const a = argsToArray(arguments);
412412
 a.unshift('remove');
413413
 return domAddRemoveClass.apply(this, a);
414414
 };
415
+
416
+ /**
417
+ Toggles CSS class c on e (a single element for forEach-capable
418
+ collection of elements. Returns its first argument.
419
+ */
420
+ dom.toggleClass = function f(e,c){
421
+ if(e.forEach){
422
+ e.forEach((x)=>x.classList.toggle(c));
423
+ }else{
424
+ e.classList.toggle(c);
425
+ }
426
+ return e;
427
+ };
415428
416429
 /**
417430
 Returns true if DOM element e contains CSS class c, else
418431
 false.
419432
 */
420433
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -410,10 +410,23 @@
410 dom.removeClass = function(e,c){
411 const a = argsToArray(arguments);
412 a.unshift('remove');
413 return domAddRemoveClass.apply(this, a);
414 };
 
 
 
 
 
 
 
 
 
 
 
 
 
415
416 /**
417 Returns true if DOM element e contains CSS class c, else
418 false.
419 */
420
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -410,10 +410,23 @@
410 dom.removeClass = function(e,c){
411 const a = argsToArray(arguments);
412 a.unshift('remove');
413 return domAddRemoveClass.apply(this, a);
414 };
415
416 /**
417 Toggles CSS class c on e (a single element for forEach-capable
418 collection of elements. Returns its first argument.
419 */
420 dom.toggleClass = function f(e,c){
421 if(e.forEach){
422 e.forEach((x)=>x.classList.toggle(c));
423 }else{
424 e.classList.toggle(c);
425 }
426 return e;
427 };
428
429 /**
430 Returns true if DOM element e contains CSS class c, else
431 false.
432 */
433
M src/fossil.page.pikchrshow.js
+3 -1
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -82,11 +82,10 @@
8282
 P.e.markupAlignWrapper );
8383
8484
 ////////////////////////////////////////////////////////////
8585
 // Setup clipboard-copy of markup/SVG...
8686
 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
87
- P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
8887
 P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
8988
9089
 ////////////////////////////////////////////////////////////
9190
 // Set up dark mode simulator...
9291
 P.e.cbDarkMode.addEventListener('change', function(ev){
@@ -314,10 +313,13 @@
314313
 label = "SVG";
315314
 f.showMarkupAlignment(false);
316315
 D.parseHtml(D.clearElement(preTgt), P.response.raw);
317316
 this.e.taPreviewText.value =
318317
 this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
318
+ if(F.pikchr){
319
+ F.pikchr.addSrcView(preTgt.querySelector('svg'));
320
+ }
319321
 break;
320322
 case 1:
321323
 label = "Markdown";
322324
 f.showMarkupAlignment(true);
323325
 this.e.taPreviewText.value = [
324326
325327
ADDED src/fossil.pikchr-util.js
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -82,11 +82,10 @@
82 P.e.markupAlignWrapper );
83
84 ////////////////////////////////////////////////////////////
85 // Setup clipboard-copy of markup/SVG...
86 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
87 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
88 P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
89
90 ////////////////////////////////////////////////////////////
91 // Set up dark mode simulator...
92 P.e.cbDarkMode.addEventListener('change', function(ev){
@@ -314,10 +313,13 @@
314 label = "SVG";
315 f.showMarkupAlignment(false);
316 D.parseHtml(D.clearElement(preTgt), P.response.raw);
317 this.e.taPreviewText.value =
318 this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
 
 
 
319 break;
320 case 1:
321 label = "Markdown";
322 f.showMarkupAlignment(true);
323 this.e.taPreviewText.value = [
324
325 DDED src/fossil.pikchr-util.js
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -82,11 +82,10 @@
82 P.e.markupAlignWrapper );
83
84 ////////////////////////////////////////////////////////////
85 // Setup clipboard-copy of markup/SVG...
86 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
 
87 P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
88
89 ////////////////////////////////////////////////////////////
90 // Set up dark mode simulator...
91 P.e.cbDarkMode.addEventListener('change', function(ev){
@@ -314,10 +313,13 @@
313 label = "SVG";
314 f.showMarkupAlignment(false);
315 D.parseHtml(D.clearElement(preTgt), P.response.raw);
316 this.e.taPreviewText.value =
317 this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
318 if(F.pikchr){
319 F.pikchr.addSrcView(preTgt.querySelector('svg'));
320 }
321 break;
322 case 1:
323 label = "Markdown";
324 f.showMarkupAlignment(true);
325 this.e.taPreviewText.value = [
326
327 DDED src/fossil.pikchr-util.js
A src/fossil.pikchr-util.js
+1
--- a/src/fossil.pikchr-util.js
+++ b/src/fossil.pikchr-util.js
@@ -0,0 +1 @@
1
+calc(-${wh} / 2)-${wh} / 2parentcalc(-${wh} / 2)-${wh} calc(-${whcalc(${wh} * 4 / 5 * -1)5 rgba(0,255,0,0.5);1K@F7,2r@Hb,O:calc(${wh} * 4 / 5 * -1)J@BW,V9@Kq,H:textarea(0,0,trueDH@pj,2mNnZM;calc(-${wh} / 2
--- a/src/fossil.pikchr-util.js
+++ b/src/fossil.pikchr-util.js
@@ -0,0 +1 @@
 
--- a/src/fossil.pikchr-util.js
+++ b/src/fossil.pikchr-util.js
@@ -0,0 +1 @@
1 calc(-${wh} / 2)-${wh} / 2parentcalc(-${wh} / 2)-${wh} calc(-${whcalc(${wh} * 4 / 5 * -1)5 rgba(0,255,0,0.5);1K@F7,2r@Hb,O:calc(${wh} * 4 / 5 * -1)J@BW,V9@Kq,H:textarea(0,0,trueDH@pj,2mNnZM;calc(-${wh} / 2
M src/main.mk
+1
--- src/main.mk
+++ src/main.mk
@@ -235,10 +235,11 @@
235235
 $(SRCDIR)/fossil.page.fileedit.js \
236236
 $(SRCDIR)/fossil.page.forumpost.js \
237237
 $(SRCDIR)/fossil.page.pikchrshow.js \
238238
 $(SRCDIR)/fossil.page.wikiedit-wysiwyg-legacy.js \
239239
 $(SRCDIR)/fossil.page.wikiedit.js \
240
+ $(SRCDIR)/fossil.pikchr-util.js \
240241
 $(SRCDIR)/fossil.popupwidget.js \
241242
 $(SRCDIR)/fossil.storage.js \
242243
 $(SRCDIR)/fossil.tabs.js \
243244
 $(SRCDIR)/graph.js \
244245
 $(SRCDIR)/href.js \
245246
--- src/main.mk
+++ src/main.mk
@@ -235,10 +235,11 @@
235 $(SRCDIR)/fossil.page.fileedit.js \
236 $(SRCDIR)/fossil.page.forumpost.js \
237 $(SRCDIR)/fossil.page.pikchrshow.js \
238 $(SRCDIR)/fossil.page.wikiedit-wysiwyg-legacy.js \
239 $(SRCDIR)/fossil.page.wikiedit.js \
 
240 $(SRCDIR)/fossil.popupwidget.js \
241 $(SRCDIR)/fossil.storage.js \
242 $(SRCDIR)/fossil.tabs.js \
243 $(SRCDIR)/graph.js \
244 $(SRCDIR)/href.js \
245
--- src/main.mk
+++ src/main.mk
@@ -235,10 +235,11 @@
235 $(SRCDIR)/fossil.page.fileedit.js \
236 $(SRCDIR)/fossil.page.forumpost.js \
237 $(SRCDIR)/fossil.page.pikchrshow.js \
238 $(SRCDIR)/fossil.page.wikiedit-wysiwyg-legacy.js \
239 $(SRCDIR)/fossil.page.wikiedit.js \
240 $(SRCDIR)/fossil.pikchr-util.js \
241 $(SRCDIR)/fossil.popupwidget.js \
242 $(SRCDIR)/fossil.storage.js \
243 $(SRCDIR)/fossil.tabs.js \
244 $(SRCDIR)/graph.js \
245 $(SRCDIR)/href.js \
246
M src/pikchrshow.c
+1 -1
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -169,11 +169,11 @@
169169
 } CX("</div>"/*sbs-wrapper*/);
170170
 if(!builtin_bundle_all_fossil_js_apis()){
171171
 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
172172
 "popupwidget", "storage", 0);
173173
 }
174
- builtin_emit_fossil_js_apis("page.pikchrshow", 0);
174
+ builtin_emit_fossil_js_apis("page.pikchrshow", "pikchr-util", 0);
175175
 builtin_fulfill_js_requests();
176176
 style_footer();
177177
 }
178178
179179
 /*
180180
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -169,11 +169,11 @@
169 } CX("</div>"/*sbs-wrapper*/);
170 if(!builtin_bundle_all_fossil_js_apis()){
171 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
172 "popupwidget", "storage", 0);
173 }
174 builtin_emit_fossil_js_apis("page.pikchrshow", 0);
175 builtin_fulfill_js_requests();
176 style_footer();
177 }
178
179 /*
180
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -169,11 +169,11 @@
169 } CX("</div>"/*sbs-wrapper*/);
170 if(!builtin_bundle_all_fossil_js_apis()){
171 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
172 "popupwidget", "storage", 0);
173 }
174 builtin_emit_fossil_js_apis("page.pikchrshow", "pikchr-util", 0);
175 builtin_fulfill_js_requests();
176 style_footer();
177 }
178
179 /*
180
M win/Makefile.mingw
+1
--- win/Makefile.mingw
+++ win/Makefile.mingw
@@ -647,10 +647,11 @@
647647
 $(SRCDIR)/fossil.page.fileedit.js \
648648
 $(SRCDIR)/fossil.page.forumpost.js \
649649
 $(SRCDIR)/fossil.page.pikchrshow.js \
650650
 $(SRCDIR)/fossil.page.wikiedit-wysiwyg-legacy.js \
651651
 $(SRCDIR)/fossil.page.wikiedit.js \
652
+ $(SRCDIR)/fossil.pikchr-util.js \
652653
 $(SRCDIR)/fossil.popupwidget.js \
653654
 $(SRCDIR)/fossil.storage.js \
654655
 $(SRCDIR)/fossil.tabs.js \
655656
 $(SRCDIR)/graph.js \
656657
 $(SRCDIR)/href.js \
657658
--- win/Makefile.mingw
+++ win/Makefile.mingw
@@ -647,10 +647,11 @@
647 $(SRCDIR)/fossil.page.fileedit.js \
648 $(SRCDIR)/fossil.page.forumpost.js \
649 $(SRCDIR)/fossil.page.pikchrshow.js \
650 $(SRCDIR)/fossil.page.wikiedit-wysiwyg-legacy.js \
651 $(SRCDIR)/fossil.page.wikiedit.js \
 
652 $(SRCDIR)/fossil.popupwidget.js \
653 $(SRCDIR)/fossil.storage.js \
654 $(SRCDIR)/fossil.tabs.js \
655 $(SRCDIR)/graph.js \
656 $(SRCDIR)/href.js \
657
--- win/Makefile.mingw
+++ win/Makefile.mingw
@@ -647,10 +647,11 @@
647 $(SRCDIR)/fossil.page.fileedit.js \
648 $(SRCDIR)/fossil.page.forumpost.js \
649 $(SRCDIR)/fossil.page.pikchrshow.js \
650 $(SRCDIR)/fossil.page.wikiedit-wysiwyg-legacy.js \
651 $(SRCDIR)/fossil.page.wikiedit.js \
652 $(SRCDIR)/fossil.pikchr-util.js \
653 $(SRCDIR)/fossil.popupwidget.js \
654 $(SRCDIR)/fossil.storage.js \
655 $(SRCDIR)/fossil.tabs.js \
656 $(SRCDIR)/graph.js \
657 $(SRCDIR)/href.js \
658
M win/Makefile.msc
+2
--- win/Makefile.msc
+++ win/Makefile.msc
@@ -568,10 +568,11 @@
568568
 "$(SRCDIR)\fossil.page.fileedit.js" \
569569
 "$(SRCDIR)\fossil.page.forumpost.js" \
570570
 "$(SRCDIR)\fossil.page.pikchrshow.js" \
571571
 "$(SRCDIR)\fossil.page.wikiedit-wysiwyg-legacy.js" \
572572
 "$(SRCDIR)\fossil.page.wikiedit.js" \
573
+ "$(SRCDIR)\fossil.pikchr-util.js" \
573574
 "$(SRCDIR)\fossil.popupwidget.js" \
574575
 "$(SRCDIR)\fossil.storage.js" \
575576
 "$(SRCDIR)\fossil.tabs.js" \
576577
 "$(SRCDIR)\graph.js" \
577578
 "$(SRCDIR)\href.js" \
@@ -1173,10 +1174,11 @@
11731174
 echo "$(SRCDIR)\fossil.page.fileedit.js" >> $@
11741175
 echo "$(SRCDIR)\fossil.page.forumpost.js" >> $@
11751176
 echo "$(SRCDIR)\fossil.page.pikchrshow.js" >> $@
11761177
 echo "$(SRCDIR)\fossil.page.wikiedit-wysiwyg-legacy.js" >> $@
11771178
 echo "$(SRCDIR)\fossil.page.wikiedit.js" >> $@
1179
+ echo "$(SRCDIR)\fossil.pikchr-util.js" >> $@
11781180
 echo "$(SRCDIR)\fossil.popupwidget.js" >> $@
11791181
 echo "$(SRCDIR)\fossil.storage.js" >> $@
11801182
 echo "$(SRCDIR)\fossil.tabs.js" >> $@
11811183
 echo "$(SRCDIR)\graph.js" >> $@
11821184
 echo "$(SRCDIR)\href.js" >> $@
11831185
--- win/Makefile.msc
+++ win/Makefile.msc
@@ -568,10 +568,11 @@
568 "$(SRCDIR)\fossil.page.fileedit.js" \
569 "$(SRCDIR)\fossil.page.forumpost.js" \
570 "$(SRCDIR)\fossil.page.pikchrshow.js" \
571 "$(SRCDIR)\fossil.page.wikiedit-wysiwyg-legacy.js" \
572 "$(SRCDIR)\fossil.page.wikiedit.js" \
 
573 "$(SRCDIR)\fossil.popupwidget.js" \
574 "$(SRCDIR)\fossil.storage.js" \
575 "$(SRCDIR)\fossil.tabs.js" \
576 "$(SRCDIR)\graph.js" \
577 "$(SRCDIR)\href.js" \
@@ -1173,10 +1174,11 @@
1173 echo "$(SRCDIR)\fossil.page.fileedit.js" >> $@
1174 echo "$(SRCDIR)\fossil.page.forumpost.js" >> $@
1175 echo "$(SRCDIR)\fossil.page.pikchrshow.js" >> $@
1176 echo "$(SRCDIR)\fossil.page.wikiedit-wysiwyg-legacy.js" >> $@
1177 echo "$(SRCDIR)\fossil.page.wikiedit.js" >> $@
 
1178 echo "$(SRCDIR)\fossil.popupwidget.js" >> $@
1179 echo "$(SRCDIR)\fossil.storage.js" >> $@
1180 echo "$(SRCDIR)\fossil.tabs.js" >> $@
1181 echo "$(SRCDIR)\graph.js" >> $@
1182 echo "$(SRCDIR)\href.js" >> $@
1183
--- win/Makefile.msc
+++ win/Makefile.msc
@@ -568,10 +568,11 @@
568 "$(SRCDIR)\fossil.page.fileedit.js" \
569 "$(SRCDIR)\fossil.page.forumpost.js" \
570 "$(SRCDIR)\fossil.page.pikchrshow.js" \
571 "$(SRCDIR)\fossil.page.wikiedit-wysiwyg-legacy.js" \
572 "$(SRCDIR)\fossil.page.wikiedit.js" \
573 "$(SRCDIR)\fossil.pikchr-util.js" \
574 "$(SRCDIR)\fossil.popupwidget.js" \
575 "$(SRCDIR)\fossil.storage.js" \
576 "$(SRCDIR)\fossil.tabs.js" \
577 "$(SRCDIR)\graph.js" \
578 "$(SRCDIR)\href.js" \
@@ -1173,10 +1174,11 @@
1174 echo "$(SRCDIR)\fossil.page.fileedit.js" >> $@
1175 echo "$(SRCDIR)\fossil.page.forumpost.js" >> $@
1176 echo "$(SRCDIR)\fossil.page.pikchrshow.js" >> $@
1177 echo "$(SRCDIR)\fossil.page.wikiedit-wysiwyg-legacy.js" >> $@
1178 echo "$(SRCDIR)\fossil.page.wikiedit.js" >> $@
1179 echo "$(SRCDIR)\fossil.pikchr-util.js" >> $@
1180 echo "$(SRCDIR)\fossil.popupwidget.js" >> $@
1181 echo "$(SRCDIR)\fossil.storage.js" >> $@
1182 echo "$(SRCDIR)\fossil.tabs.js" >> $@
1183 echo "$(SRCDIR)\graph.js" >> $@
1184 echo "$(SRCDIR)\href.js" >> $@
1185

Keyboard Shortcuts

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