mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-26 06:56:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit; starting new design

Browse source 
Dropdown menu
This commit is contained in:
Matthew Holt 2023-04-14 20:54:26 -06:00 • committed by Francis Lavoie
parent 5bb6d92c63
commit 18c3cd841e
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
8 changed files with 715 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

305
new/resources/css/common.css Normal file
View file

@ -0,0 +1,305 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter, system-ui;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
tab-size: 4;
-moz-tab-size: 4;
}
.wrapper {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
header {
background: rgb(255 255 255 / .1);
box-shadow: 0 0 50px rgb(0 0 0 / .2);
backdrop-filter: blur(10px);
}
header a {
text-decoration: none;
}
header .topbar,
header nav > ul {
background: linear-gradient(to right, rgb(100 190 121), rgb(54 206 255));
background-clip: text;
-webkit-background-clip: text;
}
.topbar {
font-size: 14px;
border-bottom: 1px solid hsl(203deg 100% 79% / 20%);
}
.topbar .wrapper {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1em;
color: rgba(255, 255, 255, 0.75);
}
.topbar a {
display: inline-block;
padding: 8px;
color: inherit;
display: flex;
align-items: center;
}
.topbar a:hover {
background: rgb(0 0 0 / .5);
}
.navbar {
display: flex;
align-items: center;
gap: 2em;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
display: flex;
align-items: center;
gap: 2em;
flex: 1;
}
.topbar,
.navbar nav > ul > li > a {
-webkit-text-fill-color: rgba(0 0 0 / .1);
}
.topbar a:hover,
.navbar nav > ul > li > a:hover {
-webkit-text-fill-color: rgba(255 255 255 / .4);
}
.navbar nav > ul > li > a,
.navbar .button {
text-decoration: none;
transition: all 250ms;
color: inherit;
font-weight: 500;
}
.navbar nav > ul > li > a {
padding: 20px 5px;
display: block;
}
.icon {
height: 1.4em;
vertical-align: middle;
}
#logo {
height: 2.25em;
}
.navbar .actions {
margin-left: auto;
display: flex;
gap: 1em;
}
.button {
padding: .6em 1.5em;
border-radius: 6px;
text-decoration: none;
}
.button.secondary {
color: rgb(54 206 255);
border: 1px solid rgb(54 206 255);
}
.button.secondary:hover {
color: white;
}
.button.primary {
background: linear-gradient(135deg, white 25%, rgba(167,183,193) 80%);
color: #222;
box-shadow: 0 2px 8px rgb(0 0 0 / .3);
}
.button.primary:hover {
color: #1a71cb;
transform: scale(1.08);
box-shadow: 0 4px 15px rgb(0 0 0 / .2);
}
.button.primary:active {
transition: all 100ms;
transform: scale(.95);
box-shadow: 0 -1px 4px rgb(0 0 0 / .5);
}
#docs-link:hover .dropdown {
visibility: visible;
opacity: 1;
transform-origin: top center;
animation: rotateMenu 300ms ease;
}
@keyframes rotateMenu {
0% { transform: rotateX(-90deg) }
100% { transform: rotateX(0deg) }
}
.dropdown {
position: absolute;
display: inline-block;
background: #e8ecef;
border-radius: 15px;
line-height: 1.5;
overflow: hidden;
box-shadow: 0 20px 50px black;
transition-duration: .2s;
transition-property: opacity, transform;
visibility: hidden;
opacity: 0;
top: calc(100% - 5px);
left: 0;
}
.dropdown .row {
display: flex;
gap: 1px;
margin-bottom: 1px;
}
.dropdown .plainbox,
.dropdown .linkbox {
display: flex;
gap: 4em;
padding: 1.5em;
}
.dropdown .plainbox {
padding-top: .5em;
width: 100%;
justify-content: space-around;
}
.dropdown .plainbox a {
color: #647687;
}
.dropdown .plainbox a:hover {
color: #142633;
}
.dropdown .linkbox {
background: white;
gap: 4em;
}
.dropdown h2 {
font-family: Poppins, ui-rounded;
font-weight: 500;
color: #444;
font-size: 22px;
margin-bottom: 15px;
}
.dropdown .col {
min-width: 150px;
}
.dropdown .col a {
display: block;
color: #647687;
text-decoration: none;
padding: 5px 0;
}
.dropdown .col a:hover {
color: #142633;
}
.dropdown .flatlinks a {
background: white;
padding: 1em 2em;
color: #647687;
font-size: 14px;
}
.dropdown .flatlinks a b,
.dropdown .featured a b {
display: block;
font-size: 16px;
font-weight: 600;
}
.dropdown .flatlinks a b {
color: #142633;
margin-bottom: .25em;
}
.dropdown .flatlinks a:hover {
background: rgb(239, 244, 248);
}
.dropdown .featured a b {
color: #384f61;
margin-bottom: .5em;
}
.dropdown .featured a:hover b {
color: #1e3141;
}
.dropdown .featured {
gap: 1em;
padding: 1em;
/* background: white; */
}
.dropdown .featured a {
display: block;
padding: 1em;
font-size: 14px;
line-height: 1.4;
border-radius: 10px;
color: #647687;
font-size: 14px;
background-color: white;
background-image: linear-gradient(to bottom, rgb(239 244 247), rgba(252,252,252,0));
/* background: linear-gradient(137deg, rgb(241 251 247) 0%, rgb(242 248 255) 100%); */
flex: 1;
transition: background-color 150ms;
box-shadow: 0 1px 2px rgb(0 0 0 / .2);
}
.dropdown .featured a:hover {
background-color: rgb(223, 233, 238); /* rgb(232, 255, 254); */
}
.dropdown .featured a b {
display: block;
color: #384f61;
font-size: 16px;
margin-bottom: .5em;
font-weight: 600;
}

