Fossil SCM

Had to move the pikchr svg/source buttons along the top to keep them from getting truncated off-screen in the forum. Added them to the forum. There are sizing problems of the source view for small pics because the parent element has a fixed max-width.

stephan 2020-09-14 11:12 trunk
Commit 4e6aeb5fb3c79ec00ad34d462d6ae079d46b421b15870c744a2a3664987545b3
Parent f5c040869d21927…
3 files changed +5 -3 +6 -1 +12 -8
~ src/forum.c ~ src/fossil.page.forumpost.js ~ src/fossil.pikchr.js
M src/forum.c
+5 -3
--- src/forum.c
+++ src/forum.c
@@ -863,14 +863,16 @@
863863
864864
 /* Display the thread. */
865865
 forum_display_thread(froot, fpid, mode, bUnf, bHist);
866866
867867
 /* Emit Forum Javascript. */
868
- builtin_emit_script_fossil_bootstrap(1);
869868
 builtin_request_js("forum.js");
870
- builtin_request_js("fossil.dom.js");
871
- builtin_request_js("fossil.page.forumpost.js");
869
+ if(!builtin_bundle_all_fossil_js_apis()){
870
+ builtin_emit_fossil_js_apis("dom", "copybutton",
871
+ "pikchr", 0);
872
+ }
873
+ builtin_emit_fossil_js_apis("page.forumpost", 0);
872874
873875
 /* Emit the page style. */
874876
 style_footer();
875877
 }
876878
877879
--- src/forum.c
+++ src/forum.c
@@ -863,14 +863,16 @@
863
864 /* Display the thread. */
865 forum_display_thread(froot, fpid, mode, bUnf, bHist);
866
867 /* Emit Forum Javascript. */
868 builtin_emit_script_fossil_bootstrap(1);
869 builtin_request_js("forum.js");
870 builtin_request_js("fossil.dom.js");
871 builtin_request_js("fossil.page.forumpost.js");
 
 
 
872
873 /* Emit the page style. */
874 style_footer();
875 }
876
877
--- src/forum.c
+++ src/forum.c
@@ -863,14 +863,16 @@
863
864 /* Display the thread. */
865 forum_display_thread(froot, fpid, mode, bUnf, bHist);
866
867 /* Emit Forum Javascript. */
 
