mirror of https://github.com/istio/istio.io.git
Site infra cleanup. (#3281)
- Refactor script code into smaller more manageable files. - Use consistent naming style in script code. - Stop using Bootstrap's dropdowns and popovers in favor of custom implementation. There are only a few uses of Bootstrap to purge before I can ditch the dependency on the Bootstrap & JQuery libraries, which will speed up page loads. - Find a few more static strings that should come from the xlation dictionary instead.
This commit is contained in:
Martin Taillefer
GitHub
parent
34a30c929d
commit
2dac7e0ff3
|
|
@ -477,12 +477,12 @@ Mixer uses {{<gloss>}}adapters{{</gloss>}} to interface to backends.
|
|||
If the term displayed on the page doesn't exactly match the entry in the glossary, you can specify a substitution:
|
||||
|
||||
{{< text markdown >}}
|
||||
Mixer use an {{</*gloss adapters*/>}}adapter{{</*/gloss*/>}} to interface to a backend.
|
||||
Mixer uses an {{</*gloss adapters*/>}}adapter{{</*/gloss*/>}} to interface to a backend.
|
||||
{{< /text >}}
|
||||
|
||||
which looks like:
|
||||
|
||||
Mixer use an {{<gloss adapters>}}adapter{{</gloss>}} to interface to a backend.
|
||||
Mixer uses an {{<gloss adapters>}}adapter{{</gloss>}} to interface to a backend.
|
||||
|
||||
So even though the glossary entry is for *adapters*, the singular form of *adapter* can be used in the text.
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,3 @@
|
|||
"use strict";function applyStyleSheet(a){const b=document.getElementsByTagName("link");for(let c=0;c<b.length;c++){const d=b[c];d.getAttribute("rel").includes("stylesheet")&&d.getAttribute("title")&&(d.disabled=!0,d.getAttribute("title")===a&&(d.disabled=!1))}let c=document.getElementById("light-theme-item");null!==c&&("Light Theme"===a?c.classList.add("active"):c.classList.remove("active")),c=document.getElementById("dark-theme-item"),null!==c&&("Dark Theme"===a?c.classList.add("active"):c.classList.remove("active"))}function createCookie(a,b,c){let d="";if(c){const a=new Date;a.setTime(a.getTime()+1e3*(60*(60*(24*c)))),d="; expires="+a.toGMTString()}document.cookie=a+"="+b+d+"; path=/"}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e,c=0;c<d.length;c++){for(e=d[c];" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b)){let a=e.substring(b.length,e.length);return"light"===a?a="Light Theme":"dark"==a&&(a="Dark Theme"),a}}return null}function setActiveStyleSheet(a){applyStyleSheet(a),createCookie("style",a)}function loadActiveStyleSheet(){let a=readCookie("style");null!==a&&applyStyleSheet(a)}loadActiveStyleSheet();
|
||||
"use strict";function applyStyleSheet(a){const b=document.getElementsByTagName("link");for(let c=0;c<b.length;c++){const d=b[c];d.getAttribute("rel").includes("stylesheet")&&d.getAttribute("title")&&(d.disabled=!0,d.getAttribute("title")===a&&(d.disabled=!1))}let c=document.getElementById("light-theme-item");null!==c&&("Light Theme"===a?c.classList.add("active"):c.classList.remove("active")),c=document.getElementById("dark-theme-item"),null!==c&&("Dark Theme"===a?c.classList.add("active"):c.classList.remove("active"))}function createCookie(a,b,c){let d="";if(c){const a=new Date;a.setTime(a.getTime()+1e3*(60*(60*(24*c)))),d="; expires="+a.toGMTString()}document.cookie=a+"="+b+d+"; path=/"}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e,c=0;c<d.length;c++){for(e=d[c];" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b)){let a=e.substring(b.length,e.length);return"light"===a?a="Light Theme":"dark"==a&&(a="Dark Theme"),a}}return null}function setActiveStyleSheet(a){applyStyleSheet(a),createCookie("style",a)}function loadActiveStyleSheet(){let a=readCookie("style");null!==a&&applyStyleSheet(a)}loadActiveStyleSheet(),document.addEventListener("DOMContentLoaded",()=>{loadActiveStyleSheet()});
|
||||
|
||||
//# sourceMappingURL=styleSwitcher.min.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../../src/js/styleSwitcher.js"],"names":[],"mappings":"AAAA,aAEA,QAAS,CAAA,eAAT,CAAyB,CAAzB,CAAgC,CAC5B,KAAM,CAAA,CAAK,CAAG,QAAQ,CAAC,oBAAT,CAA8B,MAA9B,CAAd,CACA,IAAK,GAAI,CAAA,CAAC,CAAG,CAAb,CAAgB,CAAC,CAAG,CAAK,CAAC,MAA1B,CAAkC,CAAC,EAAnC,CAAuC,CACnC,KAAM,CAAA,CAAI,CAAG,CAAK,CAAC,CAAD,CAAlB,CACI,CAAI,CAAC,YAAL,CAAkB,KAAlB,EAAyB,QAAzB,CAAkC,YAAlC,GAAmD,CAAI,CAAC,YAAL,CAAkB,OAAlB,CAFpB,GAM/B,CAAI,CAAC,QAAL,GAN+B,CAQ3B,CAAI,CAAC,YAAL,CAAkB,OAAlB,IAA+B,CARJ,GAS3B,CAAI,CAAC,QAAL,GAT2B,EAYtC,CAID,GAAI,CAAA,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,kBAAxB,CAAX,CACa,IAAT,GAAA,CAnBwB,GAoBV,aAAV,GAAA,CApBoB,CAqBpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,QAAnB,CArBoB,CAuBpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,QAAtB,CAvBoB,EA2B5B,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,iBAAxB,CA3BqB,CA4Bf,IAAT,GAAA,CA5BwB,GA6BV,YAAV,GAAA,CA7BoB,CA8BpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,QAAnB,CA9BoB,CAgCpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,QAAtB,CAhCoB,CAmC/B,CAED,QAAS,CAAA,YAAT,CAAsB,CAAtB,CAA4B,CAA5B,CAAmC,CAAnC,CAAyC,CACrC,GAAI,CAAA,CAAO,CAAG,EAAd,CACA,GAAI,CAAJ,CAAU,CACN,KAAM,CAAA,CAAI,CAAG,GAAI,CAAA,IAAjB,CACA,CAAI,CAAC,OAAL,CAAa,CAAI,CAAC,OAAL,GAAwC,GAAtB,EAAiB,EAAjB,EAAY,EAAZ,EAAO,EAAP,CAAA,CAAI,GAAnC,CAFM,CAGN,CAAO,CAAG,aAAe,CAAI,CAAC,WAAL,EAC5B,CACD,QAAQ,CAAC,MAAT,CAAkB,CAAI,CAAG,GAAP,CAAa,CAAb,CAAqB,CAArB,CAA+B,UACpD,CAED,QAAS,CAAA,UAAT,CAAoB,CAApB,CAA0B,MAChB,CAAA,CAAM,CAAG,CAAI,CAAG,GADA,CAEhB,CAAE,CAAG,QAAQ,CAAC,MAAT,CAAgB,KAAhB,CAAsB,GAAtB,CAFW,CAGtB,IAAK,GACG,CAAA,CADH,CAAI,CAAC,CAAG,CAAb,CAAgB,CAAC,CAAG,CAAE,CAAC,MAAvB,CAA+B,CAAC,EAAhC,CAAoC,KAC5B,CAD4B,CACxB,CAAE,CAAC,CAAD,CADsB,CAET,GAAhB,GAAA,CAAC,CAAC,MAAF,CAAS,CAAT,CAFyB,EAG5B,CAAC,CAAG,CAAC,CAAC,SAAF,CAAY,CAAZ,CAAe,CAAC,CAAC,MAAjB,CAAJ,CAGJ,GAA0B,CAAtB,GAAA,CAAC,CAAC,OAAF,CAAU,CAAV,CAAJ,CAA6B,CACzB,GAAI,CAAA,CAAM,CAAG,CAAC,CAAC,SAAF,CAAY,CAAM,CAAC,MAAnB,CAA2B,CAAC,CAAC,MAA7B,CAAb,CASA,MANe,OAAX,GAAA,CAMJ,CALI,CAAM,CAAG,aAKb,CAJsB,MAAX,EAAA,CAIX,GAHI,CAAM,CAAG,YAGb,EAAO,CACV,CACJ,CACD,MAAO,KACV,CAED,QAAS,CAAA,mBAAT,CAA6B,CAA7B,CAAoC,CAChC,eAAe,CAAC,CAAD,CADiB,CAEhC,YAAY,CAAC,OAAD,CAAU,CAAV,CACf,CAED,QAAS,CAAA,oBAAT,EAAgC,CAC5B,GAAI,CAAA,CAAM,CAAG,UAAU,CAAC,OAAD,CAAvB,CACe,IAAX,GAAA,CAFwB,EAGxB,eAAe,CAAC,CAAD,CAEtB,CAED,oBAAoB,E","file":"styleSwitcher.min.js","sourcesContent":["\"use strict\";\r\rfunction applyStyleSheet(title) {\r const links = document.getElementsByTagName('link');\r for (let i = 0; i < links.length; i++) {\r const link = links[i];\r if (link.getAttribute(\"rel\").includes(\"stylesheet\") && link.getAttribute(\"title\")) {\r\r // This needs to go to the disabled state first, and then adjusted below. Not sure why, but\r // not doing this first leads to states where no style sheet is loaded at all.\r link.disabled = true;\r\r if (link.getAttribute(\"title\") === title) {\r link.disabled = false;\r }\r }\r }\r\r // set the active theme menu item\r\r let item = document.getElementById(\"light-theme-item\");\r if (item !== null) {\r if (title === \"Light Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r\r item = document.getElementById(\"dark-theme-item\");\r if (item !== null) {\r if (title === \"Dark Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r}\r\rfunction createCookie(name, value, days) {\r let expires = \"\";\r if (days) {\r const date = new Date();\r date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\r expires = \"; expires=\" + date.toGMTString();\r }\r document.cookie = name + \"=\" + value + expires + \"; path=/\";\r}\r\rfunction readCookie(name) {\r const nameEQ = name + \"=\";\r const ca = document.cookie.split(';');\r for (let i = 0; i < ca.length; i++) {\r let c = ca[i];\r while (c.charAt(0) === ' ') {\r c = c.substring(1, c.length);\r }\r\r if (c.indexOf(nameEQ) === 0) {\r let result = c.substring(nameEQ.length, c.length);\r\r // convert legacy cookie values\r if (result === \"light\") {\r result = \"Light Theme\";\r } else if (result === \"dark\") {\r result = \"Dark Theme\";\r }\r\r return result;\r }\r }\r return null;\r}\r\rfunction setActiveStyleSheet(title) {\r applyStyleSheet(title);\r createCookie(\"style\", title);\r}\r\rfunction loadActiveStyleSheet() {\r let cookie = readCookie(\"style\");\r if (cookie !== null) {\r applyStyleSheet(cookie);\r }\r}\r\rloadActiveStyleSheet();\r"]}
|
||||
{"version":3,"sources":["../../src/js/styleSwitcher.js"],"names":[],"mappings":"AAAA,aAEA,QAAS,CAAA,eAAT,CAAyB,CAAzB,CAAgC,CAC5B,KAAM,CAAA,CAAK,CAAG,QAAQ,CAAC,oBAAT,CAA8B,MAA9B,CAAd,CACA,IAAK,GAAI,CAAA,CAAC,CAAG,CAAb,CAAgB,CAAC,CAAG,CAAK,CAAC,MAA1B,CAAkC,CAAC,EAAnC,CAAuC,CACnC,KAAM,CAAA,CAAI,CAAG,CAAK,CAAC,CAAD,CAAlB,CACI,CAAI,CAAC,YAAL,CAAkB,KAAlB,EAAyB,QAAzB,CAAkC,YAAlC,GAAmD,CAAI,CAAC,YAAL,CAAkB,OAAlB,CAFpB,GAM/B,CAAI,CAAC,QAAL,GAN+B,CAQ3B,CAAI,CAAC,YAAL,CAAkB,OAAlB,IAA+B,CARJ,GAS3B,CAAI,CAAC,QAAL,GAT2B,EAYtC,CAID,GAAI,CAAA,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,kBAAxB,CAAX,CACa,IAAT,GAAA,CAnBwB,GAoBV,aAAV,GAAA,CApBoB,CAqBpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,QAAnB,CArBoB,CAuBpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,QAAtB,CAvBoB,EA2B5B,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,iBAAxB,CA3BqB,CA4Bf,IAAT,GAAA,CA5BwB,GA6BV,YAAV,GAAA,CA7BoB,CA8BpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,QAAnB,CA9BoB,CAgCpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,QAAtB,CAhCoB,CAmC/B,CAED,QAAS,CAAA,YAAT,CAAsB,CAAtB,CAA4B,CAA5B,CAAmC,CAAnC,CAAyC,CACrC,GAAI,CAAA,CAAO,CAAG,EAAd,CACA,GAAI,CAAJ,CAAU,CACN,KAAM,CAAA,CAAI,CAAG,GAAI,CAAA,IAAjB,CACA,CAAI,CAAC,OAAL,CAAa,CAAI,CAAC,OAAL,GAAwC,GAAtB,EAAiB,EAAjB,EAAY,EAAZ,EAAO,EAAP,CAAA,CAAI,GAAnC,CAFM,CAGN,CAAO,CAAG,aAAe,CAAI,CAAC,WAAL,EAC5B,CACD,QAAQ,CAAC,MAAT,CAAkB,CAAI,CAAG,GAAP,CAAa,CAAb,CAAqB,CAArB,CAA+B,UACpD,CAED,QAAS,CAAA,UAAT,CAAoB,CAApB,CAA0B,MAChB,CAAA,CAAM,CAAG,CAAI,CAAG,GADA,CAEhB,CAAE,CAAG,QAAQ,CAAC,MAAT,CAAgB,KAAhB,CAAsB,GAAtB,CAFW,CAGtB,IAAK,GACG,CAAA,CADH,CAAI,CAAC,CAAG,CAAb,CAAgB,CAAC,CAAG,CAAE,CAAC,MAAvB,CAA+B,CAAC,EAAhC,CAAoC,KAC5B,CAD4B,CACxB,CAAE,CAAC,CAAD,CADsB,CAET,GAAhB,GAAA,CAAC,CAAC,MAAF,CAAS,CAAT,CAFyB,EAG5B,CAAC,CAAG,CAAC,CAAC,SAAF,CAAY,CAAZ,CAAe,CAAC,CAAC,MAAjB,CAAJ,CAGJ,GAA0B,CAAtB,GAAA,CAAC,CAAC,OAAF,CAAU,CAAV,CAAJ,CAA6B,CACzB,GAAI,CAAA,CAAM,CAAG,CAAC,CAAC,SAAF,CAAY,CAAM,CAAC,MAAnB,CAA2B,CAAC,CAAC,MAA7B,CAAb,CASA,MANe,OAAX,GAAA,CAMJ,CALI,CAAM,CAAG,aAKb,CAJsB,MAAX,EAAA,CAIX,GAHI,CAAM,CAAG,YAGb,EAAO,CACV,CACJ,CACD,MAAO,KACV,CAED,QAAS,CAAA,mBAAT,CAA6B,CAA7B,CAAoC,CAChC,eAAe,CAAC,CAAD,CADiB,CAEhC,YAAY,CAAC,OAAD,CAAU,CAAV,CACf,CAED,QAAS,CAAA,oBAAT,EAAgC,CAC5B,GAAI,CAAA,CAAM,CAAG,UAAU,CAAC,OAAD,CAAvB,CACe,IAAX,GAAA,CAFwB,EAGxB,eAAe,CAAC,CAAD,CAEtB,CAED,oBAAoB,E,CACpB,QAAQ,CAAC,gBAAT,CAA0B,kBAA1B,CAA8C,IAAM,CAChD,oBAAoB,EACvB,CAFD,C","file":"styleSwitcher.min.js","sourcesContent":["\"use strict\";\r\rfunction applyStyleSheet(title) {\r const links = document.getElementsByTagName('link');\r for (let i = 0; i < links.length; i++) {\r const link = links[i];\r if (link.getAttribute(\"rel\").includes(\"stylesheet\") && link.getAttribute(\"title\")) {\r\r // This needs to go to the disabled state first, and then adjusted below. Not sure why, but\r // not doing this first leads to states where no style sheet is loaded at all.\r link.disabled = true;\r\r if (link.getAttribute(\"title\") === title) {\r link.disabled = false;\r }\r }\r }\r\r // set the active theme menu item\r\r let item = document.getElementById(\"light-theme-item\");\r if (item !== null) {\r if (title === \"Light Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r\r item = document.getElementById(\"dark-theme-item\");\r if (item !== null) {\r if (title === \"Dark Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r}\r\rfunction createCookie(name, value, days) {\r let expires = \"\";\r if (days) {\r const date = new Date();\r date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\r expires = \"; expires=\" + date.toGMTString();\r }\r document.cookie = name + \"=\" + value + expires + \"; path=/\";\r}\r\rfunction readCookie(name) {\r const nameEQ = name + \"=\";\r const ca = document.cookie.split(';');\r for (let i = 0; i < ca.length; i++) {\r let c = ca[i];\r while (c.charAt(0) === ' ') {\r c = c.substring(1, c.length);\r }\r\r if (c.indexOf(nameEQ) === 0) {\r let result = c.substring(nameEQ.length, c.length);\r\r // convert legacy cookie values\r if (result === \"light\") {\r result = \"Light Theme\";\r } else if (result === \"dark\") {\r result = \"Dark Theme\";\r }\r\r return result;\r }\r }\r return null;\r}\r\rfunction setActiveStyleSheet(title) {\r applyStyleSheet(title);\r createCookie(\"style\", title);\r}\r\rfunction loadActiveStyleSheet() {\r let cookie = readCookie(\"style\");\r if (cookie !== null) {\r applyStyleSheet(cookie);\r }\r}\r\rloadActiveStyleSheet();\rdocument.addEventListener('DOMContentLoaded', () => {\r loadActiveStyleSheet();\r});\r"]}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
[discuss_istio_io_desc]
|
||||
other = "Join the Istio discussion board to participate in discussions and get help troubleshooting problems"
|
||||
|
||||
[twitter_desc]
|
||||
other = "Follow us on Twitter to get the latest news"
|
||||
|
||||
|
|
@ -54,6 +55,12 @@ other = "Options and settings"
|
|||
[search]
|
||||
other = "Search this site"
|
||||
|
||||
[search_label]
|
||||
other = "Search"
|
||||
|
||||
[search_cancel]
|
||||
other = "Cancel search"
|
||||
|
||||
[footer_istio]
|
||||
other = "Istio"
|
||||
|
||||
|
|
|
|||
|
|
@ -55,6 +55,12 @@ other = "选项和设置"
|
|||
[search]
|
||||
other = "搜索istio.io"
|
||||
|
||||
[search_label]
|
||||
other = "Search"
|
||||
|
||||
[search_cancel]
|
||||
other = "Cancel search"
|
||||
|
||||
[footer_istio]
|
||||
other = "Istio"
|
||||
|
||||
|
|
|
|||
|
|
@ -81,12 +81,12 @@
|
|||
<!-- End Google Analytics -->
|
||||
|
||||
<script>
|
||||
var branchName = "{{ .Site.Data.args.source_branch_name }}";
|
||||
var docTitle = "{{ .Title }}";
|
||||
var iconFile = "{{ .Site.BaseURL}}/img/icons.svg";
|
||||
var buttonCopy = '{{ i18n "button_copy" }}';
|
||||
var buttonPrint = '{{ i18n "button_print" }}';
|
||||
var buttonDownload = '{{ i18n "button_download" }}';
|
||||
const branchName = "{{ .Site.Data.args.source_branch_name }}";
|
||||
const docTitle = "{{ .Title }}";
|
||||
const iconFile = "{{ .Site.BaseURL}}/img/icons.svg";
|
||||
const buttonCopy = '{{ i18n "button_copy" }}';
|
||||
const buttonPrint = '{{ i18n "button_print" }}';
|
||||
const buttonDownload = '{{ i18n "button_download" }}';
|
||||
</script>
|
||||
|
||||
<!-- RSS -->
|
||||
|
|
@ -140,10 +140,9 @@
|
|||
|
||||
<!-- libraries we pull in -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="https://www.google.com/cse/brand?form=search_form"></script>
|
||||
<script src="https://www.google.com/cse/brand?form=search-form"></script>
|
||||
|
||||
<!-- our own scripts -->
|
||||
<script src="/js/all.min.js" data-manual></script>
|
||||
|
|
|
|||
|
|
@ -46,57 +46,57 @@
|
|||
</li>
|
||||
{{ end }}
|
||||
|
||||
<li class="nav-item dropdown" id="gearDropdown" style="white-space: nowrap">
|
||||
<a title='{{ i18n "options_menu" }}' href="" class="nav-link" data-toggle="dropdown" aria-label="Tools" aria-haspopup="true" aria-expanded="false">
|
||||
<li class="nav-item menu" id="gearDropdown" style="white-space: nowrap">
|
||||
<a class="menu-trigger nav-link" title='{{ i18n "options_menu" }}' aria-label="Tools" aria-haspopup="true" aria-expanded="false">
|
||||
{{ partial "icon.html" "gear" }}
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="gearDropdown">
|
||||
<a lang="en" href="/" class="dropdown-item {{ if eq $home.Lang "en" }}active{{ end }}" onclick="createCookie('nf_lang', 'en'); return true;">English</a>
|
||||
<a lang="zh" href="/zh" class="dropdown-item {{ if eq $home.Lang "zh" }}active{{ end }}" onclick="createCookie('nf_lang', 'zh'); return true;">中文</a>
|
||||
<div class="menu-content" aria-labelledby="gearDropdown">
|
||||
<a lang="en" href="/" {{ if eq $home.Lang "en" }}class="active"{{ end }} onclick="createCookie('nf_lang', 'en'); return true;">English</a>
|
||||
<a lang="zh" href="/zh" {{ if eq $home.Lang "zh" }}class="active"{{ end }} onclick="createCookie('nf_lang', 'zh'); return true;">中文</a>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
<div></div>
|
||||
|
||||
<a class="dropdown-item active" id="light-theme-item" href="" onclick="setActiveStyleSheet('Light Theme');return false;">{{ i18n "light_theme" }}</a>
|
||||
<a class="dropdown-item" id="dark-theme-item" href="" onclick="setActiveStyleSheet('Dark Theme');return false;">{{ i18n "dark_theme" }}</a>
|
||||
<a class="active" id="light-theme-item" href="" onclick="setActiveStyleSheet('Light Theme');return false;">{{ i18n "light_theme" }}</a>
|
||||
<a id="dark-theme-item" href="" onclick="setActiveStyleSheet('Dark Theme');return false;">{{ i18n "dark_theme" }}</a>
|
||||
|
||||
{{ if not .Site.Data.args.archive }}
|
||||
<div class="dropdown-divider"></div>
|
||||
<div></div>
|
||||
|
||||
<a class="dropdown-item" href="https://github.com/istio/istio.io/issues/new?title=Issue%20with%20{{ .Path}}">{{ i18n "report_site_bugs" }}</a>
|
||||
<a href="https://github.com/istio/istio.io/issues/new?title=Issue%20with%20{{ .Path}}">{{ i18n "report_site_bugs" }}</a>
|
||||
|
||||
{{ if not .Params.generator }}
|
||||
<a class="dropdown-item" href="https://github.com/istio/istio.io/edit/{{ .Site.Data.args.doc_branch_name }}/content/{{ .Path }}">{{ i18n "edit_on_github" }}</a>
|
||||
<a href="https://github.com/istio/istio.io/edit/{{ .Site.Data.args.doc_branch_name }}/content/{{ .Path }}">{{ i18n "edit_on_github" }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
<div></div>
|
||||
|
||||
<h6 class="dropdown-header">{{ i18n "other_versions_of_site" }}</h6>
|
||||
<h6>{{ i18n "other_versions_of_site" }}</h6>
|
||||
|
||||
{{ $next := index .Site.Data.releases 0 }}
|
||||
{{ $current := index .Site.Data.releases 1 }}
|
||||
|
||||
{{ if .Site.Data.args.archive }}
|
||||
<a class="dropdown-item" onclick="navigateToUrlOrRoot('https://istio.io/{{.Dir}}');return false;">{{ printf (i18n "current_release") $current.name }}</a>
|
||||
<a class="dropdown-item" onclick="navigateToUrlOrRoot('https://preliminary.istio.io/{{.Dir}}');return false;">{{ printf (i18n "next_release") $next.name }}</a>
|
||||
<a class="dropdown-item" href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
|
||||
<a onclick="navigateToUrlOrRoot('https://istio.io/{{.Dir}}');return false;">{{ printf (i18n "current_release") $current.name }}</a>
|
||||
<a onclick="navigateToUrlOrRoot('https://preliminary.istio.io/{{.Dir}}');return false;">{{ printf (i18n "next_release") $next.name }}</a>
|
||||
<a href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
|
||||
{{ else if .Site.Data.args.preliminary }}
|
||||
<a class="dropdown-item" onclick="navigateToUrlOrRoot('https://istio.io/{{.Dir}}');return false;">{{ printf (i18n "current_release") $current.name }}</a>
|
||||
<a class="dropdown-item" href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
|
||||
<a onclick="navigateToUrlOrRoot('https://istio.io/{{.Dir}}');return false;">{{ printf (i18n "current_release") $current.name }}</a>
|
||||
<a href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
|
||||
{{ else }}
|
||||
<a class="dropdown-item" onclick="navigateToUrlOrRoot('https://preliminary.istio.io/{{.Dir}}');return false;">{{ printf (i18n "next_release") $next.name }}</a>
|
||||
<a class="dropdown-item" href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
|
||||
<a onclick="navigateToUrlOrRoot('https://preliminary.istio.io/{{.Dir}}');return false;">{{ printf (i18n "next_release") $next.name }}</a>
|
||||
<a href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a id="search_show" class="nav-link" href="" title='{{ i18n "search" }}' aria-label="Search">{{ partial "icon.html" "magnifier" }}</a>
|
||||
<a id="search-show" class="nav-link" href="" title='{{ i18n "search" }}' aria-label='{{ i18n "search_label" }}'>{{ partial "icon.html" "magnifier" }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<form name="cse" id="search_form" class="form-inline mr-sm-2" role="search">
|
||||
<form name="cse" id="search-form" class="form-inline mr-sm-2" role="search">
|
||||
{{ if .Site.Data.args.preliminary }}
|
||||
<input type="hidden" name="cx" value="{{ .Site.Data.args.preliminary_search_engine_id }}" />
|
||||
{{ else if .Site.Data.args.archive }}
|
||||
|
|
@ -106,9 +106,9 @@
|
|||
{{ end }}
|
||||
<input type="hidden" name="ie" value="utf-8" />
|
||||
<input type="hidden" name="hl" value="en" />
|
||||
<input type="hidden" id="search_page_url" value="{{ .Site.BaseURL }}/search.html" />
|
||||
<input id="search_textbox" class="form-control" name="q" type="text" aria-label="Search this site"/>
|
||||
<button id="search_close" type="reset" aria-label="Cancel Search">{{ partial "icon.html" "cancel-x" }}</button>
|
||||
<input type="hidden" id="search-page-url" value="{{ .Site.BaseURL }}/search.html" />
|
||||
<input id="search-textbox" class="form-control" name="q" type="text" aria-label='{{ i18n "search" }}'/>
|
||||
<button id="search-close" title='{{ i18n "search_cancel" }}' type="reset" aria-label='{{ i18n "search_cancel" }}'>{{ partial "icon.html" "cancel-x" }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -20,4 +20,4 @@
|
|||
{{- errorf "Could not find glossary entry for '%s' (%s)" $gloss_entry $position -}}
|
||||
{{- end -}}
|
||||
|
||||
<a tabindex=0 class="term" data-trigger="focus" data-toggle="popover" data-placement="right" data-html="true" data-content="{{- $dfn | string -}}" title="{{- $title -}}">{{- $term -}}</a>
|
||||
<span class="term" data-title="{{- $title }}" data-body="{{- $dfn | string -}}">{{ $term }}</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
HUB=gcr.io/istio-testing
|
||||
VERSION=$(date +%Y-%m-%d)
|
||||
VERSION=2019-02-13
|
||||
|
||||
docker build --no-cache -t $HUB/website-builder:$VERSION .
|
||||
docker push $HUB/website-builder:$VERSION
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@ npx sass src/sass/dark_theme_normal.scss dark_theme_normal.css -s compressed
|
|||
npx sass src/sass/dark_theme_preliminary.scss dark_theme_preliminary.css -s compressed
|
||||
mv light_theme* generated/css
|
||||
mv dark_theme* generated/css
|
||||
npx babel src/js/misc.js src/js/prism.js src/js/utils.js --out-file generated/js/all.min.js --source-maps --minified --no-comments --presets minify
|
||||
npx babel src/js/misc.js src/js/prism.js src/js/utils.js src/js/codeBlocks.js src/js/links.js src/js/scroll.js src/js/overlays.js src/js/clipboard.js --out-file generated/js/all.min.js --source-maps --minified --no-comments --presets minify
|
||||
npx babel src/js/styleSwitcher.js --out-file generated/js/styleSwitcher.min.js --source-maps --minified --no-comments --presets minify
|
||||
npx svgstore -o generated/img/icons.svg src/icons/**/*.svg
|
||||
|
|
|
|||
|
|
@ -0,0 +1,978 @@
|
|||
/*!
|
||||
* clipboard.js v2.0.4
|
||||
* https://zenorocha.github.io/clipboard.js
|
||||
*
|
||||
* Licensed MIT © Zeno Rocha
|
||||
*/
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define([], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["ClipboardJS"] = factory();
|
||||
else
|
||||
root["ClipboardJS"] = factory();
|
||||
})(this, function() {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function(value, mode) {
|
||||
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||
/******/ if(mode & 8) return value;
|
||||
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||
/******/ var ns = Object.create(null);
|
||||
/******/ __webpack_require__.r(ns);
|
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||
/******/ return ns;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _clipboardAction = __webpack_require__(1);
|
||||
|
||||
var _clipboardAction2 = _interopRequireDefault(_clipboardAction);
|
||||
|
||||
var _tinyEmitter = __webpack_require__(3);
|
||||
|
||||
var _tinyEmitter2 = _interopRequireDefault(_tinyEmitter);
|
||||
|
||||
var _goodListener = __webpack_require__(4);
|
||||
|
||||
var _goodListener2 = _interopRequireDefault(_goodListener);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
/**
|
||||
* Base class which takes one or more elements, adds event listeners to them,
|
||||
* and instantiates a new `ClipboardAction` on each click.
|
||||
*/
|
||||
var Clipboard = function (_Emitter) {
|
||||
_inherits(Clipboard, _Emitter);
|
||||
|
||||
/**
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
|
||||
* @param {Object} options
|
||||
*/
|
||||
function Clipboard(trigger, options) {
|
||||
_classCallCheck(this, Clipboard);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, (Clipboard.__proto__ || Object.getPrototypeOf(Clipboard)).call(this));
|
||||
|
||||
_this.resolveOptions(options);
|
||||
_this.listenClick(trigger);
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines if attributes would be resolved using internal setter functions
|
||||
* or custom functions that were passed in the constructor.
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
|
||||
_createClass(Clipboard, [{
|
||||
key: 'resolveOptions',
|
||||
value: function resolveOptions() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
|
||||
this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
|
||||
this.text = typeof options.text === 'function' ? options.text : this.defaultText;
|
||||
this.container = _typeof(options.container) === 'object' ? options.container : document.body;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a click event listener to the passed trigger.
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'listenClick',
|
||||
value: function listenClick(trigger) {
|
||||
var _this2 = this;
|
||||
|
||||
this.listener = (0, _goodListener2.default)(trigger, 'click', function (e) {
|
||||
return _this2.onClick(e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines a new `ClipboardAction` on each click event.
|
||||
* @param {Event} e
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'onClick',
|
||||
value: function onClick(e) {
|
||||
var trigger = e.delegateTarget || e.currentTarget;
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction = null;
|
||||
}
|
||||
|
||||
this.clipboardAction = new _clipboardAction2.default({
|
||||
action: this.action(trigger),
|
||||
target: this.target(trigger),
|
||||
text: this.text(trigger),
|
||||
container: this.container,
|
||||
trigger: trigger,
|
||||
emitter: this
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Default `action` lookup function.
|
||||
* @param {Element} trigger
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'defaultAction',
|
||||
value: function defaultAction(trigger) {
|
||||
return getAttributeValue('action', trigger);
|
||||
}
|
||||
|
||||
/**
|
||||
* Default `target` lookup function.
|
||||
* @param {Element} trigger
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'defaultTarget',
|
||||
value: function defaultTarget(trigger) {
|
||||
var selector = getAttributeValue('target', trigger);
|
||||
|
||||
if (selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the support of the given action, or all actions if no action is
|
||||
* given.
|
||||
* @param {String} [action]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'defaultText',
|
||||
|
||||
|
||||
/**
|
||||
* Default `text` lookup function.
|
||||
* @param {Element} trigger
|
||||
*/
|
||||
value: function defaultText(trigger) {
|
||||
return getAttributeValue('text', trigger);
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'destroy',
|
||||
value: function destroy() {
|
||||
this.listener.destroy();
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction.destroy();
|
||||
this.clipboardAction = null;
|
||||
}
|
||||
}
|
||||
}], [{
|
||||
key: 'isSupported',
|
||||
value: function isSupported() {
|
||||
var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];
|
||||
|
||||
var actions = typeof action === 'string' ? [action] : action;
|
||||
var support = !!document.queryCommandSupported;
|
||||
|
||||
actions.forEach(function (action) {
|
||||
support = support && !!document.queryCommandSupported(action);
|
||||
});
|
||||
|
||||
return support;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Clipboard;
|
||||
}(_tinyEmitter2.default);
|
||||
|
||||
/**
|
||||
* Helper function to retrieve attribute value.
|
||||
* @param {String} suffix
|
||||
* @param {Element} element
|
||||
*/
|
||||
|
||||
|
||||
function getAttributeValue(suffix, element) {
|
||||
var attribute = 'data-clipboard-' + suffix;
|
||||
|
||||
if (!element.hasAttribute(attribute)) {
|
||||
return;
|
||||
}
|
||||
|
||||
return element.getAttribute(attribute);
|
||||
}
|
||||
|
||||
module.exports = Clipboard;
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _select = __webpack_require__(2);
|
||||
|
||||
var _select2 = _interopRequireDefault(_select);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
/**
|
||||
* Inner class which performs selection from either `text` or `target`
|
||||
* properties and then executes copy or cut operations.
|
||||
*/
|
||||
var ClipboardAction = function () {
|
||||
/**
|
||||
* @param {Object} options
|
||||
*/
|
||||
function ClipboardAction(options) {
|
||||
_classCallCheck(this, ClipboardAction);
|
||||
|
||||
this.resolveOptions(options);
|
||||
this.initSelection();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines base properties passed from constructor.
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
|
||||
_createClass(ClipboardAction, [{
|
||||
key: 'resolveOptions',
|
||||
value: function resolveOptions() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
this.action = options.action;
|
||||
this.container = options.container;
|
||||
this.emitter = options.emitter;
|
||||
this.target = options.target;
|
||||
this.text = options.text;
|
||||
this.trigger = options.trigger;
|
||||
|
||||
this.selectedText = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Decides which selection strategy is going to be applied based
|
||||
* on the existence of `text` and `target` properties.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'initSelection',
|
||||
value: function initSelection() {
|
||||
if (this.text) {
|
||||
this.selectFake();
|
||||
} else if (this.target) {
|
||||
this.selectTarget();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a fake textarea element, sets its value from `text` property,
|
||||
* and makes a selection on it.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'selectFake',
|
||||
value: function selectFake() {
|
||||
var _this = this;
|
||||
|
||||
var isRTL = document.documentElement.getAttribute('dir') == 'rtl';
|
||||
|
||||
this.removeFake();
|
||||
|
||||
this.fakeHandlerCallback = function () {
|
||||
return _this.removeFake();
|
||||
};
|
||||
this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
|
||||
|
||||
this.fakeElem = document.createElement('textarea');
|
||||
// Prevent zooming on iOS
|
||||
this.fakeElem.style.fontSize = '12pt';
|
||||
// Reset box model
|
||||
this.fakeElem.style.border = '0';
|
||||
this.fakeElem.style.padding = '0';
|
||||
this.fakeElem.style.margin = '0';
|
||||
// Move element out of screen horizontally
|
||||
this.fakeElem.style.position = 'absolute';
|
||||
this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
|
||||
// Move element to the same position vertically
|
||||
var yPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
this.fakeElem.style.top = yPosition + 'px';
|
||||
|
||||
this.fakeElem.setAttribute('readonly', '');
|
||||
this.fakeElem.value = this.text;
|
||||
|
||||
this.container.appendChild(this.fakeElem);
|
||||
|
||||
this.selectedText = (0, _select2.default)(this.fakeElem);
|
||||
this.copyText();
|
||||
}
|
||||
|
||||
/**
|
||||
* Only removes the fake element after another click event, that way
|
||||
* a user can hit `Ctrl+C` to copy because selection still exists.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'removeFake',
|
||||
value: function removeFake() {
|
||||
if (this.fakeHandler) {
|
||||
this.container.removeEventListener('click', this.fakeHandlerCallback);
|
||||
this.fakeHandler = null;
|
||||
this.fakeHandlerCallback = null;
|
||||
}
|
||||
|
||||
if (this.fakeElem) {
|
||||
this.container.removeChild(this.fakeElem);
|
||||
this.fakeElem = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Selects the content from element passed on `target` property.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'selectTarget',
|
||||
value: function selectTarget() {
|
||||
this.selectedText = (0, _select2.default)(this.target);
|
||||
this.copyText();
|
||||
}
|
||||
|
||||
/**
|
||||
* Executes the copy operation based on the current selection.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'copyText',
|
||||
value: function copyText() {
|
||||
var succeeded = void 0;
|
||||
|
||||
try {
|
||||
succeeded = document.execCommand(this.action);
|
||||
} catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
|
||||
this.handleResult(succeeded);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fires an event based on the copy operation result.
|
||||
* @param {Boolean} succeeded
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'handleResult',
|
||||
value: function handleResult(succeeded) {
|
||||
this.emitter.emit(succeeded ? 'success' : 'error', {
|
||||
action: this.action,
|
||||
text: this.selectedText,
|
||||
trigger: this.trigger,
|
||||
clearSelection: this.clearSelection.bind(this)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves focus away from `target` and back to the trigger, removes current selection.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'clearSelection',
|
||||
value: function clearSelection() {
|
||||
if (this.trigger) {
|
||||
this.trigger.focus();
|
||||
}
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the `action` to be performed which can be either 'copy' or 'cut'.
|
||||
* @param {String} action
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'destroy',
|
||||
|
||||
|
||||
/**
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
value: function destroy() {
|
||||
this.removeFake();
|
||||
}
|
||||
}, {
|
||||
key: 'action',
|
||||
set: function set() {
|
||||
var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'copy';
|
||||
|
||||
this._action = action;
|
||||
|
||||
if (this._action !== 'copy' && this._action !== 'cut') {
|
||||
throw new Error('Invalid "action" value, use either "copy" or "cut"');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the `action` property.
|
||||
* @return {String}
|
||||
*/
|
||||
,
|
||||
get: function get() {
|
||||
return this._action;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the `target` property using an element
|
||||
* that will be have its content copied.
|
||||
* @param {Element} target
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'target',
|
||||
set: function set(target) {
|
||||
if (target !== undefined) {
|
||||
if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {
|
||||
if (this.action === 'copy' && target.hasAttribute('disabled')) {
|
||||
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
|
||||
}
|
||||
|
||||
if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
|
||||
throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
|
||||
}
|
||||
|
||||
this._target = target;
|
||||
} else {
|
||||
throw new Error('Invalid "target" value, use a valid Element');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the `target` property.
|
||||
* @return {String|HTMLElement}
|
||||
*/
|
||||
,
|
||||
get: function get() {
|
||||
return this._target;
|
||||
}
|
||||
}]);
|
||||
|
||||
return ClipboardAction;
|
||||
}();
|
||||
|
||||
module.exports = ClipboardAction;
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
function select(element) {
|
||||
var selectedText;
|
||||
|
||||
if (element.nodeName === 'SELECT') {
|
||||
element.focus();
|
||||
|
||||
selectedText = element.value;
|
||||
}
|
||||
else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
|
||||
var isReadOnly = element.hasAttribute('readonly');
|
||||
|
||||
if (!isReadOnly) {
|
||||
element.setAttribute('readonly', '');
|
||||
}
|
||||
|
||||
element.select();
|
||||
element.setSelectionRange(0, element.value.length);
|
||||
|
||||
if (!isReadOnly) {
|
||||
element.removeAttribute('readonly');
|
||||
}
|
||||
|
||||
selectedText = element.value;
|
||||
}
|
||||
else {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.focus();
|
||||
}
|
||||
|
||||
var selection = window.getSelection();
|
||||
var range = document.createRange();
|
||||
|
||||
range.selectNodeContents(element);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
|
||||
selectedText = selection.toString();
|
||||
}
|
||||
|
||||
return selectedText;
|
||||
}
|
||||
|
||||
module.exports = select;
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 3 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
function E () {
|
||||
// Keep this empty so it's easier to inherit from
|
||||
// (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
|
||||
}
|
||||
|
||||
E.prototype = {
|
||||
on: function (name, callback, ctx) {
|
||||
var e = this.e || (this.e = {});
|
||||
|
||||
(e[name] || (e[name] = [])).push({
|
||||
fn: callback,
|
||||
ctx: ctx
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
once: function (name, callback, ctx) {
|
||||
var self = this;
|
||||
function listener () {
|
||||
self.off(name, listener);
|
||||
callback.apply(ctx, arguments);
|
||||
};
|
||||
|
||||
listener._ = callback
|
||||
return this.on(name, listener, ctx);
|
||||
},
|
||||
|
||||
emit: function (name) {
|
||||
var data = [].slice.call(arguments, 1);
|
||||
var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
|
||||
var i = 0;
|
||||
var len = evtArr.length;
|
||||
|
||||
for (i; i < len; i++) {
|
||||
evtArr[i].fn.apply(evtArr[i].ctx, data);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
off: function (name, callback) {
|
||||
var e = this.e || (this.e = {});
|
||||
var evts = e[name];
|
||||
var liveEvents = [];
|
||||
|
||||
if (evts && callback) {
|
||||
for (var i = 0, len = evts.length; i < len; i++) {
|
||||
if (evts[i].fn !== callback && evts[i].fn._ !== callback)
|
||||
liveEvents.push(evts[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove event from queue to prevent memory leak
|
||||
// Suggested by https://github.com/lazd
|
||||
// Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
|
||||
|
||||
(liveEvents.length)
|
||||
? e[name] = liveEvents
|
||||
: delete e[name];
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = E;
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 4 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var is = __webpack_require__(5);
|
||||
var delegate = __webpack_require__(6);
|
||||
|
||||
/**
|
||||
* Validates all params and calls the right
|
||||
* listener function based on its target type.
|
||||
*
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} target
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listen(target, type, callback) {
|
||||
if (!target && !type && !callback) {
|
||||
throw new Error('Missing required arguments');
|
||||
}
|
||||
|
||||
if (!is.string(type)) {
|
||||
throw new TypeError('Second argument must be a String');
|
||||
}
|
||||
|
||||
if (!is.fn(callback)) {
|
||||
throw new TypeError('Third argument must be a Function');
|
||||
}
|
||||
|
||||
if (is.node(target)) {
|
||||
return listenNode(target, type, callback);
|
||||
}
|
||||
else if (is.nodeList(target)) {
|
||||
return listenNodeList(target, type, callback);
|
||||
}
|
||||
else if (is.string(target)) {
|
||||
return listenSelector(target, type, callback);
|
||||
}
|
||||
else {
|
||||
throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds an event listener to a HTML element
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {HTMLElement} node
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenNode(node, type, callback) {
|
||||
node.addEventListener(type, callback);
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
node.removeEventListener(type, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an event listener to a list of HTML elements
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {NodeList|HTMLCollection} nodeList
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenNodeList(nodeList, type, callback) {
|
||||
Array.prototype.forEach.call(nodeList, function(node) {
|
||||
node.addEventListener(type, callback);
|
||||
});
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
Array.prototype.forEach.call(nodeList, function(node) {
|
||||
node.removeEventListener(type, callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an event listener to a selector
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenSelector(selector, type, callback) {
|
||||
return delegate(document.body, selector, type, callback);
|
||||
}
|
||||
|
||||
module.exports = listen;
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* Check if argument is a HTML element.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.node = function(value) {
|
||||
return value !== undefined
|
||||
&& value instanceof HTMLElement
|
||||
&& value.nodeType === 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a list of HTML elements.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.nodeList = function(value) {
|
||||
var type = Object.prototype.toString.call(value);
|
||||
|
||||
return value !== undefined
|
||||
&& (type === '[object NodeList]' || type === '[object HTMLCollection]')
|
||||
&& ('length' in value)
|
||||
&& (value.length === 0 || exports.node(value[0]));
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a string.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.string = function(value) {
|
||||
return typeof value === 'string'
|
||||
|| value instanceof String;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a function.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.fn = function(value) {
|
||||
var type = Object.prototype.toString.call(value);
|
||||
|
||||
return type === '[object Function]';
|
||||
};
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var closest = __webpack_require__(7);
|
||||
|
||||
/**
|
||||
* Delegates event to a selector.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @param {Boolean} useCapture
|
||||
* @return {Object}
|
||||
*/
|
||||
function _delegate(element, selector, type, callback, useCapture) {
|
||||
var listenerFn = listener.apply(this, arguments);
|
||||
|
||||
element.addEventListener(type, listenerFn, useCapture);
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
element.removeEventListener(type, listenerFn, useCapture);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delegates event to a selector.
|
||||
*
|
||||
* @param {Element|String|Array} [elements]
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @param {Boolean} useCapture
|
||||
* @return {Object}
|
||||
*/
|
||||
function delegate(elements, selector, type, callback, useCapture) {
|
||||
// Handle the regular Element usage
|
||||
if (typeof elements.addEventListener === 'function') {
|
||||
return _delegate.apply(null, arguments);
|
||||
}
|
||||
|
||||
// Handle Element-less usage, it defaults to global delegation
|
||||
if (typeof type === 'function') {
|
||||
// Use `document` as the first parameter, then apply arguments
|
||||
// This is a short way to .unshift `arguments` without running into deoptimizations
|
||||
return _delegate.bind(null, document).apply(null, arguments);
|
||||
}
|
||||
|
||||
// Handle Selector-based usage
|
||||
if (typeof elements === 'string') {
|
||||
elements = document.querySelectorAll(elements);
|
||||
}
|
||||
|
||||
// Handle Array-like based usage
|
||||
return Array.prototype.map.call(elements, function (element) {
|
||||
return _delegate(element, selector, type, callback, useCapture);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds closest match and invokes callback.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Function}
|
||||
*/
|
||||
function listener(element, selector, type, callback) {
|
||||
return function(e) {
|
||||
e.delegateTarget = closest(e.target, selector);
|
||||
|
||||
if (e.delegateTarget) {
|
||||
callback.call(element, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = delegate;
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
var DOCUMENT_NODE_TYPE = 9;
|
||||
|
||||
/**
|
||||
* A polyfill for Element.matches()
|
||||
*/
|
||||
if (typeof Element !== 'undefined' && !Element.prototype.matches) {
|
||||
var proto = Element.prototype;
|
||||
|
||||
proto.matches = proto.matchesSelector ||
|
||||
proto.mozMatchesSelector ||
|
||||
proto.msMatchesSelector ||
|
||||
proto.oMatchesSelector ||
|
||||
proto.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds the closest parent that matches a selector.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @return {Function}
|
||||
*/
|
||||
function closest (element, selector) {
|
||||
while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
|
||||
if (typeof element.matches === 'function' &&
|
||||
element.matches(selector)) {
|
||||
return element;
|
||||
}
|
||||
element = element.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = closest;
|
||||
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
});
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
"use strict";
|
||||
|
||||
// All the voodoo needed to support our fsancy code blocks
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Add a toolbar to all PRE blocks
|
||||
function attachToolbar(pre) {
|
||||
const copyButton = document.createElement('button');
|
||||
copyButton.title = buttonCopy;
|
||||
copyButton.className = "copy";
|
||||
copyButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#copy'/></svg>";
|
||||
copyButton.setAttribute("aria-label", buttonCopy);
|
||||
copyButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
|
||||
copyButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
|
||||
|
||||
const downloadButton = document.createElement('button');
|
||||
downloadButton.title = buttonDownload;
|
||||
downloadButton.className = "download";
|
||||
downloadButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#download'/></svg>";
|
||||
downloadButton.setAttribute("aria-label", buttonDownload);
|
||||
downloadButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
|
||||
downloadButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
|
||||
|
||||
downloadButton.addEventListener("click", e => {
|
||||
const div = e.currentTarget.parentElement;
|
||||
const codes = div.getElementsByTagName("CODE");
|
||||
if ((codes !== null) && (codes.length > 0)) {
|
||||
const code = codes[0];
|
||||
const text = getToolbarDivText(div);
|
||||
let downloadas = code.dataset.downloadas;
|
||||
if (downloadas === null || downloadas === "") {
|
||||
let lang = "";
|
||||
for (let j = 0; j < code.classList.length; j++) {
|
||||
if (code.classList.item(j).startsWith("language-")) {
|
||||
lang = code.classList.item(j).substr(9);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (lang.startsWith("command")) {
|
||||
lang = "bash";
|
||||
} else if (lang === "markdown") {
|
||||
lang = "md";
|
||||
} else if (lang === "") {
|
||||
lang = "txt";
|
||||
}
|
||||
|
||||
downloadas = docTitle + "." + lang;
|
||||
}
|
||||
saveFile(downloadas, text);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const printButton = document.createElement('button');
|
||||
printButton.title = buttonPrint;
|
||||
printButton.className = "print";
|
||||
printButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#printer'/></svg>";
|
||||
printButton.setAttribute("aria-label", buttonPrint);
|
||||
printButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
|
||||
printButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
|
||||
|
||||
printButton.addEventListener("click", e => {
|
||||
const div = e.currentTarget.parentElement;
|
||||
const text = getToolbarDivText(div);
|
||||
printText(text);
|
||||
return true;
|
||||
});
|
||||
|
||||
// wrap the PRE block in a DIV so we have a place to attach the toolbar buttons
|
||||
const div = document.createElement("DIV");
|
||||
div.className = "toolbar";
|
||||
pre.parentElement.insertBefore(div, pre);
|
||||
div.appendChild(pre);
|
||||
div.appendChild(printButton);
|
||||
div.appendChild(downloadButton);
|
||||
div.appendChild(copyButton);
|
||||
|
||||
pre.addEventListener("mouseenter", e => {
|
||||
e.currentTarget.nextSibling.classList.add("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.classList.add("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.nextSibling.classList.add("toolbar-show");
|
||||
});
|
||||
|
||||
pre.addEventListener("mouseleave", e => {
|
||||
e.currentTarget.nextSibling.classList.remove("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.classList.remove("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.nextSibling.classList.remove("toolbar-show");
|
||||
});
|
||||
}
|
||||
|
||||
function getToolbarDivText(div) {
|
||||
const commands = div.getElementsByClassName("command");
|
||||
if ((commands !== null) && (commands.length > 0)) {
|
||||
const lines = commands[0].innerText.split("\n");
|
||||
let cmd = "";
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
if (lines[i].startsWith("$ ")) {
|
||||
lines[i] = lines[i].substring(2);
|
||||
}
|
||||
|
||||
if (cmd !== "") {
|
||||
cmd = cmd + "\n";
|
||||
}
|
||||
|
||||
cmd += lines[i];
|
||||
}
|
||||
|
||||
return cmd;
|
||||
}
|
||||
|
||||
return div.innerText;
|
||||
}
|
||||
|
||||
function applySyntaxColoring(pre) {
|
||||
const code = pre.firstChild;
|
||||
|
||||
let cl = "";
|
||||
for (let j = 0; j < code.classList.length; j++) {
|
||||
if (code.classList.item(j).startsWith("language-command")) {
|
||||
cl = code.classList.item(j);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (cl !== "") {
|
||||
let firstLineOfOutput = 0;
|
||||
let lines = code.innerText.split("\n");
|
||||
let cmd = "";
|
||||
let escape = false;
|
||||
let escapeUntilEOF = false;
|
||||
let tmp = "";
|
||||
for (let j = 0; j < lines.length; j++) {
|
||||
const line = lines[j];
|
||||
|
||||
if (line.startsWith("$ ")) {
|
||||
if (tmp !== "") {
|
||||
cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
|
||||
}
|
||||
|
||||
tmp = line.slice(2);
|
||||
|
||||
if (line.includes("<<EOF")) {
|
||||
escapeUntilEOF = true;
|
||||
}
|
||||
} else if (escape) {
|
||||
// continuation
|
||||
tmp += "\n" + line;
|
||||
|
||||
if (line.includes("<<EOF")) {
|
||||
escapeUntilEOF = true;
|
||||
}
|
||||
} else if (escapeUntilEOF) {
|
||||
tmp += "\n" + line;
|
||||
if (line === "EOF") {
|
||||
escapeUntilEOF = false;
|
||||
}
|
||||
} else {
|
||||
firstLineOfOutput = j;
|
||||
break;
|
||||
}
|
||||
|
||||
escape = line.endsWith("\\");
|
||||
}
|
||||
|
||||
if (tmp !== "") {
|
||||
cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
|
||||
}
|
||||
|
||||
if (cmd !== "") {
|
||||
cmd = cmd.replace(/@(.*?)@/g, "<a href='https://raw.githubusercontent.com/istio/istio/" + branchName + "/$1'>$1</a>");
|
||||
|
||||
let html = "<div class='command'>" + cmd + "</div>";
|
||||
|
||||
let output = "";
|
||||
if (firstLineOfOutput > 0) {
|
||||
for (let j = firstLineOfOutput; j < lines.length; j++) {
|
||||
if (output !== "") {
|
||||
output += "\n";
|
||||
}
|
||||
output += lines[j];
|
||||
}
|
||||
}
|
||||
|
||||
if (output !== "") {
|
||||
// apply formatting to the output?
|
||||
let prefix = "language-command-output-as-";
|
||||
if (cl.startsWith(prefix)) {
|
||||
let lang = cl.substr(prefix.length);
|
||||
output = Prism.highlight(output, Prism.languages[lang], lang);
|
||||
} else {
|
||||
output = escapeHTML(output);
|
||||
}
|
||||
|
||||
html += "<div class='output'>" + output + "</div>";
|
||||
}
|
||||
|
||||
code.innerHTML = html;
|
||||
code.classList.remove(cl);
|
||||
code.classList.add("command-output");
|
||||
} else {
|
||||
// someone probably forgot to start a block with $, so let's just treat the whole thing as being a `bash` block
|
||||
Prism.highlightElement(code, false);
|
||||
}
|
||||
} else {
|
||||
// this isn't one of our special code blocks, so handle normally
|
||||
Prism.highlightElement(code, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Load the content of any externally-hosted PRE block
|
||||
function loadExternal(pre) {
|
||||
|
||||
function fetchFile(elem, url) {
|
||||
fetch(url)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
elem.firstChild.textContent = data;
|
||||
Prism.highlightElement(elem.firstChild, false);
|
||||
});
|
||||
}
|
||||
|
||||
if (pre.hasAttribute("data-src")) {
|
||||
fetchFile(pre, pre.dataset.src);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('pre').forEach(pre => {
|
||||
attachToolbar(pre);
|
||||
applySyntaxColoring(pre);
|
||||
loadExternal(pre);
|
||||
});
|
||||
|
||||
const clipboard = new ClipboardJS('button.copy', {
|
||||
text: trigger => {
|
||||
return getToolbarDivText(trigger.parentElement);
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('error', () => alert("Sorry, but copying is not supported by your browser"));
|
||||
});
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
"use strict";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
function attachLink(node) {
|
||||
const anchor = document.createElement("a");
|
||||
anchor.className = "header-link";
|
||||
anchor.href = "#" + node.id;
|
||||
anchor.setAttribute("aria-hidden", "true");
|
||||
anchor.innerHTML = "<svg class='icon'><use xlink:href='" + iconFile + "#links'/></svg>";
|
||||
|
||||
node.appendChild(anchor);
|
||||
}
|
||||
|
||||
// Add a link icon next to each header so people can easily get bookmarks to headers
|
||||
function attachLinksToHeaders() {
|
||||
for (let level = 2; level <= 6; level++) {
|
||||
document.querySelectorAll("h" + level.toString()).forEach(hdr => {
|
||||
if (hdr.id !== "") {
|
||||
attachLink(hdr);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add a link icon next to each defined term so people can easily get bookmarks to them in the glossary
|
||||
function attachLinksToDefinedTerms() {
|
||||
document.querySelectorAll('dt').forEach(dt => {
|
||||
if (dt.id !== "") {
|
||||
attachLink(dt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Make it so each link outside of the current domain opens up in a different window
|
||||
function makeOutsideLinksOpenInTabs() {
|
||||
document.querySelectorAll('a').forEach(link => {
|
||||
if (link.hostname && link.hostname !== location.hostname) {
|
||||
link.setAttribute("target", "_blank");
|
||||
link.setAttribute("rel", "noopener");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Create the set of endnotes that expand URLs when printing
|
||||
function createEndnotes() {
|
||||
const notes = document.getElementById("endnotes");
|
||||
if (notes === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// look for anchors in the main section of the doc only (skip headers, footers, tocs, nav bars, etc)
|
||||
const main = document.getElementsByTagName("main")[0];
|
||||
const map = new Map(null);
|
||||
let numLinks = 0;
|
||||
main.querySelectorAll('a').forEach(link => {
|
||||
if (link.pathname === location.pathname) {
|
||||
// skip links pointing to the current page
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.pathname.endsWith("/") && link.hash !== "") {
|
||||
// skip links pointing to the current page
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.classList.contains("btn")) {
|
||||
// skip button links
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.classList.contains("not-for-endnotes")) {
|
||||
// skip links that don't want to be included
|
||||
return;
|
||||
}
|
||||
|
||||
let count = map.get(link.href);
|
||||
if (count === undefined) {
|
||||
count = map.size + 1;
|
||||
map.set(link.href, count);
|
||||
|
||||
// add a list entry for the link
|
||||
const li = document.createElement("li");
|
||||
li.innerText = link.href;
|
||||
notes.appendChild(li);
|
||||
}
|
||||
|
||||
// add the superscript reference
|
||||
link.insertAdjacentHTML("afterend", "<sup class='endnote-ref' aria-hidden='true'>" + count + "</sup>");
|
||||
numLinks++;
|
||||
});
|
||||
|
||||
if (numLinks > 0) {
|
||||
// only show the section if there are links
|
||||
document.getElementById("endnotes-container").classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
attachLinksToHeaders();
|
||||
attachLinksToDefinedTerms();
|
||||
makeOutsideLinksOpenInTabs();
|
||||
createEndnotes();
|
||||
});
|
||||
521
src/js/misc.js
521
src/js/misc.js
|
|
@ -1,369 +1,55 @@
|
|||
"use strict";
|
||||
|
||||
// initialized after the DOM has been loaded by getDOMTopology
|
||||
let scrollToTopButton;
|
||||
let tocLinks;
|
||||
let tocHeadings;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// post-processing we do once the DOM has loaded
|
||||
function handleDOMLoaded() {
|
||||
// Expand spans that define terms into appropriate popup markup
|
||||
function expandPopovers() {
|
||||
document.querySelectorAll('.term').forEach(term => {
|
||||
const title = document.createElement('div');
|
||||
title.className = 'title';
|
||||
title.innerText = term.dataset.title;
|
||||
|
||||
// Apply a bunch of systematic modification to the DOM of all pages.
|
||||
// Ideally, this stuff could be handled offline as part of preparing the
|
||||
// HTML, but alas our current toolchain won't allow that in a clean/simple
|
||||
// way.
|
||||
function patchDOM() {
|
||||
const body = document.createElement('div');
|
||||
body.className = 'body';
|
||||
body.innerHTML = term.dataset.body;
|
||||
|
||||
function attachLink(node) {
|
||||
const anchor = document.createElement("a");
|
||||
anchor.className = "header-link";
|
||||
anchor.href = "#" + node.id;
|
||||
anchor.setAttribute("aria-hidden", "true");
|
||||
anchor.innerHTML = "<svg class='icon'><use xlink:href='" + iconFile + "#links'/></svg>";
|
||||
const arrow = document.createElement('div');
|
||||
arrow.className = 'arrow';
|
||||
arrow.setAttribute('x-arrow', '');
|
||||
|
||||
node.appendChild(anchor);
|
||||
}
|
||||
|
||||
// Add a link icon next to each header so people can easily get bookmarks to headers
|
||||
function attachLinksToHeaders() {
|
||||
for (let level = 2; level <= 6; level++) {
|
||||
document.querySelectorAll("h" + level.toString()).forEach(hdr => {
|
||||
if (hdr.id !== "") {
|
||||
attachLink(hdr);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add a link icon next to each defined term so people can easily get bookmarks to them in the glossary
|
||||
function attachLinksToDefinedTerms() {
|
||||
document.querySelectorAll('dt').forEach(dt => {
|
||||
if (dt.id !== "") {
|
||||
attachLink(dt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Make it so each link outside of the current domain opens up in a different window
|
||||
function makeOutsideLinksOpenInTabs() {
|
||||
document.querySelectorAll('a').forEach(link => {
|
||||
if (link.hostname && link.hostname !== location.hostname) {
|
||||
link.setAttribute("target", "_blank");
|
||||
link.setAttribute("rel", "noopener");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createEndnotes() {
|
||||
const notes = document.getElementById("endnotes");
|
||||
if (notes === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// look for anchors in the main section of the doc only (skip headers, footers, tocs, nav bars, etc)
|
||||
const main = document.getElementsByTagName("main")[0];
|
||||
const map = new Map(null);
|
||||
let num_links = 0;
|
||||
main.querySelectorAll('a').forEach(link => {
|
||||
if (link.pathname === location.pathname) {
|
||||
// skip links on the current page
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.pathname.endsWith("/") && link.hash !== "") {
|
||||
// skip links on the current page
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.classList.contains("btn")) {
|
||||
// skip button links
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.classList.contains("not-for-endnotes")) {
|
||||
// skip links that don't want to be included
|
||||
return;
|
||||
}
|
||||
|
||||
let count = map.get(link.href);
|
||||
if (count === undefined) {
|
||||
count = map.size + 1;
|
||||
map.set(link.href, count);
|
||||
|
||||
// add a list entry for the link
|
||||
const li = document.createElement("li");
|
||||
li.innerText = link.href;
|
||||
notes.appendChild(li);
|
||||
}
|
||||
|
||||
// add the superscript reference
|
||||
link.insertAdjacentHTML("afterend", "<sup class='endnote-ref'>" + count + "</sup>");
|
||||
num_links++;
|
||||
const div = document.createElement('div');
|
||||
div.className = 'popover';
|
||||
div.appendChild(title);
|
||||
div.appendChild(body);
|
||||
div.appendChild(arrow);
|
||||
div.setAttribute("aria-hidden", "true");
|
||||
div.addEventListener('click', e => {
|
||||
e.cancelBubble = true;
|
||||
});
|
||||
|
||||
if (num_links > 0) {
|
||||
// only show the section if there are links
|
||||
document.getElementById("endnotes-container").classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
function fixupPreBlocks() {
|
||||
|
||||
// Add a toolbar to all PRE blocks
|
||||
function attachToolbar(pre) {
|
||||
const copyButton = document.createElement("BUTTON");
|
||||
copyButton.title = buttonCopy;
|
||||
copyButton.className = "copy";
|
||||
copyButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#copy'/></svg>";
|
||||
copyButton.setAttribute("aria-label", "Copy to clipboard");
|
||||
copyButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
|
||||
copyButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
|
||||
|
||||
const downloadButton = document.createElement("BUTTON");
|
||||
downloadButton.title = buttonDownload;
|
||||
downloadButton.className = "download";
|
||||
downloadButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#download'/></svg>";
|
||||
downloadButton.setAttribute("aria-label", downloadButton.title);
|
||||
downloadButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
|
||||
downloadButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
|
||||
|
||||
downloadButton.addEventListener("click", e => {
|
||||
const div = e.currentTarget.parentElement;
|
||||
const codes = div.getElementsByTagName("CODE");
|
||||
if ((codes !== null) && (codes.length > 0)) {
|
||||
const code = codes[0];
|
||||
const text = getToolbarDivText(div);
|
||||
let downloadas = code.getAttribute("data-downloadas");
|
||||
if (downloadas === null || downloadas === "") {
|
||||
let lang = "";
|
||||
for (let j = 0; j < code.classList.length; j++) {
|
||||
if (code.classList.item(j).startsWith("language-")) {
|
||||
lang = code.classList.item(j).substr(9);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (lang.startsWith("command")) {
|
||||
lang = "bash";
|
||||
} else if (lang === "markdown") {
|
||||
lang = "md";
|
||||
} else if (lang === "") {
|
||||
lang = "txt";
|
||||
}
|
||||
|
||||
downloadas = docTitle + "." + lang;
|
||||
}
|
||||
saveFile(downloadas, text);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const printButton = document.createElement("BUTTON");
|
||||
printButton.title = buttonPrint;
|
||||
printButton.className = "print";
|
||||
printButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#printer'/></svg>";
|
||||
printButton.setAttribute("aria-label", printButton.title);
|
||||
printButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
|
||||
printButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
|
||||
|
||||
printButton.addEventListener("click", e => {
|
||||
const div = e.currentTarget.parentElement;
|
||||
const text = getToolbarDivText(div);
|
||||
printText(text);
|
||||
return true;
|
||||
});
|
||||
|
||||
// wrap the PRE block in a DIV so we have a place to attach the toolbar buttons
|
||||
const div = document.createElement("DIV");
|
||||
div.className = "toolbar";
|
||||
pre.parentElement.insertBefore(div, pre);
|
||||
div.appendChild(pre);
|
||||
div.appendChild(printButton);
|
||||
div.appendChild(downloadButton);
|
||||
div.appendChild(copyButton);
|
||||
|
||||
pre.addEventListener("mouseenter", e => {
|
||||
e.currentTarget.nextSibling.classList.add("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.classList.add("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.nextSibling.classList.add("toolbar-show");
|
||||
});
|
||||
|
||||
pre.addEventListener("mouseleave", e => {
|
||||
e.currentTarget.nextSibling.classList.remove("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.classList.remove("toolbar-show");
|
||||
e.currentTarget.nextSibling.nextSibling.nextSibling.classList.remove("toolbar-show");
|
||||
});
|
||||
}
|
||||
|
||||
function getToolbarDivText(div) {
|
||||
const commands = div.getElementsByClassName("command");
|
||||
if ((commands !== null) && (commands.length > 0)) {
|
||||
const lines = commands[0].innerText.split("\n");
|
||||
let cmd = "";
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
if (lines[i].startsWith("$ ")) {
|
||||
lines[i] = lines[i].substring(2);
|
||||
}
|
||||
|
||||
if (cmd !== "") {
|
||||
cmd = cmd + "\n";
|
||||
}
|
||||
|
||||
cmd += lines[i];
|
||||
}
|
||||
|
||||
return cmd;
|
||||
}
|
||||
|
||||
return div.innerText;
|
||||
}
|
||||
|
||||
function applySyntaxColoring(pre) {
|
||||
const code = pre.firstChild;
|
||||
|
||||
let cl = "";
|
||||
for (let j = 0; j < code.classList.length; j++) {
|
||||
if (code.classList.item(j).startsWith("language-command")) {
|
||||
cl = code.classList.item(j);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (cl !== "") {
|
||||
let firstLineOfOutput = 0;
|
||||
let lines = code.innerText.split("\n");
|
||||
let cmd = "";
|
||||
let escape = false;
|
||||
let escapeUntilEOF = false;
|
||||
let tmp = "";
|
||||
for (let j = 0; j < lines.length; j++) {
|
||||
const line = lines[j];
|
||||
|
||||
if (line.startsWith("$ ")) {
|
||||
if (tmp !== "") {
|
||||
cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
|
||||
}
|
||||
|
||||
tmp = line.slice(2);
|
||||
|
||||
if (line.includes("<<EOF")) {
|
||||
escapeUntilEOF = true;
|
||||
}
|
||||
} else if (escape) {
|
||||
// continuation
|
||||
tmp += "\n" + line;
|
||||
|
||||
if (line.includes("<<EOF")) {
|
||||
escapeUntilEOF = true;
|
||||
}
|
||||
} else if (escapeUntilEOF) {
|
||||
tmp += "\n" + line;
|
||||
if (line === "EOF") {
|
||||
escapeUntilEOF = false;
|
||||
}
|
||||
} else {
|
||||
firstLineOfOutput = j;
|
||||
break;
|
||||
}
|
||||
|
||||
escape = line.endsWith("\\");
|
||||
}
|
||||
|
||||
if (tmp !== "") {
|
||||
cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
|
||||
}
|
||||
|
||||
if (cmd !== "") {
|
||||
cmd = cmd.replace(/@(.*?)@/g, "<a href='https://raw.githubusercontent.com/istio/istio/" + branchName + "/$1'>$1</a>");
|
||||
|
||||
let html = "<div class='command'>" + cmd + "</div>";
|
||||
|
||||
let output = "";
|
||||
if (firstLineOfOutput > 0) {
|
||||
for (let j = firstLineOfOutput; j < lines.length; j++) {
|
||||
if (output !== "") {
|
||||
output += "\n";
|
||||
}
|
||||
output += lines[j];
|
||||
}
|
||||
}
|
||||
|
||||
if (output !== "") {
|
||||
// apply formatting to the output?
|
||||
let prefix = "language-command-output-as-";
|
||||
if (cl.startsWith(prefix)) {
|
||||
let lang = cl.substr(prefix.length);
|
||||
output = Prism.highlight(output, Prism.languages[lang], lang);
|
||||
} else {
|
||||
output = escapeHTML(output);
|
||||
}
|
||||
|
||||
html += "<div class='output'>" + output + "</div>";
|
||||
}
|
||||
|
||||
code.innerHTML = html;
|
||||
code.classList.remove(cl);
|
||||
code.classList.add("command-output");
|
||||
} else {
|
||||
// someone probably forgot to start a block with $, so let's just treat the whole thing as being a `bash` block
|
||||
Prism.highlightElement(code, false);
|
||||
}
|
||||
} else {
|
||||
// this isn't one of our special code blocks, so handle normally
|
||||
Prism.highlightElement(code, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Load the content of any externally-hosted PRE block
|
||||
function loadExternal(pre) {
|
||||
|
||||
function fetchFile(elem, url) {
|
||||
fetch(url)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
elem.firstChild.textContent = data;
|
||||
Prism.highlightElement(elem.firstChild, false);
|
||||
});
|
||||
}
|
||||
|
||||
if (pre.hasAttribute("data-src")) {
|
||||
fetchFile(pre, pre.getAttribute("data-src"))
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('pre').forEach(pre => {
|
||||
attachToolbar(pre);
|
||||
applySyntaxColoring(pre);
|
||||
loadExternal(pre);
|
||||
term.parentNode.insertBefore(div, term.nextSibling);
|
||||
term.removeAttribute('data-title');
|
||||
term.removeAttribute('data-body');
|
||||
term.addEventListener('click', e => {
|
||||
e.cancelBubble = true;
|
||||
toggleOverlay(div);
|
||||
attachPopper(term, div);
|
||||
});
|
||||
|
||||
const clipboard = new ClipboardJS('button.copy', {
|
||||
text: function (trigger) {
|
||||
return getToolbarDivText(trigger.parentElement);
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('error', () => alert("Sorry, but copying is not supported by your browser"));
|
||||
}
|
||||
|
||||
fixupPreBlocks();
|
||||
attachLinksToHeaders();
|
||||
attachLinksToDefinedTerms();
|
||||
makeOutsideLinksOpenInTabs();
|
||||
createEndnotes();
|
||||
});
|
||||
}
|
||||
|
||||
// Select the right tabs in all tabsets, based on any saved cookies
|
||||
function selectTabs() {
|
||||
document.querySelectorAll('a[data-toggle="tab"]').forEach(tab => {
|
||||
const cookie_name = tab.getAttribute("data-cookie-name");
|
||||
const cookie_value = tab.getAttribute("data-cookie-value");
|
||||
const cookieName = tab.dataset.cookieName;
|
||||
const cookieValue = tab.dataset.cookieValue;
|
||||
|
||||
if (cookie_name === null || cookie_name === "") {
|
||||
if (cookieName === null || cookieName === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
const v = readCookie(cookie_name);
|
||||
if (cookie_value === v) {
|
||||
const v = readCookie(cookieName);
|
||||
if (cookieValue === v) {
|
||||
// there's gotta be a way to call the tab() function directly since I already have the
|
||||
// requisite object in hand. Alas, I can't figure it out. So query the document to find
|
||||
// the same object again, and call the tab function on the result.
|
||||
|
|
@ -372,34 +58,20 @@ function handleDOMLoaded() {
|
|||
});
|
||||
}
|
||||
|
||||
// discover a few DOM elements up front so we don't need to do it a zillion times for the life of the page
|
||||
function getDOMTopology() {
|
||||
scrollToTopButton = document.getElementById("scroll-to-top");
|
||||
|
||||
const toc = document.getElementById("toc");
|
||||
if (toc !== null) {
|
||||
tocLinks = toc.getElementsByTagName("A");
|
||||
tocHeadings = new Array(tocLinks.length);
|
||||
|
||||
for (let i = 0; i < tocLinks.length; i++) {
|
||||
tocHeadings[i] = document.getElementById(tocLinks[i].hash.substring(1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Attach the event handlers to support the search box
|
||||
function attachSearchHandlers() {
|
||||
// Show the navbar links, hide the search box
|
||||
function showNavBarLinks() {
|
||||
document.getElementById('search_form').classList.remove('active');
|
||||
document.getElementById('search-form').classList.remove('active');
|
||||
document.getElementById('navbar-links').classList.add('active');
|
||||
document.getElementById('search_textbox').value = '';
|
||||
document.getElementById('search-textbox').value = '';
|
||||
}
|
||||
|
||||
// Show the navbar search box, hide the links
|
||||
function showSearchBox() {
|
||||
document.getElementById('search_form').classList.add('active');
|
||||
document.getElementById('search-form').classList.add('active');
|
||||
document.getElementById('navbar-links').classList.remove('active');
|
||||
document.getElementById('search_textbox').focus();
|
||||
document.getElementById('search-textbox').focus();
|
||||
}
|
||||
|
||||
// Hide the search box when the user hits the ESC key
|
||||
|
|
@ -410,28 +82,29 @@ function handleDOMLoaded() {
|
|||
});
|
||||
|
||||
// Show the search box
|
||||
document.getElementById('search_show').addEventListener("click", e => {
|
||||
document.getElementById('search-show').addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
showSearchBox();
|
||||
});
|
||||
|
||||
// Hide the search box
|
||||
document.getElementById('search_close').addEventListener("click", e => {
|
||||
document.getElementById('search-close').addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
showNavBarLinks();
|
||||
});
|
||||
|
||||
// When the user submits the search form, initiate a search
|
||||
document.getElementById('search_form').addEventListener("submit", e => {
|
||||
document.getElementById('search-form').addEventListener("submit", e => {
|
||||
e.preventDefault();
|
||||
const textbox = document.getElementById('search_textbox');
|
||||
const search_page_url = document.getElementById('search_page_url');
|
||||
const url = search_page_url.value + '?q=' + textbox.value;
|
||||
const textbox = document.getElementById('search-textbox');
|
||||
const searchPageUrl = document.getElementById('search-page-url');
|
||||
const url = searchPageUrl.value + '?q=' + textbox.value;
|
||||
showNavBarLinks();
|
||||
window.location.assign(url);
|
||||
});
|
||||
}
|
||||
|
||||
// Attach the event handlers to support the sidebar
|
||||
function attachSidebarHandlers() {
|
||||
// toggle subtree in sidebar
|
||||
document.querySelectorAll('.tree-toggle').forEach(o => {
|
||||
|
|
@ -456,6 +129,7 @@ function handleDOMLoaded() {
|
|||
|
||||
let recurse = false;
|
||||
|
||||
// Attach the event handlers to support tab sets
|
||||
function attachTabHandlers() {
|
||||
// Save a cookie when a user selects a tab in a tabset
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', e => {
|
||||
|
|
@ -464,18 +138,18 @@ function handleDOMLoaded() {
|
|||
return;
|
||||
}
|
||||
|
||||
let tab = e.target;
|
||||
let cookie_name = tab.getAttribute("data-cookie-name");
|
||||
let cookie_value = tab.getAttribute("data-cookie-value");
|
||||
if (cookie_name === null || cookie_name === "") {
|
||||
const tab = e.target;
|
||||
const cookieName = tab.dataset.cookieName;
|
||||
const cookieValue = tab.dataset.cookieValue;
|
||||
if (cookieName === null || cookieName === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
createCookie(cookie_name, cookie_value);
|
||||
createCookie(cookieName, cookieValue);
|
||||
|
||||
document.querySelectorAll('a[data-toggle="tab"]').forEach(tab => {
|
||||
if (cookie_name === tab.getAttribute("data-cookie-name")) {
|
||||
if (cookie_value === tab.getAttribute("data-cookie-value")) {
|
||||
if (cookieName === tab.dataset.cookieName) {
|
||||
if (cookieValue === tab.dataset.cookieValue) {
|
||||
// there's gotta be a way to call the tab() function directly since I already have the
|
||||
// DOM object in hand. Alas, I can't figure it out. So query and call the tab function on the result.
|
||||
recurse = true;
|
||||
|
|
@ -487,83 +161,20 @@ function handleDOMLoaded() {
|
|||
});
|
||||
}
|
||||
|
||||
function enablePopovers() {
|
||||
// activate the popovers
|
||||
$("[data-toggle=popover]").popover();
|
||||
// Attach the event handlers to support menus
|
||||
function attachMenuHandlers() {
|
||||
document.querySelectorAll('.menu').forEach(menu => {
|
||||
menu.querySelector(".menu-trigger").addEventListener("click", e => {
|
||||
e.cancelBubble = true;
|
||||
toggleOverlay(menu);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
patchDOM();
|
||||
expandPopovers();
|
||||
selectTabs();
|
||||
getDOMTopology();
|
||||
attachSearchHandlers();
|
||||
attachSidebarHandlers();
|
||||
attachTabHandlers();
|
||||
enablePopovers();
|
||||
loadActiveStyleSheet();
|
||||
|
||||
// one forced call here to make sure everything looks right
|
||||
handlePageScroll();
|
||||
}
|
||||
|
||||
// What we do when the user scrolls the page
|
||||
function handlePageScroll() {
|
||||
// Based on the scroll position, make the "scroll to top" button visible or not
|
||||
function controlScrollToTopButton() {
|
||||
if (scrollToTopButton) {
|
||||
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
|
||||
scrollToTopButton.classList.add("show");
|
||||
} else {
|
||||
scrollToTopButton.classList.remove("show");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Based on the scroll position, activate a TOC entry
|
||||
function controlTOCActivation() {
|
||||
if (tocLinks) {
|
||||
let closestHeadingBelowTop = -1;
|
||||
let closestHeadingBelowTopPos = 1000000;
|
||||
let closestHeadingAboveTop = -1;
|
||||
let closestHeadingAboveTopPos = -1000000;
|
||||
|
||||
for (let i = 0; i < tocLinks.length; i++) {
|
||||
const heading = tocHeadings[i];
|
||||
if (heading === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const cbr = heading.getBoundingClientRect();
|
||||
|
||||
if (cbr.width || cbr.height) {
|
||||
if ((cbr.top >= 0) && (cbr.top < window.innerHeight)) {
|
||||
// heading is on the screen
|
||||
if (cbr.top < closestHeadingBelowTopPos) {
|
||||
closestHeadingBelowTop = i;
|
||||
closestHeadingBelowTopPos = cbr.top;
|
||||
}
|
||||
} else if (cbr.top < 0) {
|
||||
// heading is above the screen
|
||||
if (cbr.top > closestHeadingAboveTopPos) {
|
||||
closestHeadingAboveTop = i;
|
||||
closestHeadingAboveTopPos = cbr.top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tocLinks[i].classList.remove("current");
|
||||
}
|
||||
|
||||
if (closestHeadingBelowTop >= 0) {
|
||||
tocLinks[closestHeadingBelowTop].classList.add("current");
|
||||
} else if (closestHeadingAboveTop >= 0) {
|
||||
tocLinks[closestHeadingAboveTop].classList.add("current");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
controlScrollToTopButton();
|
||||
controlTOCActivation();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", handleDOMLoaded);
|
||||
window.addEventListener("scroll", handlePageScroll);
|
||||
attachMenuHandlers();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
"use strict";
|
||||
|
||||
// tracks any overlay displayed on the page (e.g. menu or popover)
|
||||
let overlay = null;
|
||||
let popper = null;
|
||||
|
||||
// show/hide the specific overlay
|
||||
function toggleOverlay(element) {
|
||||
if (overlay === element) {
|
||||
closeActiveOverlay();
|
||||
} else {
|
||||
if (overlay != null) {
|
||||
closeActiveOverlay();
|
||||
}
|
||||
element.classList.add('show');
|
||||
overlay = element;
|
||||
}
|
||||
}
|
||||
|
||||
// explicitly close the active overlay
|
||||
function closeActiveOverlay() {
|
||||
if (overlay !== null) {
|
||||
overlay.classList.remove('show');
|
||||
overlay = null;
|
||||
|
||||
if (popper !== null) {
|
||||
popper.destroy();
|
||||
popper = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function attachPopper(anchor, element) {
|
||||
if (popper !== null) {
|
||||
popper.destroy();
|
||||
}
|
||||
|
||||
popper = new Popper(anchor, element, {
|
||||
placement: 'auto-start',
|
||||
modifiers: {
|
||||
preventOverflow: {
|
||||
enabled: true,
|
||||
},
|
||||
flip: {
|
||||
enabled: true,
|
||||
behavior: ['left', 'right', 'top', 'bottom']
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("click", closeActiveOverlay);
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
"use strict";
|
||||
|
||||
// initialized after the DOM has been loaded
|
||||
let scrollToTopButton;
|
||||
let tocLinks;
|
||||
let tocHeadings;
|
||||
|
||||
// what we do when the user scrolls the page
|
||||
window.addEventListener("scroll", handlePageScroll);
|
||||
|
||||
// discover a few DOM elements up front so we don't need to do it a zillion times for the life of the page
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
scrollToTopButton = document.getElementById('scroll-to-top');
|
||||
|
||||
const toc = document.getElementById('toc');
|
||||
if (toc !== null) {
|
||||
tocLinks = toc.getElementsByTagName('a');
|
||||
tocHeadings = new Array(tocLinks.length);
|
||||
|
||||
for (let i = 0; i < tocLinks.length; i++) {
|
||||
tocHeadings[i] = document.getElementById(tocLinks[i].hash.substring(1));
|
||||
}
|
||||
}
|
||||
|
||||
// make sure things look right if we load a page to a specific anchor position
|
||||
handlePageScroll();
|
||||
});
|
||||
|
||||
function handlePageScroll() {
|
||||
// Based on the scroll position, make the "scroll to top" button visible or not
|
||||
function controlScrollToTopButton() {
|
||||
if (scrollToTopButton) {
|
||||
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
|
||||
scrollToTopButton.classList.add('show');
|
||||
} else {
|
||||
scrollToTopButton.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Based on the scroll position, activate a TOC entry
|
||||
function controlTOCActivation() {
|
||||
if (tocLinks) {
|
||||
let closestHeadingBelowTop = -1;
|
||||
let closestHeadingBelowTopPos = 1000000;
|
||||
let closestHeadingAboveTop = -1;
|
||||
let closestHeadingAboveTopPos = -1000000;
|
||||
|
||||
for (let i = 0; i < tocLinks.length; i++) {
|
||||
const heading = tocHeadings[i];
|
||||
if (heading === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const cbr = heading.getBoundingClientRect();
|
||||
|
||||
if (cbr.width || cbr.height) {
|
||||
if ((cbr.top >= 0) && (cbr.top < window.innerHeight)) {
|
||||
// heading is on the screen
|
||||
if (cbr.top < closestHeadingBelowTopPos) {
|
||||
closestHeadingBelowTop = i;
|
||||
closestHeadingBelowTopPos = cbr.top;
|
||||
}
|
||||
} else if (cbr.top < 0) {
|
||||
// heading is above the screen
|
||||
if (cbr.top > closestHeadingAboveTopPos) {
|
||||
closestHeadingAboveTop = i;
|
||||
closestHeadingAboveTopPos = cbr.top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tocLinks[i].classList.remove("current");
|
||||
}
|
||||
|
||||
if (closestHeadingBelowTop >= 0) {
|
||||
tocLinks[closestHeadingBelowTop].classList.add("current");
|
||||
} else if (closestHeadingAboveTop >= 0) {
|
||||
tocLinks[closestHeadingAboveTop].classList.add("current");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
controlScrollToTopButton();
|
||||
controlTOCActivation();
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
"use strict";
function applyStyleSheet(title) {
const links = document.getElementsByTagName('link');
for (let i = 0; i < links.length; i++) {
const link = links[i];
if (link.getAttribute("rel").includes("stylesheet") && link.getAttribute("title")) {
// This needs to go to the disabled state first, and then adjusted below. Not sure why, but
// not doing this first leads to states where no style sheet is loaded at all.
link.disabled = true;
if (link.getAttribute("title") === title) {
link.disabled = false;
}
}
}
// set the active theme menu item
let item = document.getElementById("light-theme-item");
if (item !== null) {
if (title === "Light Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
item = document.getElementById("dark-theme-item");
if (item !== null) {
if (title === "Dark Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
}
function createCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) === 0) {
let result = c.substring(nameEQ.length, c.length);
// convert legacy cookie values
if (result === "light") {
result = "Light Theme";
} else if (result === "dark") {
result = "Dark Theme";
}
return result;
}
}
return null;
}
function setActiveStyleSheet(title) {
applyStyleSheet(title);
createCookie("style", title);
}
function loadActiveStyleSheet() {
let cookie = readCookie("style");
if (cookie !== null) {
applyStyleSheet(cookie);
}
}
loadActiveStyleSheet();
|
||||
"use strict";
function applyStyleSheet(title) {
const links = document.getElementsByTagName('link');
for (let i = 0; i < links.length; i++) {
const link = links[i];
if (link.getAttribute("rel").includes("stylesheet") && link.getAttribute("title")) {
// This needs to go to the disabled state first, and then adjusted below. Not sure why, but
// not doing this first leads to states where no style sheet is loaded at all.
link.disabled = true;
if (link.getAttribute("title") === title) {
link.disabled = false;
}
}
}
// set the active theme menu item
let item = document.getElementById("light-theme-item");
if (item !== null) {
if (title === "Light Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
item = document.getElementById("dark-theme-item");
if (item !== null) {
if (title === "Dark Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
}
function createCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) === 0) {
let result = c.substring(nameEQ.length, c.length);
// convert legacy cookie values
if (result === "light") {
result = "Light Theme";
} else if (result === "dark") {
result = "Dark Theme";
}
return result;
}
}
return null;
}
function setActiveStyleSheet(title) {
applyStyleSheet(title);
createCookie("style", title);
}
function loadActiveStyleSheet() {
let cookie = readCookie("style");
if (cookie !== null) {
applyStyleSheet(cookie);
}
}
loadActiveStyleSheet();
document.addEventListener('DOMContentLoaded', () => {
loadActiveStyleSheet();
});
|
||||
|
|
@ -15,10 +15,11 @@
|
|||
@import "misc/landing";
|
||||
@import "misc/logo-gallery";
|
||||
@import "misc/media-resources";
|
||||
@import "misc/menu";
|
||||
@import "misc/notfound";
|
||||
@import "misc/pagenav";
|
||||
@import "misc/partner-component";
|
||||
@import "misc/popovers";
|
||||
@import "misc/popover";
|
||||
@import "misc/primary";
|
||||
@import "misc/promotion";
|
||||
@import "misc/relnote-links";
|
||||
|
|
|
|||
|
|
@ -221,27 +221,27 @@ div.toolbar {
|
|||
border: 0;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
z-index: 5;
|
||||
z-index: $toolbar-button-z;
|
||||
transition: opacity .4s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
button.toolbar-show {
|
||||
transition: opacity 1.1s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
&.toolbar-show {
|
||||
transition: opacity 1.1s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
button.copy {
|
||||
right: 2.2rem;
|
||||
width: 3rem;
|
||||
}
|
||||
&.copy {
|
||||
right: 2.2rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
button.download {
|
||||
right: 5.5rem;
|
||||
}
|
||||
&.download {
|
||||
right: 5.5rem;
|
||||
}
|
||||
|
||||
button.print {
|
||||
right: 7.4rem;
|
||||
&.print {
|
||||
right: 7.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -438,7 +438,7 @@ blockquote {
|
|||
position: fixed;
|
||||
top: $headerHeight;
|
||||
right: 10px;
|
||||
z-index: 99;
|
||||
z-index: $floating-button-z;
|
||||
outline: none;
|
||||
background-color: rgba($backgroundColor, .7);
|
||||
color: $floatingButtonColor;
|
||||
|
|
|
|||
|
|
@ -18,3 +18,11 @@ $bp-xl: 1200px;
|
|||
// Embellishments
|
||||
$headerHeight: 3.7rem;
|
||||
$footerHeight: 7rem;
|
||||
|
||||
// Z-index of different layers
|
||||
$promotion-z: 200;
|
||||
$header-z: 100;
|
||||
$overlay-z: 75;
|
||||
$sidebar-z: 50;
|
||||
$floating-button-z: 5;
|
||||
$toolbar-button-z: 1;
|
||||
|
|
|
|||
|
|
@ -97,9 +97,8 @@ footer {
|
|||
color: $textBrandColor;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 200px;
|
||||
left: -78px;
|
||||
left: -82px;
|
||||
top: -23px;
|
||||
font-size: 75%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,43 +70,6 @@ header {
|
|||
stroke: $textBrandHighlightColor;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding: 0;
|
||||
background-color: $backgroundColor;
|
||||
border-color: $dropdownBorderColor;
|
||||
|
||||
a {
|
||||
font-weight: $linkWeight;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item.active {
|
||||
font-weight: 500;
|
||||
background-color: transparent;
|
||||
background-image: $dropdownCheck;
|
||||
background-repeat: no-repeat;
|
||||
background-position: .4rem .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background-image: $dropdownHoverCheck
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: $textColor;
|
||||
|
||||
&:hover {
|
||||
color: $textBrandColor;
|
||||
background-color: $mainBrandColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
|
|
@ -139,20 +102,20 @@ header {
|
|||
position: static;
|
||||
}
|
||||
|
||||
#search_form {
|
||||
#search-form {
|
||||
position: static;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#search_close {
|
||||
#search-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search_show {
|
||||
#search-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search_textbox {
|
||||
#search-textbox {
|
||||
margin: 4px 0 5px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -169,18 +132,18 @@ header {
|
|||
transition: right 0.5s;
|
||||
}
|
||||
|
||||
#search_form {
|
||||
#search-form {
|
||||
position: absolute;
|
||||
right: -700px;
|
||||
transition: right 0.5s;
|
||||
}
|
||||
|
||||
#search_form.active {
|
||||
#search-form.active {
|
||||
right: 1rem;
|
||||
transition: right 0.5s;
|
||||
}
|
||||
|
||||
#search_close {
|
||||
#search-close {
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: $textBrandColor;
|
||||
|
|
@ -192,11 +155,11 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
#search_show {
|
||||
#search-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#search_textbox {
|
||||
#search-textbox {
|
||||
width: calc(1rem * 22);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
.menu {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.menu-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 160px;
|
||||
z-index: $overlay-z;
|
||||
padding: 0;
|
||||
background-color: $backgroundColor;
|
||||
border: 1px solid $dropdownBorderColor;
|
||||
border-radius: 4px;
|
||||
margin-top: .125rem;
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-weight: $linkWeight;
|
||||
color: $textColor;
|
||||
padding: .25rem 1.5rem;
|
||||
|
||||
&:hover {
|
||||
color: $textBrandColor;
|
||||
background-color: $mainBrandColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
background-color: transparent;
|
||||
background-image: $dropdownCheck;
|
||||
background-repeat: no-repeat;
|
||||
background-position: .4rem .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background-image: $dropdownHoverCheck;
|
||||
background-color: $mainBrandColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
h6 {
|
||||
padding: .5rem 1.5rem;
|
||||
margin-bottom: 0;
|
||||
font-size: .875rem;
|
||||
color: #6c757d;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 0;
|
||||
margin: .5rem 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
.menu-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
.popover {
|
||||
display: none;
|
||||
z-index: $overlay-z;
|
||||
color: $popoverTextColor;
|
||||
background-color: $popoverBackgroundColor;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $popoverBorderColor;
|
||||
box-shadow: 3px 3px 8px $popoverShadowColor, -3px -3px 8px $popoverShadowColor;
|
||||
font-family: inherit;
|
||||
|
||||
max-width: 276px;
|
||||
@media (min-width: $bp-md) {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-xl) {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
color: $popoverHeaderTextColor;
|
||||
background-color: $popoverHeaderBackgroundColor;
|
||||
font-size: 110%;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
$arrow-width: 5px;
|
||||
$arrow-height: 5px;
|
||||
|
||||
.arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: $arrow-height;
|
||||
|
||||
.arrow {
|
||||
border-width: $arrow-height $arrow-width 0 $arrow-height;
|
||||
border-top-color: $popoverBackgroundColor;
|
||||
bottom: -$arrow-height;
|
||||
margin: 0 $arrow-width;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: $arrow-height;
|
||||
|
||||
.arrow {
|
||||
border-width: 0 $arrow-width $arrow-height $arrow-width;
|
||||
border-bottom-color: $popoverBackgroundColor;
|
||||
top: -$arrow-height;
|
||||
margin: 0 $arrow-width;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: $arrow-width;
|
||||
|
||||
.arrow {
|
||||
border-width: $arrow-height $arrow-width $arrow-height 0;
|
||||
border-right-color: $popoverBackgroundColor;
|
||||
left: -$arrow-width;
|
||||
margin: $arrow-height 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: $arrow-width;
|
||||
|
||||
.arrow {
|
||||
border-width: $arrow-height 0 $arrow-width $arrow-height;
|
||||
border-left-color: $popoverBackgroundColor;
|
||||
right: -$arrow-width;
|
||||
margin: $arrow-height 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.term {
|
||||
@media screen {
|
||||
border-bottom: dashed 1px;
|
||||
cursor: help;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
a.term {
|
||||
border-bottom: dashed 1px;
|
||||
cursor: help;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
color: $textColor;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
}
|
||||
|
||||
.popover {
|
||||
background-color: $popoverHeaderBackgroundColor;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $popoverBorderColor;
|
||||
box-shadow: 3px 3px 8px $popoverShadowColor, -3px -3px 8px $popoverShadowColor;
|
||||
font-family: inherit;
|
||||
|
||||
max-width: 276px;
|
||||
@media (min-width: $bp-md) {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-xl) {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-style: normal;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: none;
|
||||
|
||||
@media (min-width: $bp-lg) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-right-color: $popoverBackgroundColor;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-right-color: $popoverBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
color: $popoverHeaderTextColor;
|
||||
background-color: $popoverHeaderBackgroundColor;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: $popoverTextColor;
|
||||
background-color: $popoverBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
width: 260px;
|
||||
overflow: hidden;
|
||||
height: 46px;
|
||||
z-index: 9011;
|
||||
z-index: $promotion-z;
|
||||
color: white;
|
||||
background: forestgreen;
|
||||
transform: rotate(-45deg);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
position: absolute;
|
||||
width: 80%;
|
||||
transition: all .4s ease;
|
||||
z-index: 42;
|
||||
left: -$bp-md;
|
||||
top: $headerHeight;
|
||||
}
|
||||
|
|
@ -32,7 +31,6 @@
|
|||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: $headerHeight;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.directory {
|
||||
|
|
@ -145,7 +143,7 @@
|
|||
position: absolute;
|
||||
top: $headerHeight;
|
||||
right: 10px;
|
||||
z-index: 99;
|
||||
z-index: $floating-button-z;
|
||||
outline: none;
|
||||
background-color: rgba($backgroundColor, .7);
|
||||
color: $floatingButtonColor;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: $headerHeight;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.directory {
|
||||
|
|
|
|||
Loading…
Reference in New Issue