Fossil

Changes On Branch accordion-experiments
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Changes In Branch accordion-experiments Excluding Merge-Ins

This is equivalent to a diff from 04bbb05df7 to 04f232aaae

2020-04-08
14:07
Use dynamically created foreground image elements instead of CSS background images to indicate the status and available actions for the accordion, so they are visible by default for printouts and PDFs, invisible for noscript clients, and enhance compatibility with most skins (Xekri's "justify-content: space-around;" is crunchy, however). ... (check-in: 1006de1e66 user: florian tags: accordion-experiments-2)
2020-04-05
14:30
Use regular comments in Javascript files, instead of comments private to the mkbuiltin utility, so the files are easier to reuse and test outside of Fossil, and easier to process with synatx highlighting-enabled text editors. ... (Leaf check-in: 04f232aaae user: florian tags: accordion-experiments)
14:28
Use SVG icons to indicate the status and available actions for the accordion. ... (check-in: 6126a54132 user: florian tags: accordion-experiments)
2020-04-02
18:57
Fix the "fossil revert" command so that it works even for a new --empty checkout. ... (check-in: 9aca02b73c user: drh tags: trunk)
18:56
Fix the "fossil revert" command so that it works even for a new --empty checkout. ... (Leaf check-in: 04bbb05df7 user: drh tags: accordion-about-wiki)
00:15
Attempting to add "accordion" action to the "About" sections of pages that have associated wiki. Basically works, but needs CSS tweaks, and possibly other UX improvements. ... (check-in: b17e4c5a77 user: drh tags: accordion-about-wiki)

Changes to src/accordion.js.

1
2
3

4
5
6
7
8
9
10
# Attach appropriate javascript to each ".accordion" button so that
# it expands and contracts when clicked.
#

var a = document.getElementsByClassName("accordion");
for(var i=0; i<a.length; i++){
  var p = a[i].nextElementSibling;
  p.style.maxHeight = p.scrollHeight + "px";
  a[i].addEventListener("click",function(){
    var x = this.nextElementSibling;
    if( this.classList.contains("accordion_closed") ){
|
|
<
>







1
2

3
4
5
6
7
8
9
10
/* Attach appropriate javascript to each ".accordion" button so that
** it expands and contracts when clicked.

*/
var a = document.getElementsByClassName("accordion");
for(var i=0; i<a.length; i++){
  var p = a[i].nextElementSibling;
  p.style.maxHeight = p.scrollHeight + "px";
  a[i].addEventListener("click",function(){
    var x = this.nextElementSibling;
    if( this.classList.contains("accordion_closed") ){

Changes to src/default_css.txt.

809
810
811
812
813
814
815






816
817
818
819
820
821
822
823


824
825
826
827
828
  margin-left: .16em;
  margin-right: 0;
}
.nobr {
  white-space: nowrap;
}
.accordion {






  cursor: pointer;
}
.accordion:after {
  content: '\02796';
  margin-left: 1em;
}
.accordion_closed:after {
  content: '\02795';


}
.accordion_panel {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}







>
>
>
>
>
>


<
<
<
<
|
<
>
>





809
810
811
812
813
814
815
816
817
818
819
820
821
822
823




824

825
826
827
828
829
830
831
  margin-left: .16em;
  margin-right: 0;
}
.nobr {
  white-space: nowrap;
}
.accordion {
  padding-left: 30px;
//Note: the mkcss utility does not support line breaks in data URIs.
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M11,9H5V7h6v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px;
  cursor: pointer;
}




.accordion_closed {

//Note: the mkcss utility does not support line breaks in data URIs.
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z'/%3E%3C/svg%3E");
}
.accordion_panel {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}