868 builtin_request_js("forum.js");
869 if(!builtin_bundle_all_fossil_js_apis()){
870 builtin_emit_fossil_js_apis("dom", "copybutton",
871 "pikchr", 0);
872 }
873 builtin_emit_fossil_js_apis("page.forumpost", 0);
874
875 /* Emit the page style. */
876 style_footer();
877 }
878
879
M src/fossil.page.forumpost.js
+6 -1
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -1,8 +1,9 @@
11
 (function(F/*the fossil object*/){
22
 "use strict";
3
- /* JS code for /forumpage and friends. Requires fossil.dom. */
3
+ /* JS code for /forumpage and friends. Requires fossil.dom
4
+ and can optionally use fossil.pikchr. */
45
 const P = F.page, D = F.dom;
56
67
 F.onPageLoad(function(){
78
 const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
89
 /* Returns an event handler which implements the post expand/collapse toggle
@@ -80,8 +81,12 @@
8081
 }
8182
 content.appendChild(rightTapZone);
8283
 rightTapZone.addEventListener('click', widgetEventHandler, false);
8384
 refillTapZone();
8485
 });
86
+
87
+ if(F.pikchr){
88
+ F.pikchr.addSrcView();
89
+ }
8590
 })/*onload callback*/;
8691
8792
 })(window.fossil);
8893
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -1,8 +1,9 @@
1 (function(F/*the fossil object*/){
2 "use strict";
3 /* JS code for /forumpage and friends. Requires fossil.dom. */
 
4 const P = F.page, D = F.dom;
5
6 F.onPageLoad(function(){
7 const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
8 /* Returns an event handler which implements the post expand/collapse toggle
@@ -80,8 +81,12 @@
80 }
81 content.appendChild(rightTapZone);
82 rightTapZone.addEventListener('click', widgetEventHandler, false);
83 refillTapZone();
84 });
 
 
 
 
85 })/*onload callback*/;
86
87 })(window.fossil);
88
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -1,8 +1,9 @@
1 (function(F/*the fossil object*/){
2 "use strict";
3 /* JS code for /forumpage and friends. Requires fossil.dom
4 and can optionally use fossil.pikchr. */
5 const P = F.page, D = F.dom;
6
7 F.onPageLoad(function(){
8 const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
9 /* Returns an event handler which implements the post expand/collapse toggle
@@ -80,8 +81,12 @@
81 }
82 content.appendChild(rightTapZone);
83 rightTapZone.addEventListener('click', widgetEventHandler, false);
84 refillTapZone();
85 });
86
87 if(F.pikchr){
88 F.pikchr.addSrcView();
89 }
90 })/*onload callback*/;
91
92 })(window.fossil);
93
M src/fossil.pikchr.js
+12 -8
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -10,19 +10,19 @@
1010
 // Install an app-specific stylesheet, just for development, after which
1111
 // it will be moved into default.css
1212
 (function(){
1313
 const head = document.head || document.querySelector('head'),
1414
 styleTag = document.createElement('style'),
15
- wh = '0.75cm',
15
+ wh = '1em' /* fixed width/height of buttons */,
1616
 styleCSS = `
1717
 .pikchr-src-button {
1818
 min-height: ${wh}; max-height: ${wh};
1919
 min-width: ${wh}; max-width: ${wh};
2020
 font-size: ${wh};
2121
 position: absolute;
22
- top: 0;
23
- left: -${wh};
22
+ top: calc(-${wh} / 2);
23
+ left: 0;
2424
 border: 1px solid black;
2525
 background-color: rgba(255,255,0,0.2);
2626
 border-radius: 0.25cm;
2727
 z-index: 50;
2828
 cursor: pointer;
@@ -30,10 +30,11 @@
3030
 display: inline-flex;
3131
 align-items: center;
3232
 justify-content: center;
3333
 transform-origin: center;
3434
 transition: transform 250ms linear;
35
+ padding: 0; margin: 0;
3536
 }
3637
 .pikchr-src-button.src-active {
3738
 transform: scaleX(-1);
3839
 }
3940
 .pikchr-src-button > span {
@@ -45,14 +46,14 @@
4546
 .pikchr-copy-button {
4647
 min-width: ${wh}; max-width: ${wh};
4748
 min-height: ${wh}; max-height: ${wh};
4849
 display: inline-block;
4950
 position: absolute;
50
- top: calc(${wh} * 1.25);
51
- left: -${wh};
51
+ top: calc(-${wh} / 2);
52
+ left: calc(${wh} * 1.5);
5253
 z-index: 50;
53
- margin-right: 0;
54
+ padding: 0; margin: 0;
5455
 }
5556
 `;
5657
 head.appendChild(styleTag);
5758
 /* Adapted from https://stackoverflow.com/a/524721 */
5859
 styleTag.type = 'text/css';
@@ -134,13 +135,16 @@
134135
 }
135136
 );
136137
 D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy);
137138
 btnFlip.addEventListener('click', function(){
138139
 const svgStyle = window.getComputedStyle(svg);
139
- srcView.style.width = svgStyle.width;
140
- srcView.style.height = svgStyle.height;
140
+ srcView.style.minWidth = svgStyle.width;
141
+ srcView.style.minHeight = svgStyle.height;
142
+ /* ^^^ The SVG wrapper/parent element has a max-width, so the
143
+ textarea will be too small on tiny images and won't be
144
+ enlargable. */
141145
 btnFlip.classList.toggle('src-active');
142146
 D.toggleClass([svg, srcView], 'hidden');
143147
 }, false);
144148
 };
145149
146150
 })(window.fossil);
147151
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -10,19 +10,19 @@
10 // Install an app-specific stylesheet, just for development, after which
11 // it will be moved into default.css
12 (function(){
13 const head = document.head || document.querySelector('head'),
14 styleTag = document.createElement('style'),
15 wh = '0.75cm',
16 styleCSS = `
17 .pikchr-src-button {
18 min-height: ${wh}; max-height: ${wh};
19 min-width: ${wh}; max-width: ${wh};
20 font-size: ${wh};
21 position: absolute;
22 top: 0;
23 left: -${wh};
24 border: 1px solid black;
25 background-color: rgba(255,255,0,0.2);
26 border-radius: 0.25cm;
27 z-index: 50;
28 cursor: pointer;
@@ -30,10 +30,11 @@
30 display: inline-flex;
31 align-items: center;
32 justify-content: center;
33 transform-origin: center;
34 transition: transform 250ms linear;
 
35 }
36 .pikchr-src-button.src-active {
37 transform: scaleX(-1);
38 }
39 .pikchr-src-button > span {
@@ -45,14 +46,14 @@
45 .pikchr-copy-button {
46 min-width: ${wh}; max-width: ${wh};
47 min-height: ${wh}; max-height: ${wh};
48 display: inline-block;
49 position: absolute;
50 top: calc(${wh} * 1.25);
51 left: -${wh};
52 z-index: 50;
53 margin-right: 0;
54 }
55 `;
56 head.appendChild(styleTag);
57 /* Adapted from https://stackoverflow.com/a/524721 */
58 styleTag.type = 'text/css';
@@ -134,13 +135,16 @@
134 }
135 );
136 D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy);
137 btnFlip.addEventListener('click', function(){
138 const svgStyle = window.getComputedStyle(svg);
139 srcView.style.width = svgStyle.width;
140 srcView.style.height = svgStyle.height;
 
 
 
141 btnFlip.classList.toggle('src-active');
142 D.toggleClass([svg, srcView], 'hidden');
143 }, false);
144 };
145
146 })(window.fossil);
147
--- src/fossil.pikchr.js
+++ src/fossil.pikchr.js
@@ -10,19 +10,19 @@
10 // Install an app-specific stylesheet, just for development, after which
11 // it will be moved into default.css
12 (function(){
13 const head = document.head || document.querySelector('head'),
14 styleTag = document.createElement('style'),
15 wh = '1em' /* fixed width/height of buttons */,
16 styleCSS = `
17 .pikchr-src-button {
18 min-height: ${wh}; max-height: ${wh};
19 min-width: ${wh}; max-width: ${wh};
20 font-size: ${wh};
21 position: absolute;
22 top: calc(-${wh} / 2);
23 left: 0;
24 border: 1px solid black;
25 background-color: rgba(255,255,0,0.2);
26 border-radius: 0.25cm;
27 z-index: 50;
28 cursor: pointer;
@@ -30,10 +30,11 @@
30 display: inline-flex;
31 align-items: center;
32 justify-content: center;
33 transform-origin: center;
34 transition: transform 250ms linear;
35 padding: 0; margin: 0;
36 }
37 .pikchr-src-button.src-active {
38 transform: scaleX(-1);
39 }
40 .pikchr-src-button > span {
@@ -45,14 +46,14 @@
46 .pikchr-copy-button {
47 min-width: ${wh}; max-width: ${wh};
48 min-height: ${wh}; max-height: ${wh};
49 display: inline-block;
50 position: absolute;
51 top: calc(-${wh} / 2);
52 left: calc(${wh} * 1.5);
53 z-index: 50;
54 padding: 0; margin: 0;
55 }
56 `;
57 head.appendChild(styleTag);
58 /* Adapted from https://stackoverflow.com/a/524721 */
59 styleTag.type = 'text/css';
@@ -134,13 +135,16 @@
135 }
136 );
137 D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy);
138 btnFlip.addEventListener('click', function(){
139 const svgStyle = window.getComputedStyle(svg);
140 srcView.style.minWidth = svgStyle.width;
141 srcView.style.minHeight = svgStyle.height;
142 /* ^^^ The SVG wrapper/parent element has a max-width, so the
143 textarea will be too small on tiny images and won't be
144 enlargable. */
145 btnFlip.classList.toggle('src-active');
146 D.toggleClass([svg, srcView], 'hidden');
147 }, false);
148 };
149
150 })(window.fossil);
151

Keyboard Shortcuts

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