Skip to content

Commit 712956c

Browse files
formfcwformfcw
authored
Improve hover effect (#12)
* TEST WEBSITE: refactor pricing header from combined to single fields * add parent hover state and update overlay styles * build * rename element to hoveredItem
1 parent a86aa36 commit 712956c

File tree

6 files changed

+65
-23
lines changed

6 files changed

+65
-23
lines changed

‎dist/visual-editing.js‎

Lines changed: 20 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/editable-element.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import observeRect from '@reach/observe-rect';
22
import { DirectusFrame } from './directus-frame.ts';
3+
import { EditableStore } from './editable-store.ts';
34
import { OverlayElement } from './overlay-element.ts';
45
import type { EditConfig, EditConfigStrict, EditableElementOptions } from './types/index.ts';
56

@@ -122,10 +123,23 @@ export class EditableElement {
122123

123124
private toggleItemHover(hover: boolean, event: MouseEvent) {
124125
if (this.element !== event.currentTarget || this.hover === hover) return;
126+
125127
this.hover = hover;
128+
this.setParentsHover();
126129
this.overlayElement.toggleHover(hover);
127130
}
128131

132+
private setParentsHover() {
133+
const hoveredItems = EditableStore.getHoveredItems();
134+
135+
hoveredItems.forEach((hoveredItem) => {
136+
const otherElements = hoveredItems.filter((item) => item.element !== hoveredItem.element);
137+
const isParentElement = otherElements.some((el) => hoveredItem.element.contains(el.element));
138+
139+
hoveredItem.overlayElement.toggleParentHover(isParentElement);
140+
});
141+
}
142+
129143
private onObserveRect(rect: DOMRect) {
130144
if (this.disabled) return;
131145
this.rect = rect;

‎src/lib/editable-store.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ export class EditableStore {
1212
return EditableStore.items.find((item) => item.key === key);
1313
}
1414

15+
static getHoveredItems() {
16+
return EditableStore.items.filter((item) => item.hover);
17+
}
18+
1519
static addItem(item: EditableElement) {
1620
EditableStore.items.push(item);
1721
}

‎src/lib/overlay-element.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ export class OverlayElement {
7979
else this.element.classList.remove(OverlayManager.RECT_HOVER_CLASS_NAME);
8080
}
8181

82+
toggleParentHover(hover: boolean) {
83+
if (hover) this.element.classList.add(OverlayManager.RECT_PARENT_HOVER_CLASS_NAME);
84+
else this.element.classList.remove(OverlayManager.RECT_PARENT_HOVER_CLASS_NAME);
85+
}
86+
8287
toggleHighlight(show: boolean) {
8388
if (show) this.element.classList.add(OverlayManager.RECT_HIGHLIGHT_CLASS_NAME);
8489
else this.element.classList.remove(OverlayManager.RECT_HIGHLIGHT_CLASS_NAME);

‎src/lib/overlay-manager.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export class OverlayManager {
44
private static readonly CSS_VAR_BORDER_WIDTH = '--directus-visual-editing--rect--border-width';
55
private static readonly CSS_VAR_BORDER_COLOR = '--directus-visual-editing--rect--border-color';
66
private static readonly CSS_VAR_BORDER_RADIUS = '--directus-visual-editing--rect--border-radius';
7+
private static readonly CSS_VAR_HOVER_OPACITY = '--directus-visual-editing--rect-hover--opacity';
78
private static readonly CSS_VAR_HIGHLIGHT_OPACITY = '--directus-visual-editing--rect-highlight--opacity';
89
private static readonly CSS_VAR_BUTTON_WIDTH = '--directus-visual-editing--edit-btn--width';
910
private static readonly CSS_VAR_BUTTON_HEIGHT = '--directus-visual-editing--edit-btn--height';
@@ -21,6 +22,7 @@ export class OverlayManager {
2122
static readonly CONTAINER_RECT_CLASS_NAME = 'directus-visual-editing-overlay';
2223
static readonly RECT_CLASS_NAME = 'directus-visual-editing-rect';
2324
static readonly RECT_HIGHLIGHT_CLASS_NAME = 'directus-visual-editing-rect-highlight';
25+
static readonly RECT_PARENT_HOVER_CLASS_NAME = 'directus-visual-editing-rect-parent-hover';
2426
static readonly RECT_HOVER_CLASS_NAME = 'directus-visual-editing-rect-hover';
2527
static readonly RECT_INNER_CLASS_NAME = 'directus-visual-editing-rect-inner';
2628
static readonly RECT_EDIT_BUTTON_CLASS_NAME = 'directus-visual-editing-edit-button';
@@ -75,11 +77,18 @@ export class OverlayManager {
7577
border-radius: var(${OverlayManager.CSS_VAR_BORDER_RADIUS}, 6px);
7678
opacity: 0;
7779
}
80+
.${OverlayManager.RECT_CLASS_NAME}.${OverlayManager.RECT_HOVER_CLASS_NAME} .${OverlayManager.RECT_INNER_CLASS_NAME} {
81+
--hover-opacity: var(${OverlayManager.CSS_VAR_HOVER_OPACITY}, 0.333);
82+
opacity: var(--hover-opacity);
83+
}
84+
.${OverlayManager.RECT_CLASS_NAME}.${OverlayManager.RECT_PARENT_HOVER_CLASS_NAME} .${OverlayManager.RECT_INNER_CLASS_NAME} {
85+
opacity: calc(var(--hover-opacity) / 3);
86+
}
7887
.${OverlayManager.RECT_HIGHLIGHT_CLASS_NAME} {
7988
pointer-events: all;
8089
cursor: pointer;
8190
}
82-
.${OverlayManager.RECT_HIGHLIGHT_CLASS_NAME} .${OverlayManager.RECT_INNER_CLASS_NAME} {
91+
.${OverlayManager.RECT_HIGHLIGHT_CLASS_NAME} .${OverlayManager.RECT_INNER_CLASS_NAME} {
8392
opacity: var(${OverlayManager.CSS_VAR_HIGHLIGHT_OPACITY}, 0.333);
8493
}
8594
.${OverlayManager.RECT_EDIT_BUTTON_CLASS_NAME}:visited,
@@ -106,7 +115,7 @@ export class OverlayManager {
106115
opacity: 0;
107116
}
108117
.${OverlayManager.RECT_EDIT_BUTTON_CLASS_NAME}:hover,
109-
.${OverlayManager.RECT_CLASS_NAME}.${OverlayManager.RECT_HOVER_CLASS_NAME} .${OverlayManager.RECT_EDIT_BUTTON_CLASS_NAME},
118+
.${OverlayManager.RECT_CLASS_NAME}.${OverlayManager.RECT_HOVER_CLASS_NAME}:not(.${OverlayManager.RECT_PARENT_HOVER_CLASS_NAME}) .${OverlayManager.RECT_EDIT_BUTTON_CLASS_NAME},
110119
.${OverlayManager.RECT_HIGHLIGHT_CLASS_NAME}:hover .${OverlayManager.RECT_EDIT_BUTTON_CLASS_NAME} {
111120
opacity: 1;
112121
}

‎test-website/simple-cms/nuxt/app/components/block/Pricing.vue‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,17 @@ defineProps<PricingProps>();
2929

3030
<template>
3131
<section>
32-
<div
33-
v-if="data.tagline || data.headline"
34-
:data-directus="
35-
setAttr({ collection: 'block_pricing', item: data.id, fields: ['tagline', 'headline'], mode: 'popover' })
36-
"
37-
>
38-
<Tagline v-if="data.tagline" :tagline="data.tagline" />
39-
<Headline v-if="data.headline" :headline="data.headline" />
32+
<div v-if="data.tagline || data.headline">
33+
<Tagline
34+
v-if="data.tagline"
35+
:tagline="data.tagline"
36+
:data-directus="setAttr({ collection: 'block_pricing', item: data.id, fields: 'tagline', mode: 'popover' })"
37+
/>
38+
<Headline
39+
v-if="data.headline"
40+
:headline="data.headline"
41+
:data-directus="setAttr({ collection: 'block_pricing', item: data.id, fields: 'headline', mode: 'popover' })"
42+
/>
4043
</div>
4144

4245
<div

0 commit comments

Comments
 (0)