diff --git a/src/components/FloatWidthMouse/index.js b/src/components/FloatWidthMouse/index.js index 8fbb9da..4147d84 100644 --- a/src/components/FloatWidthMouse/index.js +++ b/src/components/FloatWidthMouse/index.js @@ -1,26 +1,40 @@ import React, { useState, useEffect } from "react"; +import { connect } from "react-redux"; -export default function FloatWithMouse() { +function FloatWithMouse({ floatMouseToggle }) { const [left, setLeft] = useState(null); const [top, setTop] = useState(null); useEffect(() => { window.addEventListener("mousemove", (e) => { - setLeft(e.pageX); - setTop(e.pageY); + if (floatMouseToggle) { + setLeft(e.pageX); + setTop(e.pageY); + } }); }); + return ( -
+ <> + {floatMouseToggle && ( +
+ )} + ); } + +const mapStateToProps = (state) => ({ + floatMouseToggle: state.scrollAction.floatMouseToggle, +}); + +export default connect(mapStateToProps, {})(FloatWithMouse); diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js index 9fd9385..05cef0f 100644 --- a/src/redux/actions/index.js +++ b/src/redux/actions/index.js @@ -9,6 +9,7 @@ export { default as userProduct } from "./userProduct"; export { default as content } from "./content"; export { default as faq } from "./faq"; export { default as file } from "./file"; +export {default as scrollAction} from "./scroll"; diff --git a/src/redux/actions/scroll.js b/src/redux/actions/scroll.js new file mode 100644 index 0000000..ef8e431 --- /dev/null +++ b/src/redux/actions/scroll.js @@ -0,0 +1,74 @@ +const scrollAction = { + floatMouseToggle: + (data = null) => + async (dispatch) => { + await dispatch({ type: "scroll/page1/floatMouse", data }); + }, + handlePage1TopPosition: + (data = null) => + async (dispatch) => { + await dispatch({ type: "scroll/page1/top", data }); + }, + handlePage2TopPosition: + (data = null) => + async (dispatch) => { + await dispatch({ type: "scroll/page2/top", data }); + }, + handlePage2RotateX: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page2/rotateX", data }); + }, + handlePage2BoxPosition: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page2/boxPosition", data }); + }, + handlePage2MobilePosition: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page2/mobilePosition", data }); + }, + handlePage2VideoPosition: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page2/videoPosition", data }); + }, + handlePage2VideoTopPosition: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page2/videoTopPosition", data }); + }, + handlePage2MobileUnit: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page2/mobileUnit", data }); + }, + handleVideoTubeTopPosition: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/videoTube/top", data }); + }, + handleTestTranslateY: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/test/translateY", data }); + }, + handlePage3TopPosition: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page3/top", data }); + }, + handlePage3TestTranslateY: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page3/testTranslateY", data }); + }, + handlePage4TopPosition: + (data = window.scrollY) => + async (dispatch) => { + await dispatch({ type: "scroll/page4/top", data }); + }, +}; + +export default scrollAction; diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index e5ec6b1..c89c0b8 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -8,6 +8,7 @@ export { default as faq } from "./faq"; export { default as file } from "./file"; export { default as userFactor } from "./userFactor"; export { default as userProduct } from "./userProduct"; +export {default as scrollAction} from "./scroll"; diff --git a/src/redux/reducers/scroll.js b/src/redux/reducers/scroll.js new file mode 100644 index 0000000..779e1b0 --- /dev/null +++ b/src/redux/reducers/scroll.js @@ -0,0 +1,161 @@ +import scroll from "../../utils/scroll"; +const height = window.innerHeight; +const width = window.innerWidth; +const prevScroll = localStorage.getItem("prevScroll"); + +const initialState = { + page1TopPosition: scroll.homeScrollHandler(1), + page2TopPosition: scroll.homeScrollHandler(2), + page2RotateX: scroll.linearFormula( + scroll.linearFormula( + prevScroll > height ? height : prevScroll, + 45, + 0, + 0, + height + ) + ), + page2BoxPosition: scroll.initializeBoxPosition(prevScroll), + page2MobilePosition: scroll.linearFormula( + prevScroll > 2.5 * height ? 2.5 * height : prevScroll, + -(((height * 10) / 20 / width) * 100), + 6, + 2 * height, + 2.5 * height + ), + page2VideoPosition: + prevScroll > 4 * height + ? scroll.videoLinearFormula(4 * height) + : scroll.videoLinearFormula(prevScroll), + page2VideoTopPosition: + prevScroll > 3 * height + ? scroll.linearFormula(3 * height, 70, 50, 2.8 * height, 3 * height) + : scroll.linearFormula(prevScroll, 70, 50, 2.8 * height, 3 * height), + page2MobileUnit: scroll.initializeMobileUnit(prevScroll), + videoTubeTopPosition: scroll.homeScrollHandler(3), + testTranslateY: scroll.linearFormula( + prevScroll > 5 * window.innerHeight ? 5 * window.innerHeight : prevScroll, + 0, + -101, + 4.5 * height, + 5 * height + ), + page3TopPosition: scroll.homeScrollHandler(4), + page3TestTranslateY: + prevScroll < 6.3 * height + ? 0 + : scroll.linearFormula( + prevScroll > 7 * height ? 7 * height : prevScroll, + 0, + 100, + 6.3 * height, + 7 * height + ), + page4TopPosition: scroll.homeScrollHandler(5), +}; + +export default function scrollAction(state = initialState, action) { + let { type, data } = action; + switch (type) { + case "scroll/page1/floatMouse": + return { ...state, floatMouseToggle: data }; + case "scroll/page1/top": + return { ...state, page1TopPosition: scroll.homeScrollHandler(1) }; + case "scroll/page2/top": + return { ...state, page2TopPosition: scroll.homeScrollHandler(2) }; + case "scroll/page2/rotateX": + return { + ...state, + page2RotateX: scroll.linearFormula(window.scrollY, 45, 0, 0, height), + }; + case "scroll/page2/boxPosition": + return { + ...state, + page2BoxPosition: { + translateY: scroll.linearFormula( + data.scrollY, + data.translateY.pos1, + data.translateY.pos2, + data.start, + data.end + ), + translateX: scroll.linearFormula( + data.scrollY, + data.translateX.pos1, + data.translateX.pos2, + data.start, + data.end + ), + rotate: scroll.linearFormula( + data.scrollY, + data.rotate.pos1, + data.rotate.pos2, + data.start, + data.end + ), + }, + }; + case "scroll/page2/mobilePosition": + return { + ...state, + page2MobilePosition: scroll.linearFormula( + window.scrollY, + -(((height * 10) / 20 / width) * 100), + 6, + 2 * height, + 2.5 * height + ), + }; + case "scroll/page2/videoPosition": + return { + ...state, + page2VideoPosition: scroll.videoLinearFormula(window.scrollY), + }; + case "scroll/page2/videoTopPosition": + return { + ...state, + page2VideoTopPosition: scroll.linearFormula( + window.scrollY, + 70, + 50, + 2.8 * height, + 3 * height + ), + }; + case "scroll/page2/mobileUnit": + return { + ...state, + page2MobileUnit: scroll.initializeMobileUnit(window.scrollY), + }; + case "scroll/videoTube/top": + return { ...state, videoTubeTopPosition: scroll.homeScrollHandler(3) }; + case "scroll/test/translateY": + return { + ...state, + testTranslateY: scroll.linearFormula( + window.scrollY, + 0, + -101, + 4.5 * height, + 5 * height + ), + }; + case "scroll/page3/top": + return { ...state, page3TopPosition: scroll.homeScrollHandler(4) }; + case "scroll/page3/testTranslateY": + return { + ...state, + page3TestTranslateY: scroll.linearFormula( + window.scrollY, + 0, + 100, + 6.3 * height, + 7 * height + ), + }; + case "scroll/page4/top": + return { ...state, page4TopPosition: scroll.homeScrollHandler(5) }; + default: + return state; + } +} diff --git a/src/utils/scroll.js b/src/utils/scroll.js index 62621ce..035ba1d 100644 --- a/src/utils/scroll.js +++ b/src/utils/scroll.js @@ -4,58 +4,58 @@ class scroll { }; homeScrollHandler = (index) => { + const prevScroll = Number(localStorage.getItem('prevScroll')); const height = Number(window.innerHeight); const scrollY = Number(window.scrollY); if (index === 1) { - // return 0; - if (scrollY === 0) { + if (prevScroll === 0) { return 0; + }else + if (prevScroll > 0 && prevScroll <= height) { + return -prevScroll; } - if (scrollY > 0 && scrollY < 7 * height) { - return -scrollY; - } - if (scrollY === 7 * height) { + if (prevScroll > height) { return -height; } } else if (index === 2) { - if (scrollY === 0) { + if (prevScroll === 0) { return height; } - if (scrollY > 0 && scrollY < height) { - return height - scrollY; + if (prevScroll > 0 && prevScroll <= height) { + return height - prevScroll; } - if (scrollY >= 10 * height) { + if (prevScroll > 10 * height) { return -1 * height; } } else if (index === 3) { - if (scrollY <= 3 * height) { + if (prevScroll <= 3.5 * height) { return height; } - if (scrollY > 3 * height && scrollY < 4 * height) { - return 4 * height - scrollY; + if (prevScroll > 3.5 * height && prevScroll <= 4 * height) { + return 4 * height - prevScroll; } - if (scrollY === 10 * height) { + if (prevScroll > 10 * height) { return -height; } } else if (index === 4) { - if (scrollY <= 5 * height) { + if (prevScroll <= 5 * height) { return height; - } else if (scrollY > 5 * height && scrollY < 6 * height) { - return 6 * height - scrollY; + } else if (prevScroll > 5 * height && prevScroll < 6 * height) { + return 6 * height - prevScroll; } - if (scrollY === 10 * height) { + if (prevScroll === 10 * height) { return -height; } } else if (index === 5) { - if (scrollY <= 7.3 * height) { + if (prevScroll <= 7.3 * height) { return height; - } else if (scrollY > 7.3 * height && scrollY < 8.3 * height) { - return 8.3 * height - scrollY; + } else if (prevScroll > 7.3 * height && prevScroll < 8.3 * height) { + return 8.3 * height - prevScroll; } - if (scrollY === 10 * height) { + if (prevScroll === 10 * height) { return -height; } - } + } }; linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => { @@ -153,6 +153,59 @@ class scroll { left: currentLeft, }; }; + + initializeBoxPosition = (currentScroll) => { + const height= window.innerHeight; + if(currentScroll < height){ + console.log(currentScroll); + return { + translateX: -5, + translateY: -5, + rotate: 5 + } + } + if(currentScroll > height && currentScroll < 2 * height){ + return { + translateX: this.linearFormula(currentScroll, -5, 32, height, 2 * height), + translateY: this.linearFormula(currentScroll, -5, 10, height, 2 * height), + rotate: this.linearFormula(currentScroll, 5, 0, height, 2 * height) + } + } + if(currentScroll > 2 * height && currentScroll <= 2.5 * height){ + return { + translateX: 32, + translateY: 10, + rotate: 0 + } + } + if(currentScroll > 2.5 * height && currentScroll <= 3 * height){ + return { + translateX: this.linearFormula(currentScroll, 32, 32, 2.5 * height, 3 * height), + translateY: this.linearFormula(currentScroll, 10, -30, 2.5 * height, 3 * height), + rotate: this.linearFormula(currentScroll, 0, 0, 2.5 * height, 3 * height) + } + } + if(currentScroll > 3 * height){ + return { + translateX: 32, + translateY: -30, + rotate: 0 + } + } + }; + + initializeMobileUnit = (currentScroll) => { + const height = window.innerHeight; + if (currentScroll > 2 * height && currentScroll <= 2.3 * height) { + return 1; + } else if (currentScroll > 2.3 * height && currentScroll <= 2.7 * height) { + return 2; + } else if (currentScroll > 2.7 * height && currentScroll <= 2.8 * height) { + return 3; + } else if (currentScroll > 2.8 * height && currentScroll < 3.5 * height) { + return 4; + } + } } const _scroll = new scroll(); diff --git a/src/views/Home/Landscape/Page1/index.js b/src/views/Home/Landscape/Page1/index.js index a6a762e..347b206 100644 --- a/src/views/Home/Landscape/Page1/index.js +++ b/src/views/Home/Landscape/Page1/index.js @@ -1,10 +1,10 @@ import React, { useState, useEffect } from "react"; +import { connect } from "react-redux"; import { Link } from "react-router-dom"; import { Carousel } from "@trendyol-js/react-carousel"; import Book from "./Book"; import FloatWithMouse from "../../../../components/FloatWidthMouse"; import Lights from "./Lights"; -import scroll from "../../../../utils/scroll"; import _ from "lodash"; @@ -20,10 +20,9 @@ import arrowBottomIcon from "../../../../assets/icons/arrows-bottom-blue.svg"; import sheffImage from "../../../../assets/images/sheff.svg"; import arrowLeftWhite from "../../../../assets/icons/arrow-left-white.svg"; -export default function Page1({ list, page }) { +function Page1({ list, top }) { const height = window.innerHeight; const [show, setShow] = useState(null); - const [top, setTop] = useState(0); useEffect(() => { const width = window.innerWidth; @@ -42,11 +41,6 @@ export default function Page1({ list, page }) { } else if (width > 1024) { setShow(4); } - window.addEventListener("scroll", (e) => { - if (window.scrollY > 0 && window.scrollY < 4 * height) { - setTop(() => scroll.homeScrollHandler(page)); - } - }); }, []); return ( @@ -152,6 +146,12 @@ export default function Page1({ list, page }) { ); } +const mapStateToProps = (state) => ({ + top: state.scrollAction.page1TopPosition, +}); + +export default connect(mapStateToProps, {})(Page1); + Page1.defaultProps = { list: [ { diff --git a/src/views/Home/Landscape/Page2/Mobile/Video/index.js b/src/views/Home/Landscape/Page2/Mobile/Video/index.js index 39aa12c..c73a84a 100644 --- a/src/views/Home/Landscape/Page2/Mobile/Video/index.js +++ b/src/views/Home/Landscape/Page2/Mobile/Video/index.js @@ -1,40 +1,10 @@ import React, { useState, useEffect, useCallback } from "react"; +import {connect} from 'react-redux'; import _ from "lodash"; import ARImage from "../../../../../../assets/images/ar.jpg"; import scroll from "../../../../../../utils/scroll"; -export default function Video({ selectedVideo, videoPosition }) { - const height = window.innerHeight; - const [top, setTop] = useState(null); - useEffect(() => { - scroll.linearFormula( - window.scrollY > 3 * height ? 3 * height : window.scrollY, - 70, - 50, - 2.8 * height, - 3 * height - ); - window.addEventListener("scroll", () => { - const scrollY = window.scrollY; - if(scrollY > 0 && scrollY < 3 * height) { - videoTopPositionHandler(scrollY); - - } - }); - }, []); - - const videoTopPositionHandler = useCallback((scrollY) => { - if (scrollY < 2.8 * height) { - setTop(() => 50); - } else if (scrollY >= 2.8 * height && scrollY < 3 * height) { - setTop(() => - scroll.linearFormula(scrollY, 75, 50, 2.8 * height, 3 * height) - ); - } else { - setTop(() => 50); - } - },[top]); - +function Video({ top, videoPosition }) { return (
@@ -75,6 +74,8 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit } export default connect( (state) => ({ selectedVideo: state.publicApi.selectedVideo, + mobilePosition: state.scrollAction.page2MobilePosition, + unit : state.scrollAction.page2MobileUnit, }), {} )(Mobile); diff --git a/src/views/Home/Landscape/Page2/index.js b/src/views/Home/Landscape/Page2/index.js index 03f20ce..964ca85 100644 --- a/src/views/Home/Landscape/Page2/index.js +++ b/src/views/Home/Landscape/Page2/index.js @@ -1,4 +1,5 @@ import React, { useState, useEffect, useCallback } from "react"; +import { connect } from "react-redux"; import _ from "lodash"; import scroll from "../../../../utils/scroll"; import Mobile from "./Mobile"; @@ -6,232 +7,7 @@ import qrImage from "../../../../assets/images/qrImage.png"; import rightBg from "../../../../assets/images/page-bg.png"; import leftBg from "../../../../assets/images/page-bg-1.png"; -export default function Page2({ list, page, autoPlay }) { - const height = window.innerHeight; - const [top, setTop] = useState(window.innerHeight); - const [rotateX, setRotateX] = useState(null); - const [videoPosition, setVideoPosition] = useState(null); - const [unit, setUnit] = useState(null); - const [boxPosition, setBoxPosition] = useState({ - translateY: null, - translateX: null, - rotate: null, - }); - const [mobilePosition, setMobilePosition] = useState(null); - useEffect(() => { - setMobilePosition( - scroll.linearFormula( - window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, - -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100), - 6, - 2 * height, - 2.5 * height - ) - ); - setRotateX( - scroll.linearFormula( - window.scrollY > height ? height : window.scrollY, - 45, - 0, - 0, - height - ) - ); - - if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) { - videoPositionHandler( - window.scrollY > 4 * height - ? scroll.videoLinearFormula(4 * height) - : scroll.videoLinearFormula(window.scrollY) - ); - } - - unitPositionHandler(window.scrollY); - if (window.scrollY < 2.5 * height) { - setBoxPosition({ - translateY: scroll.linearFormula( - window.scrollY > 2 * height ? 2 * height : window.scrollY, - -5, - 10, - height, - 2 * height - ), - translateX: scroll.linearFormula( - window.scrollY > 2 * height ? 2 * height : window.scrollY, - -5, - 32, - height, - 2 * height - ), - rotate: scroll.linearFormula( - window.scrollY > 2 * height ? 2 * height : window.scrollY, - 5, - 0, - height, - 2 * height - ), - }); - } else if (window.scrollY > 3 * height) { - setBoxPosition({ - ...boxPosition, - translateY: scroll.linearFormula( - window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, - -30, - -30, - 2.5 * height, - 3 * height - ), - translateX: scroll.linearFormula( - window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, - 32, - 32, - 2.5 * height, - 3 * height - ), - rotate: scroll.linearFormula( - window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, - 0, - 0, - 2.5 * height, - 3 * height - ), - }); - } - - window.addEventListener("scroll", (e) => { - const scrollY = window.scrollY; - if (scrollY > 0 && scrollY < 4 * height) { - setTop(scroll.homeScrollHandler(page)); - } - if (scrollY > 0 && scrollY < height) { - setRotateX(scaleHandler(scrollY)); - } - if (scrollY > 0 && scrollY <= 3 * height) { - boxPositionHandler(scrollY); - } - if (scrollY >= 0 && scrollY <= 2.5 * height) { - mobilePositionHandler(scrollY); - } - if (scrollY > 0 * height && scrollY < 3.5 * height) { - unitPositionHandler(scrollY); - } - if (scrollY > 3.5 * height && scrollY < 4 * height) { - videoPositionHandler(scrollY); - } - }); - }, []); - - useEffect(() => { - if (window.scrollY > 0 * height && window.scrollY < 3.5 * height) { - unitPositionHandler(window.scrollY); - } - }, [mobilePosition]); - - const boxPositionHandler = useCallback( - (scrollY) => { - if (scrollY <= height) { - setBoxPosition({ - translateY: -5, - translateX: -5, - rotate: 5, - }); - } - if (scrollY > height && scrollY <= 2 * height) { - setBoxPosition({ - ...boxPosition, - translateY: scroll.linearFormula(scrollY, -5, 10, height, 2 * height), - translateX: scroll.linearFormula(scrollY, -5, 32, height, 2 * height), - rotate: scroll.linearFormula(scrollY, 5, 0, height, 2 * height), - }); - } - if (scrollY > 2.5 * height && scrollY <= 3 * height) { - setBoxPosition({ - ...boxPosition, - translateY: scroll.linearFormula( - scrollY, - 10, - -30, - 2.5 * height, - 3 * height - ), - translateX: scroll.linearFormula( - scrollY, - 32, - 32, - 2.5 * height, - 3 * height - ), - rotate: scroll.linearFormula(scrollY, 0, 0, 2.5 * height, 3 * height), - }); - } else { - } - }, - [boxPosition] - ); - const mobilePositionHandler = useCallback( - (scrollY) => { - if (scrollY <= 2 * height) { - setMobilePosition( - -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100) - ); - } else if (scrollY > 2 * height && scrollY <= 2.5 * height) { - setMobilePosition( - scroll.linearFormula( - scrollY, - -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100), - 6, - 2 * height, - 2.5 * height - ) - ); - } else { - setMobilePosition(6); - } - }, - [mobilePosition] - ); - const videoPositionHandler = useCallback( - (scrollY) => { - if (scrollY <= 3.5 * height) { - setVideoPosition(() => null); - } else if (scrollY > 3.5 * height && scrollY < 4 * height) { - setVideoPosition(scroll.videoLinearFormula(scrollY)); - } else { - } - }, - [videoPosition] - ); - const unitPositionHandler = useCallback( - (scrollY) => { - if (scrollY > 2 * height && scrollY <= 2.5 * height) { - if (mobilePosition > 0) { - setUnit(2); - } else { - setUnit(1); - } - } else if (scrollY > 2.5 * height && scrollY <= 2.7 * height) { - setUnit(2); - } else if (scrollY > 2.7 * height && scrollY <= 2.8 * height) { - setUnit(3); - } else if (scrollY > 2.8 * height && scrollY < 3.5 * height) { - setUnit(4); - } - }, - [unit] - ); - const scaleHandler = useCallback( - (scrollY) => { - if (scrollY === 0) { - setRotateX(90); - } else if (scrollY > 0 && scrollY <= height) { - setRotateX(scroll.linearFormula(scrollY, 45, 0, 0, height)); - } else { - setRotateX(0); - } - }, - [rotateX] - ); - +function Page2({ top, rotateX, boxPosition }) { return (
e.stopPropagation()} >
e.stopPropagation()} className={_.join( [" home-page2 h-full w-full origin-bottom overflow-hidden"], " " @@ -309,13 +85,19 @@ export default function Page2({ list, page, autoPlay }) {
{/* mobile phone */} {/* video */}
); } + +const mapStateToProps = (state) => ({ + top: state.scrollAction.page2TopPosition, + rotateX : state.scrollAction.page2RotateX, + boxPosition : state.scrollAction.page2BoxPosition, + mobilePosition : state.scrollAction.page2MobilePosition, + videoPosition : state.scrollAction.page2VideoPosition +}); + +export default connect(mapStateToProps, {})(Page2); diff --git a/src/views/Home/Landscape/Page3/index.js b/src/views/Home/Landscape/Page3/index.js index c5d16b1..08da562 100644 --- a/src/views/Home/Landscape/Page3/index.js +++ b/src/views/Home/Landscape/Page3/index.js @@ -1,58 +1,18 @@ import React, { useState, useEffect, useCallback } from "react"; +import {connect} from 'react-redux'; import _ from "lodash"; -import scroll from "../../../../utils/scroll"; import testResultImage from "../../../../assets/images/test-result.png"; // import testPageInfoImage from "../../../../assets/images/test-page-info.svg"; import testPageImage from "../../../../assets/images/test-page.svg"; import testPageFormulaImage from "../../../../assets/images/test-page-formula.svg"; -export default function Page3({ list, page }) { - const height = window.innerHeight; - const [top, setTop] = useState(window.innerHeight); - const [translateX, setTranslateX] = useState(null); - - useEffect(() => { - setTop(scroll.homeScrollHandler(page)); - setTranslateX( - scroll.linearFormula( - window.scrollY > 7 * height ? 7 * height : window.scrollY, - 0, - 100, - 6.3 * height, - 7 * height - ) - ); - window.addEventListener("scroll", (e) => { - const scrollY = window.scrollY; - if (scrollY <= 6.3 * height) { - setTop(scroll.homeScrollHandler(page)); - } - if (scrollY > 6.3 && scrollY < 7 * height) { - translateXHandler(window.scrollY); - } - }); - }, []); - - const translateXHandler = useCallback( - (scrollY) => { - if (scrollY < 6.3 * height) { - setTranslateX(() => 0); - } else if (scrollY >= 6.3 * height && scrollY <= 7 * height) { - setTranslateX(() => - scroll.linearFormula(window.scrollY, 0, 100, 6.3 * height, 7 * height) - ); - } else { - setTranslateX(() => 100); - } - }, - [translateX] - ); +function Page3({ top, translateY }) { return (
0 ? "opacity-0" : "opacity-100", + top > 50 ? "opacity-0" : "opacity-100", ], " " )} @@ -77,7 +37,7 @@ export default function Page3({ list, page }) { />
); } + +const mapStateToProps = (state) => ({ + top : state.scrollAction.page3TopPosition, + translateY : state.scrollAction.page3TestTranslateY +}) + +export default connect(mapStateToProps, {})(Page3); \ No newline at end of file diff --git a/src/views/Home/Landscape/Page4/index.js b/src/views/Home/Landscape/Page4/index.js index ff5da84..77f2a01 100644 --- a/src/views/Home/Landscape/Page4/index.js +++ b/src/views/Home/Landscape/Page4/index.js @@ -1,27 +1,17 @@ -import React, { useState, useEffect } from "react"; +import {connect} from 'react-redux'; import _ from "lodash"; import scroll from "../../../../utils/scroll"; import bgImage from "../../../../assets/images/page5-bg.svg"; import bazarImage from "../../../../assets/images/bazar.svg"; import appStoreImage from "../../../../assets/images/app-store.svg"; -export default function Page4({ list, page }) { - const [top, setTop] = useState(window.innerHeight); - - useEffect(() => { - window.addEventListener("scroll", (e) => { - if(window.scrollY > 7 * window.innerHeight) { - setTop(() => scroll.homeScrollHandler(page)); - } - }); - }, []); - +function Page4({ top }) { return (
= window.innerHeight -50 ? "opacity-0 pointer-events-none" : "opacity-100", ], " " )} @@ -61,3 +51,9 @@ export default function Page4({ list, page }) {
); } + +const mapStateToProps = (state) => ({ + top : state.scrollAction.page4TopPosition +}) + +export default connect(mapStateToProps, {})(Page4) \ No newline at end of file diff --git a/src/views/Home/Landscape/Test/index.js b/src/views/Home/Landscape/Test/index.js index f01c854..e845822 100644 --- a/src/views/Home/Landscape/Test/index.js +++ b/src/views/Home/Landscape/Test/index.js @@ -1,50 +1,11 @@ import React, { useEffect, useState, useCallback } from "react"; +import {connect} from 'react-redux'; import _ from "lodash"; import timerIcon from "../../../../assets/icons/timer.svg"; import QuestionBox from "./Question"; import scroll from "../../../../utils/scroll"; -export default function Test({ title, duration, questions }) { - const [translateY, setTranslateY] = useState(0); - const [testPosition, setTestPosition] = useState(null); - useEffect(() => { - setTranslateY(() => - scroll.linearFormula( - window.scrollY > 5 * window.innerHeight - ? 5 * window.innerHeight - : window.scrollY, - 0, - -101, - 4.5 * window.innerHeight, - 5 * window.innerHeight - ) - ); - window.addEventListener("scroll", () => { - testTransformHandler(window.scrollY); - if (window.scrollY > 1000) { - localStorage.setItem( - "testRect", - JSON.stringify( - document.getElementById("test").getBoundingClientRect() - ) - ); - } - }); - }, []); - - const testTransformHandler = useCallback((scrollY) => { - const height = window.innerHeight; - if (scrollY <= 4.5 * height) { - setTranslateY(() => 0); - setTestPosition(() => null); - } else if (scrollY > 4.5 * height && scrollY < 5 * height) { - setTranslateY(() => - scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height) - ); - setTestPosition(() => null); - } - },[testPosition, translateY]); - +function Test({ title, duration, questions, translateY }) { return (
e.stopPropagation()} @@ -53,11 +14,6 @@ export default function Test({ title, duration, questions }) { style={{ minHeight: window.innerHeight - 180, transform: `translateY(${translateY}%)`, - position: testPosition ? "fixed" : "static", - left: testPosition?.left ? testPosition?.left : "auto", - top: testPosition?.top ? testPosition?.top : "auto", - width: testPosition?.width ? testPosition?.width : "auto", - height: testPosition?.height ? testPosition?.height : "auto", }} >
({ + translateY: state.scrollAction.testTranslateY, +}) + +export default connect(mapStateToProps, {})(Test); + Test.defaultProps = { title: "آزمون شیمی پایه دوازدهم متوسطه", duration: "48:29", @@ -106,3 +68,4 @@ Test.defaultProps = { }, ], }; + diff --git a/src/views/Home/Landscape/VideoTube/index.js b/src/views/Home/Landscape/VideoTube/index.js index 3d4bb49..e7e104b 100644 --- a/src/views/Home/Landscape/VideoTube/index.js +++ b/src/views/Home/Landscape/VideoTube/index.js @@ -16,37 +16,21 @@ import { book, publicApi } from "../../../../redux/actions"; // import Loader from "../../components/Loader"; function VodTube({ + top, autoPlay, page, selectedVideo, info, - // bookSection, - // loading, getInfo, - // categories, - // setVideoActive, - // allBooks, theme, }) { - const [top, setTop] = useState(window.innerHeight); const videoListTag = useRef(null); useEffect(() => { - window.addEventListener("scroll", (e) => { - setTop(scroll.homeScrollHandler(page)); - }); - // localStorage.setItem("scroll-list", "on"); getInfo({ bookId: 8, }); }, []); - // useEffect(() => { - // if (allBooks && localStorage.getItem("category")) { - // const cat = localStorage.getItem("category")?.split(","); - // bookSection({ bookId: cat[0], categoryId: cat[1] }); - // } - // }, [allBooks]); - const light = theme === "light"; return (
0 ? "opacity-0 z-0" : "opacity-100 z-10", + top > 10 ? "opacity-0 z-0" : "opacity-100 z-10", ], " " )} @@ -181,6 +165,7 @@ function VodTube({ export default connect( (state) => ({ + top : state.scrollAction.videoTubeTopPosition, selectedVideo: state.publicApi.selectedVideo, info: state.publicApi?.bookInfo, loading: state.publicApi.loading, diff --git a/src/views/Home/Landscape/index.js b/src/views/Home/Landscape/index.js index 8f4557a..c32401f 100644 --- a/src/views/Home/Landscape/index.js +++ b/src/views/Home/Landscape/index.js @@ -1,24 +1,42 @@ import React, { useEffect, useState } from "react"; +import { scrollAction } from "../../../redux/actions"; +import { connect } from "react-redux"; import Page1 from "./Page1"; import Page2 from "./Page2"; import Page3 from "./Page3"; import Page4 from "./Page4"; -import Dots from '../../../components/Dots'; +import Dots from "../../../components/Dots"; import VideoTube from "./VideoTube"; -export default function Home() { - const [autoPlay, setAutoPlay] = useState(false); +function Home({ + floatMouseToggle, + handlePage1TopPosition, + handlePage2TopPosition, + handlePage2RotateX, + handlePage2BoxPosition, + handlePage2MobilePosition, + handlePage2VideoPosition, + handlePage2VideoTopPosition, + handlePage2MobileUnit, + handleVideoTubeTopPosition, + handleTestTranslateY, + handlePage3TopPosition, + handlePage3TestTranslateY, + handlePage4TopPosition, +}) { + const height = window.innerHeight; + const [mouseFlag, setMouseFlag] = useState(true); + // initialState + useEffect(() => { window.addEventListener("scroll", () => { - if (window.scrollY > 3 * window.innerHeight) { - setAutoPlay(() => true); - } else { - setAutoPlay(() => false); - } + const scrollY = window.scrollY; + localStorage.setItem("prevScroll", scrollY); if ( !JSON.parse(localStorage.getItem("joiRect")) && - window.scrollY > 1000 + window.scrollY > 1000 && + window.scrollY < 2000 ) { localStorage.setItem( "joiRect", @@ -27,19 +45,124 @@ export default function Home() { ) ); } + // Dotes + if (scrollY < 1.5 * height) { + if (scrollY > height) { + floatMouseToggle(false); + } else { + floatMouseToggle(true); + } + } + + // Page_1 + if (scrollY >= 0 && scrollY <= height) { + handlePage1TopPosition(); + } + // Page_2 + if (scrollY >= 0 && scrollY <= height) { + handlePage2TopPosition(); + } + if (scrollY >= 0 && scrollY <= height) { + handlePage2RotateX(window.scrollY); + } + if (scrollY >= height && scrollY <= 2 * height) { + handlePage2BoxPosition({ + scrollY, + translateX: { + pos1: -5, + pos2: 32, + }, + translateY: { + pos1: -5, + pos2: 10, + }, + rotate: { + pos1: 5, + pos2: 0, + }, + start: height, + end: 2 * height, + }); + } + if (scrollY > 2.5 * height && scrollY <= 3 * height) { + handlePage2BoxPosition({ + scrollY, + translateX: { + pos1: 32, + pos2: 32, + }, + translateY: { + pos1: 10, + pos2: -30, + }, + rotate: { + pos1: 0, + pos2: 0, + }, + start: 2.5 * height, + end: 3 * height, + }); + } + if (scrollY > 2 * height && scrollY <= 2.5 * height) { + handlePage2MobilePosition(); + } + if (scrollY > 2.8 * height && scrollY <= 3 * height) { + handlePage2VideoTopPosition(); + } + if (scrollY > 3.5 * height && scrollY <= 4 * height) { + handlePage2VideoPosition(); + } + if (scrollY > 2 * height && scrollY < 3.5 * height) { + handlePage2MobileUnit(); + } + // Page_3 + if (scrollY > 3.5 * height && scrollY < 4 * height) { + handleVideoTubeTopPosition(); + } + // Test + if (scrollY >= 4.5 * height && scrollY <= 5 * height) { + handleTestTranslateY(); + } + if(scrollY > 5 * height && scrollY <= 6 * height){ + handlePage3TopPosition(); + } + if(scrollY >= 6.3 * height && scrollY <= 7 * height){ + handlePage3TestTranslateY(); + } + if(scrollY >= 7.3 * height && scrollY <= 8.3 * height){ + handlePage4TopPosition(); + } }); }, []); return (
console.log(1)} > - + {/* */} - - + +
); } + +export default connect(() => ({}), { + handlePage1TopPosition: scrollAction.handlePage1TopPosition, + handlePage2TopPosition: scrollAction.handlePage2TopPosition, + handlePage2RotateX: scrollAction.handlePage2RotateX, + handlePage2BoxPosition: scrollAction.handlePage2BoxPosition, + handlePage2MobilePosition: scrollAction.handlePage2MobilePosition, + handlePage2VideoPosition: scrollAction.handlePage2VideoPosition, + handlePage2VideoTopPosition: scrollAction.handlePage2VideoTopPosition, + handlePage2MobileUnit: scrollAction.handlePage2MobileUnit, + handleVideoTubeTopPosition: scrollAction.handleVideoTubeTopPosition, + handleTestTranslateY: scrollAction.handleTestTranslateY, + floatMouseToggle: scrollAction.floatMouseToggle, + handlePage3TopPosition: scrollAction.handlePage3TopPosition, + handlePage3TestTranslateY: scrollAction.handlePage3TestTranslateY, + handlePage4TopPosition: scrollAction.handlePage4TopPosition, +})(Home);