uconn header, uconn footer, react update for banner logic

sfc23007 · Nov 19, 2024 · 6c55378 · 6c55378
1 parent 522df50
commit 6c55378
Show file tree

Hide file tree

Showing 11 changed files with 233 additions and 157 deletions.
diff --git a/index.html b/index.html
@@ -7,8 +7,7 @@
     <title>Container React Test</title>
   </head>
   <body>
-    <div id="root" class="container"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
-    <script type="text/javascript" src="/src/assets/banner.js"></script>
   </body>
 </html>
diff --git a/src/About.jsx b/src/About.jsx
@@ -2,11 +2,15 @@ function About() {
 
   return (
     <>
-      <div>
-        <h1>About</h1>
-        <div className="card">
-          <div className="card-body">
-            <p>Welcome to the about page...</p>
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
+            <h1>About</h1>
+            <div className="card">
+              <div className="card-body">
+                <p>Welcome to the about page...</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -6,6 +6,7 @@ import About from './About'
 import Contact from './Contact'
 import Footer from './Footer'
 import UConnHeader from './UConnHeader';
+import UConnFooter from './UConnFooter';
 
 function App() {
 
@@ -19,6 +20,7 @@ function App() {
         <Route path='/contact' element={<Contact/>} />
       </Routes>
        <Footer />
+       <UConnFooter />
     </>
   )
 }

diff --git a/src/Contact.jsx b/src/Contact.jsx
@@ -2,11 +2,15 @@ function Contact() {
 
   return (
     <>
-      <div>
-        <h1>Contact</h1>
-        <div className="card">
-          <div className="card-body">
-            <p>Contact us...</p>
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
+            <h1>Contact</h1>
+            <div className="card">
+              <div className="card-body">
+                <p>Contact us...</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/Footer.jsx b/src/Footer.jsx
@@ -2,11 +2,17 @@ function Footer() {
 
   return (
     <>
-      <div className="py-5">
-        <p className="text-center w-100 d-block my-4">&copy; 2024 Anyone</p>
-      </div>
+      <footer className="site-footer">
+        <div className="container py-5">
+          <div className="row">
+            <div className="col-12">
+              <h5 className="text-center">Site Footer...</h5>
+            </div>
+          </div>
+        </div>
+      </footer>
     </>
-  )
+  );
 }
 
 export default Footer
diff --git a/src/UConnFooter.jsx b/src/UConnFooter.jsx
@@ -0,0 +1,30 @@
+import './UConnFooter.scss';
+
+function UConnFooter() {
+
+  return (
+    <>
+      <div id="footers">
+        <footer id="footer" className="site-footer" role="contentinfo">
+          <div className="container">
+            <ul id="uc-footer-links" className="clearfix">
+              <li>
+                <span>&copy;</span> <a href="http://uconn.edu">University of Connecticut</a>
+              </li>
+              <li>
+                <a href="http://uconn.edu/disclaimers-privacy-copyright/">
+                  Disclaimers, Privacy &amp; Copyright
+                </a>
+              </li>
+              <li>
+                <a href="https://accessibility.uconn.edu/">Accessibility</a>
+              </li>
+            </ul>
+          </div>
+        </footer>
+      </div>
+    </>
+  );
+}
+
+export default UConnFooter
diff --git a/src/UConnFooter.scss b/src/UConnFooter.scss
@@ -0,0 +1,37 @@
+#footers {
+    background-color: #010d2f;
+    margin: 0 !important;
+    border-top: none !important;
+    a, p, span {
+        color: #FFF;
+    }
+    border-bottom: 5px solid #053c7f;
+    padding: 60px 0px;
+}
+
+#footers #footer {
+    color: #111;
+    padding: 0px;
+  }
+  #footers #footer ul {
+    text-align: center;
+    margin-bottom: 0px;
+  }
+  #footers #footer ul li {
+    padding-left: 1.5em;
+    display: inline-block;
+    margin-bottom: 0px;
+  }
+  @media (max-width: 780px) {
+    #footers #footer ul li {
+      display: inline-block;
+      margin-bottom: 10px;
+      padding-left: 0px;
+    }
+  }
+  #footers #footer ul li a {
+    padding: 0px;
+  }
+  #footers #footer ul li a:active, #footers #footer ul li a:hover, #footers #footer ul li a:focus {
+    color: #ddd;
+  }
diff --git a/src/UConnHeader.jsx b/src/UConnHeader.jsx
@@ -1,10 +1,133 @@
 import './UConnHeader.scss';
