Fossil SCM

Merge fixes to the accordion panel JS script.

florian 2022-08-10 06:02 trunk merge
Commit 44a7149dc78046d7884790b84e6d8b4c65c87acf48d3c2cf3ecb614a6c178887
Parent fc8e5750d7b05e7…
2 files changed +34 -8 +3 -1
~ src/accordion.js ~ src/info.c
M src/accordion.js
+34 -8
--- src/accordion.js
+++ src/accordion.js
@@ -1,12 +1,34 @@
1
-/* Attach appropriate javascript to each ".accordion" button so that
2
-** it expands and contracts when clicked.
3
-** The uncompressed source code for the SVG icons can be found on the
4
-** wiki page "branch/accordion-experiments" in the Fossil repository.
1
+/*
2
+** Attach appropriate javascript to each ".accordion" button so that it expands
3
+** and contracts when clicked.
4
+**
5
+** The uncompressed source code for the SVG icons can be found on the wiki page
6
+** "branch/accordion-experiments" in the Fossil repository.
7
+**
8
+** Implementation notes:
9
+**
10
+** The `maxHeight' CSS property is quite restrictive for vertical resizing of
11
+** elements, especially for dynamic-content areas like the diff panels. That's
12
+** why `maxHeight' is set only during animation, to prevent truncated elements.
13
+** (The diff panels may get truncated right after page loading, and other
14
+** elements may get truncated when resizing the browser window to a smaller
15
+** width, causing vertical growth.)
16
+**
17
+** Another problem is that `scrollHeight' used to calculate the expanded height
18
+** while still in the contracted state may return values with small errors on
19
+** some browsers, especially for large elements, presumably due to omitting the
20
+** space required by the vertical scrollbar that may become necessary, causing
21
+** additional horizontal shrinking and consequently more vertical growth than
22
+** calculated. That's why setting `maxHeight' to `scrollHeight' is considered
23
+** "good enough" only during animation, but cleared afterwards.
24
+**
25
+** https://fossil-scm.org/forum/forumpost/66d7075f40
26
+** https://fossil-scm.org/home/timeline?r=accordion-fix
527
 */
628
 var acc_svgdata = ["data:image/svg+xml,"+
7
- "%3Csvg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
29
+ "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
830
 "%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
931
 "%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
1032
 "%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E"+
1133
 "%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E"+
1234
 "%3Cpath style='fill:rgb(80,128,208)' d='", "'/%3E%3C/svg%3E",
@@ -19,17 +41,21 @@
1941
 a[i].insertBefore(img,a[i].firstChild);
2042
 img = document.createElement("img");
2143
 img.src = acc_svgdata[0]+acc_svgdata[3]+acc_svgdata[1];
2244
 img.className = "accordion_btn accordion_btn_minus";
2345
 a[i].insertBefore(img,a[i].firstChild);
24
- var p = a[i].nextElementSibling;
25
- p.style.maxHeight = p.scrollHeight + "px";
2646
 a[i].addEventListener("click",function(){
2747
 var x = this.nextElementSibling;
2848
 if( this.classList.contains("accordion_closed") ){
2949
 x.style.maxHeight = x.scrollHeight + "px";
50
+ setTimeout(function(){
51
+ x.style.maxHeight = "";
52
+ },250); // default.css: .accordion_panel { transition-duration }
3053
 }else{
31
- x.style.maxHeight = "0";
54
+ x.style.maxHeight = x.scrollHeight + "px";
55
+ setTimeout(function(){
56
+ x.style.maxHeight = "0";
57
+ },1);
3258
 }
3359
 this.classList.toggle("accordion_closed");
3460
 });
3561
 }
