Skip to content

Commit 42d5ff3

Browse files
f820602hf820602h
committed
[improvement] Use floating UI for improved voice-over positioning and a better user experience.
1 parent 9bf752b commit 42d5ff3

File tree

5 files changed

+96
-252
lines changed

5 files changed

+96
-252
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "vue-stage-play",
33
"description": "Designing a guided tour for your website with vue components, much like directing a stage play.",
44
"private": false,
5-
"version": "0.4.0",
5+
"version": "0.5.0",
66
"author": "max.lee <f820602h@gmail.com>",
77
"license": "MIT",
88
"homepage": "https://github.com/f820602h/vue-stage-play#readme",
@@ -40,6 +40,7 @@
4040
"docs:preview": "vitepress preview doc"
4141
},
4242
"dependencies": {
43+
"@floating-ui/vue": "^1.0.2",
4344
"@vueuse/core": "^10.4.1",
4445
"vitepress": "^1.0.0-rc.20",
4546
"vue": "^3.3.4"

‎src/components/StagePlayScene.ts

Lines changed: 26 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,14 @@ import { defaultOptions } from "../options";
2121
import { useAct } from "../composables/act";
2222
import { useBodyScrollFixed } from "../composables/bodyScrollFixed";
2323
import { useFadeTransition } from "../composables/fade";
24-
import { useWindowSize, useElementBounding } from "@vueuse/core";
25-
import { smoothScroll, getPlacementStyle } from "../utils";
24+
import { smoothScroll } from "../utils";
25+
import {
26+
useFloating,
27+
autoUpdate,
28+
shift,
29+
flip,
30+
Placement,
31+
} from "@floating-ui/vue";
2632

2733
export const StagePlayScene = defineComponent({
2834
slots: Object as SlotsType<{
@@ -142,9 +148,6 @@ export const StagePlayScene = defineComponent({
142148
},
143149
},
144150
setup(props, { slots }) {
145-
const spotlight = ref<HTMLElement | null>(null);
146-
const voiceOver = ref<HTMLElement | null>(null);
147-
148151
const { fixed, reset } = useBodyScrollFixed();
149152
const { enterTransition } = useFadeTransition(250);
150153

@@ -236,80 +239,21 @@ export const StagePlayScene = defineComponent({
236239
jumpToScene,
237240
});
238241

239-
const {
240-
top: spotlightTop,
241-
bottom: spotlightBottom,
242-
left: spotlightLeft,
243-
right: spotlightRight,
244-
} = useElementBounding(spotlight);
245-
const { width: voWidth, height: voHeight } = useElementBounding(voiceOver);
246-
const { width: windowWidth, height: windowHeight } = useWindowSize();
247-
248-
const voiceOverPlacement = computed<string>(() => {
249-
if (slots.default === undefined) {
250-
return "center";
251-
}
252-
253-
if (!options.value.voiceOverAutoPlacement) {
254-
return options.value.voiceOverPlacement;
255-
}
256-
257-
let possiblePositions: string[] = [];
258-
switch (options.value.voiceOverPlacement) {
259-
case "top":
260-
possiblePositions = ["top", "bottom", "left", "right"];
261-
break;
262-
case "bottom":
263-
possiblePositions = ["bottom", "top", "left", "right"];
264-
break;
265-
case "left":
266-
possiblePositions = ["left", "top", "bottom", "right"];
267-
break;
268-
case "right":
269-
possiblePositions = ["right", "top", "bottom", "left"];
270-
break;
271-
}
272-
273-
if (spotlightBottom.value + voHeight.value > windowHeight.value) {
274-
possiblePositions = possiblePositions.filter(
275-
(position) => position !== "bottom",
276-
);
277-
}
278-
279-
if (spotlightTop.value - voHeight.value < 0) {
280-
possiblePositions = possiblePositions.filter(
281-
(position) => position !== "top",
282-
);
283-
}
284-
285-
if (spotlightLeft.value - voWidth.value < 0) {
286-
possiblePositions = possiblePositions.filter(
287-
(position) => position !== "left",
288-
);
289-
}
290-
291-
if (spotlightRight.value + voWidth.value > windowWidth.value) {
292-
possiblePositions = possiblePositions.filter(
293-
(position) => position !== "right",
294-
);
295-
}
296-
297-
if (
298-
spotlightTop.value < 0 ||
299-
spotlightBottom.value > windowHeight.value
300-
) {
301-
possiblePositions = possiblePositions.filter(
302-
(position) => position !== "right" && position !== "left",
303-
);
304-
}
242+
const spotlight = ref<HTMLElement | null>(null);
243+
const voiceOver = ref<HTMLElement | null>(null);
305244

306-
if (spotlightLeft.value < 0 || spotlightRight.value > windowWidth.value) {
307-
possiblePositions = possiblePositions.filter(
308-
(position) => position !== "top" && position !== "bottom",
309-
);
310-
}
245+
const placement = computed<Placement>(() => {
246+
return (
247+
slots.default === undefined
248+
? "top-center"
249+
: `${options.value.voiceOverPlacement}-${options.value.voiceOverAlign}`
250+
) as Placement;
251+
});
311252

312-
return possiblePositions[0] || options.value.voiceOverPlacement;
253+
const { floatingStyles } = useFloating(spotlight, voiceOver, {
254+
placement: placement.value,
255+
whileElementsMounted: autoUpdate,
256+
middleware: options.value.voiceOverAutoPlacement ? [shift(), flip()] : [],
313257
});
314258

315259
watch(
@@ -427,14 +371,14 @@ export const StagePlayScene = defineComponent({
427371
{
428372
class: "vue-stage-play__voice-over",
429373
style: {
430-
position: "absolute",
431374
zIndex: "99996",
432375
color: "#292929",
433376
pointerEvents: "auto",
434-
...getPlacementStyle(
435-
voiceOverPlacement.value,
436-
options.value.voiceOverAlign,
437-
),
377+
...floatingStyles.value,
378+
transform:
379+
slots.default === undefined
380+
? "translate(-50%, -50%)"
381+
: floatingStyles.value.transform,
438382
},
439383
ref: voiceOver,
440384
},

‎src/utils.ts

Lines changed: 0 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -58,123 +58,3 @@ export function smoothScroll(
5858
}
5959
});
6060
}
61-
62-
export function getPlacementStyle(placement: string, align: string) {
63-
let top = "",
64-
bottom = "",
65-
left = "",
66-
right = "",
67-
transform = "";
68-
69-
switch (placement) {
70-
case "center":
71-
{
72-
top = "50%";
73-
left = "50%";
74-
transform = "translate(-50%, -50%)";
75-
}
76-
break;
77-
case "top":
78-
{
79-
top = "0";
80-
left = "0";
81-
transform = "translate(0, -100%)";
82-
83-
switch (align) {
84-
case "start":
85-
left = "0";
86-
break;
87-
case "center":
88-
left = "50%";
89-
transform = "translate(-50%, -100%)";
90-
break;
91-
case "end":
92-
left = "unset";
93-
right = "0";
94-
break;
95-
default:
96-
break;
97-
}
98-
}
99-
break;
100-
case "bottom":
101-
{
102-
bottom = "0";
103-
left = "0";
104-
transform = "translate(0, 100%)";
105-
106-
switch (align) {
107-
case "start":
108-
left = "0";
109-
break;
110-
case "center":
111-
left = "50%";
112-
transform = "translate(-50%, 100%)";
113-
break;
114-
case "end":
115-
left = "unset";
116-
right = "0";
117-
break;
118-
default:
119-
break;
120-
}
121-
}
122-
break;
123-
case "left":
124-
{
125-
top = "0";
126-
left = "0";
127-
transform = "translate(-100%, 0)";
128-
129-
switch (align) {
130-
case "start":
131-
top = "0";
132-
break;
133-
case "center":
134-
top = "50%";
135-
transform = "translate(-100%, -50%)";
136-
break;
137-
case "end":
138-
top = "unset";
139-
bottom = "0";
140-
break;
141-
default:
142-
break;
143-
}
144-
}
145-
break;
146-
case "right":
147-
{
148-
top = "0";
149-
right = "0";
150-
transform = "translate(100%, 0)";
151-
152-
switch (align) {
153-
case "start":
154-
top = "0";
155-
break;
156-
case "center":
157-
top = "50%";
158-
transform = "translate(100%, -50%)";
159-
break;
160-
case "end":
161-
top = "unset";
162-
bottom = "0";
163-
break;
164-
default:
165-
break;
166-
}
167-
}
168-
break;
169-
default:
170-
break;
171-
}
172-
173-
return {
174-
top,
175-
bottom,
176-
left,
177-
right,
178-
transform,
179-
};
180-
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy