Skip to content

Commit 1abb9ce

Browse files
author
R. S. Doiel
committed
moved working copy for footer-global to src directory, updated bundling
1 parent 386df67 commit 1abb9ce

File tree

6 files changed

+946
-62
lines changed

6 files changed

+946
-62
lines changed

‎cl-web-components.js‎

Lines changed: 442 additions & 0 deletions
Large diffs are not rendered by default.

‎footer-global-lite.js‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
class FooterGlobalLite extends HTMLElement {
2-
constructor() {
3-
super();
4-
const shadow = this.attachShadow({ mode: 'open' });
5-
6-
const fontLink = document.createElement('link');
7-
fontLink.setAttribute('rel', 'stylesheet');
8-
fontLink.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap');
9-
shadow.appendChild(fontLink);
10-
11-
const template = document.createElement('template');
12-
template.innerHTML = `
1+
// src/footer-global-lite.js
2+
var FooterGlobalLite = class extends HTMLElement {
3+
constructor() {
4+
super();
5+
const shadow = this.attachShadow({ mode: "open" });
6+
const fontLink = document.createElement("link");
7+
fontLink.setAttribute("rel", "stylesheet");
8+
fontLink.setAttribute("href", "https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap");
9+
shadow.appendChild(fontLink);
10+
const template = document.createElement("template");
11+
template.innerHTML = `
1312
<style>
1413
:host {
1514
font-family: 'Hind', sans-serif;
@@ -193,22 +192,20 @@ class FooterGlobalLite extends HTMLElement {
193192
</div>
194193
</footer>
195194
`;
196-
197-
this.shadowRoot.appendChild(template.content.cloneNode(true));
198-
199-
/* Fix for styling custom links because slot does not allow targetting the hover state in the shadow dom */
200-
this.addEventListener('mouseover', e => {
201-
if (e.target.classList.contains('custom-footer-link')) {
202-
e.target.style.textDecoration = 'underline';
203-
}
204-
});
205-
206-
this.addEventListener('mouseout', e => {
207-
if (e.target.classList.contains('custom-footer-link')) {
208-
e.target.style.textDecoration = 'none';
209-
}
210-
});
211-
}
212-
}
213-
214-
customElements.define('footer-global-lite', FooterGlobalLite);
195+
this.shadowRoot.appendChild(template.content.cloneNode(true));
196+
this.addEventListener("mouseover", (e) => {
197+
if (e.target.classList.contains("custom-footer-link")) {
198+
e.target.style.textDecoration = "underline";
199+
}
200+
});
201+
this.addEventListener("mouseout", (e) => {
202+
if (e.target.classList.contains("custom-footer-link")) {
203+
e.target.style.textDecoration = "none";
204+
}
205+
});
206+
}
207+
};
208+
customElements.define("footer-global-lite", FooterGlobalLite);
209+
export {
210+
FooterGlobalLite
211+
};

‎footer-global.js‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
class FooterGlobal extends HTMLElement {
2-
constructor() {
3-
super();
4-
const shadow = this.attachShadow({ mode: 'open' });
5-
6-
const fontLink = document.createElement('link');
7-
fontLink.setAttribute('rel', 'stylesheet');
8-
fontLink.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap');
9-
shadow.appendChild(fontLink);
10-
11-
const template = document.createElement('template');
12-
template.innerHTML = `
1+
// src/footer-global.js
2+
var FooterGlobal = class extends HTMLElement {
3+
constructor() {
4+
super();
5+
const shadow = this.attachShadow({ mode: "open" });
6+
const fontLink = document.createElement("link");
7+
fontLink.setAttribute("rel", "stylesheet");
8+
fontLink.setAttribute("href", "https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap");
9+
shadow.appendChild(fontLink);
10+
const template = document.createElement("template");
11+
template.innerHTML = `
1312
<style>
1413
:host {
1514
font-family: 'Hind', sans-serif;
@@ -211,22 +210,20 @@ class FooterGlobal extends HTMLElement {
211210
</div>
212211
</footer>
213212
`;
214-
215-
this.shadowRoot.appendChild(template.content.cloneNode(true));
216-
217-
/* Fix for styling custom links because slot does not allow targetting the hover state in the shadow dom */
218-
this.addEventListener('mouseover', e => {
219-
if (e.target.classList.contains('custom-footer-link')) {
220-
e.target.style.textDecoration = 'underline';
221-
}
222-
});
223-
224-
this.addEventListener('mouseout', e => {
225-
if (e.target.classList.contains('custom-footer-link')) {
226-
e.target.style.textDecoration = 'none';
227-
}
228-
});
229-
}
230-
}
231-
232-
customElements.define('footer-global', FooterGlobal);
213+
this.shadowRoot.appendChild(template.content.cloneNode(true));
214+
this.addEventListener("mouseover", (e) => {
215+
if (e.target.classList.contains("custom-footer-link")) {
216+
e.target.style.textDecoration = "underline";
217+
}
218+
});
219+
this.addEventListener("mouseout", (e) => {
220+
if (e.target.classList.contains("custom-footer-link")) {
221+
e.target.style.textDecoration = "none";
222+
}
223+
});
224+
}
225+
};
226+
customElements.define("footer-global", FooterGlobal);
227+
export {
228+
FooterGlobal
229+
};

‎mod.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,5 @@ export { ULAtoZList } from "./src/ul-a-to-z-list.js";
66
export { TextareaAgentList } from "./src/textarea-agent-list.js";
77
export { TextareaCSV } from "./src/textarea-csv.js";
88
export { TableSortable } from "./src/table-sortable.js";
9+
export { FooterGlobal } from "./src/footer-global.js";
10+
export { FooterGlobalLite } from "./src/footer-global-lite.js";

‎src/footer-global-lite.js‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
export class FooterGlobalLite extends HTMLElement {
2+
constructor() {
3+
super();
4+
const shadow = this.attachShadow({ mode: 'open' });
5+
6+
const fontLink = document.createElement('link');
7+
fontLink.setAttribute('rel', 'stylesheet');
8+
fontLink.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap');
9+
shadow.appendChild(fontLink);
10+
11+
const template = document.createElement('template');
12+
template.innerHTML = `
13+
<style>
14+
:host {
15+
font-family: 'Hind', sans-serif;
16+
display: block;
17+
background-color: #062e47;
18+
color: #fff;
19+
}
20+
21+
.footer-container {
22+
display: grid;
23+
grid-template-columns: 1.5fr 1fr;
24+
grid-template-rows: auto auto;
25+
gap: 10px;
26+
padding: 2rem;
27+
padding-right: 4rem;
28+
padding-bottom: 1rem;
29+
}
30+
31+
.footer-bottom {
32+
grid-column: 1 / -1;
33+
text-align: left;
34+
padding-left: 4rem;
35+
margin-bottom: 0;
36+
}
37+
38+
.footer-bottom a {
39+
color: inherit;
40+
}
41+
42+
.footer-bottom a:hover {
43+
text-decoration: underline;
44+
}
45+
46+
.footer-column {
47+
flex: 1 1 30%;
48+
margin: 0.5rem 0;
49+
}
50+
.footer-column:first-of-type {
51+
margin-left: 4rem;
52+
}
53+
54+
@media (max-width: 800px) {
55+
.footer-column {
56+
flex: 1 1 100%;
57+
}
58+
}
59+
60+
h2 {
61+
font-size:30px;
62+
margin-block-end: .83em;
63+
margin-block-end: 16px;
64+
margin-top: 24px;
65+
margin-bottom: 12px;
66+
font-weight: 500;
67+
line-height: 1.1;
68+
color: inherit;
69+
}
70+
71+
a {
72+
color: inherit;
73+
text-decoration: none;
74+
}
75+
76+
a:hover {
77+
text-decoration: underline;
78+
}
79+
80+
address {
81+
margin-bottom: 24px;
82+
font-style: normal;
83+
line-height: 1.5;
84+
unicode-bidi: isolate;
85+
}
86+
87+
address a {
88+
display: block;
89+
}
90+
91+
.u-email, .p-tell {
92+
line-height: 2;
93+
}
94+
95+
.p-name {
96+
margin-block-start: 24px;
97+
}
98+
99+
.social a svg {
100+
height: 32px;
101+
}
102+
103+
.social a:not(:last-child) {
104+
margin-inline-end: 30px;
105+
}
106+
107+
.logo {
108+
fill: #fff;
109+
margin-block: 24px;
110+
height: 5em;
111+
}
112+
113+
.links {
114+
line-height: 2;
115+
}
116+
117+
.list-unstyled {
118+
padding-left: 0;
119+
list-style: none;
120+
}
121+
122+
ul {
123+
margin-top: 0;
124+
}
125+
126+
.list-inline {
127+
padding-left: 0;
128+
list-style: none;
129+
margin-left: -5px;
130+
}
131+
132+
.list-inline>li {
133+
display: inline-block;
134+
padding-right: 5px;
135+
padding-left: 5px;
136+
}
137+
138+
.list-inline a {
139+
text-decoration: none;
140+
}
141+
142+
::slotted(.custom-footer-link) {
143+
color: white;
144+
text-decoration: none;
145+
padding: 5px;
146+
display: block;
147+
}
148+
149+
</style>
150+
151+
<footer class="footer-container">
152+
<div class="footer-column">
153+
<section class="links">
154+
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 190">
155+
<path d="M72.52,26.4C68.66,9.47,56.28,1,40,1,15.83,1,1.67,20.6,1.67,43.44S14.12,85.94,40,85.94c16.13,0,26.93-7.84,33.4-24.09L59.57,55.49c-3,9.43-9,16.36-19.54,16.36-16.14,0-22.84-14.32-22.84-28.41S23.89,15,40,15c9.2,0,16.59,6.13,17.84,15.11L72.52,26.4Zm54.25,17.5C126.77,27.54,114.38,25,102,25c-12.61,0-24.54,5.22-24.54,18.74l13.86.57c0-6.25,2.61-8.63,10.68-8.63,6,0,10.91,1.59,10.91,7.27v1.7c-3.52,1.25-10,2.39-15,3.41l-5.8,1.14c-8.52,1.7-17.49,6.7-17.49,17.95s8.63,18.07,19.54,18.07a29.07,29.07,0,0,0,18.75-6.59,10.85,10.85,0,0,0,1.36,5.22h14.66c-.8-1.25-2.16-3.75-2.16-9.66V43.9ZM112.91,63.33c0,7.38-8.3,10.56-14.77,10.56-5,0-9-2.84-9-7.15,0-5.46,4.32-6.94,9.54-8l7.62-1.59a24.8,24.8,0,0,0,6.59-2v8.19Zm23.78,20.56h13.86V.72H136.69V83.89Zm23.23-70V70.71c0,8.75,3.86,13.86,15.22,13.86a51.43,51.43,0,0,0,11-1.36V71.85a59.08,59.08,0,0,1-6.14.68c-5.34,0-6.25-2.5-6.25-7V36.4h12.39v-10H173.78V0L159.92,13.88Zm84,44.56c0-20.57-8.4-33.4-27.61-33.4-18.63,0-29.43,13-29.43,30.1s10.8,30.12,29.43,30.12c15.68,0,24-7.5,28.3-14.09L232.9,64.35c-1.36,1.93-5.68,8.18-16.59,8.18-7.5,0-14.65-5.57-14.88-14.09ZM201.43,47.76A14.79,14.79,0,0,1,216.31,36.4c9.32,0,13.07,8.29,13.07,11.36ZM302.29,41.4C298.77,32.76,292,25,278,25c-18.63,0-29.43,13-29.43,30.1S259.34,85.26,277,85.26c15.57,0,22.16-9.21,26-17.62l-11.82-6.25c-2.15,5.23-5.68,11.14-14,11.14-9.66,0-14.09-8.41-14.09-17.39s5-17.38,14.88-17.38A12.78,12.78,0,0,1,290.13,47l12.16-5.56Zm4.32,42.49h13.86V54.35c0-7,3.18-15.91,13.63-15.91,7,0,10.23,3.41,10.23,11.36V83.89h13.86V45.83c0-16.71-11.25-20.79-21-20.79-7.84,0-13.41,3.06-16.47,7h-.23V.72H306.61V83.89Z"></path>
156+
<path d="M16.1,129.71c0-5.34-.17-14.19-.25-15.69-.17-2.17-.58-3-3.09-3H8.84c-.5,0-.58-.41-.58-.83v-1.84c0-.41.08-.58.58-.58.92,0,3.92.25,10.85.25,8.09,0,11.6-.25,12.35-.25s.75.25.75.67v1.92c0,.41-.17.66-.83.66H27c-2.59,0-2.92.84-2.92,3.26,0,1.08-.25,13.68-.25,19.53V141c0,1.42,0,19.45.25,22.87,1.84.16,18.36.33,20.94,0,4.93-.75,9.93-10.77,11.1-14,.17-.34.34-.5.67-.34l1.34.5c.25.17.25.26.16.76-.25.58-3.59,14.35-4.09,16.6-1.08-.08-7.59-.16-15-.16s-15.6-.09-20.11-.09c-3.25,0-5.67.09-7.42.09s-2.67.16-3.26.16-.67-.16-.67-.58v-2.09c0-.42.09-.58.59-.58h4c3.09,0,3.59-1.17,3.59-2.26,0-1.58.25-22.36.25-27.45Z"></path>
157+
<path d="M68.18,142.81c0-2.84-.5-4.34-4.67-5-.59-.08-.75-.25-.75-.58v-.75c0-.25.16-.42.58-.59a67.1,67.1,0,0,0,9-4.09,3.51,3.51,0,0,1,1.59-.5c.42,0,.5.42.42,1-.17,1.42-.17,6.68-.17,13.61V155c0,3.26,0,6.26.08,7.18.17,1.58.42,2.17,1.34,2.17h3.84c.66,0,.83.25.83.75v1.42c0,.58-.17.83-.75.83s-4.51-.25-8-.25c-4.84,0-8.1.25-9,.25-.42,0-.67-.16-.67-.67V165c0-.5.25-.66.83-.66h4.09c.92,0,1.25-.34,1.34-1.67.08-2.5.08-5.09.08-7.6Zm-3.92-25.62a4.92,4.92,0,0,1,5.26-4.67,4.39,4.39,0,0,1,4.5,4.42,4.78,4.78,0,0,1-5,4.92C67.1,121.86,64.26,119.94,64.26,117.19Z"></path>
158+
<path d="M88,122.11c0-5.59-.92-6.76-3.92-7.76l-.84-.25c-.92-.25-1.08-.42-1.08-.67v-.66c0-.25.16-.42.67-.67a90.64,90.64,0,0,0,8.84-4.59,3.45,3.45,0,0,1,1.75-.75c.59,0,.76.42.67,1.42-.08.66-.08,10.18-.08,17.6v9.68c2.67-2.58,7.42-4.17,11.51-4.17,7.35,0,15.27,5.93,15.27,17.86,0,9.76-7.84,18.94-17.35,18.94-4.68,0-7.93-1-9.85-2.17l-3.34,1.84a1.2,1.2,0,0,1-1.08.25l-1-.25c-.34-.08-.42-.25-.34-.67.17-1.17.17-8.09.17-14.18Zm6,27c0,6.93.25,9.43,1.25,12.1.83,2,4.34,4.17,7.93,4.17,5,0,11.18-3.42,11.18-14.35,0-8.1-4.26-15.77-12.43-15.77a11.09,11.09,0,0,0-7.93,3Z"></path>
159+
<path d="M132.11,144.89c0-4.25-.67-5.09-3-6.34l-1.58-.83c-.5-.17-.67-.25-.67-.59v-.5c0-.33.17-.5.67-.75l8.26-4.25a2.52,2.52,0,0,1,1.17-.34c.5,0,.58.5.58,1l.42,5.93h.33c2.51-3.84,6.43-7.26,10-7.26,2.84,0,4.25,1.75,4.25,3.67a4,4,0,0,1-3.5,4.09,5.39,5.39,0,0,1-2.42-.67,5.36,5.36,0,0,0-2.76-.67c-1.33,0-3.5.84-4.92,3.51a9,9,0,0,0-.83,2.67v17.36c0,2.58.58,3.42,2.33,3.42h3.93c.5,0,.58.25.58.75v1.5c0,.5-.08.75-.42.75-.5,0-4.34-.25-8.84-.25-5.18,0-8.68.25-9.18.25-.34,0-.5-.16-.5-.83v-1.42c0-.59.16-.75.91-.75h3.26c1.25,0,1.84-.5,1.84-1.59.08-2.75.08-5.67.08-10Z"></path>
160+
<path d="M183.43,163.42a3.85,3.85,0,0,0,2.92-1.25c.34-.42.5-.59.83-.34l.84.67c.25.25.42.67-.08,1.5a6.89,6.89,0,0,1-6.51,4.09c-3,0-5.18-2.17-5.93-5.59h-.16a18,18,0,0,1-8.27,5.09,15.65,15.65,0,0,1-4.92.5c-2,0-5-1.67-5-6.92,0-3.84,1.76-7.18,8.35-10.1,3.75-1.67,8.09-3.67,9.43-4.84v-5.34c-.17-1.42-.25-3.59-1.17-4.67s-2.59-1.84-5-1.84a9.37,9.37,0,0,0-5.42,1.75c-1.17,1.09-.42,2.34-.42,3.84,0,2.92-1,4.76-4.42,4.76-1.34,0-2-.75-2-2.67,0-2.67,2.33-5.84,5.75-7.85a18.49,18.49,0,0,1,10.19-2.92c3.92,0,5.5,1.17,6.67,2.26,1.75,1.75,1.84,3.67,1.84,5.92v17.69C180.93,161.92,181.93,163.42,183.43,163.42Zm-8.59-14.69c-3,2.26-11.19,3.92-11.19,10.85,0,3.09,1.84,4.59,4.34,4.59s6.85-2.92,6.85-5.17Z"></path>
161+
<path d="M196.62,144.89c0-4.25-.67-5.09-3-6.34l-1.58-.83c-.5-.17-.67-.25-.67-.59v-.5c0-.33.17-.5.67-.75l8.26-4.25a2.52,2.52,0,0,1,1.17-.34c.5,0,.58.5.58,1l.42,5.93h.33c2.51-3.84,6.43-7.26,10-7.26,2.84,0,4.25,1.75,4.25,3.67a4,4,0,0,1-3.5,4.09,5.39,5.39,0,0,1-2.42-.67,5.36,5.36,0,0,0-2.76-.67c-1.33,0-3.5.84-4.92,3.51a9,9,0,0,0-.83,2.67v17.36c0,2.58.58,3.42,2.33,3.42h3.93c.5,0,.58.25.58.75v1.5c0,.5-.08.75-.42.75-.5,0-4.34-.25-8.84-.25-5.18,0-8.68.25-9.18.25-.34,0-.5-.16-.5-.83v-1.42c0-.59.16-.75.92-.75h3.25c1.25,0,1.84-.5,1.84-1.59.08-2.75.08-5.67.08-10Z"></path>
162+
<path d="M219.82,185.53c0-1.75,1.84-3.25,3.84-3.25a14.25,14.25,0,0,1,3.84.92,2,2,0,0,0,1.75-.5c1.25-1.51,5.51-11,6.68-14.27-.42-2.09-9.27-28.21-9.93-30-1-2.09-1.76-3.51-3.93-3.51H219.9c-.58,0-.67-.25-.67-.75v-1.67c0-.33.09-.58.67-.58.75,0,2.76.25,7.68.25,4.26,0,6.84-.25,7.76-.25.67,0,.75.25.75.58v1.76c0,.41-.08.66-.5.66H234c-.92,0-1.26.59-1.09,1.84.25,1.84,5.93,20.28,6.84,22.11h.34c.83-1.33,8.09-18.69,8.59-20.78s-.16-3.17-1.41-3.17h-1.34c-.5,0-.59-.25-.59-.66v-1.67c0-.42.09-.67.51-.67,1.08,0,2.83.25,6.84.25,2.25,0,4.17-.25,5.09-.25.5,0,.5.33.5.67v1.58c0,.5,0,.75-.42.75h-1.33a3.73,3.73,0,0,0-2.92,1.51c-1.84,2.25-7.35,15-13.11,28.12-4.08,9.26-7.34,17-8.84,19.77-1.17,2.18-2.67,5.43-7.09,5.43C221.41,189.79,219.82,188,219.82,185.53Z"></path>
163+
</svg>
164+
165+
<address class="h-card">
166+
<a class="u-email" href="mailto:[email protected]">[email protected]</a>
167+
<a class="p-tel" href="tel:+16263953405">626-395-3405</a>
168+
</address>
169+
170+
</section>
171+
</div>
172+
173+
<div class="footer-column">
174+
<h2>Quick Links</h2>
175+
<div class="custom-links-wrapper">
176+
<slot name="custom-links" part="custom-links">
177+
<ul>
178+
<li><a href="#">Default Link 1</a></li>
179+
<li><a href="#">Default Link 2</a></li>
180+
</ul>
181+
</slot>
182+
</div>
183+
</div>
184+
185+
186+
<div class="footer-bottom">
187+
<ul class="list-inline">
188+
<li><a href="https://library.caltech.edu/privacy">Privacy</a></li>
189+
<li><a href="https://www.caltech.edu/claimed-copyright-infringement">Copyright</a></li>
190+
<li><a href="https://library.caltech.edu/accessibility">Accessibility</a></li>
191+
<li id="footer-login" class="libanswers-js libguides-js"><a href="https://caltech.libapps.com/libapps/login.php?site_id=64&amp;target64=L2xpYmd1aWRlcy9hZG1pbl9jLnBocD9nPTEyMTI1OTAmcD04ODY5MTAz" aria-label="Staff Login"><i class="fa fa-sign-in" aria-hidden="true"></i></a></li>
192+
</ul>
193+
</div>
194+
</footer>
195+
`;
196+
197+
this.shadowRoot.appendChild(template.content.cloneNode(true));
198+
199+
/* Fix for styling custom links because slot does not allow targetting the hover state in the shadow dom */
200+
this.addEventListener('mouseover', e => {
201+
if (e.target.classList.contains('custom-footer-link')) {
202+
e.target.style.textDecoration = 'underline';
203+
}
204+
});
205+
206+
this.addEventListener('mouseout', e => {
207+
if (e.target.classList.contains('custom-footer-link')) {
208+
e.target.style.textDecoration = 'none';
209+
}
210+
});
211+
}
212+
}
213+
214+
customElements.define('footer-global-lite', FooterGlobalLite);

0 commit comments

Comments
 (0)