Fossil SCM

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).

florian 2020-04-08 14:06 accordion-experiments-2
Commit 1006de1e66cb33d0427f07c85f4154b7984895605b44321f0a3befe1d27865b5
Parent 04f232aaaeb0fea…
2 files changed +24 +17 -9
~ src/accordion.js ~ src/default_css.txt
M src/accordion.js
+24
--- src/accordion.js
+++ src/accordion.js
@@ -1,10 +1,34 @@
11
 /* Attach appropriate javascript to each ".accordion" button so that
22
 ** it expands and contracts when clicked.
33
 */
44
 var a = document.getElementsByClassName("accordion");
55
 for(var i=0; i<a.length; i++){
6
+ var img = document.createElement("img");
7
+ img.src =
8
+"data:image/svg+xml,"+
9
+"%3Csvg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
10
+"%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
11
+"%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
12
+"%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E"+
13
+"%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E"+
14
+"%3Cpath style='fill:rgb(80,128,208)' d='M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z'/%3E"+
15
+"%3C/svg%3E";
16
+ img.className = "accordion_btn accordion_btn_plus";
17
+ a[i].insertBefore(img,a[i].firstChild);
18
+ img = document.createElement("img");
19
+ img.src =
20
+"data:image/svg+xml,"+
21
+"%3Csvg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
22
+"%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
23
+"%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
24
+"%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E"+
25
+"%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E"+
26
+"%3Cpath style='fill:rgb(80,128,208)' d='M11,9H5V7h6v6z'/%3E"+
27
+"%3C/svg%3E";
28
+ img.className = "accordion_btn accordion_btn_minus";
29
+ a[i].insertBefore(img,a[i].firstChild);
630
 var p = a[i].nextElementSibling;
731
 p.style.maxHeight = p.scrollHeight + "px";
832
 a[i].addEventListener("click",function(){
933
 var x = this.nextElementSibling;
1034
 if( this.classList.contains("accordion_closed") ){
1135
--- src/accordion.js
+++ src/accordion.js
@@ -1,10 +1,34 @@
1 /* Attach appropriate javascript to each ".accordion" button so that
2 ** it expands and contracts when clicked.
3 */
4 var a = document.getElementsByClassName("accordion");
5 for(var i=0; i<a.length; i++){
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6 var p = a[i].nextElementSibling;
7 p.style.maxHeight = p.scrollHeight + "px";
8 a[i].addEventListener("click",function(){
9 var x = this.nextElementSibling;
10 if( this.classList.contains("accordion_closed") ){
11
--- src/accordion.js
+++ src/accordion.js
@@ -1,10 +1,34 @@
1 /* Attach appropriate javascript to each ".accordion" button so that
2 ** it expands and contracts when clicked.
3 */
4 var a = document.getElementsByClassName("accordion");
5 for(var i=0; i<a.length; i++){
6 var img = document.createElement("img");
7 img.src =
8 "data:image/svg+xml,"+
9 "%3Csvg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
10 "%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
11 "%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
12 "%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E"+
13 "%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E"+
14 "%3Cpath style='fill:rgb(80,128,208)' d='M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z'/%3E"+
15 "%3C/svg%3E";
16 img.className = "accordion_btn accordion_btn_plus";
17 a[i].insertBefore(img,a[i].firstChild);
18 img = document.createElement("img");
19 img.src =
20 "data:image/svg+xml,"+
21 "%3Csvg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 16 16'%3E"+
22 "%3Cpath style='fill:black;opacity:0' d='M16,16H0V0h16v16z'/%3E"+
23 "%3Cpath style='fill:rgb(240,240,240)' d='M14,14H2V2h12v12z'/%3E"+
24 "%3Cpath style='fill:rgb(64,64,64)' d='M13,13H3V3h10v10z'/%3E"+
25 "%3Cpath style='fill:rgb(248,248,248)' d='M12,12H4V4h8v8z'/%3E"+
26 "%3Cpath style='fill:rgb(80,128,208)' d='M11,9H5V7h6v6z'/%3E"+
27 "%3C/svg%3E";
28 img.className = "accordion_btn accordion_btn_minus";
29 a[i].insertBefore(img,a[i].firstChild);
30 var p = a[i].nextElementSibling;
31 p.style.maxHeight = p.scrollHeight + "px";
32 a[i].addEventListener("click",function(){
33 var x = this.nextElementSibling;
34 if( this.classList.contains("accordion_closed") ){
35
M src/default_css.txt
+17 -9
--- src/default_css.txt
+++ src/default_css.txt
@@ -811,21 +811,29 @@
811811
 }
812812
 .nobr {
813813
 white-space: nowrap;
814814
 }
815815
 .accordion {
816
- padding-left: 30px;
817
-//Note: the mkcss utility does not support line breaks in data URIs.
818
- 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");
819
- background-repeat: no-repeat;
820
- background-position: 10px center;
821
- background-size: 16px 16px;
822816
 cursor: pointer;
823817
 }
824
-.accordion_closed {
825
-//Note: the mkcss utility does not support line breaks in data URIs.
826
- 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");
818
+.accordion_btn {
819
+ display: inline-block;
820
+ width: 16px;
821
+ height: 16px;
822
+ margin-right: .5em;
823
+ vertical-align: top;
824
+}
825
+// Note: the order of the next 3 entries should be
826
+// maintained for the hierarchical cascade to work.
827
+.accordion > .accordion_btn_plus {
828
+ display: none;
829
+}
830
+.accordion_closed > .accordion_btn_minus {
831
+ display: none;
832
+}
833
+.accordion_closed > .accordion_btn_plus {
834
+ display: inline-block;
827835
 }
828836
 .accordion_panel {
829837
 overflow: hidden;
830838
 transition: max-height 0.25s ease-out;
831839
 }
832840
--- src/default_css.txt
+++ src/default_css.txt
@@ -811,21 +811,29 @@
811 }
812 .nobr {
813 white-space: nowrap;
814 }
815 .accordion {
816 padding-left: 30px;
817 //Note: the mkcss utility does not support line breaks in data URIs.
818 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");
819 background-repeat: no-repeat;
820 background-position: 10px center;
821 background-size: 16px 16px;
822 cursor: pointer;
823 }
824 .accordion_closed {
825 //Note: the mkcss utility does not support line breaks in data URIs.
826 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");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
827 }
828 .accordion_panel {
829 overflow: hidden;
830 transition: max-height 0.25s ease-out;
831 }
832
--- src/default_css.txt
+++ src/default_css.txt
@@ -811,21 +811,29 @@
811 }
812 .nobr {
813 white-space: nowrap;
814 }
815 .accordion {
 
 
 
 
 
 
816 cursor: pointer;
817 }
818 .accordion_btn {
819 display: inline-block;
820 width: 16px;
821 height: 16px;
822 margin-right: .5em;
823 vertical-align: top;
824 }
825 // Note: the order of the next 3 entries should be
826 // maintained for the hierarchical cascade to work.
827 .accordion > .accordion_btn_plus {
828 display: none;
829 }
830 .accordion_closed > .accordion_btn_minus {
831 display: none;
832 }
833 .accordion_closed > .accordion_btn_plus {
834 display: inline-block;
835 }
836 .accordion_panel {
837 overflow: hidden;
838 transition: max-height 0.25s ease-out;
839 }
840

Keyboard Shortcuts

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