Skip to content

Commit

Permalink
Merge pull request #43 from deco-sites/fix/home
Browse files Browse the repository at this point in the history 
Fix/home
  • Loading branch information
@RodolfoN1
RodolfoN1 authored Apr 9, 2024
2 parents b7f1780 + 660c312 commit 48e42b6
Show file tree
Hide file tree
Showing 11 changed files with 169 additions and 183 deletions.
3 changes: 2 additions & 1 deletion components/header/NavItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) {
gap-6 w-screen top-0 text-primary max-w-[90%] left-[5%] rounded-b-[40px]`,
)}
style={{
top: "-5px",
top: "-10px",
marginTop: (lasfHeaderHeight + 20) + "px",
height: (lasfHeaderHeight + 20) + "px",
}}
Expand All @@ -103,6 +103,7 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) {
${children.length < 3 ? "flex max-w-[835px]" : ""}`,
)}
>
<div class="n1-submenu-children__overlay"></div>
{image?.url && (
<Image
class="p-6"
Expand Down
31 changes: 0 additions & 31 deletions components/ui/BlueBall.tsx
View file

This file was deleted.

63 changes: 63 additions & 0 deletions components/ui/BlueBallAnimation.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { clx } from "$store/sdk/clx.ts";

interface Props {
textCircleLg?: string;
textCircleSm?: string;
}

function BlueBall({ textCircleLg, textCircleSm }: Props) {

function handleMouseMove(e: MouseEvent) {
const { target } = e;
if (!target) return;

if (target && target instanceof HTMLElement) {
const smBall = target?.querySelector<HTMLElement>("#ball-sm");
const horizontal = e?.layerX;
const vertical = e?.layerY;

if (horizontal && vertical && smBall) {
smBall?.setAttribute(
"style",
`position:absolute; left: ${horizontal + "px"}; top:${
vertical + "px"
}`,
);
}
}
}

return (
<>
<div
class="ball mobile:mt-[60px] relative group hover:cursor-none"
onMouseMove={handleMouseMove}
>
<div
id="ball-xg"
class={clx(
`relative overflow-hidden group-hover:bg-transparent duration-500 group-hover:border-[#ffffff] mobile:w-[222px] border-2 border-transparent
mobile:h-[222px] bg-accent w-[300px] h-[300px] rounded-full flex items-center justify-center`,
)}
>
<span class="group-hover:text-[#ffffff] mobile:text-[22px] text-[28px] text-primary font-archimoto-medium font-black leading-normal">
{textCircleLg}
</span>
<div
id="ball-sm"
class={clx(
`ball-sm mobile:w-[100px] mobile:h-[100px] mobile:bottom-[30px] mobile:right-[40px] group-hover:visible group-hover:opacity-100
invisible opacity-0 bg-secondary w-[130px] h-[130px] absolute bottom-[40px] right-[50px] rounded-full flex items-center justify-center`,
)}
>
<span class="mobile:text-[18px] text-[22px] font-archimoto-medium font-black leading-normal">
{textCircleSm}
</span>
</div>
</div>
</div>
</>
);
}

export default BlueBall;
184 changes: 89 additions & 95 deletions components/ui/CasesComponentDesktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,139 +36,133 @@ interface Props {
settingsImage?: PropsImage[];
}

// interface para método dentro do componente
interface PropsFN{
allCardElement: HTMLCollectionOf<Element>;
bgWidth: string;
cardElement:Element;
logoWidth?:string;
bgWidthModeFalse?:string;
widthModeFalse?: string;
device?:string;
}

function activeCard( {allCardElement, bgWidth, cardElement, logoWidth, bgWidthModeFalse, widthModeFalse, device}:PropsFN ){
const validActive = allCardElement && Array.from(allCardElement).filter((e) => e?.classList.contains('is-active'));

if( cardElement ){
cardElement?.classList.remove("is-active");
bgWidth && cardElement?.setAttribute("style", `width: ${bgWidth}px`);

const itemHover = cardElement?.querySelector<HTMLElement>(".n1-cases-card__item--hover");
const logoHover = cardElement?.querySelector<HTMLElement>(".n1-cases-card__logo--hover");

bgWidth && itemHover?.style?.width == bgWidth ? bgWidth + "px": device ? (Number(bgWidth) / 2) : bgWidthModeFalse;
logoWidth && logoHover?.setAttribute("style", `width: ${logoWidth}px`);

allCardElement && Array.from(allCardElement).forEach((e, i) => {
if(e && i === 0 && validActive && Object.assign(validActive).length === 0 ){
const logo = e.querySelector<HTMLElement>('.logo-width-hover')?.dataset?.logowidthhover;
const widthEl = e.querySelector<HTMLElement>('.bg-width-hover')?.dataset?.bgwidthhover;

const selectorItem = e.querySelector<HTMLElement>(".n1-cases-card__item--hover");
const selectorlogo = e.querySelector<HTMLElement>(".n1-cases-card__logo--hover");

e?.classList.add("is-active");
widthEl && e.setAttribute("style", `width: ${device ? (Number(widthEl) / 1.7) + 'px' : widthEl + 'px' }`);
widthEl && selectorItem?.style?.width == widthEl ? widthEl + "px" : device ? (Number(widthEl)) + "px" : widthModeFalse;
!device && logo && selectorlogo?.setAttribute("style", `width: ${logo}px`);
}
});
}
}

function CasesComponentDesktop({ settingsImage }: Props) {

function handleMouserHover(e: MouseEvent) {
const { target } = e;
const modeDesktop = globalThis.matchMedia("(min-width: 1281px)").matches;
const modePortatil =
globalThis.matchMedia("(min-width:1024px) and (max-width: 1280px)")
.matches;
const modeTablet =
globalThis.matchMedia("(min-width:768px) and (max-width: 1024px)")
.matches;
const modePortatil = globalThis.matchMedia("(min-width:1024px) and (max-width: 1280px)").matches;
const modeTablet = globalThis.matchMedia("(min-width:768px) and (max-width: 1024px)").matches;

if (!target) return;

if (target && target instanceof HTMLElement) {
const cardElement = target?.closest(".n1-cases-card");
const allCardElement = cardElement &&
cardElement.parentElement?.getElementsByClassName("n1-cases-card");
const allCardElement = cardElement && cardElement.parentElement?.getElementsByClassName("n1-cases-card");

allCardElement && Array.from(allCardElement).forEach((e) => {
allCardElement && Array.from(allCardElement).forEach((e, i) => {
e?.classList.remove("is-active");
e?.setAttribute("style", "width: 300px");
e?.setAttribute("style", "width: 300px");
});

const bgWidth = cardElement?.querySelector<HTMLElement>(".bg-width")
?.dataset.bgwidth;
const bgWidthHover = cardElement?.querySelector<HTMLElement>(
".bg-width-hover",
)?.dataset.bgwidthhover;
const logoWidth = cardElement?.querySelector<HTMLElement>(".logo-width")
?.dataset.logowidth;
const logoWidthHover = cardElement?.querySelector<HTMLElement>(
".logo-width-hover",
)?.dataset.logowidthhover;
const bgWidth = cardElement?.querySelector<HTMLElement>(".bg-width")?.dataset.bgwidth;
const bgWidthHover = cardElement?.querySelector<HTMLElement>(".bg-width-hover")?.dataset.bgwidthhover;
const logoWidth = cardElement?.querySelector<HTMLElement>(".logo-width")?.dataset.logowidth;
const logoWidthHover = cardElement?.querySelector<HTMLElement>(".logo-width-hover")?.dataset.logowidthhover;

if (modeDesktop) {
switch (e.type) {
case "mouseleave":
cardElement?.classList.remove("is-active");
bgWidth &&
cardElement?.setAttribute("style", `width: ${bgWidth}px`);
bgWidth &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__item--hover",
)?.style?.width == bgWidth
? bgWidth + "px"
: "300px";
logoWidth &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__logo--hover",
)?.setAttribute("style", `width: ${logoWidth}px`);

setTimeout(()=>{
const bgWidthModeFalse = '300px';
const widthModeFalse = '560px';
if(allCardElement && bgWidth && cardElement && logoWidth){
activeCard( { allCardElement, bgWidth, cardElement, logoWidth, bgWidthModeFalse, widthModeFalse } );
}
}, 500);

break;
case "mouseover":
cardElement?.classList.add("is-active");
bgWidthHover &&
cardElement?.setAttribute("style", `width: ${bgWidthHover}px`);
bgWidthHover &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__item--hover",
)?.style?.width == bgWidthHover
? bgWidthHover + "px"
: "560px";
logoWidthHover &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__logo--hover",
)?.setAttribute("style", `width: ${logoWidthHover}px`);
bgWidthHover && cardElement?.setAttribute("style", `width: ${bgWidthHover}px`);
bgWidthHover && cardElement?.querySelector<HTMLElement>(".n1-cases-card__item--hover")?.style?.width == bgWidthHover ? bgWidthHover + "px": "560px";
logoWidthHover && cardElement?.querySelector<HTMLElement>(".n1-cases-card__logo--hover")?.setAttribute("style", `width: ${logoWidthHover}px`);
break;
}
}

if (modePortatil) {
switch (e.type) {
case "mouseleave":
cardElement?.classList.remove("is-active");
bgWidth &&
cardElement?.setAttribute("style", `width: ${bgWidth}px`);
bgWidth &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__item--hover",
)?.style?.width == bgWidth
? (Number(bgWidth) / 2) + "px"
: "300px";
logoWidth &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__logo--hover",
)?.setAttribute("style", `width: ${logoWidth}px`);
setTimeout(()=>{
const bgWidthModeFalse = '300px';
const widthModeFalse = '360px';
const device = 'portatil'

if(allCardElement && bgWidth && cardElement){
activeCard( { allCardElement, bgWidth, cardElement, bgWidthModeFalse, widthModeFalse, device } );
}
}, 500);

break;
case "mouseover":
cardElement?.classList.add("is-active");
bgWidthHover &&
cardElement?.setAttribute(
"style",
`width: ${Number(bgWidthHover) / 1.7}px`,
);
bgWidthHover &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__item--hover",
)?.style?.width == bgWidthHover
? (Number(bgWidthHover)) + "px"
: "360px";
bgWidthHover && cardElement?.setAttribute("style",`width: ${Number(bgWidthHover) / 1.7}px`);
bgWidthHover && cardElement?.querySelector<HTMLElement>(".n1-cases-card__item--hover")?.style?.width == bgWidthHover ? (Number(bgWidthHover)) + "px" : "360px";
break;
}
}