10
new/resources/css/home.css Normal file
View file

@ -0,0 +1,10 @@
.hero {
background-color: hsla(201,63%,15%,1);
background-image:
radial-gradient(at 50% 96%, hsla(0,100%,20%,0.35) 0px, transparent 50%),
radial-gradient(at 5% 30%, hsla(136,95%,15%,1) 0px, transparent 50%),
radial-gradient(at 91% 0%, hsla(214,83%,25%,1) 0px, transparent 50%),
radial-gradient(at 82% 73%, hsla(265,72%,20%,1) 0px, transparent 50%);
min-height: 800px;
}

73
new/resources/images/logo.svg Normal file
View file

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
<g transform="matrix(1,0,0,1,-3639.07,-3116.43)">
<g transform="matrix(0.875155,0,0,2.93093,3481.84,3067.03)">
<g transform="matrix(0.297956,0,0,0.0889674,-994.219,-139.295)">
<g id="Logo" transform="matrix(1,0,0,1,21.4759,36.7359)">
<g id="Icon">
<g>
<g transform="matrix(-0.191794,-0.715786,0.715786,-0.191794,4329.14,4673.64)">
<path d="M3901.56,610.734L3901.56,613.552C3892.96,614.059 3884.66,612.867 3877.03,610.1C3869,607.19 3861.75,602.568 3855.69,596.742C3853.24,594.39 3851.01,591.806 3849.01,589.049C3847.03,586.304 3845.27,583.38 3843.79,580.306C3839.51,571.425 3837.34,561.391 3837.68,550.868C3838.03,542.781 3839.84,535.125 3842.9,528.125C3846.02,520.981 3850.39,514.54 3855.79,509.095L3856.83,510.049C3852.08,515.696 3848.37,522.203 3845.94,529.307C3843.64,536.055 3842.57,543.321 3842.89,550.868C3843.21,560.381 3845.89,569.224 3850.13,577.066C3851.57,579.733 3853.2,582.281 3854.97,584.709C3856.76,587.149 3858.71,589.457 3860.8,591.633C3866.04,597.093 3872.24,601.608 3879.2,604.877C3886.06,608.1 3893.53,610.261 3901.56,610.734Z" style="fill:rgb(0,144,221);"/>
</g>
<g transform="matrix(-0.191794,-0.715786,0.715786,-0.191794,4329.14,4673.64)">
<path d="M3875.69,496.573L3874.71,494.525C3878.89,492.683 3883.3,491.309 3887.89,490.397C3892.3,489.519 3896.87,489.06 3901.56,489.154C3903.86,489.054 3906.12,489.104 3908.37,489.229C3917.87,489.76 3926.88,492.192 3934.84,496.562C3939.26,498.99 3943.37,501.962 3946.95,505.478C3951.72,510.163 3955.57,515.775 3958.48,521.868C3962.66,530.628 3964.74,540.511 3964.36,550.868C3964.01,560.422 3961.47,569.34 3957.43,577.348C3955.66,580.853 3953.59,584.168 3951.31,587.319C3949.25,590.174 3947.02,592.903 3944.57,595.428C3938.83,601.355 3931.99,606.216 3924.28,609.566C3923.55,609.883 3922.86,610.344 3922.07,610.474C3921.47,610.573 3920.98,610.432 3920.37,610.389L3919.69,608.224C3920.14,607.854 3920.42,607.448 3920.93,607.167C3921.6,606.805 3922.37,606.721 3923.09,606.478C3928.53,604.619 3933.66,602.055 3938.27,598.768C3942.96,595.427 3947.22,591.461 3950.66,586.838C3953.7,582.753 3956.09,578.169 3957.88,573.322C3960.46,566.345 3961.61,558.748 3961.32,550.868C3960.96,541.186 3958.2,532.197 3953.85,524.232C3950.89,518.816 3947.09,513.98 3942.81,509.619C3939.59,506.335 3936.13,503.294 3932.31,500.683C3925.19,495.814 3917.13,492.147 3908.21,490.688C3906.03,490.332 3903.82,490.13 3901.56,490.032C3896.96,490.124 3892.49,490.704 3888.2,491.786C3883.8,492.897 3879.62,494.538 3875.69,496.573Z" style="fill:rgb(0,144,221);"/>
</g>
</g>
<g>
<g transform="matrix(-3.37109,-0.514565,0.514565,-3.37109,4078.07,1806.88)">
<path d="M22,12C22,10.903 21.097,10 20,10C19.421,10 18.897,10.251 18.53,10.649C18.202,11.006 18,11.481 18,12C18,13.097 18.903,14 20,14C21.097,14 22,13.097 22,12Z" style="fill:none;fill-rule:nonzero;stroke:rgb(0,144,221);stroke-width:1.05px;"/>
</g>
<g transform="matrix(-5.33921,-5.26159,-3.12106,-6.96393,4073.87,1861.55)">
<path d="M10.773,4.925L10.675,5.457C10.675,5.457 10.615,5.518 10.557,5.577C10.343,5.791 9.894,6.24 9.36,6.771C8.045,8.077 6.237,9.86 6.237,9.86L6.054,9.805C6.054,9.805 7.768,7.995 9.03,6.673C9.543,6.135 9.978,5.682 10.186,5.467C10.542,5.096 10.773,4.925 10.773,4.925Z" style="fill:rgb(0,144,221);"/>
</g>
</g>
<g transform="matrix(3.11426,0,0,3.11426,3938.31,1737.25)">
<g>
<path d="M9.876,21L18.162,21C18.625,21 19,20.625 19,20.162L19,11.838C19,11.375 18.625,11 18.162,11L5.838,11C5.375,11 5,11.375 5,11.838L5,16.758" style="fill:none;stroke:rgb(35,194,56);stroke-width:1.89px;stroke-linecap:butt;stroke-linejoin:miter;"/>
<path d="M8,11L8,7C8,4.806 9.806,3 12,3C14.194,3 16,4.806 16,7L16,11" style="fill:none;fill-rule:nonzero;stroke:rgb(35,194,56);stroke-width:1.89px;"/>
</g>
</g>
<g>
<g transform="matrix(5.30977,0.697415,-0.697415,5.30977,3852.72,1727.97)">
<path d="M22,12C22,11.659 21.913,11.337 21.76,11.055C21.421,10.429 20.756,10 20,10C18.903,10 18,10.903 18,12C18,13.097 18.903,14 20,14C21.097,14 22,13.097 22,12Z" style="fill:none;fill-rule:nonzero;stroke:rgb(0,144,221);stroke-width:0.98px;"/>
</g>
<g transform="matrix(4.93114,2.49604,1.11018,5.44847,3921.41,1726.72)">
<path d="M8.902,6.77L9.219,7.068C9.219,7.068 7.749,8.739 6.646,9.951C6.021,10.637 5.52,11.164 5.52,11.164L4.819,10.502C4.819,10.502 5.343,9.996 6.027,9.366C7.235,8.253 8.902,6.77 8.902,6.77Z" style="fill:rgb(0,144,221);"/>
</g>
</g>
</g>
<g id="Wordmark" transform="matrix(1.54159,0,0,2.8744,2710.6,709.804)">
<g id="y" transform="matrix(0.50291,0,0,0.281607,905.533,304.987)">
<path d="M192.152,286.875L202.629,268.64C187.804,270.106 183.397,265.779 180.143,263.391C176.888,261.004 174.362,257.99 172.563,254.347C170.765,250.705 169.866,246.691 169.866,242.305L169.866,208.107L183.21,208.107L183.21,242.213C183.21,245.188 183.896,247.822 185.268,250.116C186.64,252.41 188.465,254.197 190.743,255.475C193.022,256.754 195.501,257.393 198.182,257.393C200.894,257.393 203.393,256.75 205.68,255.463C207.966,254.177 209.799,252.391 211.178,250.105C212.558,247.818 213.248,245.188 213.248,242.213L213.248,208.107L226.545,208.107L226.545,242.305C226.545,246.707 225.378,258.46 218.079,268.64C215.735,271.909 207.835,286.875 207.835,286.875L192.152,286.875Z" style="fill:rgb(230,230,230);fill-rule:nonzero;"/>
</g>
<g id="add" transform="matrix(0.525075,0,0,0.281607,801.871,304.987)">
<g transform="matrix(116.242,0,0,116.242,161.846,267.39)">
<path d="M0.276,0.012C0.227,0.012 0.185,-0 0.15,-0.024C0.115,-0.048 0.087,-0.08 0.069,-0.121C0.05,-0.161 0.04,-0.205 0.04,-0.254C0.04,-0.305 0.051,-0.35 0.073,-0.391C0.094,-0.431 0.125,-0.463 0.166,-0.487C0.206,-0.51 0.254,-0.522 0.31,-0.522C0.365,-0.522 0.412,-0.51 0.452,-0.487C0.491,-0.463 0.521,-0.431 0.542,-0.391C0.563,-0.35 0.573,-0.305 0.573,-0.256L0.573,-0L0.458,-0L0.458,-0.095L0.456,-0.095C0.446,-0.076 0.433,-0.059 0.417,-0.043C0.401,-0.026 0.381,-0.013 0.358,-0.003C0.335,0.007 0.307,0.012 0.276,0.012ZM0.307,-0.086C0.337,-0.086 0.363,-0.094 0.386,-0.109C0.408,-0.124 0.425,-0.144 0.438,-0.17C0.45,-0.195 0.456,-0.224 0.456,-0.256C0.456,-0.288 0.45,-0.317 0.438,-0.342C0.426,-0.367 0.409,-0.387 0.387,-0.402C0.365,-0.417 0.339,-0.424 0.308,-0.424C0.276,-0.424 0.249,-0.417 0.226,-0.402C0.203,-0.387 0.186,-0.366 0.174,-0.341C0.162,-0.316 0.156,-0.287 0.156,-0.255C0.156,-0.224 0.162,-0.195 0.174,-0.17C0.186,-0.144 0.203,-0.124 0.226,-0.109C0.248,-0.094 0.275,-0.086 0.307,-0.086Z" style="fill:rgb(230,230,230);fill-rule:nonzero;"/>
</g>
<g transform="matrix(116.242,0,0,116.242,224.849,267.39)">
<path d="M0.306,0.012C0.265,0.012 0.229,0.005 0.196,-0.008C0.163,-0.021 0.135,-0.039 0.112,-0.064C0.089,-0.089 0.071,-0.118 0.059,-0.152C0.046,-0.185 0.04,-0.222 0.04,-0.263C0.04,-0.315 0.051,-0.36 0.071,-0.399C0.093,-0.438 0.122,-0.468 0.159,-0.49C0.196,-0.511 0.239,-0.522 0.287,-0.522C0.311,-0.522 0.334,-0.518 0.355,-0.511C0.376,-0.504 0.396,-0.493 0.413,-0.48C0.43,-0.467 0.444,-0.451 0.455,-0.433L0.456,-0.433L0.456,-0.73L0.571,-0.73L0.571,-0.261C0.571,-0.205 0.56,-0.157 0.538,-0.116C0.515,-0.075 0.484,-0.043 0.445,-0.021C0.405,0.001 0.359,0.012 0.306,0.012ZM0.306,-0.086C0.335,-0.086 0.361,-0.093 0.384,-0.108C0.406,-0.122 0.423,-0.142 0.436,-0.167C0.449,-0.192 0.455,-0.222 0.455,-0.255C0.455,-0.288 0.449,-0.318 0.436,-0.343C0.423,-0.368 0.406,-0.388 0.384,-0.403C0.361,-0.417 0.335,-0.424 0.305,-0.424C0.276,-0.424 0.251,-0.417 0.228,-0.402C0.205,-0.387 0.188,-0.367 0.175,-0.342C0.162,-0.317 0.156,-0.288 0.156,-0.255C0.156,-0.222 0.162,-0.192 0.175,-0.167C0.188,-0.142 0.205,-0.122 0.229,-0.108C0.252,-0.093 0.277,-0.086 0.306,-0.086Z" style="fill:rgb(230,230,230);fill-rule:nonzero;"/>
</g>
<g transform="matrix(116.242,0,0,116.242,287.154,267.39)">
<path d="M0.306,0.012C0.265,0.012 0.229,0.005 0.196,-0.008C0.163,-0.021 0.135,-0.039 0.112,-0.064C0.089,-0.089 0.071,-0.118 0.059,-0.152C0.046,-0.185 0.04,-0.222 0.04,-0.263C0.04,-0.315 0.051,-0.36 0.071,-0.399C0.093,-0.438 0.122,-0.468 0.159,-0.49C0.196,-0.511 0.239,-0.522 0.287,-0.522C0.311,-0.522 0.334,-0.518 0.355,-0.511C0.376,-0.504 0.396,-0.493 0.413,-0.48C0.43,-0.467 0.444,-0.451 0.455,-0.433L0.456,-0.433L0.456,-0.73L0.571,-0.73L0.571,-0.261C0.571,-0.205 0.56,-0.157 0.538,-0.116C0.515,-0.075 0.484,-0.043 0.445,-0.021C0.405,0.001 0.359,0.012 0.306,0.012ZM0.306,-0.086C0.335,-0.086 0.361,-0.093 0.384,-0.108C0.406,-0.122 0.423,-0.142 0.436,-0.167C0.449,-0.192 0.455,-0.222 0.455,-0.255C0.455,-0.288 0.449,-0.318 0.436,-0.343C0.423,-0.368 0.406,-0.388 0.384,-0.403C0.361,-0.417 0.335,-0.424 0.305,-0.424C0.276,-0.424 0.251,-0.417 0.228,-0.402C0.205,-0.387 0.188,-0.367 0.175,-0.342C0.162,-0.317 0.156,-0.288 0.156,-0.255C0.156,-0.222 0.162,-0.192 0.175,-0.167C0.188,-0.142 0.205,-0.122 0.229,-0.108C0.252,-0.093 0.277,-0.086 0.306,-0.086Z" style="fill:rgb(230,230,230);fill-rule:nonzero;"/>
</g>
</g>
<g id="c" transform="matrix(-0.0716462,0.31304,-0.583685,-0.0384251,1489.76,-444.051)">
<path d="M2668.11,700.4C2666.79,703.699 2666.12,707.216 2666.12,710.766C2666.12,726.268 2678.71,738.854 2694.21,738.854C2709.71,738.854 2722.3,726.268 2722.3,710.766C2722.3,704.111 2719.93,697.672 2715.63,692.597L2707.63,699.378C2710.33,702.559 2711.57,706.602 2711.81,710.766C2712.2,717.38 2706.61,724.52 2697.27,726.637C2683.9,728.581 2676.61,720.482 2676.61,710.766C2676.61,708.541 2677.03,706.336 2677.85,704.269L2668.11,700.4Z" style="fill:rgb(230,230,230);"/>
</g>
</g>
</g>
<g id="R" transform="matrix(0.670012,0,0,0.670012,1723.64,487.612)">
<g transform="matrix(1,0,0,1,-0.10786,0.450801)">
<g transform="matrix(12.1247,0,0,12.1247,3862.61,1929.9)">
<path d="M0.079,-0L0.079,-0.716L0.396,-0.716C0.46,-0.716 0.508,-0.709 0.542,-0.697C0.575,-0.684 0.601,-0.661 0.621,-0.628C0.641,-0.596 0.651,-0.56 0.651,-0.521C0.651,-0.47 0.634,-0.427 0.602,-0.392C0.569,-0.357 0.518,-0.335 0.449,-0.326C0.474,-0.314 0.493,-0.302 0.506,-0.29C0.534,-0.265 0.56,-0.233 0.585,-0.195L0.709,-0L0.59,-0L0.496,-0.149C0.468,-0.192 0.445,-0.225 0.427,-0.248C0.409,-0.27 0.393,-0.286 0.379,-0.295C0.365,-0.305 0.351,-0.311 0.336,-0.314C0.325,-0.317 0.308,-0.318 0.283,-0.318L0.173,-0.318L0.173,-0L0.079,-0ZM0.173,-0.4L0.377,-0.4C0.42,-0.4 0.454,-0.404 0.479,-0.413C0.503,-0.422 0.521,-0.437 0.534,-0.456C0.547,-0.476 0.553,-0.497 0.553,-0.521C0.553,-0.554 0.541,-0.582 0.516,-0.604C0.492,-0.626 0.453,-0.637 0.4,-0.637L0.173,-0.637L0.173,-0.4Z" style="fill:rgb(230,230,230);fill-rule:nonzero;"/>
</g>
</g>
<g transform="matrix(1,0,0,1,0.278569,0.101881)">
<circle cx="3866.43" cy="1926.14" r="8.923" style="fill:none;stroke:rgb(230,230,230);stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