3662
--- src/accordion.js
+++ src/accordion.js
@@ -1,12 +1,34 @@
1 /* Attach appropriate javascript to each ".accordion" button so that
2 ** it expands and contracts when clicked.
3 ** The uncompressed source code for the SVG icons can be found on the
4 ** wiki page "branch/accordion-experiments" in the Fossil repository.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5 */
6 var acc_svgdata = ["data:image/svg+xml,"+
7 "%3Csvg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
8 "%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
9 "%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
10 "%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E"+
11 "%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E"+
12 "%3Cpath style='fill:rgb(80,128,208)' d='", "'/%3E%3C/svg%3E",
@@ -19,17 +41,21 @@
19 a[i].insertBefore(img,a[i].firstChild);
20 img = document.createElement("img");
21 img.src = acc_svgdata[0]+acc_svgdata[3]+acc_svgdata[1];
22 img.className = "accordion_btn accordion_btn_minus";
23 a[i].insertBefore(img,a[i].firstChild);
24 var p = a[i].nextElementSibling;
25 p.style.maxHeight = p.scrollHeight + "px";
26 a[i].addEventListener("click",function(){
27 var x = this.nextElementSibling;
28 if( this.classList.contains("accordion_closed") ){
29 x.style.maxHeight = x.scrollHeight + "px";
 
 
 
30 }else{
31 x.style.maxHeight = "0";
 
 
 
32 }
33 this.classList.toggle("accordion_closed");
34 });
35 }
36
--- src/accordion.js
+++ src/accordion.js
@@ -1,12 +1,34 @@
1 /*
2 ** Attach appropriate javascript to each ".accordion" button so that it expands
3 ** and contracts when clicked.
4 **
5 ** The uncompressed source code for the SVG icons can be found on the wiki page
6 ** "branch/accordion-experiments" in the Fossil repository.
7 **
8 ** Implementation notes:
9 **
10 ** The `maxHeight' CSS property is quite restrictive for vertical resizing of
11 ** elements, especially for dynamic-content areas like the diff panels. That's
12 ** why `maxHeight' is set only during animation, to prevent truncated elements.
13 ** (The diff panels may get truncated right after page loading, and other
14 ** elements may get truncated when resizing the browser window to a smaller
15 ** width, causing vertical growth.)
16 **
17 ** Another problem is that `scrollHeight' used to calculate the expanded height
18 ** while still in the contracted state may return values with small errors on
19 ** some browsers, especially for large elements, presumably due to omitting the
20 ** space required by the vertical scrollbar that may become necessary, causing
21 ** additional horizontal shrinking and consequently more vertical growth than
22 ** calculated. That's why setting `maxHeight' to `scrollHeight' is considered
23 ** "good enough" only during animation, but cleared afterwards.
24 **
25 ** https://fossil-scm.org/forum/forumpost/66d7075f40
26 ** https://fossil-scm.org/home/timeline?r=accordion-fix
27 */
28 var acc_svgdata = ["data:image/svg+xml,"+
29 "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
30 "%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
31 "%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
32 "%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E"+
33 "%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E"+
34 "%3Cpath style='fill:rgb(80,128,208)' d='", "'/%3E%3C/svg%3E",
@@ -19,17 +41,21 @@
41 a[i].insertBefore(img,a[i].firstChild);
42 img = document.createElement("img");
43 img.src = acc_svgdata[0]+acc_svgdata[3]+acc_svgdata[1];
44 img.className = "accordion_btn accordion_btn_minus";
45 a[i].insertBefore(img,a[i].firstChild);
 
 
46 a[i].addEventListener("click",function(){
47 var x = this.nextElementSibling;
48 if( this.classList.contains("accordion_closed") ){
49 x.style.maxHeight = x.scrollHeight + "px";
50 setTimeout(function(){
51 x.style.maxHeight = "";
52 },250); // default.css: .accordion_panel { transition-duration }
53 }else{
54 x.style.maxHeight = x.scrollHeight + "px";
55 setTimeout(function(){
56 x.style.maxHeight = "0";
57 },1);
58 }
59 this.classList.toggle("accordion_closed");
60 });
61 }
62
M src/info.c
+3 -1
--- src/info.c
+++ src/info.c
@@ -878,11 +878,12 @@
878878
 }
879879
 render_backlink_graph(zUuid,
880880
 "<div class=\"section accordion\">References</div>\n");
881881
 @ <div class="section accordion">Context</div><div class="accordion_panel">
882882
 render_checkin_context(rid, 0, 0, 0);
883
- @ </div><div class="section">Changes</div>
883
+ @ </div><div class="section accordion">Changes</div>
884
+ @ <div class="accordion_panel">
884885
 @ <div class="sectionmenu">
885886
 pCfg = construct_diff_flags(diffType, &DCfg);
886887
 DCfg.pRe = pRe;
887888
 zW = (DCfg.diffFlags&DIFF_IGNORE_ALLWS)?"&w":"";
888889
 if( diffType!=0 ){
@@ -939,10 +940,11 @@
939940
 const char *zOldName = db_column_text(&q3, 4);
940941
 append_file_change_line(zUuid, zName, zOld, zNew, zOldName,
941942
 pCfg,mperm);
942943
 }
943944
 db_finalize(&q3);
945
+ @ </div>
944946
 append_diff_javascript(diffType);
945947
 style_finish_page();
946948
 }
947949
948950
 /*
949951
--- src/info.c
+++ src/info.c
@@ -878,11 +878,12 @@
878 }
879 render_backlink_graph(zUuid,
880 "<div class=\"section accordion\">References</div>\n");
881 @ <div class="section accordion">Context</div><div class="accordion_panel">
882 render_checkin_context(rid, 0, 0, 0);
883 @ </div><div class="section">Changes</div>
 
884 @ <div class="sectionmenu">
885 pCfg = construct_diff_flags(diffType, &DCfg);
886 DCfg.pRe = pRe;
887 zW = (DCfg.diffFlags&DIFF_IGNORE_ALLWS)?"&w":"";
888 if( diffType!=0 ){
@@ -939,10 +940,11 @@
939 const char *zOldName = db_column_text(&q3, 4);
940 append_file_change_line(zUuid, zName, zOld, zNew, zOldName,
941 pCfg,mperm);
942 }
943 db_finalize(&q3);
 
944 append_diff_javascript(diffType);
945 style_finish_page();
946 }
947
948 /*
949
--- src/info.c
+++ src/info.c
@@ -878,11 +878,12 @@
878 }
879 render_backlink_graph(zUuid,
880 "<div class=\"section accordion\">References</div>\n");
881 @ <div class="section accordion">Context</div><div class="accordion_panel">
882 render_checkin_context(rid, 0, 0, 0);
883 @ </div><div class="section accordion">Changes</div>
884 @ <div class="accordion_panel">
885 @ <div class="sectionmenu">
886 pCfg = construct_diff_flags(diffType, &DCfg);
887 DCfg.pRe = pRe;
888 zW = (DCfg.diffFlags&DIFF_IGNORE_ALLWS)?"&w":"";
889 if( diffType!=0 ){
@@ -939,10 +940,11 @@
940 const char *zOldName = db_column_text(&q3, 4);
941 append_file_change_line(zUuid, zName, zOld, zNew, zOldName,
942 pCfg,mperm);
943 }
944 db_finalize(&q3);
945 @ </div>
946 append_diff_javascript(diffType);
947 style_finish_page();
948 }
949
950 /*
951

Keyboard Shortcuts

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