Fossil

Check-in [1006de1e66]
Login

Check-in [1006de1e66]

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

Overview
Comment: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).
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | accordion-experiments-2
Files: files | file ages | folders
SHA3-256: 1006de1e66cb33d0427f07c85f4154b7984895605b44321f0a3befe1d27865b5
User & Date: florian 2020-04-08 14:07:00.000
Context
2020-04-08
14:17
Fix a minor glitch. ... (Closed-Leaf check-in: 343f31f9bf user: florian tags: accordion-experiments-2)
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. ... (Closed-Leaf check-in: 04f232aaae user: florian tags: accordion-experiments)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/accordion.js. 
1
2
3
4
5
























6
7
8
9
10
11
12

/* 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") ){
      x.style.maxHeight = x.scrollHeight + "px";
    }else{






>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* 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 img = document.createElement("img");
  img.src =
"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";
  img.className = "accordion_btn accordion_btn_plus";
  a[i].insertBefore(img,a[i].firstChild);
  img = document.createElement("img");
  img.src =
"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";
  img.className = "accordion_btn accordion_btn_minus";
  a[i].insertBefore(img,a[i].firstChild);
  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") ){
      x.style.maxHeight = x.scrollHeight + "px";
    }else{
︙︙
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
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;
}








<
<
<
<
<
<


|
>
>
>
>
>
>
|
|
>
>
>
>
>
>
>
>






809
810
811
812
813
814
815






816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839

  margin-left: .16em;
  margin-right: 0;
}
.nobr {
  white-space: nowrap;
}
.accordion {






  cursor: pointer;
}
.accordion_btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .5em;
  vertical-align: top;
}
// Note: the order of the next 3 entries should be
// maintained for the hierarchical cascade to work.
.accordion > .accordion_btn_plus {
  display: none;
}
.accordion_closed > .accordion_btn_minus {
  display: none;
}
.accordion_closed > .accordion_btn_plus {
  display: inline-block;
}
.accordion_panel {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}