0
new/resources/js/common.js Normal file
View file

82
new/resources/js/lib.js Normal file
View file

@ -0,0 +1,82 @@
// AJQuery: https://github.com/coolaj86/ajquery.js (modified slightly by me)
function $(sel, el) { return ((typeof el === 'string' ? $(el) : el) || document).querySelector(sel); }
function $$(sel, el) { return (el || document).querySelectorAll(sel); }
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function on(eventName, elemSelector, handler, capture) {
let events = [eventName];
if (eventName.indexOf(',') >= 0) {
events = eventName.split(',');
}
events.forEach(eventName => {
// from youmightnotneedjquery.com
document.addEventListener(eventName.trim(), function (e) {
// loop parent nodes from the target to the delegation node
for (let target = e.target; target && target != this; target = target.parentNode) {
if (NodeList.prototype.isPrototypeOf(elemSelector)) {
for (el of elemSelector) {
if (el == target) {
handler.call(target, e);
return;
}
}
} else if (!elemSelector || target.matches(elemSelector)) {
handler.call(target, e);
return;
}
}
}, capture); // I find capture=true helpful when using :not() selectors to exclude one elem of the node tree
});
}
function trigger(el, eventType) {
if (typeof el === 'string') {
el = $(el); // assume it was a selector, for convenience
}
// from youmightnotneedjquery.com
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else {
const event =
typeof eventType === 'string'
? new Event(eventType, { bubbles: true, cancelable: true })
: eventType;
el.dispatchEvent(event);
}
}
// cloneTemplate does a deep clone of the <template> tag selected by tplSelector.
function cloneTemplate(tplSelector) {
// Ohhhhhh wow, we need to use firstElementChild when cloning the content of a template tag (!!!!):
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
// I spent way too long on this.
const elem = $(tplSelector);
if (!elem) return;
return elem.content.firstElementChild.cloneNode(true);
// return document.importNode(elem.content, true);
}
// isVisible returns true if elem (an element or selector) is visible.
function isVisible(elem) {
if (typeof elem === 'string') {
elem = $(elem);
}
return elem.offsetParent !== null;
}
// queryParam returns the named query string parameter's value(s).
function queryParam(name) {
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
return params[name];
}