From dd705d007136f56cd5970ec74dc37da5e62cd99d Mon Sep 17 00:00:00 2001 From: yonghyon Date: Fri, 31 May 2024 15:58:08 +0900 Subject: [PATCH] vertical pagenator --- com.twin.app.shoptime/.env.local | 3 + com.twin.app.shoptime/src/App/App.js | 9 +- .../src/actions/commonActions.js | 2 +- .../TVerticalPagenator/TVerticalPagenator.jsx | 170 +++++++++ .../TVerticalPagenator.module.less | 8 + .../TVerticalPagenator/package.json | 3 + com.twin.app.shoptime/src/lunaSend/account.js | 71 ++-- com.twin.app.shoptime/src/lunaSend/common.js | 14 +- .../src/utils/helperMethods.js | 14 +- .../views/HomePanel/BestSeller/BestSeller.jsx | 20 +- .../views/HomePanel/HomeBanner/HomeBanner.jsx | 6 +- .../views/HomePanel/HomeOnSale/HomeOnSale.jsx | 20 +- .../src/views/HomePanel/HomePanel.jsx | 332 +++++++++--------- .../src/views/HomePanel/HomePanel.module.less | 9 +- .../HomePanel/PopularShow/PopularShow.jsx | 19 +- .../SubCategory/CategoryNav/CategoryNav.jsx | 12 +- .../HomePanel/SubCategory/SubCategory.jsx | 20 +- 17 files changed, 428 insertions(+), 304 deletions(-) create mode 100644 com.twin.app.shoptime/.env.local create mode 100644 com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.jsx create mode 100644 com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.module.less create mode 100644 com.twin.app.shoptime/src/components/TVerticalPagenator/package.json diff --git a/com.twin.app.shoptime/.env.local b/com.twin.app.shoptime/.env.local new file mode 100644 index 00000000..9da66686 --- /dev/null +++ b/com.twin.app.shoptime/.env.local @@ -0,0 +1,3 @@ +ES5='true' +DISABLE_NEW_JSX_TRANSFORM='true' +REACT_APP_MODE=DEBUG \ No newline at end of file diff --git a/com.twin.app.shoptime/src/App/App.js b/com.twin.app.shoptime/src/App/App.js index 39083a3b..b7fc9c32 100644 --- a/com.twin.app.shoptime/src/App/App.js +++ b/com.twin.app.shoptime/src/App/App.js @@ -201,11 +201,14 @@ function AppBase(props) { useEffect(() => { const keyDownEvent = (event) => { dispatch(changeAppStatus({ cursorVisible: false })); + Spotlight.setPointerMode(false); }; const mouseMoveEvent = (event) => { dispatch(changeAppStatus({ cursorVisible: true })); + Spotlight.setPointerMode(true); hideCursor.current.start(() => { dispatch(changeAppStatus({ cursorVisible: false })); + Spotlight.setPointerMode(false); }); }; if (typeof window === "object" && window.PalmSystem) { @@ -222,9 +225,9 @@ function AppBase(props) { document.addEventListener("webOSRelaunch", handleRelaunchEvent); //local virtual cursorvisiblilty if (typeof window === "object" && !window.PalmSystem) { - document.addEventListener("keydown", keyDownEvent); - document.addEventListener("mousemove", mouseMoveEvent); - document.addEventListener("wheel", mouseMoveEvent); + document.addEventListener("keydown", keyDownEvent, true); + document.addEventListener("mousemove", mouseMoveEvent, true); + document.addEventListener("wheel", mouseMoveEvent, true); } return () => { document.removeEventListener("visibilitychange", visibilityChanged); diff --git a/com.twin.app.shoptime/src/actions/commonActions.js b/com.twin.app.shoptime/src/actions/commonActions.js index 34baf654..4aeb6f12 100644 --- a/com.twin.app.shoptime/src/actions/commonActions.js +++ b/com.twin.app.shoptime/src/actions/commonActions.js @@ -102,7 +102,7 @@ export const getHttpHeaderForServiceRequest = }; convertedRes["X-Device-Personalization"] = "Y"; - if (window.PalmSystem && window.PalmSystem.identifier) { + if (window.PalmSystem && window.PalmSystem.identifier && process.env.REACT_APP_MODE !== "DEBUG") { convertedRes["app_id"] = window.PalmSystem.identifier ?? appinfo.id; } else { convertedRes["app_id"] = appinfo.id; diff --git a/com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.jsx b/com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.jsx new file mode 100644 index 00000000..ec2f4a45 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.jsx @@ -0,0 +1,170 @@ +/** + * TVerticalPagenator + * + * @module TVerticalPagenator + */ + +import classNames from 'classnames'; +import React, {useState, useCallback, useEffect, useRef} from 'react'; +import css from './TVerticalPagenator.module.less'; +import TScroller from '../TScroller/TScroller'; +import { useSelector } from 'react-redux'; +import * as HelperMethods from "../../utils/helperMethods"; +import usePrevious from '../../hooks/usePrevious'; +import Spotlight from '@enact/spotlight'; + + +const TVerticalPagenator = ({ + className, + spotlightId, + defaultPageIndex=0, + children, + disabled, + pageSpotIds = [], + onPageChanged, + visible = "hidden", + scrollPositionRef, + cbChangePageRef, + scrollTop=false, + topMargin=0, + ...rest +}) => { + const [pageIndex, setPageIndex] = useState(Number(defaultPageIndex) !== NaN ? Number(defaultPageIndex): 0); + const pagenatorRef = useRef(null); + const pageIndexRef = usePrevious(pageIndex); + const isScrolling = useRef(false); + const scrollTopPositionRef = useRef(0); + const scrollTo = useRef(null); + const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible); + const cursorVisibleRef = usePrevious(cursorVisible); + + useEffect(() => { + if(spotlightId){ + pagenatorRef.current = document.querySelector(`[data-spotlight-id="${spotlightId}"]`); + } + }, []); + + const onFocusItem = useCallback((ev)=>{ + if(!pagenatorRef.current){ + return; + } + ev.stopPropagation(); + ev.preventDefault(); + if (cursorVisibleRef.current) { + return; + } + pageSpotIds.forEach((element, index) => { + const pageNode = document.querySelector(`[data-spotlight-id="${element}"]`); + if(pageNode.contains(ev.target)) + setPageIndex(index); + } + ); + },[pageSpotIds]); + + const handleWheel = useCallback((ev) => { + if(pagenatorRef.current.contains(ev.target)){ + ev.stopPropagation(); + if(disabled){ + return; + } + let newIndex = ev.deltaY > 0 ? pageIndexRef.current+1: pageIndexRef.current -1; + newIndex = Math.max(newIndex, 0); + newIndex = Math.min(newIndex, pageSpotIds.length-1); + setPageIndex(newIndex); + } + }, [disabled, pageSpotIds]); + + const getScrollTo = useCallback((cbScrollTo) => { + scrollTo.current = cbScrollTo; + },[]); + + useEffect(() => { + if (scrollTop && scrollTo.current) { + scrollTo.current({ position: { y: 0, x: 0 }, animate: true }); + setPageIndex(0); + } + }, [scrollTop]); + + useEffect(() => { + document.addEventListener("wheel", handleWheel, true); + return () => { + document.removeEventListener('wheel', handleWheel); + }; + }, [handleWheel]); + + useEffect(() => { + return () => { + scrollTo.current = null; + }; + }, []); + + const moveToPage = useCallback((index=0, animate=true)=>{ + if(pageSpotIds[index]){ + const currentNode = document.querySelector( + `[data-spotlight-id="${pageSpotIds[index]}"]` + ); + if(currentNode){ + const distance = Math.round(currentNode.offsetTop - HelperMethods.scaleH(topMargin)); + scrollTo.current && scrollTo.current({ position:{x:0,y: distance >=0 ? distance:0}, animate: animate, focus: true }); + Spotlight.focus(currentNode); + } + } + if(onPageChanged){ + onPageChanged(index); + } + },[topMargin, pageSpotIds, onPageChanged]); + + useEffect(() => { + moveToPage(pageIndex, true); + }, [pageIndex]); + + useEffect(() => { + if(cbChangePageRef){ + cbChangePageRef.current = (index)=>{ + moveToPage(index, false); + setPageIndex(index); + }; + } + }, [cbChangePageRef, moveToPage]); + + const _onScrollStart = useCallback(() => { + isScrolling.current = true; + }, []); + + const _onScrollStop = useCallback(() => { + isScrolling.current = false; + }, []); + + const _onScroll = useCallback((ev) => { + isScrolling.current = true; + scrollTopPositionRef.current = ev.scrollTop; + if(scrollPositionRef){ + scrollPositionRef.current = ev.scrollTop; + } + }, [scrollPositionRef]); + if(!spotlightId){ + console.warn('TVerticalPagenator has no spotlightId'); + return null; + } + return ( + + {children} + + ); +}; + +export default TVerticalPagenator; diff --git a/com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.module.less b/com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.module.less new file mode 100644 index 00000000..b3876661 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TVerticalPagenator/TVerticalPagenator.module.less @@ -0,0 +1,8 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + +.verticalPagenator { + // height: ~"calc(100% - @{fitTv-tHeader-height})"; + width: 100%; + position: relative; +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/components/TVerticalPagenator/package.json b/com.twin.app.shoptime/src/components/TVerticalPagenator/package.json new file mode 100644 index 00000000..842fb3e6 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TVerticalPagenator/package.json @@ -0,0 +1,3 @@ +{ + "main": "TVerticalPagenator.jsx" +} diff --git a/com.twin.app.shoptime/src/lunaSend/account.js b/com.twin.app.shoptime/src/lunaSend/account.js index a6776544..5eb66460 100644 --- a/com.twin.app.shoptime/src/lunaSend/account.js +++ b/com.twin.app.shoptime/src/lunaSend/account.js @@ -6,21 +6,16 @@ export const getSystemInfo = ( parameters, { onSuccess, onFailure, onComplete } ) => { - if (typeof window === "object" && window.PalmSystem) { - if (process.env.REACT_APP_MODE === "DEBUG") { - console.log("LUNA SEND getSystemInfo"); - return "Some Hard Coded Mock Data"; - } else { - return new LS2Request().send({ - service: "luna://com.webos.service.tv.systemproperty", - method: "getSystemInfo", - subscribe: false, - parameters: parameters, - onSuccess, - onFailure, - onComplete, - }); - } + if (typeof window === "object" && window.PalmSystem && process.env.REACT_APP_MODE !== "DEBUG") { + return new LS2Request().send({ + service: "luna://com.webos.service.tv.systemproperty", + method: "getSystemInfo", + subscribe: false, + parameters: parameters, + onSuccess, + onFailure, + onComplete, + }); } else { onSuccess({ returnValue: true, sdkVersion: "local" }); onComplete(); @@ -30,21 +25,16 @@ export const getDeviceId = ( parameters, { onSuccess, onFailure, onComplete } ) => { - if (typeof window === "object" && window.PalmSystem) { - if (process.env.REACT_APP_MODE === "DEBUG") { - console.log("LUNA SEND getDeviceId"); - return "Some Hard Coded Mock Data"; - } else { - return new LS2Request().send({ - service: "luna://com.webos.service.sm", - method: "deviceid/getIDs", - subscribe: false, - parameters: parameters, - onSuccess, - onFailure, - onComplete, - }); - } + if (typeof window === "object" && window.PalmSystem && process.env.REACT_APP_MODE !== "DEBUG") { + return new LS2Request().send({ + service: "luna://com.webos.service.sm", + method: "deviceid/getIDs", + subscribe: false, + parameters: parameters, + onSuccess, + onFailure, + onComplete, + }); } else { onSuccess({ returnValue: true, @@ -57,11 +47,7 @@ export const getLoginUserData = ( parameters, { onSuccess, onFailure, onComplete } ) => { - if (typeof window === "object" && window.PalmSystem) { - if (process.env.REACT_APP_MODE === "DEBUG") { - console.log("getLoginUserData"); - return "Mock Data"; - } else { + if (typeof window === "object" && window.PalmSystem && process.env.REACT_APP_MODE !== "DEBUG") { return new LS2Request().send({ service: "luna://com.webos.service.accountmanager", method: "getLoginID", @@ -71,7 +57,6 @@ export const getLoginUserData = ( onFailure, onComplete, }); - } } else { onSuccess({ subscribed: false, @@ -119,11 +104,7 @@ export const launchMembershipAppNew = ( webOSVersion, { onSuccess, onFailure, onComplete } ) => { - if (typeof window === "object" && window.PalmSystem) { - if (process.env.REACT_APP_MODE === "DEBUG") { - console.log("LUNA SEND launchMembershipAppNew"); - return "Some Hard Coded Mock Data"; - } else { + if (typeof window === "object" && window.PalmSystem && process.env.REACT_APP_MODE !== "DEBUG") { return new LS2Request().send({ service: "luna://com.webos.applicationManager", method: "launchDefaultApp", @@ -139,7 +120,6 @@ export const launchMembershipAppNew = ( onFailure, onComplete, }); - } } }; @@ -147,11 +127,7 @@ export const launchMembershipApp = ( webOSVersion, { onSuccess, onFailure, onComplete } ) => { - if (typeof window === "object" && window.PalmSystem) { - if (process.env.REACT_APP_MODE === "DEBUG") { - console.log("LUNA SEND launchMembershipApp"); - return "Some Hard Coded Mock Data"; - } else { + if (typeof window === "object" && window.PalmSystem && process.env.REACT_APP_MODE !== "DEBUG") { return new LS2Request().send({ service: "luna://com.webos.applicationManager", method: "launch", @@ -167,6 +143,5 @@ export const launchMembershipApp = ( onFailure, onComplete, }); - } } }; diff --git a/com.twin.app.shoptime/src/lunaSend/common.js b/com.twin.app.shoptime/src/lunaSend/common.js index 4efa2f59..f1a4ef65 100644 --- a/com.twin.app.shoptime/src/lunaSend/common.js +++ b/com.twin.app.shoptime/src/lunaSend/common.js @@ -45,11 +45,7 @@ export const getHttpHeaderForServiceRequest = ({ onFailure, onComplete, }) => { - if (typeof window === "object" && window.PalmSystem) { - if (process.env.REACT_APP_MODE === "DEBUG") { - console.log("LUNA SEND getHttpHeaderForServiceRequest"); - return "Some Hard Coded Mock Data"; - } else { + if (typeof window === "object" && window.PalmSystem && process.env.REACT_APP_MODE !== "DEBUG") { if (httpHeaderHandler) { httpHeaderHandler.cancel(); } @@ -63,7 +59,6 @@ export const getHttpHeaderForServiceRequest = ({ onComplete, }); return httpHeaderHandler; - } } else { onSuccess({ HOST: "US.nextlgsdp.com", @@ -92,11 +87,7 @@ export const getSystemSettings = ( parameters, { onSuccess, onFailure, onComplete } ) => { - if (typeof window === "object" && window.PalmSystem) { - if (process.env.REACT_APP_MODE === "DEBUG") { - console.log("LUNA SEND getSystemSettings"); - return "Some Hard Coded Mock Data"; - } else { + if (typeof window === "object" && window.PalmSystem && process.env.REACT_APP_MODE !== "DEBUG") { return new LS2Request().send({ service: "luna://com.webos.settingsservice", method: "getSystemSettings", @@ -106,7 +97,6 @@ export const getSystemSettings = ( onFailure, onComplete, }); - } } else if (typeof window === "object") { const language = typeof window.navigator === "object" diff --git a/com.twin.app.shoptime/src/utils/helperMethods.js b/com.twin.app.shoptime/src/utils/helperMethods.js index 38550ab8..df716869 100644 --- a/com.twin.app.shoptime/src/utils/helperMethods.js +++ b/com.twin.app.shoptime/src/utils/helperMethods.js @@ -6,7 +6,7 @@ import stringReSourceRu from "../../resources/ru/strings.json"; import { Job } from "@enact/core/util"; let _boundingRectCache = {}; -const BOUNDING_RECT_IGNORE_TIME = 100; +const BOUNDING_RECT_IGNORE_TIME = 10; const generateUUID = () => { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => { @@ -320,3 +320,15 @@ export const isChildFullyShowing = (parentNode, childNode) => { return false; }; + +export const getRectDiff = (element1, element2) => { + const element1Rect = getBoundingClientRect(element1); + const element2Rect = getBoundingClientRect(element2); + + return ({ + right: element1Rect.right - element2Rect.right, + left: element1Rect.left - element2Rect.left, + top: element1Rect.top - element2Rect.top, + bottom: element1Rect.bottom - element2Rect.bottom, + }); +}; \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 10ef6cfa..81fdf36e 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -12,8 +12,7 @@ import TItemCard from "../../../components/TItemCard/TItemCard"; import TScroller from "../../../components/TScroller/TScroller"; import useScrollReset from "../../../hooks/useScrollReset"; import useScrollTo from "../../../hooks/useScrollTo"; -import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; -import { LOG_MENU, panel_names } from "../../../utils/Config"; +import { panel_names } from "../../../utils/Config"; import { $L, scaleW } from "../../../utils/helperMethods"; import css from "./BestSeller.module.less"; @@ -23,13 +22,12 @@ const Container = SpotlightContainerDecorator( "div" ); -const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => { +const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => { const { getScrollTo, scrollLeft } = useScrollTo(); const { handleScrollReset, handleStopScrolling } = useScrollReset( scrollLeft, true ); - const { scrollTopByDistance } = useScrollTopByDistance(); const dispatch = useDispatch(); @@ -90,20 +88,12 @@ const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => { if (cursorVisible) { return; } - - scrollTopByDistance( - `[data-marker="scroll-marker"]`, - `[data-title-index="homeBestSellerTitle"]`, - scrollTopBody, - 36 - ); }, [ cursorVisible, _handleItemFocus, handleScrollReset, - scrollTopBody, - scrollTopByDistance, + scrollTopBody ] ); @@ -118,12 +108,12 @@ const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => { const _handleItemFocus = useCallback(() => { if (handleItemFocus) { - handleItemFocus(LOG_MENU.HOME_BEST_SELLER); + handleItemFocus(); } }, [handleItemFocus]); return ( - + { if (handleItemFocus) { - handleItemFocus(LOG_MENU.HOME_TOP); + handleItemFocus(); } }, [handleItemFocus]); return ( - +
{ - const { scrollTopByDistance } = useScrollTopByDistance(); +const HomeOnSale = ({ order, scrollTopBody, handleItemFocus,spotlightId, ...rest }) => { + const { getScrollTo, scrollLeft } = useScrollTo(); const { handleScrollReset, handleStopScrolling } = useScrollReset( scrollLeft, @@ -59,13 +57,6 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus, ...rest }) => { if (cursorVisible) { return; } - - scrollTopByDistance( - `[data-marker="scroll-marker"]`, - `[data-title-index="homeOnSale"]`, - scrollTopBody, - 36 - ); }, [ cursorVisible, @@ -73,8 +64,7 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus, ...rest }) => { handleScrollReset, handleScrollRight, homeOnSaleInfos?.length, - scrollTopBody, - scrollTopByDistance, + scrollTopBody ] ); @@ -89,12 +79,12 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus, ...rest }) => { const _handleItemFocus = useCallback(() => { if (handleItemFocus) { - handleItemFocus(LOG_MENU.HOME_ON_SALE); + handleItemFocus(); } }, [handleItemFocus]); return ( - +
- array.find((obj) => obj["shptmApphmDspyOptCd"] === value)?.expsOrd; - -const hasTemplateCodeWithValue = (array, value) => - Array.isArray(array) && - array.some( - (obj) => - Object.prototype.hasOwnProperty.call(obj, "shptmApphmDspyOptCd") && - obj["shptmApphmDspyOptCd"] === value - ); - export default function HomePanel({ isOnTop }) { const { sendLogGNB } = useLogService(); const dispatch = useDispatch(); - - const [selectTemplate, setSelectTemplate] = useState(null); - const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]); + const [pageIndex, setPageIndex] = useState(0); + const pageIndexRef = usePrevious(pageIndex); + const spotYoffsetRef = useRef(0); + const cbChangePageRef = useRef(null); const [btnActive, setBtnActive] = useState(true); const [arrowBottom, setArrowBottom] = useState(true); + useDebugKey({ isLandingPage: true }); + const [firstSpot, setFirstSpot] = useState(false); const [firstLgCatCd, setFirstLgCatCd] = useState( @@ -102,17 +95,28 @@ export default function HomePanel({ isOnTop }) { (state) => state.common.appStatus.webOSVersion ); - const arrowRef = useRef(); - const scrollTimerRef = useRef(); - const topRef = useRef(); - const spotYoffsetRef = useRef(null); + const selectTemplate = useMemo(()=>{ + if (homeTopDisplayInfos) { + return homeTopDisplayInfos[0].shptmTmplCd; + } + return null; + },[homeTopDisplayInfos]); - const { - getScrollTo: getScrollToBody, - scrollTop: scrollTopBody, - scrollToRef, - } = useScrollTo(); - useDebugKey({ isLandingPage: true }); + const sortedHomeLayoutInfo = useMemo(()=>{ + if(selectTemplate && homeLayoutInfo && homeLayoutInfo.homeLayoutInfo){ + const sorted = [...homeLayoutInfo.homeLayoutInfo].sort((x, y) => x.expsOrd - y.expsOrd); + return sorted; + } + return []; + },[homeLayoutInfo, selectTemplate]); + + const pageSpotIds = useMemo(()=>{ + const spots = []; + for(let i=0;i { if (!isOnTop) { @@ -125,13 +129,6 @@ export default function HomePanel({ isOnTop }) { dispatch(setShowPopup(ACTIVE_POPUP.exitPopup)); }, [isOnTop, isGnbOpened, dispatch]); - const handleItemFocus = useCallback( - (nowMenu) => { - sendLogGNB(nowMenu); - }, - [sendLogGNB] - ); - const onExit = useCallback(() => { dispatch(setExitApp()); }, [dispatch]); @@ -140,33 +137,6 @@ export default function HomePanel({ isOnTop }) { dispatch(setHidePopup()); }, [dispatch]); - const _onScroll = useCallback(() => { - if (scrollTimerRef.current) { - clearTimeout(scrollTimerRef.current); - } - scrollTimerRef.current = setTimeout(() => { - const topElement = topRef.current; - - if (!topElement) return; - - const topRect = topElement.getBoundingClientRect(); - const windowHeight = window.innerHeight; - const topRectRelativeToViewport = - topRect.top < windowHeight ? topRect.top : 0; - const threshold = windowHeight * 0.1; // 화면 높이의 10% - - if (topRectRelativeToViewport > threshold) { - setArrowBottom(false); - } else { - setArrowBottom(true); - } - }, 0); - }, []); - - const _onScrollStop = (e) => { - spotYoffsetRef.current = e.scrollTop; - }; - const handleTopButtonClick = () => { let spotId = ""; @@ -174,7 +144,9 @@ export default function HomePanel({ isOnTop }) { if (Spotlight.focus("banner01")) { spotId = "banner01"; } - scrollTopBody(); + if(cbChangePageRef.current){ + cbChangePageRef.current(0); + } return Spotlight.focus(spotId); } @@ -182,7 +154,9 @@ export default function HomePanel({ isOnTop }) { if (Spotlight.focus("banner03")) { spotId = "banner03"; } - scrollTopBody(); + if(cbChangePageRef.current){ + cbChangePageRef.current(0); + } return Spotlight.focus(spotId); } }; @@ -236,13 +210,15 @@ export default function HomePanel({ isOnTop }) { let timer; if (homeSpotlight) { - const { y } = homeSpotlight; - - scrollTopBody({ y, animate: false }); + if(cbChangePageRef.current){ + cbChangePageRef.current(homeSpotlight.pageIndex); + } timer = setTimeout(() => { Spotlight.resume(); - scrollTopBody({ y, animate: false }); //call again after some seconds + if(cbChangePageRef.current){ //call again after some seconds + cbChangePageRef.current(homeSpotlight.pageIndex); + } if (homeSpotlight.currentCatCd) { Spotlight.focus("spotlightId-" + homeSpotlight.currentCatCd); @@ -284,7 +260,7 @@ export default function HomePanel({ isOnTop }) { currentSpot: currentSpot, currentCatCd: targetSpotlightCatcd, currentCateName: targetSpotlightCateNm, - y: spotYoffsetRef.current, + pageIndex: pageIndexRef.current, }, }) ); @@ -297,14 +273,121 @@ export default function HomePanel({ isOnTop }) { } }, [firstSpot]); + const doSendLogGNB = useCallback((index)=>{ + let nowMenu = null; + if(pageSpotIds[index]){ + switch(pageSpotIds[index]){ + case TEMPLATE_CODE_CONF.TOP: + nowMenu=LOG_MENU.HOME_TOP; + break; + case TEMPLATE_CODE_CONF.CATEGORY_ITEM: + nowMenu=LOG_MENU.HOME_CATEGORY; + break; + case TEMPLATE_CODE_CONF.ON_SALE: + nowMenu=LOG_MENU.HOME_ON_SALE; + break; + case TEMPLATE_CODE_CONF.POPULAR_SHOW: + nowMenu=LOG_MENU.HOME_POPULAR_SHOWS; + break; + case TEMPLATE_CODE_CONF.BEST_SELLER: + nowMenu=LOG_MENU.HOME_BEST_SELLER; + break; + } + } + if(nowMenu){ + sendLogGNB(nowMenu); + } + },[pageSpotIds, sendLogGNB]); + + const handleItemFocus = useCallback((index)=> () => { + doSendLogGNB(index); + }, + [doSendLogGNB] + ); useEffect(() => { - if (homeTopDisplayInfos) { - setSelectTemplate(homeTopDisplayInfos[0].shptmTmplCd); + doSendLogGNB(pageIndex); + }, [pageIndex]); + + const renderPageItem = useCallback(()=>{ + return ( + <> + { + sortedHomeLayoutInfo.map((el, idx)=>{ + switch(el.shptmApphmDspyOptCd){ + case TEMPLATE_CODE_CONF.TOP:{ + return ( + + ) + } + case TEMPLATE_CODE_CONF.CATEGORY_ITEM:{ + return ( + + ) + } + case TEMPLATE_CODE_CONF.ON_SALE:{ + return ( + + ) + } + case TEMPLATE_CODE_CONF.POPULAR_SHOW:{ + return ( + + ) + } + case TEMPLATE_CODE_CONF.BEST_SELLER:{ + return ( + + ) + } + } + }) + } + + + ); + },[sortedHomeLayoutInfo, selectTemplate, cateCd,cateNm, handleItemFocus, handleTopButtonClick, btnActive]); + + const onPageChanged = useCallback((index) => { + if(pageSpotIds.length <=index+1){ + setArrowBottom(false); + }else{ + setArrowBottom(true); } - if (homeLayoutInfo) { - setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo); - } - }, [homeTopDisplayInfos, homeLayoutInfo]); + setPageIndex(index); + }, [pageSpotIds]); return ( <> @@ -313,95 +396,20 @@ export default function HomePanel({ isOnTop }) { -
-
- {hasTemplateCodeWithValue( - homeLayoutInfoDetail, - TEMPLATE_CODE_CONF.TOP - ) && - selectTemplate && ( - - )} - {hasTemplateCodeWithValue( - homeLayoutInfoDetail, - TEMPLATE_CODE_CONF.CATEGORY_ITEM - ) && ( - - )} - {hasTemplateCodeWithValue( - homeLayoutInfoDetail, - TEMPLATE_CODE_CONF.ON_SALE - ) && ( - - )} - {hasTemplateCodeWithValue( - homeLayoutInfoDetail, - TEMPLATE_CODE_CONF.POPULAR_SHOW - ) && ( - - )} - {hasTemplateCodeWithValue( - homeLayoutInfoDetail, - TEMPLATE_CODE_CONF.BEST_SELLER - ) && ( - - )} -
-
- -
+ + {renderPageItem()} + {arrowBottom && ( diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less index 2e9a03bd..b38c89ca 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less @@ -6,15 +6,14 @@ } .tBody { height: @globalHeight; - .orderableFlexContainer { - display: flex; - flex-direction: column; - > div { + .tVerticalPagenator { + height: 100vh !important; + >div>div>div{ margin-bottom: 70px; } } .tButton { - margin-top: -10px; + margin-top: 60px; } } .arrow { diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index a5b2961d..22bdde1b 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -15,8 +15,7 @@ import TItemCard, { import TScroller from "../../../components/TScroller/TScroller"; import useScrollReset from "../../../hooks/useScrollReset"; import useScrollTo from "../../../hooks/useScrollTo"; -import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; -import { LOG_MENU, panel_names } from "../../../utils/Config"; +import { panel_names } from "../../../utils/Config"; import { $L, scaleW } from "../../../utils/helperMethods"; import css from "../PopularShow/PopularShow.module.less"; @@ -30,6 +29,7 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, + spotlightId, handleItemFocus, ...rest }) => { @@ -38,7 +38,6 @@ const PopularShow = ({ scrollLeft, true ); - const { scrollTopByDistance } = useScrollTopByDistance(); const dispatch = useDispatch(); @@ -101,20 +100,12 @@ const PopularShow = ({ if (cursorVisible) { return; } - - scrollTopByDistance( - `[data-marker="scroll-marker"]`, - `[data-title-index="homePopularShow"]`, - scrollTopBody, - 36 - ); }, [ cursorVisible, _handleItemFocus, handleScrollReset, - scrollTopBody, - scrollTopByDistance, + scrollTopBody ] ); @@ -129,12 +120,12 @@ const PopularShow = ({ const _handleItemFocus = useCallback(() => { if (handleItemFocus) { - handleItemFocus(LOG_MENU.HOME_POPULAR_SHOWS); + handleItemFocus(); } }, [handleItemFocus]); return ( - + state.common.appStatus); const { scrollLeft } = useScrollTo(); const { handleScrollReset } = useScrollReset(scrollLeft, true); - const { scrollTopByDistance } = useScrollTopByDistance(); const handleFocus = useCallback( (index) => () => { @@ -42,20 +40,12 @@ export default function CategoryNav({ if (cursorVisible) { return; } - - scrollTopByDistance( - `[data-marker="scroll-marker"]`, - `[data-title-index="subCategoryNav"]`, - scrollTopBody, - 36 - ); }, [ cursorVisible, handleItemFocus, handleScrollReset, - scrollTopBody, - scrollTopByDistance, + scrollTopBody ] ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index 026de056..3621b2ed 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -21,8 +21,7 @@ import TScroller from "../../../components/TScroller/TScroller"; import useLogService from "../../../hooks/useLogService"; import useScrollReset from "../../../hooks/useScrollReset"; import useScrollTo from "../../../hooks/useScrollTo"; -import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; -import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config"; +import { LOG_TP_NO, panel_names } from "../../../utils/Config"; import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav"; import css from "../../HomePanel/SubCategory/SubCategory.module.less"; @@ -50,13 +49,14 @@ const SubCategory = ({ scrollTopBody, catCd, cateNm, + spotlightId, handleItemFocus, }) => { const dispatch = useDispatch(); const { sendLogCuration } = useLogService(); - const { scrollTopByDistance } = useScrollTopByDistance(); + const { getScrollTo, scrollLeft } = useScrollTo(); @@ -208,20 +208,12 @@ const SubCategory = ({ if (cursorVisible) { return; } - - scrollTopByDistance( - `[data-marker="scroll-marker"]`, - `[data-title-index="subCategoryNav"]`, - scrollTopBody, - 36 - ); }, [ cursorVisible, _handleItemFocus, handleScrollReset, - scrollTopBody, - scrollTopByDistance, + scrollTopBody ] ); @@ -235,11 +227,11 @@ const SubCategory = ({ const _handleItemFocus = useCallback(() => { if (handleItemFocus) { - handleItemFocus(LOG_MENU.HOME_CATEGORY); + handleItemFocus(); } }, [handleItemFocus]); return ( - +