Fossil SCM
Fold duplicate parts of the SVG data URIs to simplify the Javascript code -- overall impact on the final size of the gzipped web page is likely minor. The uncompressed source code for the icons is on the [branch/accordion-experiments] wiki page.
Commit
facc16233b951414e479aac4792c7b6c77b7e6e0e81be7e8456a15314e5b5769
Parent
af6833b6725a98b…
1 file changed
+12
-18
+12
-18
| --- src/accordion.js | ||
| +++ src/accordion.js | ||
| @@ -1,32 +1,26 @@ | ||
| 1 | 1 | /* Attach appropriate javascript to each ".accordion" button so that |
| 2 | 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. | |
| 3 | 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", | |
| 13 | + "M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z", "M11,9H5V7h6v6z"]; | |
| 4 | 14 | var a = document.getElementsByClassName("accordion"); |
| 5 | 15 | for(var i=0; i<a.length; i++){ |
| 6 | 16 | 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"; | |
| 17 | + img.src = acc_svgdata[0]+acc_svgdata[2]+acc_svgdata[1]; | |
| 16 | 18 | img.className = "accordion_btn accordion_btn_plus"; |
| 17 | 19 | a[i].insertBefore(img,a[i].firstChild); |
| 18 | 20 | 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"; | |
| 21 | + img.src = acc_svgdata[0]+acc_svgdata[3]+acc_svgdata[1]; | |
| 28 | 22 | img.className = "accordion_btn accordion_btn_minus"; |
| 29 | 23 | a[i].insertBefore(img,a[i].firstChild); |
| 30 | 24 | var p = a[i].nextElementSibling; |
| 31 | 25 | p.style.maxHeight = p.scrollHeight + "px"; |
| 32 | 26 | a[i].addEventListener("click",function(){ |
| 33 | 27 |
| --- src/accordion.js | |
| +++ src/accordion.js | |
| @@ -1,32 +1,26 @@ | |
| 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 |
| --- src/accordion.js | |
| +++ src/accordion.js | |
| @@ -1,32 +1,26 @@ | |
| 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", |
| 13 | "M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z", "M11,9H5V7h6v6z"]; |
| 14 | var a = document.getElementsByClassName("accordion"); |
| 15 | for(var i=0; i<a.length; i++){ |
| 16 | var img = document.createElement("img"); |
| 17 | img.src = acc_svgdata[0]+acc_svgdata[2]+acc_svgdata[1]; |
| 18 | img.className = "accordion_btn accordion_btn_plus"; |
| 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 |