From a2ea24cf0a7ef990f9b16c59ac55ab453aff4e95 Mon Sep 17 00:00:00 2001 From: Cody Wise Date: Thu, 4 Feb 2021 19:20:59 -0700 Subject: [PATCH 1/5] feat- added esc keydown event listener to back.js --- src/themes/card/back.js | 10 +++++++++- src/themes/card/content-section.js | 11 +++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/themes/card/back.js b/src/themes/card/back.js index 663c0c4..90b4200 100644 --- a/src/themes/card/back.js +++ b/src/themes/card/back.js @@ -1,4 +1,4 @@ -import { useState, useContext } from "react"; +import { useState, useContext, useEffect } from "react"; import ContentSection from "./content-section"; import Link, { ClientOnlyLink, LinkButton } from "../../link"; @@ -28,6 +28,7 @@ export default function Back({ x, style }) { const progress = (x - minX) / (1 - minX); const [activeSection, setActiveSection] = useState(null); const clearActiveSection = (e) => { + console.log("FIRED Close"); setActiveSection(null); e.stopPropagation(); }; @@ -38,6 +39,13 @@ export default function Back({ x, style }) { ...style, }; + useEffect(() => { + window.addEventListener("keydown", clearActiveSection); + return () => { + window.removeEventListener("keydown", clearActiveSection); + } + }, []) + return (
{contentSectionElements.map((element, index) => diff --git a/src/themes/card/content-section.js b/src/themes/card/content-section.js index cf9ac60..a28ba2e 100644 --- a/src/themes/card/content-section.js +++ b/src/themes/card/content-section.js @@ -13,9 +13,8 @@ export default function ContentSection({ fontScale = 1, }) { const [transitioning, setTransitioning] = useState(false); - const transformOrigin = `${index < 2 ? "top" : "bottom"} ${ - index % 2 === 0 ? "left" : "right" - }`; + const transformOrigin = `${index < 2 ? "top" : "bottom"} ${index % 2 === 0 ? "left" : "right" + }`; useLayoutEffect(() => { setTransitioning(true); setTimeout(() => setTransitioning(false), TRANSITION_MS); @@ -33,13 +32,13 @@ export default function ContentSection({ const childrenStyle = { fontSize: `calc(${fontScale} * (1.5vw + 1.5vh))`, }; + console.log("fired"); return (
{active && ( From 53d863892957a496ef157c65d3e3e4ccbb1e7c51 Mon Sep 17 00:00:00 2001 From: Cody Wise Date: Thu, 4 Feb 2021 19:27:12 -0700 Subject: [PATCH 2/5] code clean-up --- src/themes/card/back.js | 1 - src/themes/card/content-section.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/themes/card/back.js b/src/themes/card/back.js index 90b4200..35a58a2 100644 --- a/src/themes/card/back.js +++ b/src/themes/card/back.js @@ -28,7 +28,6 @@ export default function Back({ x, style }) { const progress = (x - minX) / (1 - minX); const [activeSection, setActiveSection] = useState(null); const clearActiveSection = (e) => { - console.log("FIRED Close"); setActiveSection(null); e.stopPropagation(); }; diff --git a/src/themes/card/content-section.js b/src/themes/card/content-section.js index a28ba2e..69bda9f 100644 --- a/src/themes/card/content-section.js +++ b/src/themes/card/content-section.js @@ -32,7 +32,6 @@ export default function ContentSection({ const childrenStyle = { fontSize: `calc(${fontScale} * (1.5vw + 1.5vh))`, }; - console.log("fired"); return (
Date: Thu, 4 Feb 2021 19:44:16 -0700 Subject: [PATCH 3/5] added keyCode check to only close on esc press --- src/themes/card/back.js | 11 +++++++++-- src/themes/card/content-section.js | 4 ++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/themes/card/back.js b/src/themes/card/back.js index 35a58a2..5482f24 100644 --- a/src/themes/card/back.js +++ b/src/themes/card/back.js @@ -38,10 +38,17 @@ export default function Back({ x, style }) { ...style, }; + const handleKeyPress = (e) => { + if (e.keyCode === 27) { + clearActiveSection(e) + } + } + + useEffect(() => { - window.addEventListener("keydown", clearActiveSection); + window.addEventListener("keydown", handleKeyPress); return () => { - window.removeEventListener("keydown", clearActiveSection); + window.removeEventListener("keydown", handleKeyPress); } }, []) diff --git a/src/themes/card/content-section.js b/src/themes/card/content-section.js index 69bda9f..d7e6ea3 100644 --- a/src/themes/card/content-section.js +++ b/src/themes/card/content-section.js @@ -13,8 +13,8 @@ export default function ContentSection({ fontScale = 1, }) { const [transitioning, setTransitioning] = useState(false); - const transformOrigin = `${index < 2 ? "top" : "bottom"} ${index % 2 === 0 ? "left" : "right" - }`; + const transformOrigin = `${index < 2 ? "top" : "bottom"} ${index % 2 === 0 ? "left" : "right"}`; + useLayoutEffect(() => { setTransitioning(true); setTimeout(() => setTransitioning(false), TRANSITION_MS); From 9035a82b832dad8f72156eb5c32bcf2b7a841fe9 Mon Sep 17 00:00:00 2001 From: Cody Wise Date: Fri, 5 Feb 2021 09:49:14 -0700 Subject: [PATCH 4/5] moved effect to content-section.js --- src/themes/card/back.js | 14 -------------- src/themes/card/content-section.js | 15 ++++++++++++++- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/themes/card/back.js b/src/themes/card/back.js index 5482f24..7fd765b 100644 --- a/src/themes/card/back.js +++ b/src/themes/card/back.js @@ -38,20 +38,6 @@ export default function Back({ x, style }) { ...style, }; - const handleKeyPress = (e) => { - if (e.keyCode === 27) { - clearActiveSection(e) - } - } - - - useEffect(() => { - window.addEventListener("keydown", handleKeyPress); - return () => { - window.removeEventListener("keydown", handleKeyPress); - } - }, []) - return (
{contentSectionElements.map((element, index) => diff --git a/src/themes/card/content-section.js b/src/themes/card/content-section.js index d7e6ea3..f358e18 100644 --- a/src/themes/card/content-section.js +++ b/src/themes/card/content-section.js @@ -1,4 +1,4 @@ -import { useState, useLayoutEffect, Children } from "react"; +import { useState, useLayoutEffect, Children, useEffect } from "react"; import { getWindow } from "../../utils/general"; const TRANSITION_MS = 500; @@ -33,6 +33,19 @@ export default function ContentSection({ fontSize: `calc(${fontScale} * (1.5vw + 1.5vh))`, }; + const handleKeyPress = (e) => { + if (e.keyCode === 27) { + onClose(e) + } + } + + useEffect(() => { + window.addEventListener("keydown", handleKeyPress); + return () => { + window.removeEventListener("keydown", handleKeyPress); + } + }, []) + return (
Date: Fri, 5 Feb 2021 09:53:17 -0700 Subject: [PATCH 5/5] code clean up --- src/themes/card/back.js | 2 +- src/themes/card/content-section.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/themes/card/back.js b/src/themes/card/back.js index 7fd765b..663c0c4 100644 --- a/src/themes/card/back.js +++ b/src/themes/card/back.js @@ -1,4 +1,4 @@ -import { useState, useContext, useEffect } from "react"; +import { useState, useContext } from "react"; import ContentSection from "./content-section"; import Link, { ClientOnlyLink, LinkButton } from "../../link"; diff --git a/src/themes/card/content-section.js b/src/themes/card/content-section.js index f358e18..96e40a7 100644 --- a/src/themes/card/content-section.js +++ b/src/themes/card/content-section.js @@ -1,4 +1,4 @@ -import { useState, useLayoutEffect, Children, useEffect } from "react"; +import { useState, useLayout, useEffect, Children, } from "react"; import { getWindow } from "../../utils/general"; const TRANSITION_MS = 500;