feat!: refactoring HotspotEditor and HotspotContent packages

BREAKING CHANGE: complete new structure and styling
Format-D · Feb 16, 2024 · 3e5dd15 · 3e5dd15
1 parent b506acc
commit 3e5dd15
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 33 deletions.
diff --git a/Resources/Private/Fusion/Presentation/Atom/Hotspot.fusion b/Resources/Private/Fusion/Presentation/Atom/Hotspot.fusion
@@ -5,7 +5,7 @@ prototype(FormatD.HotspotEditor:Atom.Hotspot) < prototype(Neos.Fusion:Component)
 		description = 'This is a hotspot item'
 		props {
             hoverTitle = 'Hover title'
-			content = '<svg class="hotspot-img" width="50" height="50" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+			content = '<svg width="50" height="50" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<ellipse cx="20.5833" cy="21.2286" rx="10.8088" ry="10.8" fill="white"/>
 					<path d="M39 21.2286C39 31.3891 30.7561 39.6286 20.5833 39.6286C10.4106 39.6286 2.16667 31.3891 2.16667 21.2286C2.16667 11.0681 10.4106 2.82855 20.5833 2.82855C30.7561 2.82855 39 11.0681 39 21.2286Z" stroke="white" stroke-width="3" />
 				</svg>'
@@ -31,7 +31,7 @@ prototype(FormatD.HotspotEditor:Atom.Hotspot) < prototype(Neos.Fusion:Component)
 	yPosition = '50'
 	uri = ''
 	identifier = null
-	content =  '<svg class="hotspot-img" width="50" height="50" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+	content =  '<svg width="50" height="50" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<ellipse cx="20.5833" cy="21.2286" rx="10.8088" ry="10.8" fill="white"/>
 					<path d="M39 21.2286C39 31.3891 30.7561 39.6286 20.5833 39.6286C10.4106 39.6286 2.16667 31.3891 2.16667 21.2286C2.16667 11.0681 10.4106 2.82855 20.5833 2.82855C30.7561 2.82855 39 11.0681 39 21.2286Z" stroke="white" stroke-width="3" />
 				</svg>'
@@ -40,18 +40,31 @@ prototype(FormatD.HotspotEditor:Atom.Hotspot) < prototype(Neos.Fusion:Component)
 	inBackend = ${documentNode.context.inBackend}
 
 	renderer = afx`
-		<div class="hotspot" style={props.styleCoordinates} data-hotspot-posx={props.xPosition} data-hotspot-posy={props.yPosition} data-hotspot-id={props.identifier} >
-			<Neos.Fusion:Tag
-				attributes.class="hotspot-link"
+		<Neos.Fusion:Tag
+				tagName={props.inBackend || !props.uri ? 'button' : 'a'}
+				attributes.class.hotspot="hotspot"
+				attributes.style={props.styleCoordinates}
 				attributes.href={props.uri ? props.uri : null}
-				tagName={props.inBackend || !props.uri ? 'div' : 'a'}
+				attributes.type={!props.uri ? 'button' : null}
+				attributes.aria-controls={!props.uri ? props.identifier : null}
+				attributes.aria-label={props.hoverTitle ? props.hoverTitle : 'Hotspot'}
+				attributes.data-hotspot-posx={props.xPosition}
+				attributes.data-hotspot-posy={props.yPosition}
+				attributes.data-hotspot-id={props.identifier}
+				@key="hotspot"
+		>
+			<div class.content="hotspot--content"
+				 @key="hotspotContent"
 			>
-				<div class.content="hotspot--content" >
-                    {props.content}
-                </div>
-                <div class="hotspot--hover-title" @if.isProvided={props.hoverTitle || props.inBackend} >{props.hoverTitle}</div>
-			</Neos.Fusion:Tag>
-		</div>
+				{props.content}
+			</div>
+			<div class.title="hotspot--hover-title"
+				 @if.isProvided={props.hoverTitle}
+				 @key="hotspot--hover-title"
+			>
+				{props.hoverTitle}
+			</div>
+		</Neos.Fusion:Tag>
 	`
 
 

diff --git a/Resources/Private/Fusion/Presentation/Atom/Hotspot.scss b/Resources/Private/Fusion/Presentation/Atom/Hotspot.scss
@@ -1,25 +1,58 @@
+* {
+  --hotspot-backend-notice-width: 11rem;
+  --hotspot-backend-notice-top-position: 3rem;
+  --hotspot-backend-notice-left-position: 0;
+  --hotspot-backend-notice-bg-color: #000000;
+  --hotspot-backend-notice-text-color: #ffffff;
+
+  --hotspot-height: 3.125rem;
+  --hotspot-hover-title-color: #ffffff;
+  --hotspot-hover-title-transition: all 0.3s ease-in-out;
+}
+
 .hotspot {
-    @apply absolute;
+  	position: absolute;
+  	z-index: 20;
+	display: flex;
+	align-items: center;
+  	justify-content: center;
+  	height: var(--hotspot-height);
 
     &:hover {
         .hotspot--hover-title {
-            @apply opacity-100 w-auto ml-20;
+		  	opacity: 1;
+		  	width: auto;
+		  	margin-left: 1rem;
         }
     }
+}
+a.hotspot {
+  	cursor: pointer;
 
-    .hotspot-link {
-        @apply flex items-center;
-    }
-
-    .hotspot--hover-title {
-        @apply opacity-0 w-0 overflow-hidden;
-        transition: all 0.3s ease-in-out;
-    }
-
+	&:hover {
+	  	text-decoration: none;
+	}
 }
 
+.hotspot--hover-title {
+	opacity: 0;
+	width: 0;
+	overflow: hidden;
+  	color: var(--hotspot-hover-title-color);
+	transition: var(--hotspot-hover-title-transition);
+}
 
 .hotspot--backend-notice {
-    @apply text-xs bg-black text-white p-5 rounded-20 mt-10;
-    width: 145px;
+  	position: absolute;
+  	z-index: 2;
+  	top: var(--hotspot-backend-notice-top-position);
+  	left: var(--hotspot-backend-notice-left-position);
+  	width: var(--hotspot-backend-notice-width);
+  	padding: 0.75rem;
+  	margin-top: 0.75rem;
+	font-size: 0.75rem;
+	line-height: 1rem;
+  	color: var(--hotspot-backend-notice-text-color);
+  	background-color: var(--hotspot-backend-notice-bg-color);
+  	border-radius: 1rem;
 }
diff --git a/Resources/Private/Fusion/Presentation/Molecule/ContentWithHotspots.fusion b/Resources/Private/Fusion/Presentation/Molecule/ContentWithHotspots.fusion
@@ -21,9 +21,13 @@ prototype(FormatD.HotspotEditor:Molecule.ContentWithHotspots) < prototype(Neos.F
 	hotspots = ''
 
 	renderer = afx`
-		<div class.hotspotsArea="hotspots-area">
+		<div class.contentWithHotspots="content-with-hotspots"
+			 @key="contentWithHotspots"
+		>
 			{props.content}
-			<div class.hotspotsContainer="hotspots-container">
+			<div class.contentWithHotspotsContainer="content-with-hotspots--container"
+				 @key="contentWithHotspotsContainer"
+			>
 				{props.hotspots}
 			</div>
 		</div>

diff --git a/Resources/Private/Fusion/Presentation/Molecule/ContentWithHotspots.scss b/Resources/Private/Fusion/Presentation/Molecule/ContentWithHotspots.scss
@@ -1,7 +1,9 @@
-.hotspots-area {
-	@apply relative;
 
-	.hotspots-container {
-		@apply absolute inset-0;
-	}
+.content-with-hotspots {
+  	position: relative;
+}
+
+.content-with-hotspots--container {
+  position: absolute;
+  inset: 0;
 }
diff --git a/Resources/Private/Scripts/HotspotEditorFrontend/Hotspots.ts b/Resources/Private/Scripts/HotspotEditorFrontend/Hotspots.ts
@@ -80,7 +80,7 @@ export default class Hotspots {
 				mouseEvent.preventDefault();
 
 				const containerElement = mouseEvent.composedPath().find((element: HTMLElement) => {
-					return element.className === 'hotspots-container';
+					return element.className === 'content-with-hotspots--container';
 				});
 
 				this._dispatchHotspotDraggedEvent({