Skip to content

Commit

Permalink
Swipper carousel start
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevincharles
kevincharles committed Mar 29, 2023
1 parent 273aad4 commit 3b62254
Showing 1 changed file with 77 additions and 190 deletions.
267 changes: 77 additions & 190 deletions src/_reactComponents/PanelHeaderComponents/Carousel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,139 +26,66 @@ import useMeasure from 'react-use-measure' //Temporary

SwiperCore.use([Keyboard, Mousewheel]);

function Card({ imagePath, text, link }) {
const cardStyle = {
display: 'flex',
flexDirection: 'column',
height: '180px',
backgroundColor: 'black',
overflow: 'hidden',
margin: '10px',
border: "2px solid #949494",
borderRadius: "6px"
};

const topStyle = {
height: '128px',
minWidth: '150px',
};

const imgStyle = {
height: 'auto',
maxWidth: '100%',
// maxHeight: '50px',
maxHeight: '110px',
objectFit: 'cover',
};

const bottomStyle = {
height: '54px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
padding: '2px',
color: 'black',
background: 'white',
// whiteSpace: 'normal',
// overflow: 'hidden',
// textOverflow: 'ellipsis',
// display: '-webkit-box',
// WebkitLineClamp: 2,
// WebkitBoxOrient: 'vertical',
};

const textStyle = {
fontSize: '.8em',
display: 'inline',
WebkitLineClamp: 2,
textOverflow: 'ellipsis',
overflow: 'hidden',
// display: '-webkit-box',
WebkitBoxOrient: 'vertical',
wordWrap: 'break-word',
}

const linkStyle = {
textDecoration: 'none',
userSelect: 'none',
cursor: 'pointer',
flexGrow: '1',
maxWidth: '240px',
}

function Card({ imagePath, text, link }) {
return (
<a style={linkStyle} href={link} target="_blank">
<div style={cardStyle}>
<div style={topStyle}>
<img src={imagePath} alt="Card" style={imgStyle} />
<a style={{
textDecoration: 'none',
// '-webkitUserSelect': 'none',
userSelect: 'none',
cursor: 'pointer',
flexGrow: '1',
maxWidth: '240px',
}} href={link} target="_blank">
<div
style={{
display: "flex",
alignItems: "center",
flexDirection: "column",
height: "180px",
border: "2px solid #949494",
borderRadius: "6px"
}}
>
<div
style={{
// display: "flex",
// justifyContent: "center",
// alignItems: "center",
// width: '3fr',
// width: "100%",
// maxWidth: "236px",
flexGrow: '1',
height: "128px",
background: "#121212",
borderRadius: "5px 5px 0px 0px",
overflow: "hidden",

}}
>
<img style={{ width: '140px' }} src={imagePath} />
{/* <img src={imagePath} /> */}
</div>
<div style={bottomStyle}>
<span style={textStyle}>{text}</span>
<div
style={{
flexGrow: '1',
height: "54px",
// width: ".9fr",
color: "black",
padding: "2px",
textOverflow: "ellipsis",
overflow: "hidden",
fontSize: ".9em",
// whiteSpace: "nowrap"
}}
>
{text}
</div>
</div>
</a>
</a >
);
}

// function Card({ imagePath, text, link }) {
// return (
// <a style={{
// textDecoration: 'none',
// // '-webkitUserSelect': 'none',
// userSelect: 'none',
// cursor: 'pointer',
// flexGrow: '1',
// maxWidth: '240px',
// }} href={link} target="_blank">
// <div
// style={{
// display: "flex",
// alignItems: "center",
// flexDirection: "column",
// height: "180px",
// border: "2px solid #949494",
// borderRadius: "6px"
// }}
// >
// <div
// style={{
// // display: "flex",
// // justifyContent: "center",
// // alignItems: "center",
// // width: '3fr',
// // width: "100%",
// // maxWidth: "236px",
// flexGrow: '1',
// height: "128px",
// background: "#121212",
// borderRadius: "5px 5px 0px 0px",
// overflow: "hidden",

// }}
// >
// <img style={{ width: '140px' }} src={imagePath} />
// {/* <img src={imagePath} /> */}
// </div>
// <div
// style={{
// flexGrow: '1',
// height: "54px",
// // width: ".9fr",
// color: "black",
// padding: "2px",
// textOverflow: "ellipsis",
// overflow: "hidden",
// fontSize: ".9em",
// // whiteSpace: "nowrap"
// }}
// >
// {text}
// </div>
// </div>
// </a >
// );
// }

const LeftChevron = styled(FontAwesomeIcon)`
color: #949494;
font-size: 50px;
Expand All @@ -182,25 +109,6 @@ const RightChevron = styled(FontAwesomeIcon)`
export function Carousel({ title = "", data = [] }) {
const swiperElRef = useRef(null);

const [ref, bounds] = useMeasure(); //Temporary
const [index, setIndex] = useState(0); //Temporary
const numberOfCardsInView = Math.floor(bounds.width / 175) //Temporary

let cards = []; //Temporary
let end = Math.min(numberOfCardsInView + index, data.length)
let start = Math.min(index, end - numberOfCardsInView);
if (start < 0) { start = 0; }
// console.log("data.length", data.length)
// console.log("index", index)
// console.log("numberOfCardsInView", numberOfCardsInView)
// console.log("start", start)
// console.log("end", end)
// console.log("---------\n")
for (let i = start; i < end; i++) {
cards.push(<Card key={`slide${i}`} {...data[i]} />)
}


const pagination = {
clickable: true,
renderBullet: function (index, className) {
Expand All @@ -223,7 +131,6 @@ export function Carousel({ title = "", data = [] }) {
return (
<>
<div
ref={ref}
style={{
border: "2px solid #949494",
borderRadius: "6px",
Expand All @@ -242,31 +149,11 @@ export function Carousel({ title = "", data = [] }) {
<LeftChevron
icon={faChevronLeft}
onClick={() => {
// swiperElRef.current.swiper.slidePrev();
let next = start - numberOfCardsInView;
if (next < 0) { next = 0 }
setIndex(next)
swiperElRef.current.swiper.slidePrev();
}}
/>
<div style={{
// display: "flex",
// flexGrow: 1,
// height: "230px",
// columnGap: '20px',
// justifyContent: "center",
display: "flex",
flexGrow: 1,
height: "230px",
columnGap: '20px',
justifyContent: "center",
}}>
{cards}
{/* <Card text="Slide 1" />
<Card text="Slide 2" />
<Card text="Slide 3" /> */}
</div>

{/* <Swiper
<Swiper
ref={swiperElRef}
style={{ height: "230px" }}
modules={[Pagination, A11y]}
Expand Down Expand Up @@ -302,11 +189,14 @@ export function Carousel({ title = "", data = [] }) {
}}
// onSwiper={(swiper) => console.log("swiper", swiper)}
// onSlideChange={() => console.log("slide change")}
> */}
{/* <SwiperSlide>
<Card text="Slide 1" />
</SwiperSlide>
<SwiperSlide>
>
{data.map((cardObj,i)=>{
return (<SwiperSlide key={`swipercard${i}`}>
<Card {...cardObj} />
</SwiperSlide>)
})}

{/* <SwiperSlide>
<Card text="Slide 2" />
</SwiperSlide>
<SwiperSlide>
Expand All @@ -326,28 +216,25 @@ export function Carousel({ title = "", data = [] }) {
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 8" />
</SwiperSlide> */}
{/* <SwiperSlide>
<Card text="Slide 9" />
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 10" />
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 11" />
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 12" />
</SwiperSlide> */}
{/* </Swiper> */}
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 9" />
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 10" />
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 11" />
</SwiperSlide>
<SwiperSlide>
<Card text="Slide 12" />
</SwiperSlide> */}
</Swiper>

<RightChevron
icon={faChevronRight}
onClick={() => {
// swiperElRef.current.swiper.slideNext();
let next = start + numberOfCardsInView;
if (next > (data.length - numberOfCardsInView)) { next = data.length - numberOfCardsInView }
setIndex(next)
swiperElRef.current.swiper.slideNext();
}}
/>
</div>
Expand Down

0 comments on commit 3b62254

Please sign in to comment.