proposal article modifications

sassdavid · Feb 16, 2024 · 63ecc7b · 63ecc7b
1 parent 5dbdaa6
commit 63ecc7b
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 46 deletions.
diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -37,8 +37,8 @@ const config: GatsbyConfig = {
         name: 'Bianka & David',
         short_name: 'Bianka & David',
         start_url: '/',
-        background_color: '#79bde1ed',
-        theme_color: '#79bde1ed',
+        background_color: '#343734ed',
+        theme_color: '#343734ed',
         display: 'minimal-ui',
         icon: 'static/assets/wedding-rings-icon.png', // This path is relative to the root of the site.
       },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
   "homepage": "https://biankaesdavid.info/",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/roboto": "^5.0.8",
     "@fontsource/montserrat-alternates": "^5.0.8",
+    "@fontsource/roboto": "^5.0.8",
     "@gatsbyjs/reach-router": "^2.0.1",
     "crypto-js": "^4.2.0",
     "gatsby": "^5.13.3",
@@ -25,6 +25,7 @@
     "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-swipeable": "^7.0.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "keywords": [

diff --git a/src/assets/scss/cards/_proposal.scss b/src/assets/scss/cards/_proposal.scss
@@ -0,0 +1,32 @@
+.embedded-video {
+  margin-bottom: 3rem;
+}
+
+.image-gallery {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.image-paginator {
+  @include vendor('display', 'flex');
+  @include vendor('align-items', 'center');
+  @include vendor('justify-content', 'center');
+  gap: 0.5rem;
+  color: white;
+}
+
+.paginator-icon {
+  cursor: pointer;
+  opacity: 1;
+  font-size: 1.75rem;
+}
+
+.disabled-paginator-icon {
+  cursor: default;
+  opacity: 0.5;
+  font-size: 1.75rem;
+}
+
+.page-indicator {
+  user-select: none;
+}
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -45,3 +45,7 @@
 	@import 'layout/header';
 	@import 'layout/main';
 	@import 'layout/footer';
+
+// Cards.
+
+ 	@import "cards/proposal";
diff --git a/src/cards/Proposal.tsx b/src/cards/Proposal.tsx
@@ -1,32 +1,72 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { StaticImage } from 'gatsby-plugin-image';
 import Card from '@/components/Card';
+import Video from '@/components/Video';
+import { StaticImage } from 'gatsby-plugin-image';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import { useSwipeable } from 'react-swipeable';
+
+const Proposal = props => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = 3;
+
+  const prevPage = () => {
+    setCurrentPage(currentPage => Math.max(1, currentPage - 1));
+  };
+
+  const nextPage = () => {
+    setCurrentPage(currentPage => Math.min(totalPages, currentPage + 1));
+  };
+
+  const handlers = useSwipeable({
+    onSwipedLeft: () => nextPage(),
+    onSwipedRight: () => prevPage(),
+    preventScrollOnSwipe: true,
+    trackMouse: false,
+    trackTouch: true,
+  });
 
-const Proposal = (props) => (
-  <Card id="Proposal" style={props.style} onCloseArticle={props.onCloseArticle} articleClassName={props.articleClassName}>
-    <h2 className="major">Lánykérés</h2>
-    <span className="image main">
-        <StaticImage formats={['auto', 'webp']} src="../../static/assets/pic02.jpg" alt="Proposal" />
-    </span>
-    <p>
-      Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam
-      erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec
-      lorem luctus ultrices.
-    </p>
-    <p>
-      Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc
-      rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel
-      lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis
-      libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.
-    </p>
-  </Card>
-);
+  const renderCurrentImage = () => {
+    switch ( currentPage ) {
+      case 1:
+        return <StaticImage formats={['auto', 'webp']} src="../../static/assets/pic01.jpg" alt="Proposal" />;
+      case 2:
+        return <StaticImage formats={['auto', 'webp']} src="../../static/assets/pic02.jpg" alt="Proposal" />;
+      case 3:
+        return <StaticImage formats={['auto', 'webp']} src="../../static/assets/pic03.jpg" alt="Proposal" />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Card id="Proposal" style={props.style} onCloseArticle={props.onCloseArticle} articleClassName={props.articleClassName}>
+      <h2 className="major">Lánykérés</h2>
+
+      <div className="embedded-video" style={{ marginBottom: '2rem' }}>
+        {/*{props.isVideoVisible && <Video videoSrcURL="" videoTitle="Lánykérés 2023" />}*/}
+      </div>
+
+      <div {...handlers} className="image-gallery" style={{ marginBottom: '1rem' }}>
+        {renderCurrentImage()}
+      </div>
+
+      <div className="image-paginator">
+        <RiArrowLeftSLine className={currentPage === 1 ? 'disabled-paginator-icon' : 'paginator-icon'}
+                          onClick={currentPage === 1 ? undefined : prevPage} />
+        <span className="page-indicator">{currentPage} / {totalPages}</span>
+        <RiArrowRightSLine className={currentPage === totalPages ? 'disabled-paginator-icon' : 'paginator-icon'}
+                           onClick={currentPage === totalPages ? undefined : nextPage} />
+      </div>
+    </Card>
+  );
+};
 
 Proposal.propTypes = {
   articleClassName: PropTypes.string.isRequired,
   style: PropTypes.any.isRequired,
   onCloseArticle: PropTypes.func.isRequired,
+  isVideoVisible: PropTypes.bool.isRequired,
 };
 
 export default Proposal;
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -11,8 +11,7 @@ import Menu from '@/cards/Menu';
 const Main = props => (
   <div ref={props.setWrapperRef} id="main" style={props.timeout ? { display: 'flex' } : { display: 'none' }}>
     <Invitation articleClassName={`${props.article === 'invitation' ? 'active' : ''} ${props.articleTimeout ? 'timeout' : ''}`}
-                style={{ display: 'none' }}
-                onCloseArticle={props.onCloseArticle} />
+                style={{ display: 'none' }} onCloseArticle={props.onCloseArticle} />
 
     <Venue articleClassName={`${props.article === 'venue' ? 'active' : ''} ${props.articleTimeout ? 'timeout' : ''}`} style={{ display: 'none' }}
            onCloseArticle={props.onCloseArticle} />
@@ -21,12 +20,10 @@ const Main = props => (
              onCloseArticle={props.onCloseArticle} />
 
     <Proposal articleClassName={`${props.article === 'proposal' ? 'active' : ''} ${props.articleTimeout ? 'timeout' : ''}`}
-              style={{ display: 'none' }}
-              onCloseArticle={props.onCloseArticle} />
+              style={{ display: 'none' }} onCloseArticle={props.onCloseArticle} isVideoVisible={props.isVideoVisible} />
 
     <SeatingChart articleClassName={`${props.article === 'seatingchart' ? 'active' : ''} ${props.articleTimeout ? 'timeout' : ''}`}
-                  style={{ display: 'none' }}
-                  onCloseArticle={props.onCloseArticle} />
+                  style={{ display: 'none' }} onCloseArticle={props.onCloseArticle} />
 
     <Menu articleClassName={`${props.article === 'menu' ? 'active' : ''} ${props.articleTimeout ? 'timeout' : ''}`} style={{ display: 'none' }}
           onCloseArticle={props.onCloseArticle} />
@@ -43,6 +40,7 @@ Main.propTypes = {
   onCloseArticle: PropTypes.func,
   timeout: PropTypes.bool,
   setWrapperRef: PropTypes.func.isRequired,
+  isVideoVisible: PropTypes.bool.isRequired,
 };
 
 export default Main;
diff --git a/src/components/Video.tsx b/src/components/Video.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Video = ({ videoSrcURL, videoTitle, ...props }) => (
+  <div className="video" style={{
+    position: 'relative',
+    paddingBottom: '56.25%' /* 16:9 */,
+    paddingTop: 25,
+    height: 0,
+  }}>
+    <iframe
+      src={videoSrcURL}
+      title={videoTitle}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      frameBorder="0"
+      webkitallowfullscreen="true"
+      mozallowfullscreen="true"
+      allowFullScreen
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+      }} />
+  </div>
+);
+export default Video;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -19,70 +19,77 @@ class IndexPage extends React.Component<any, any> {
       articleTimeout: false,
       article: '',
       loading: 'is-loading',
+      isVideoVisible: false,
     };
     this.handleOpenArticle = this.handleOpenArticle.bind(this);
     this.handleCloseArticle = this.handleCloseArticle.bind(this);
     this.setWrapperRef = this.setWrapperRef.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
   }
 
