Skip to content

Commit

Permalink
Rename shadow_dom_target to shadow_dom_el
Browse files Browse the repository at this point in the history 
Preparation for fixing #72
  • Loading branch information
Vatroslav Vrbanic committed Jun 19, 2022
1 parent 00b035e commit d39342c
Show file tree
Hide file tree
Showing 15 changed files with 304 additions and 304 deletions.
52 changes: 26 additions & 26 deletions src/components-internal/SvelthreeInteraction.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,13 +143,13 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
let c: HTMLElement
$: c = $canvas_dom.element
export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
export let shadow_dom_el: SvelthreeShadowDOMElement = undefined
let listeners: boolean = false
// --- Reactively add listeners ---
$: if (c && shadow_dom_target && raycaster && interactionEnabled && obj && !obj.userData.interact) {
$: if (c && shadow_dom_el && raycaster && interactionEnabled && obj && !obj.userData.interact) {
obj.userData.interact = true
listeners = true
}
Expand Down Expand Up @@ -532,8 +532,8 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
handler: (e: PointerEvent) => void
): void {
listener_options
? shadow_dom_target.addEventListener(event_name, handler, listener_options)
: shadow_dom_target.addEventListener(event_name, handler)
? shadow_dom_el.addEventListener(event_name, handler, listener_options)
: shadow_dom_el.addEventListener(event_name, handler)
}
/* POINTER Event CANVAS Component POINTER Event -> SHADOW DOM Event */
Expand Down Expand Up @@ -643,7 +643,7 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
last_pointer_moveover.clientY = e.clientY
// immediatelly dispatch component event via shadow dom listener / handler
shadow_dom_target.dispatchEvent(get_pointerevent_modified_clone(e, "pointermoveover"))
shadow_dom_el.dispatchEvent(get_pointerevent_modified_clone(e, "pointermoveover"))
}
}
}
Expand Down Expand Up @@ -672,7 +672,7 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
pointer_is_out = false
if (used_pointer_events.has("pointerover")) {
shadow_dom_target.dispatchEvent(get_pointerevent_modified_clone(e, "pointerover"))
shadow_dom_el.dispatchEvent(get_pointerevent_modified_clone(e, "pointerover"))
}
}
} else {
Expand All @@ -681,7 +681,7 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
pointer_is_over = false
if (used_pointer_events.has("pointerout")) {
shadow_dom_target.dispatchEvent(get_pointerevent_modified_clone(e, "pointerout"))
shadow_dom_el.dispatchEvent(get_pointerevent_modified_clone(e, "pointerout"))
}
}
}
Expand All @@ -698,7 +698,7 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
function check_pointer_pointerdown(e: PointerEvent) {
if (intersects()) {
shadow_dom_target.dispatchEvent(get_pointerevent_modified_clone(e))
shadow_dom_el.dispatchEvent(get_pointerevent_modified_clone(e))
}
}
Expand All @@ -713,7 +713,7 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
function check_pointer_pointerup(e: PointerEvent) {
if (intersects()) {
shadow_dom_target.dispatchEvent(get_pointerevent_modified_clone(e))
shadow_dom_el.dispatchEvent(get_pointerevent_modified_clone(e))
}
}
Expand All @@ -730,7 +730,7 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
*/
function check_pointer_click(e: PointerEvent) {
if (intersects()) {
shadow_dom_target.dispatchEvent(get_pointerevent_modified_clone(e))
shadow_dom_el.dispatchEvent(get_pointerevent_modified_clone(e))
}
}
Expand Down Expand Up @@ -924,8 +924,8 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
handler: (e: FocusEvent) => void
): void {
listener_options
? shadow_dom_target.addEventListener(event_name, handler, listener_options)
: shadow_dom_target.addEventListener(event_name, handler)
? shadow_dom_el.addEventListener(event_name, handler, listener_options)
: shadow_dom_el.addEventListener(event_name, handler)
}
/* FOCUS Event DISPATCH Component Event IMMEDIATELY / QUEUE */
Expand Down Expand Up @@ -1062,8 +1062,8 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
handler: (e: KeyboardEvent) => void
): void {
listener_options
? shadow_dom_target.addEventListener(event_name, handler, listener_options)
: shadow_dom_target.addEventListener(event_name, handler)
? shadow_dom_el.addEventListener(event_name, handler, listener_options)
: shadow_dom_el.addEventListener(event_name, handler)
}
/** Keyboard events are also being provided (re-dispatched) by the Canvas component. */
Expand Down Expand Up @@ -1495,10 +1495,10 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
break
}
shadow_dom_target.removeEventListener(event_name, keyboardevents_handler_action, false)
shadow_dom_target.removeEventListener(event_name, keyboardevents_handler_action, true)
shadow_dom_target.removeEventListener(event_name, keyboardevents_handler_directive, false)
shadow_dom_target.removeEventListener(event_name, keyboardevents_handler_directive, true)
shadow_dom_el.removeEventListener(event_name, keyboardevents_handler_action, false)
shadow_dom_el.removeEventListener(event_name, keyboardevents_handler_action, true)
shadow_dom_el.removeEventListener(event_name, keyboardevents_handler_directive, false)
shadow_dom_el.removeEventListener(event_name, keyboardevents_handler_directive, true)
unregister_keyboard_event(event_name)
}
Expand All @@ -1521,10 +1521,10 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
// remove unused but registered (were used) listeners
function completely_remove_focus_listener(event_name: SvelthreeSupportedInteractionEvent): void {
if (event_is_registered(event_name, used_focus_events)) {
shadow_dom_target.removeEventListener(event_name, focusevents_handler_action, true)
shadow_dom_target.removeEventListener(event_name, focusevents_handler_action, false)
shadow_dom_target.removeEventListener(event_name, focusevents_handler_directive, true)
shadow_dom_target.removeEventListener(event_name, focusevents_handler_directive, false)
shadow_dom_el.removeEventListener(event_name, focusevents_handler_action, true)
shadow_dom_el.removeEventListener(event_name, focusevents_handler_action, false)
shadow_dom_el.removeEventListener(event_name, focusevents_handler_directive, true)
shadow_dom_el.removeEventListener(event_name, focusevents_handler_directive, false)
unregister_focus_event(event_name)
}
Expand Down Expand Up @@ -1566,10 +1566,10 @@ This is a **svelthree** _SvelthreeInteraction_ Component.
break
}
shadow_dom_target.removeEventListener(event_name, pointerevents_handler_action, false)
shadow_dom_target.removeEventListener(event_name, pointerevents_handler_action, true)
shadow_dom_target.removeEventListener(event_name, pointerevents_handler_directive, false)
shadow_dom_target.removeEventListener(event_name, pointerevents_handler_directive, true)
shadow_dom_el.removeEventListener(event_name, pointerevents_handler_action, false)
shadow_dom_el.removeEventListener(event_name, pointerevents_handler_action, true)
shadow_dom_el.removeEventListener(event_name, pointerevents_handler_directive, false)
shadow_dom_el.removeEventListener(event_name, pointerevents_handler_directive, true)
unregister_pointer_event(event_name)
}
Expand Down
26 changes: 13 additions & 13 deletions src/components/AmbientLight.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,25 +194,25 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
// accessability -> shadow dom element
/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
export let shadow_dom_el: SvelthreeShadowDOMElement = undefined
$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
$: if (shadow_root_el && light && !shadow_dom_el) create_shadow_dom_target()
async function create_shadow_dom_target() {
if (browser) {
// DUCKTAPE `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
await tick()
shadow_dom_target = document.createElement("div")
shadow_dom_el = document.createElement("div")
shadow_dom_target.dataset.kind = "AmbientLight"
if (name) shadow_dom_target.dataset.name = name
shadow_dom_el.dataset.kind = "AmbientLight"
if (name) shadow_dom_el.dataset.name = name
const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_el
const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
if (shadow_target) {
shadow_target.appendChild(shadow_dom_target)
shadow_target.appendChild(shadow_dom_el)
} else {
console.error(
"SVELTHREE > AmbientLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
Expand All @@ -227,22 +227,22 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
// accessability -> shadow dom focusable
export let tabindex: number = undefined
$: if (shadow_dom_target && tabindex !== undefined) {
shadow_dom_target.tabIndex = tabindex
$: if (shadow_dom_el && tabindex !== undefined) {
shadow_dom_el.tabIndex = tabindex
}
// accessability -> shadow dom wai-aria
export let aria: Partial<ARIAMixin> = undefined
$: if (shadow_dom_target && aria !== undefined) {
$: if (shadow_dom_el && aria !== undefined) {
for (const key in aria) {
if (key === "ariaLabel") {
// add specified `ariaLabel` as text to generated shadow DOM `<div>` element (for better reader support / indexing (?))
// TODO RECONSIDER needs to be tested more, may be obsolete (?).
shadow_dom_target.innerText += `${aria[key]}`
shadow_dom_el.innerText += `${aria[key]}`
}
shadow_dom_target[key] = aria[key]
shadow_dom_el[key] = aria[key]
}
}
Expand Down Expand Up @@ -332,7 +332,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
export const start_ani = start_animation
/** Sets `focus()` on the component / it's shadow dom element. */
export const focused = (): void => shadow_dom_target.focus()
export const focused = (): void => shadow_dom_el.focus()
/** **Completely replace** `onMount` -> any `onMount_inject_before` & `onMount_inject_after` will be ignored.
* _default verbosity will be gone!_ */
Expand Down
26 changes: 13 additions & 13 deletions src/components/CubeCamera.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,25 +416,25 @@ Renders a CubeMap for usage with **non-PBR** materials which have an `.envMap` p
// accessability -> shadow dom element
/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
export let shadow_dom_el: SvelthreeShadowDOMElement = undefined
$: if (shadow_root_el && camera && !shadow_dom_target) create_shadow_dom_target()
$: if (shadow_root_el && camera && !shadow_dom_el) create_shadow_dom_target()
async function create_shadow_dom_target() {
if (browser) {
// DUCKTAPE `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
await tick()
shadow_dom_target = document.createElement("div")
shadow_dom_el = document.createElement("div")
shadow_dom_target.dataset.kind = "CubeCamera"
if (name) shadow_dom_target.dataset.name = name
shadow_dom_el.dataset.kind = "CubeCamera"
if (name) shadow_dom_el.dataset.name = name
const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_el
const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
if (shadow_target) {
shadow_target.appendChild(shadow_dom_target)
shadow_target.appendChild(shadow_dom_el)
} else {
console.error(
"SVELTHREE > CubeCamera > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
Expand All @@ -449,22 +449,22 @@ Renders a CubeMap for usage with **non-PBR** materials which have an `.envMap` p
// accessability -> shadow dom focusable
export let tabindex: number = undefined
$: if (shadow_dom_target && tabindex !== undefined) {
shadow_dom_target.tabIndex = tabindex
$: if (shadow_dom_el && tabindex !== undefined) {
shadow_dom_el.tabIndex = tabindex
}
// accessability -> shadow dom wai-aria
export let aria: Partial<ARIAMixin> = undefined
$: if (shadow_dom_target && aria !== undefined) {
$: if (shadow_dom_el && aria !== undefined) {
for (const key in aria) {
if (key === "ariaLabel") {
// add specified `ariaLabel` as text to generated shadow DOM `<div>` element (for better reader support / indexing (?))
// TODO RECONSIDER needs to be tested more, may be obsolete (?).
shadow_dom_target.innerText += `${aria[key]}`
shadow_dom_el.innerText += `${aria[key]}`
}
shadow_dom_target[key] = aria[key]
shadow_dom_el[key] = aria[key]
}
}
Expand Down Expand Up @@ -659,7 +659,7 @@ Renders a CubeMap for usage with **non-PBR** materials which have an `.envMap` p
export const start_ani = start_animation
/** Sets `focus()` on the component / it's shadow dom element. */
export const focused = (): void => shadow_dom_target.focus()
export const focused = (): void => shadow_dom_el.focus()
/** **Completely replace** `onMount` -> any `onMount_inject_before` & `onMount_inject_after` will be ignored.
* _default verbosity will be gone!_ */
Expand Down
26 changes: 13 additions & 13 deletions src/components/DirectionalLight.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,25 +223,25 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
// accessability -> shadow dom element
/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
export let shadow_dom_el: SvelthreeShadowDOMElement = undefined
$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
$: if (shadow_root_el && light && !shadow_dom_el) create_shadow_dom_target()
async function create_shadow_dom_target() {
if (browser) {
// DUCKTAPE `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
await tick()
shadow_dom_target = document.createElement("div")
shadow_dom_el = document.createElement("div")
shadow_dom_target.dataset.kind = "DirectionalLight"
if (name) shadow_dom_target.dataset.name = name
shadow_dom_el.dataset.kind = "DirectionalLight"
if (name) shadow_dom_el.dataset.name = name
const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_el
const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
if (shadow_target) {
shadow_target.appendChild(shadow_dom_target)
shadow_target.appendChild(shadow_dom_el)
} else {
console.error(
"SVELTHREE > DirectionalLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
Expand All @@ -256,22 +256,22 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
// accessability -> shadow dom focusable
export let tabindex: number = undefined
$: if (shadow_dom_target && tabindex !== undefined) {
shadow_dom_target.tabIndex = tabindex
$: if (shadow_dom_el && tabindex !== undefined) {
shadow_dom_el.tabIndex = tabindex
}
// accessability -> shadow dom wai-aria
export let aria: Partial<ARIAMixin> = undefined
$: if (shadow_dom_target && aria !== undefined) {
$: if (shadow_dom_el && aria !== undefined) {
for (const key in aria) {
if (key === "ariaLabel") {
// add specified `ariaLabel` as text to generated shadow DOM `<div>` element (for better reader support / indexing (?))
// TODO RECONSIDER needs to be tested more, may be obsolete (?).
shadow_dom_target.innerText += `${aria[key]}`
shadow_dom_el.innerText += `${aria[key]}`
}
shadow_dom_target[key] = aria[key]
shadow_dom_el[key] = aria[key]
}
}
Expand Down Expand Up @@ -491,7 +491,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
export const start_ani = start_animation
/** Sets `focus()` on the component / it's shadow dom element. */
export const focused = (): void => shadow_dom_target.focus()
export const focused = (): void => shadow_dom_el.focus()
/** **Completely replace** `onMount` -> any `onMount_inject_before` & `onMount_inject_after` will be ignored.
* _default verbosity will be gone!_ */
Expand Down
Loading

0 comments on commit d39342c

Please sign in to comment.