From 3269cca77eae6c9f5508c4a64a1405ed3d9007fb Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 14:29:43 +0700 Subject: add highligth button whatsapp --- src/core/components/layouts/BasicLayout.jsx | 38 ++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) (limited to 'src/core/components/layouts/BasicLayout.jsx') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index a4f3a856..62c74e3c 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -1,12 +1,13 @@ import dynamic from 'next/dynamic'; import Image from 'next/image'; import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { useProductContext } from '@/contexts/ProductContext'; import odooApi from '@/core/api/odooApi'; import whatsappUrl from '@/core/utils/whatsappUrl'; import Navbar from '../elements/Navbar/Navbar'; +import styles from './BasicLayout.module.css'; // Import modul CSS const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -19,10 +20,14 @@ const BasicLayout = ({ children }) => { const [templateWA, setTemplateWA] = useState(null); const [payloadWA, setPayloadWa] = useState(null); const [urlPath, setUrlPath] = useState(null); + const [highlight, setHighlight] = useState(false); + const [buttonPosition, setButtonPosition] = useState(null); const router = useRouter(); + const buttonRef = useRef(null); const { product } = useProductContext(); + useEffect(() => { if ( router.pathname === '/shop/product/[slug]' || @@ -39,6 +44,25 @@ const BasicLayout = ({ children }) => { } }, [product, router]); + useEffect(() => { + const handleMouseOut = (event) => { + const rect = buttonRef.current.getBoundingClientRect(); + console.log("rect",rect) + if (event.clientY <= 0) { + console.log("ini pindah") + setHighlight(true); + } else { + setHighlight(false); + } + }; + + window.addEventListener('mouseout', handleMouseOut); + + return () => { + window.removeEventListener('mouseout', handleMouseOut); + }; + }, []); + const recordActivity = async (pathname) => { const ONLY_ON_PATH = false; const recordedPath = []; @@ -63,12 +87,24 @@ const BasicLayout = ({ children }) => { {children} + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )}
Date: Fri, 9 Aug 2024 16:58:48 +0700 Subject: update higlight button whatsapp --- src/core/components/layouts/BasicLayout.jsx | 88 +++++++++++++++++------------ 1 file changed, 51 insertions(+), 37 deletions(-) (limited to 'src/core/components/layouts/BasicLayout.jsx') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 62c74e3c..99968ca0 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -7,7 +7,7 @@ import { useProductContext } from '@/contexts/ProductContext'; import odooApi from '@/core/api/odooApi'; import whatsappUrl from '@/core/utils/whatsappUrl'; import Navbar from '../elements/Navbar/Navbar'; -import styles from './BasicLayout.module.css'; // Import modul CSS +import styles from './BasicLayout.module.css'; // Import modul CSS jika perlu const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -22,6 +22,7 @@ const BasicLayout = ({ children }) => { const [urlPath, setUrlPath] = useState(null); const [highlight, setHighlight] = useState(false); const [buttonPosition, setButtonPosition] = useState(null); + const [wobble, setWobble] = useState(false); const router = useRouter(); const buttonRef = useRef(null); @@ -47,9 +48,8 @@ const BasicLayout = ({ children }) => { useEffect(() => { const handleMouseOut = (event) => { const rect = buttonRef.current.getBoundingClientRect(); - console.log("rect",rect) if (event.clientY <= 0) { - console.log("ini pindah") + setButtonPosition(rect) setHighlight(true); } else { setHighlight(false); @@ -63,6 +63,14 @@ const BasicLayout = ({ children }) => { }; }, []); + useEffect(() => { + if (highlight) { + // Set wobble animation after overlay highlight animation completes + const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed + return () => clearTimeout(timer); + } + }, [highlight]); + const recordActivity = async (pathname) => { const ONLY_ON_PATH = false; const recordedPath = []; @@ -84,44 +92,50 @@ const BasicLayout = ({ children }) => { return ( <> + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )} {children} - {highlight && buttonPosition && ( -
setHighlight(false)} - /> - )} -- cgit v1.2.3 From 4501271964f8084522967685e3752868779c5ca0 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 17:11:17 +0700 Subject: Revert " update higlight button whatsapp" This reverts commit b4b36c45de25305f43ee83441f13a75c48b07994. --- src/core/components/layouts/BasicLayout.jsx | 88 ++++++++++++----------------- 1 file changed, 37 insertions(+), 51 deletions(-) (limited to 'src/core/components/layouts/BasicLayout.jsx') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 99968ca0..62c74e3c 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -7,7 +7,7 @@ import { useProductContext } from '@/contexts/ProductContext'; import odooApi from '@/core/api/odooApi'; import whatsappUrl from '@/core/utils/whatsappUrl'; import Navbar from '../elements/Navbar/Navbar'; -import styles from './BasicLayout.module.css'; // Import modul CSS jika perlu +import styles from './BasicLayout.module.css'; // Import modul CSS const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -22,7 +22,6 @@ const BasicLayout = ({ children }) => { const [urlPath, setUrlPath] = useState(null); const [highlight, setHighlight] = useState(false); const [buttonPosition, setButtonPosition] = useState(null); - const [wobble, setWobble] = useState(false); const router = useRouter(); const buttonRef = useRef(null); @@ -48,8 +47,9 @@ const BasicLayout = ({ children }) => { useEffect(() => { const handleMouseOut = (event) => { const rect = buttonRef.current.getBoundingClientRect(); + console.log("rect",rect) if (event.clientY <= 0) { - setButtonPosition(rect) + console.log("ini pindah") setHighlight(true); } else { setHighlight(false); @@ -63,14 +63,6 @@ const BasicLayout = ({ children }) => { }; }, []); - useEffect(() => { - if (highlight) { - // Set wobble animation after overlay highlight animation completes - const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed - return () => clearTimeout(timer); - } - }, [highlight]); - const recordActivity = async (pathname) => { const ONLY_ON_PATH = false; const recordedPath = []; @@ -92,50 +84,44 @@ const BasicLayout = ({ children }) => { return ( <> - {highlight && buttonPosition && ( -
setHighlight(false)} - /> - )} {children} + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )} -- cgit v1.2.3 From 949e654bec249177618c3efc1b63c50f174ea0ae Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 17:27:04 +0700 Subject: update highlight button --- src/core/components/layouts/BasicLayout.jsx | 86 +++++++++++++++++------------ 1 file changed, 50 insertions(+), 36 deletions(-) (limited to 'src/core/components/layouts/BasicLayout.jsx') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 62c74e3c..c4674344 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -22,6 +22,7 @@ const BasicLayout = ({ children }) => { const [urlPath, setUrlPath] = useState(null); const [highlight, setHighlight] = useState(false); const [buttonPosition, setButtonPosition] = useState(null); + const [wobble, setWobble] = useState(false); const router = useRouter(); const buttonRef = useRef(null); @@ -47,9 +48,8 @@ const BasicLayout = ({ children }) => { useEffect(() => { const handleMouseOut = (event) => { const rect = buttonRef.current.getBoundingClientRect(); - console.log("rect",rect) if (event.clientY <= 0) { - console.log("ini pindah") + setButtonPosition(rect) setHighlight(true); } else { setHighlight(false); @@ -63,6 +63,14 @@ const BasicLayout = ({ children }) => { }; }, []); + useEffect(() => { + if (highlight) { + // Set wobble animation after overlay highlight animation completes + const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed + return () => clearTimeout(timer); + } + }, [highlight]); + const recordActivity = async (pathname) => { const ONLY_ON_PATH = false; const recordedPath = []; @@ -84,44 +92,50 @@ const BasicLayout = ({ children }) => { return ( <> + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )} {children} - {highlight && buttonPosition && ( -
setHighlight(false)} - /> - )} -- cgit v1.2.3