+import React, { useState, useEffect } from 'react';
+
+const UConnBanner = () => {
+  const [isBannerOpen, setIsBannerOpen] = useState(false);
+  const [buttons, setButtons] = useState([]);
+  const mobileMenuId = document.getElementById('banner-mobile-button')?.getAttribute('aria-controls');
+  const mobileMenu = mobileMenuId ? document.getElementById(mobileMenuId) : null;
+
+  useEffect(() => {
+    const banner = document.querySelector('#uconn-banner');
+    const buttonContainer = document.querySelector('#button-container');
+    const bannerButtons = document.querySelectorAll('#button-container button[aria-controls]');
+    const buttonsArray = Array.prototype.slice.call(bannerButtons, 0);
+    setButtons(buttonsArray);
+
+    banner.classList.remove('no-js');
+
+    const clickHandler = (evt) => {
+      if (evt.target.localName !== 'button') return;
+      toggleButtons(evt, buttonsArray);
+      document.addEventListener('click', closeHandler);
+      document.addEventListener('keydown', closeHandler);
+    };
+
+    const closeHandler = (evt) => {
+      const buttonContainerEvent = buttonContainer.contains(evt.target);
+      const mobileMenuEvent = mobileMenu && mobileMenu.contains(evt.target);
+      const isIgnorableEvent = evt.type === 'click' || evt.type === 'keydown';
+
+      if (evt.which === 27) {
+        escapeKeyPressedToClose(evt, buttonsArray);
+      }
+
+      if (!isIgnorableEvent || (!buttonContainerEvent && !mobileMenuEvent)) {
+        clickToClose(buttonsArray);
+      }
+
+      document.removeEventListener('click', closeHandler);
+      document.removeEventListener('keydown', closeHandler);
+    };
+
+    const toggleButtons = (evt, buttons) => {
+      buttons.forEach((button) => {
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+        if (button === evt.target && !button.nextElementSibling) {
+          toggleMenu(button);
+        } else if (button !== evt.target && !button.nextElementSibling) {
+          closeMenu(button);
+        } else if (button === evt.target && button.nextElementSibling && isExpanded) {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        } else if (button === evt.target && button.nextElementSibling) {
+          expand(button);
+          addClass(button.nextElementSibling);
+        } else if (button !== evt.target && button.nextElementSibling) {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        }
+      });
+    };
+
+    const escapeKeyPressedToClose = (evt, buttons) => {
+      buttons.forEach((button) => {
+        if (evt.target === document.querySelector('body') && !button.nextElementSibling) {
+          closeMenu(button);
+        } else if (evt.target === document.querySelector('body') && button.nextElementSibling) {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        }
+      });
+    };
+
+    const clickToClose = (buttons) => {
+      buttons.forEach((button) => {
+        if (!button.nextElementSibling) {
+          closeMenu(button);
+        } else {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        }
+      });
+    };
+
+    const toggleMenu = (button) => {
+      const toggleText = document.querySelector('#menu-toggle-text');
+      const isExpanded = button.getAttribute('aria-expanded') === 'true';
+      setIsBannerOpen(!isExpanded);
+
+      if (!isExpanded) {
+        expand(button);
+        toggleText.textContent = 'close';
+      } else {
+        collapse(button);
+        toggleText.textContent = 'open';
+      }
+    };
+
+    const closeMenu = (button) => {
+      collapse(button);
+      setIsBannerOpen(false);
+    };
+
+    const addClass = (el) => {
+      el.classList.add('banner-popup-active');
+    };
+
+    const removeClass = (el) => {
+      el.classList.remove('banner-popup-active');
+    };
+
+    const expand = (el) => {
+      el.setAttribute('aria-expanded', 'true');
+    };
+
+    const collapse = (el) => {
+      el.setAttribute('aria-expanded', 'false');
+    };
+
+    buttonContainer.addEventListener('click', clickHandler);
+
+    return () => {
+      buttonContainer.removeEventListener('click', clickHandler);
+    };
+  }, []);
 
-function UConnHeader(){
-
   return (
     <div id="uc-header">
-      <div id="uconn-banner" className="alternative">
+      <div id="uconn-banner" className={isBannerOpen ? 'alternative' : 'alternative no-js'}>
         <div id="uconn-header-container" className="blue">
           <div className="row-container">
             <div className="row-fluid">
@@ -31,7 +154,7 @@ function UConnHeader(){
                   </a>
                   <div id="uconn-search-tooltip" style={{ zIndex: '99999 !important' }}></div>
                 </div>
-                <div className="icon-container" id="icon-container-az">
+                <div className="icon-container" id="icon-container-az" style={{ zIndex: '99999 !important' }}>
                   <button className="btn btn-popup-control" id="uconn-az" href="https://uconn.edu/az" aria-haspopup="true" aria-controls="a-z-popup" aria-expanded="false">
                     <span className="no-css">A to Z Index</span>
                     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 32 32" aria-hidden="true" className="banner-icon">
@@ -58,8 +181,8 @@ function UConnHeader(){
         </div>
       </div>
     </div>
-
   );
-}
+};
+
+export default UConnBanner;
 
-export default UConnHeader
diff --git a/src/UConnHeader.scss b/src/UConnHeader.scss
@@ -1,3 +1,8 @@
+#uc-header {
+    position: relative;
+    z-index: 99999 !important;
+}
+
 #wordmark,
 #university-of-connecticut,
 #super-title {