Merge pull request #449 from newfold-labs/orb-typing-reactivity-sitegen

orb typing reactivity on site prompt input
newfold-labs · Feb 1, 2024 · 78d0f63 · 78d0f63
2 parents fbaf4f3 + 55114bc
commit 78d0f63
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/src/OnboardingSPA/components/OrbAnimation/index.js b/src/OnboardingSPA/components/OrbAnimation/index.js
@@ -1,10 +1,48 @@
+import { useEffect } from '@wordpress/element';
+
 const OrbAnimation = ( { height = '80px' } ) => {
 	// Inline style to handle custom properties
 	const logoStyle = {
 		'--wnd-ai-logo-size': height,
 		height: `var(--wnd-ai-logo-size, ${ height })`,
 	};
 
+	useEffect( () => {
+		document
+			.querySelectorAll( '[data-wnd-ai-logo]' )
+			.forEach( function ( input ) {
+				let keyIsDown = false;
+				let animationFrameId = null;
+
+				const toggleClass = () => {
+					if ( keyIsDown ) {
+						document.body.classList.add( 'wnd-ai-logo-keydown' );
+					} else {
+						document.body.classList.remove( 'wnd-ai-logo-keydown' );
+					}
+					animationFrameId = null;
+				};
+
+				input.addEventListener( 'keydown', function () {
+					if ( ! keyIsDown ) {
+						keyIsDown = true;
+						if ( ! animationFrameId ) {
+							animationFrameId =
+								window.requestAnimationFrame( toggleClass );
+						}
+					}
+				} );
+
+				input.addEventListener( 'keyup', function () {
+					keyIsDown = false;
+					if ( ! animationFrameId ) {
+						animationFrameId =
+							window.requestAnimationFrame( toggleClass );
+					}
+				} );
+			} );
+	}, [] );
+
 	return (
 		<span className="wnd-ai-logo" style={ logoStyle }>
 			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--bg"></span>

diff --git a/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss b/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss
@@ -186,12 +186,16 @@ body.wnd-ai-logo-loading .wnd-ai-logo {
 }
 
 /* Focus & Hover */
-body:has([data-wnd-ai-logo]:focus) .wnd-ai-logo,
 body:not(.wnd-ai-logo-loading) .wnd-ai-logo:hover {
 	transform: scale(1.05);
 	filter: brightness(1.35) saturate(1.5);
 }
 
+body:has([data-wnd-ai-logo]:focus) .wnd-ai-logo {
+	transform: scale(1.2);
+	filter: brightness(1.35) saturate(1.5);
+}
+
 /* Keydown */
 body.wnd-ai-logo-keydown .wnd-ai-logo.wnd-ai-logo {
 	transform: scale(1.1);

diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
@@ -78,6 +78,7 @@ const TextInputSiteGen = ( {
 			<label htmlFor={ inputText }>
 				<div className={ 'nfd-sg-input-box' }>
 					<textarea
+						data-wnd-ai-logo
 						type="text"
 						className={ inputText }
 						ref={ textareaRef }