Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(header): Banner/Hero Section can now be updated by child components

Browse Source
This commit is contained in:
darkicewolf50 2025-03-22 21:02:20 -06:00
parent ee6d1646b1
commit cffb9f46e6
3 changed files with 64 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/Header/Header.js
View File

@ -6,10 +6,7 @@ import Ender from "../Footer/Ender";
import { useEffect, useState } from "react";
/**
* @param {String} titleText - The text to dispaly in the
* @param {String} subtitleText - The text below the banner text you want
* @param {String} imgUrl - The url to the image you want as the banner, by default this will be a lorem picsum
* @param {String} imgAlt - The alt text for the image banner, this is required for good search results
* @param {useOutletContext} dict - List of items to display as the banner, more detals in UpdateBanner.jsx
* @returns {JSX.Element} JSX - HTML tags and JS functionality
* @description The top header part of the page includes the naviagtion
* @author Brock <darkicewolf50@gmail.com>
@ -56,16 +53,6 @@ export default function Header() {
}
});
/**
* @param {null} nothing - This takes in nothing
* @returns {null} nothing - This returns nothing
* @description This makes it so that the banner fades on scroll down
* @author Brock <darkicewolf50@gmail.com>
*/
document.addEventListener("scroll", () => {
ScrollFadeOut();
});
/**
* @param {null} nothing - This takes in nothing
* @returns {null} nothing - This returns nothing
@ -93,34 +80,6 @@ export default function Header() {
HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`;
};
/**
* @param {null} nothing - This takes in nothing
* @returns {null} nothing - This returns nothing
* @description This makes it os that the banner fades out on scolling downward
* @author Brock <darkicewolf50@gmail.com>
*/
const ScrollFadeOut = () => {
const bannerImg = document.getElementById("BannerBackgound");
let opacity = 1;
let distanceToTop = window.scrollY + bannerImg.getBoundingClientRect().top;
let bannerImgHeight = bannerImg.offsetHeight;
let scrollTop = document.documentElement.scrollTop;
if (scrollTop > distanceToTop) {
opacity = 1 - (scrollTop - distanceToTop) / bannerImgHeight;
}
if (opacity >= 0) {
bannerImg.style.opacity = opacity;
}
};
const updateBannerInfo = (newBannerInfo) => {
setBannerInfo({ ...newBannerInfo });
};
return (
<>
<header>
@ -212,36 +171,16 @@ export default function Header() {
</div>
)}
<Outlet context={{ updateBannerInfo }} />
<Outlet context={{ bannerInfo, setBannerInfo }} />
<Ender />
</>
);
}
// used like this
// import { useState, useEffect } from 'react';
// const ChildPage = () => {
// // You can modify the banner's content dynamically here
// const [bannerInfo, setBannerInfo] = useState({
// imgUrl: 'default-image-url.jpg',
// text: 'Default Banner Text',
// });
// useEffect(() => {
// // Here, you could fetch data or dynamically set the image/text
// setBannerInfo({
// imgUrl: 'new-banner-image.jpg',
// text: 'New Banner Text for this Page',
// });
// }, []); // This will set it when the component mounts
// return (
// <div>
// <h2>Child Page Content</h2>
// {/* Other child content goes here */}
// </div>
// );
// };
// export default ChildPage;
// <UpdateBanner
// updatedTitleText="UCalgary Bajaa"
// updatedSubtitleText="HelloDAAAA"
// updatedImgUrl="https://picsum.photos/200"
// updatetdImgAlt="Lorem Picsum"
// />

47
src/Header/UpdateBanner.jsx Normal file
View File

@ -0,0 +1,47 @@
import { useEffect } from "react";
import { useOutletContext } from "react-router-dom";
/**
* @param {String} titleText - The text to dispaly in the banner as a title
* @param {String} subtitleText - The text below the banner text you want
* @param {String} imgUrl - The url to the image you want as the banner, by default this will be a lorem picsum
* @param {String} imgAlt - The alt text for the image banner, this is required for good search results
* @description The way to update the banner from the child
* @example ```js
RouteComponent {
return (
<>
<UpdateBanner
updatedTitleText="UCalgary Bajaa"
updatedSubtitleText="HelloDAAAA"
updatedImgUrl="https://picsum.photos/200"
updatetdImgAlt="Lorem Picsum"
/>
// --snip--
```
* @author Brock <darkicewolf50@gmail.com>
*/
export default function UpdateBanner({
updatedTitleText = "UCalgary Baja",
updatedSubtitleText = "Hello",
updatedImgUrl = "https://picsum.photos/200",
updatedImgAlt = "Lorem picsum",
}) {
const context = useOutletContext();
const updateBanner = context.setBannerInfo;
useEffect(() => {
updateBanner({
titleText: updatedTitleText,
subtitleText: updatedSubtitleText,
imgUrl: updatedImgUrl,
imgAlt: updatedImgAlt,
});
}, [
updatedTitleText,
updatedSubtitleText,
updatedImgUrl,
updatedImgAlt,
updateBanner,
]);
return <></>;
}

32
src/MockDB/MockPage.jsx
View File

@ -1,5 +1,6 @@
import { useEffect } from "react";
import { useOutletContext } from "react-router-dom";
// import { useEffect } from "react";
// import { useOutletContext } from "react-router-dom";
import UpdateBanner from "../Header/UpdateBanner";
/**
* @param {String} imgAlt - This needs nothing
@ -8,29 +9,14 @@ import { useOutletContext } from "react-router-dom";
* @author Brock <darkicewolf50@gmail.com>
*/
export default function MockPage() {
const { updateBannerInfo } = useOutletContext();
var updated = 0;
const BannerSet = () => {
if (updated === 0) {
updateBannerInfo({
titleText: "UCalgary Baja",
subtitleText: "HelloWorld DD",
imgUrl: "https://picsum.photos/200",
imgAlt: "Lorem S",
});
updated = 1;
}
};
useEffect(() => {
// Here, you could fetch data or dynamically set the image/text
BannerSet();
}, []); // This will set it when the component mounts
return (
<div>
<UpdateBanner
updatedTitleText="UCalgary Bajaa"
updatedSubtitleText="HelloDAAAAAE"
updatedImgUrl="https://picsum.photos/200"
updatetdImgAlt="Lorem Picsum"
/>
<p>
Aliquam sed massa rhoncus, tincidunt diam quis, dignissim magna. Sed a
nisl sed leo auctor pretium. Class aptent taciti sociosqu ad litora