if (modeTablet) {
switch (e.type) {
case "mouseleave":
cardElement?.classList.remove("is-active");
bgWidth &&
cardElement?.setAttribute("style", `width: ${bgWidth}px`);
bgWidth &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__item--hover",
)?.style?.width == bgWidth
? (Number(bgWidth) / 2) + "px"
: "300px";
logoWidth &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__logo--hover",
)?.setAttribute("style", `width: ${logoWidth}px`);
setTimeout(()=>{
const bgWidthModeFalse = '300px';
const widthModeFalse = '360px';
const device = 'tablet'

if(allCardElement && bgWidth && cardElement){
activeCard( { allCardElement, bgWidth, cardElement, bgWidthModeFalse, widthModeFalse, device } );
}
}, 500);

break;
case "mouseover":
cardElement?.classList.add("is-active");
bgWidthHover &&
cardElement?.setAttribute(
"style",
`width: ${Number(bgWidthHover) / 1.7}px`,
);
bgWidthHover &&
cardElement?.querySelector<HTMLElement>(
".n1-cases-card__item--hover",
)?.style?.width == bgWidthHover
? (Number(bgWidthHover)) + "px"
: "360px";
bgWidthHover && cardElement?.setAttribute("style",`width: ${Number(bgWidthHover) / 1.7}px`);
bgWidthHover && cardElement?.querySelector<HTMLElement>(".n1-cases-card__item--hover")?.style?.width == bgWidthHover ? (Number(bgWidthHover)) + "px" : "360px";
break;
}
}
Expand Down Expand Up @@ -208,7 +202,7 @@ function CasesComponentDesktop({ settingsImage }: Props) {
<>
<a
href={`${href ? href : "javascript:void(0)"}`}
class={`relative n1-cases-card ${
class={`relative n1-cases-card ${alt ? 'is-' + alt : '' } notebook:max-w-[500px] ${
index === 0 ? "is-active" : ""
} ${
href ? "cursor-pointer" : "cursor-grab"
Expand All @@ -220,7 +214,7 @@ function CasesComponentDesktop({ settingsImage }: Props) {
? heightImageBackgroundHover + "px"
: "500px"
}`,
width: index === 0 ? "500px" : "",
width: index === 0 ? "560px" : "",
pointerEvents: `${href ? "all" : "grab"}`,
}}
>
Expand Down
4 changes: 2 additions & 2 deletions fresh.gen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx
import * as $AddToCartButton_vnda from "./islands/AddToCartButton/vnda.tsx";
import * as $AddToCartButton_vtex from "./islands/AddToCartButton/vtex.tsx";
import * as $AddToCartButton_wake from "./islands/AddToCartButton/wake.tsx";
import * as $BlueBallAnimation from "./islands/BlueBallAnimation.tsx";
import * as $CasesComponent from "./islands/CasesComponent.tsx";
import * as $ContactForm from "./islands/ContactForm.tsx";
import * as $Header_Buttons from "./islands/Header/Buttons.tsx";
Expand All @@ -29,7 +30,6 @@ import * as $ProductImageZoom from "./islands/ProductImageZoom.tsx";
import * as $SearchControls from "./islands/SearchControls.tsx";
import * as $ShippingSimulation from "./islands/ShippingSimulation.tsx";
import * as $SliderJS from "./islands/SliderJS.tsx";
import * as $TextWithImageCustom from "./islands/TextWithImageCustom.tsx";
import * as $WishlistButton_vtex from "./islands/WishlistButton/vtex.tsx";
import * as $WishlistButton_wake from "./islands/WishlistButton/wake.tsx";
import { type Manifest } from "$fresh/server.ts";
Expand All @@ -46,6 +46,7 @@ const manifest = {
"./islands/AddToCartButton/vnda.tsx": $AddToCartButton_vnda,
"./islands/AddToCartButton/vtex.tsx": $AddToCartButton_vtex,
"./islands/AddToCartButton/wake.tsx": $AddToCartButton_wake,
"./islands/BlueBallAnimation.tsx": $BlueBallAnimation,
"./islands/CasesComponent.tsx": $CasesComponent,
"./islands/ContactForm.tsx": $ContactForm,
"./islands/Header/Buttons.tsx": $Header_Buttons,
Expand All @@ -65,7 +66,6 @@ const manifest = {
"./islands/SearchControls.tsx": $SearchControls,
"./islands/ShippingSimulation.tsx": $ShippingSimulation,
"./islands/SliderJS.tsx": $SliderJS,
"./islands/TextWithImageCustom.tsx": $TextWithImageCustom,
"./islands/WishlistButton/vtex.tsx": $WishlistButton_vtex,
"./islands/WishlistButton/wake.tsx": $WishlistButton_wake,
},
Expand Down
1 change: 1 addition & 0 deletions islands/BlueBallAnimation.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "$store/components/ui/BlueBallAnimation.tsx";
1 change: 0 additions & 1 deletion islands/TextWithImageCustom.tsx
View file

This file was deleted.

Loading

0 comments on commit 48e42b6

Please sign in to comment.