-  componentDidMount() {
-    this.timeoutId = setTimeout(() => {
+  componentDidMount(): void {
+    this.timeoutId = setTimeout((): void => {
       this.setState({ loading: '' });
     }, 100);
     document.addEventListener('mousedown', this.handleClickOutside);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     if ( this.timeoutId ) {
       clearTimeout(this.timeoutId);
     }
     document.removeEventListener('mousedown', this.handleClickOutside);
   }
 
-  setWrapperRef(node) {
+  setWrapperRef(node): void {
     this.wrapperRef = node;
   }
 
-  handleOpenArticle(article) {
-    this.setState({
+  handleOpenArticle(article): void {
+    const isOpeningProposal: boolean = article === 'proposal';
+
+    this.setState(prevState => ({
       isArticleVisible: !this.state.isArticleVisible,
       article,
-    });
+      isVideoVisible: isOpeningProposal ? true : prevState.isVideoVisible,
+    }));
 
-    setTimeout(() => {
+    setTimeout((): void => {
       this.setState({
         timeout: !this.state.timeout,
       });
     }, 325);
 
-    setTimeout(() => {
+    setTimeout((): void => {
       this.setState({
         articleTimeout: !this.state.articleTimeout,
       });
     }, 350);
   }
 
-  handleCloseArticle() {
-    this.setState({
+  handleCloseArticle(): void {
+    const isClosingProposal: boolean = this.state.article === 'proposal';
+
+    this.setState(prevState => ({
       articleTimeout: !this.state.articleTimeout,
-    });
+      isVideoVisible: isClosingProposal ? false : prevState.isVideoVisible,
+    }));
 
-    setTimeout(() => {
+    setTimeout((): void => {
       this.setState({
         timeout: !this.state.timeout,
       });
     }, 325);
 
-    setTimeout(() => {
+    setTimeout((): void => {
       this.setState({
         isArticleVisible: !this.state.isArticleVisible,
         article: '',
       });
     }, 350);
   }
 
-  handleClickOutside(event) {
+  handleClickOutside(event): void {
     if ( this.wrapperRef && event.target.id == 'wrapper' ) {
       if ( this.state.isArticleVisible ) {
         this.handleCloseArticle();
@@ -102,7 +109,8 @@ class IndexPage extends React.Component<any, any> {
               articleTimeout={this.state.articleTimeout}
               article={this.state.article}
               onCloseArticle={this.handleCloseArticle}
-              setWrapperRef={this.setWrapperRef} />
+              setWrapperRef={this.setWrapperRef}
+              isVideoVisible={this.state.isVideoVisible} />
             <Footer timeout={this.state.timeout} />
           </div>
           <div id="bg">