Fossil SCM
Attempt to fix the accordion for "Changes" sections: (A) "Delay-init" the maxHeight property only right before the closing animation, so that the dynamic diffs have enough time to resize themselves without any constraints, and then set maxHeight to zero to trigger the animation in idle time, to prevent coalescing the maxHeight changes (or there won't be an animation when going from "undefined" to "0"). (B) On expansion, after awaiting the animation duration, clear the maxHeight property, so browsers are again free to resize without any constraints. This is the same trick that works well for the hamburger menu, and fixes another problem with FF to return too small values for scrollHeight with large diffs, so that they would again be truncated (but the error is small enough so it doesn't matter for the animation).
Commit
6c591c3ffa8ef4dfdf680be35b78102062dfe6afe2247f22411c999253ac9f2a
Parent
69a6f453872b5c3…
2 files changed
+7
-3
+3
-1
+7
-3
| --- src/accordion.js | ||
| +++ src/accordion.js | ||
| @@ -19,17 +19,21 @@ | ||
| 19 | 19 | a[i].insertBefore(img,a[i].firstChild); |
| 20 | 20 | img = document.createElement("img"); |
| 21 | 21 | img.src = acc_svgdata[0]+acc_svgdata[3]+acc_svgdata[1]; |
| 22 | 22 | img.className = "accordion_btn accordion_btn_minus"; |
| 23 | 23 | a[i].insertBefore(img,a[i].firstChild); |
| 24 | - var p = a[i].nextElementSibling; | |
| 25 | - p.style.maxHeight = p.scrollHeight + "px"; | |
| 26 | 24 | a[i].addEventListener("click",function(){ |
| 27 | 25 | var x = this.nextElementSibling; |
| 28 | 26 | if( this.classList.contains("accordion_closed") ){ |
| 29 | 27 | x.style.maxHeight = x.scrollHeight + "px"; |
| 28 | + setTimeout(function(){ | |
| 29 | + this.style.maxHeight = ""; | |
| 30 | + }.bind(x),250); // default.css: .accordion_panel { transition-duration } | |
| 30 | 31 | }else{ |
| 31 | - x.style.maxHeight = "0"; | |
| 32 | + x.style.maxHeight = x.scrollHeight + "px"; | |
| 33 | + setTimeout(function(){ | |
| 34 | + x.style.maxHeight = "0"; | |
| 35 | + }.bind(x),1); | |
| 32 | 36 | } |
| 33 | 37 | this.classList.toggle("accordion_closed"); |
| 34 | 38 | }); |
| 35 | 39 | } |
| 36 | 40 |
| --- src/accordion.js | |
| +++ src/accordion.js | |
| @@ -19,17 +19,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 | |
| @@ -19,17 +19,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 | a[i].addEventListener("click",function(){ |
| 25 | var x = this.nextElementSibling; |
| 26 | if( this.classList.contains("accordion_closed") ){ |
| 27 | x.style.maxHeight = x.scrollHeight + "px"; |
| 28 | setTimeout(function(){ |
| 29 | this.style.maxHeight = ""; |
| 30 | }.bind(x),250); // default.css: .accordion_panel { transition-duration } |
| 31 | }else{ |
| 32 | x.style.maxHeight = x.scrollHeight + "px"; |
| 33 | setTimeout(function(){ |
| 34 | x.style.maxHeight = "0"; |
| 35 | }.bind(x),1); |
| 36 | } |
| 37 | this.classList.toggle("accordion_closed"); |
| 38 | }); |
| 39 | } |
| 40 |
+3
-1
| --- src/info.c | ||
| +++ src/info.c | ||
| @@ -878,11 +878,12 @@ | ||
| 878 | 878 | } |
| 879 | 879 | render_backlink_graph(zUuid, |
| 880 | 880 | "<div class=\"section accordion\">References</div>\n"); |
| 881 | 881 | @ <div class="section accordion">Context</div><div class="accordion_panel"> |
| 882 | 882 | 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"> | |
| 884 | 885 | @ <div class="sectionmenu"> |
| 885 | 886 | pCfg = construct_diff_flags(diffType, &DCfg); |
| 886 | 887 | DCfg.pRe = pRe; |
| 887 | 888 | zW = (DCfg.diffFlags&DIFF_IGNORE_ALLWS)?"&w":""; |
| 888 | 889 | if( diffType!=0 ){ |
| @@ -939,10 +940,11 @@ | ||
| 939 | 940 | const char *zOldName = db_column_text(&q3, 4); |
| 940 | 941 | append_file_change_line(zUuid, zName, zOld, zNew, zOldName, |
| 941 | 942 | pCfg,mperm); |
| 942 | 943 | } |
| 943 | 944 | db_finalize(&q3); |
| 945 | + @ </div> | |
| 944 | 946 | append_diff_javascript(diffType); |
| 945 | 947 | style_finish_page(); |
| 946 | 948 | } |
| 947 | 949 | |
| 948 | 950 | /* |
| 949 | 951 |
| --- 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 |