diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..2cbd164 --- /dev/null +++ b/LICENSE @@ -0,0 +1,10 @@ +MIT License + +Copyright (c) 2023 Hunter Johnston +Copyright (c) 2023 Emil Kowalski + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/src/lib/internal/escape-keydown.ts b/src/lib/internal/escape-keydown.ts index 4b39914..13c5b91 100644 --- a/src/lib/internal/escape-keydown.ts +++ b/src/lib/internal/escape-keydown.ts @@ -1,7 +1,7 @@ import { readable } from 'svelte/store'; import { addEventListener } from './helpers/event.js'; import { chain } from './prevent-scroll.js'; -import { isFunction, isHTMLElement, noop } from '$lib/internal/helpers/index.js'; +import { isHTMLElement, noop } from '$lib/internal/helpers/index.js'; /** * Creates a readable store that tracks the latest Escape Keydown that occurred on the document. @@ -34,9 +34,10 @@ const documentEscapeKeyStore = readable( } ); -export const useEscapeKeydown = (node: HTMLElement, config: EscapeKeydownConfig = {}) => { +export function handleEscapeKeydown(node: HTMLElement, handler: (e: KeyboardEvent) => void) { let unsub = noop; - function update(config: EscapeKeydownConfig = {}) { + function update(handler: (e: KeyboardEvent) => void) { + // unsubscribe from the previous config/listeners if they exist unsub(); unsub = chain( @@ -49,51 +50,23 @@ export const useEscapeKeydown = (node: HTMLElement, config: EscapeKeydownConfig return; } + // preventDefault here to prevent exiting fullscreen for mac e.preventDefault(); - // If an ignore function is passed, check if it returns true - if (config.ignore) { - if (isFunction(config.ignore)) { - if (config.ignore(e)) return; - } - // If an ignore array is passed, check if any elements in the array match the target - else if (Array.isArray(config.ignore)) { - if ( - config.ignore.length > 0 && - config.ignore.some((ignoreEl) => { - return ignoreEl && target === ignoreEl; - }) - ) - return; - } - } - - // If none of the above conditions are met, call the handler - config.handler?.(e); - }), - (node.dataset.escapee = '') + handler(e); + }) ); + + // to remain compatible with nested Bits/Melt components, we set a data + // attribute to indicate that this element is handling escape keydowns + // so we only handle the highest level escapee + node.setAttribute('data-escapee', ''); } - update(config); + update(handler); - return { - update, - destroy() { - node.removeAttribute('data-escapee'); - unsub(); - } + return () => { + unsub(); + node.removeAttribute('data-escapee'); }; -}; - -export type EscapeKeydownConfig = { - /** - * Callback when user presses the escape key element. - */ - handler?: (evt: KeyboardEvent) => void; - - /** - * A predicate function or a list of elements that should not trigger the event. - */ - ignore?: ((e: KeyboardEvent) => boolean) | Element[]; -}; +} diff --git a/src/lib/internal/helpers/is.ts b/src/lib/internal/helpers/is.ts index 955d931..bce5096 100644 --- a/src/lib/internal/helpers/is.ts +++ b/src/lib/internal/helpers/is.ts @@ -1,3 +1,16 @@ +// HTML input types that do not cause the software keyboard to appear. +const nonTextInputTypes = new Set([ + 'checkbox', + 'radio', + 'range', + 'color', + 'file', + 'image', + 'button', + 'submit', + 'reset' +]); + export function isHTMLElement(el: unknown): el is HTMLElement { return el instanceof HTMLElement; } @@ -8,3 +21,11 @@ export const isBrowser = typeof document !== 'undefined'; export function isFunction(v: unknown): v is Function { return typeof v === 'function'; } + +export function isInput(target: Element) { + return ( + (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) || + target instanceof HTMLTextAreaElement || + (target instanceof HTMLElement && target.isContentEditable) + ); +} diff --git a/src/lib/internal/position-fixed.ts b/src/lib/internal/position-fixed.ts index 003a8fb..8ad06b5 100644 --- a/src/lib/internal/position-fixed.ts +++ b/src/lib/internal/position-fixed.ts @@ -5,7 +5,7 @@ import { effect } from './helpers/store.js'; let previousBodyPosition: Record | null = null; -export function usePositionFixed({ +export function handlePositionFixed({ isOpen, modal, nested, diff --git a/src/lib/internal/prevent-scroll.ts b/src/lib/internal/prevent-scroll.ts index fc4459d..c3c4947 100644 --- a/src/lib/internal/prevent-scroll.ts +++ b/src/lib/internal/prevent-scroll.ts @@ -1,6 +1,7 @@ // This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts import { addEventListener } from './helpers/event.js'; +import { isInput } from './helpers/is.js'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export function chain(...callbacks: any[]): (...args: any[]) => void { @@ -63,19 +64,6 @@ export function getScrollParent(node: Element): Element { return node || document.scrollingElement || document.documentElement; } -// HTML input types that do not cause the software keyboard to appear. -const nonTextInputTypes = new Set([ - 'checkbox', - 'radio', - 'range', - 'color', - 'file', - 'image', - 'button', - 'submit', - 'reset' -]); - // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position let preventScrollCount = 0; let restore: () => void; @@ -85,7 +73,7 @@ let restore: () => void; * restores it on unmount. Also ensures that content does not * shift due to the scrollbars disappearing. */ -export function usePreventScroll() { +export function preventScroll() { if (typeof document === 'undefined') return () => {}; preventScrollCount++; @@ -174,20 +162,19 @@ function preventScrollStandard() { function preventScrollMobileSafari() { let scrollable: Element; let lastY = 0; + const { documentElement, body, activeElement } = document; function onTouchStart(e: TouchEvent) { // Store the nearest scrollable parent element from the element that the user touched. scrollable = getScrollParent(e.target as Element); - if (scrollable === document.documentElement && scrollable === document.body) { - return; - } + if (scrollable === documentElement && scrollable === body) return; lastY = e.changedTouches[0].pageY; } function onTouchMove(e: TouchEvent) { // Prevent scrolling the window. - if (!scrollable || scrollable === document.documentElement || scrollable === document.body) { + if (!scrollable || scrollable === documentElement || scrollable === body) { e.preventDefault(); return; } @@ -200,9 +187,7 @@ function preventScrollMobileSafari() { const scrollTop = scrollable.scrollTop; const bottom = scrollable.scrollHeight - scrollable.clientHeight; - if (bottom === 0) { - return; - } + if (bottom === 0) return; if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) { e.preventDefault(); @@ -213,50 +198,48 @@ function preventScrollMobileSafari() { function onTouchEnd(e: TouchEvent) { const target = e.target as HTMLElement; - + if (!(isInput(target) && target !== activeElement)) return; // Apply this change if we're not already focused on the target element - if (isInput(target) && target !== document.activeElement) { - e.preventDefault(); - - // Apply a transform to trick Safari into thinking the input is at the top of the page - // so it doesn't try to scroll it into view. When tapping on an input, this needs to - // be done before the "focus" event, so we have to focus the element ourselves. - target.style.transform = 'translateY(-2000px)'; - target.focus(); - requestAnimationFrame(() => { - target.style.transform = ''; - }); - } + e.preventDefault(); + + // Apply a transform to trick Safari into thinking the input is at the top of the page + // so it doesn't try to scroll it into view. When tapping on an input, this needs to + // be done before the "focus" event, so we have to focus the element ourselves. + target.style.transform = 'translateY(-2000px)'; + target.focus(); + requestAnimationFrame(() => { + target.style.transform = ''; + }); } function onFocus(e: FocusEvent) { const target = e.target as HTMLElement; - if (isInput(target)) { - // Transform also needs to be applied in the focus event in cases where focus moves - // other than tapping on an input directly, e.g. the next/previous buttons in the - // software keyboard. In these cases, it seems applying the transform in the focus event - // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️ - target.style.transform = 'translateY(-2000px)'; - requestAnimationFrame(() => { - target.style.transform = ''; - - // This will have prevented the browser from scrolling the focused element into view, - // so we need to do this ourselves in a way that doesn't cause the whole page to scroll. - if (visualViewport) { - if (visualViewport.height < window.innerHeight) { - // If the keyboard is already visible, do this after one additional frame - // to wait for the transform to be removed. - requestAnimationFrame(() => { - scrollIntoView(target); - }); - } else { - // Otherwise, wait for the visual viewport to resize before scrolling so we can - // measure the correct position to scroll to. - visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true }); - } + if (!isInput(target)) return; + + // Transform also needs to be applied in the focus event in cases where focus moves + // other than tapping on an input directly, e.g. the next/previous buttons in the + // software keyboard. In these cases, it seems applying the transform in the focus event + // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️ + target.style.transform = 'translateY(-2000px)'; + requestAnimationFrame(() => { + target.style.transform = ''; + + // This will have prevented the browser from scrolling the focused element into view, + // so we need to do this ourselves in a way that doesn't cause the whole page to scroll. + if (visualViewport) { + if (visualViewport.height < window.innerHeight) { + // If the keyboard is already visible, do this after one additional frame + // to wait for the transform to be removed. + requestAnimationFrame(() => { + scrollIntoView(target); + }); + } else { + // Otherwise, wait for the visual viewport to resize before scrolling so we can + // measure the correct position to scroll to. + visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true }); } - }); - } + } + }); } function onWindowScroll() { @@ -273,11 +256,11 @@ function preventScrollMobileSafari() { const restoreStyles = chain( setStyle( - document.documentElement, + documentElement, 'paddingRight', - `${window.innerWidth - document.documentElement.clientWidth}px` + `${window.innerWidth - documentElement.clientWidth}px` ), - setStyle(document.documentElement, 'overflow', 'hidden') + setStyle(documentElement, 'overflow', 'hidden') // setStyle(document.body, 'marginTop', `-${scrollY}px`), ); @@ -312,15 +295,13 @@ function setStyle(element: HTMLElement, style: any, value: string) { } function scrollIntoView(target: Element) { - const root = document.scrollingElement || document.documentElement; + const { documentElement, body, scrollingElement } = document; + + const root = scrollingElement || documentElement; while (target && target !== root) { // Find the parent scrollable element and adjust the scroll position if the target is not already in view. const scrollable = getScrollParent(target); - if ( - scrollable !== document.documentElement && - scrollable !== document.body && - scrollable !== target - ) { + if (scrollable !== documentElement && scrollable !== body && scrollable !== target) { const scrollableTop = scrollable.getBoundingClientRect().top; const targetTop = target.getBoundingClientRect().top; const targetBottom = target.getBoundingClientRect().bottom; @@ -335,11 +316,3 @@ function scrollIntoView(target: Element) { target = scrollable.parentElement; } } - -export function isInput(target: Element) { - return ( - (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) || - target instanceof HTMLTextAreaElement || - (target instanceof HTMLElement && target.isContentEditable) - ); -} diff --git a/src/lib/internal/snap-points.ts b/src/lib/internal/snap-points.ts index f3d1b27..77cae1d 100644 --- a/src/lib/internal/snap-points.ts +++ b/src/lib/internal/snap-points.ts @@ -2,7 +2,7 @@ import { derived, get, type Writable } from 'svelte/store'; import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants.js'; import { effect, set } from './helpers/index.js'; -export function createSnapPoints({ +export function handleSnapPoints({ activeSnapPoint, snapPoints, drawerRef, diff --git a/src/lib/internal/vaul.ts b/src/lib/internal/vaul.ts index aa92186..5c45f9c 100644 --- a/src/lib/internal/vaul.ts +++ b/src/lib/internal/vaul.ts @@ -1,6 +1,6 @@ import { derived, get, writable, type Readable } from 'svelte/store'; import type { SvelteEvent } from './types.js'; -import { createSnapPoints } from './snap-points.js'; +import { handleSnapPoints } from './snap-points.js'; import { overridable, toWritableStores, @@ -11,15 +11,15 @@ import { reset, effect, removeUndefined, - styleToString + styleToString, + isInput } from '$lib/internal/helpers/index.js'; -import { isIOS, isInput, usePreventScroll } from './prevent-scroll.js'; -import { usePositionFixed } from './position-fixed.js'; -import { onMount } from 'svelte'; +import { isIOS, preventScroll } from './prevent-scroll.js'; +import { handlePositionFixed } from './position-fixed.js'; import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants.js'; import { addEventListener } from './helpers/event.js'; import { noop } from './helpers/noop.js'; -import { useEscapeKeydown } from './escape-keydown.js'; +import { handleEscapeKeydown } from './escape-keydown.js'; const CLOSE_THRESHOLD = 0.25; @@ -123,26 +123,26 @@ export function createVaul(props: CreateVaulProps) { const openStore = writable(withDefaults.defaultOpen); const isOpen = overridable(openStore, withDefaults.onOpenChange); - const hasBeenOpened = writable(false); const visible = writable(false); - const mounted = writable(false); - const isDragging = writable(false); + const justReleased = writable(false); const overlayRef = writable(undefined); const openTime = writable(null); - const dragStartTime = writable(null); const dragEndTime = writable(null); const lastTimeDragPrevented = writable(null); const isAllowedToDrag = writable(false); const nestedOpenChangeTimer = writable(null); - const pointerStartY = writable(0); const keyboardIsOpen = writable(false); const previousDiffFromInitial = writable(0); const drawerRef = writable(undefined); const drawerHeightRef = writable(get(drawerRef)?.getBoundingClientRect().height || 0); const initialDrawerHeight = writable(0); + + let isDragging = false; + let dragStartTime: Date | null = null; let isClosing = false; + let pointerStartY = 0; function getDefaultActiveSnapPoint() { if (withDefaults.defaultActiveSnapPoint !== undefined) { @@ -166,7 +166,7 @@ export function createVaul(props: CreateVaulProps) { onRelease: onReleaseSnapPoints, shouldFade, snapPointsOffset - } = createSnapPoints({ + } = handleSnapPoints({ snapPoints, activeSnapPoint, drawerRef, @@ -201,28 +201,27 @@ export function createVaul(props: CreateVaulProps) { } }); - effect([isOpen], ([$isOpen]) => { + // prevent scroll when the drawer is open + effect([isOpen, justReleased], ([$isOpen, $justReleased]) => { let unsub = () => {}; - if ($isOpen) { - unsub = usePreventScroll(); + if ($isOpen && !$justReleased) { + unsub = preventScroll(); } return unsub; }); - const { restorePositionSetting } = usePositionFixed({ isOpen, modal, nested, hasBeenOpened }); + const { restorePositionSetting } = handlePositionFixed({ isOpen, modal, nested, hasBeenOpened }); + // Close the drawer on escape keydown effect([drawerRef], ([$drawerRef]) => { let unsub = noop; if ($drawerRef) { - const { destroy } = useEscapeKeydown($drawerRef, { - handler: () => { - closeDrawer(); - } + unsub = handleEscapeKeydown($drawerRef, () => { + closeDrawer(); }); - unsub = destroy; } return () => { @@ -236,18 +235,16 @@ export function createVaul(props: CreateVaulProps) { isOpen.set(true); } - function getScale() { - return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth; - } - function onPress(event: SvelteEvent) { const $drawerRef = get(drawerRef); if (!get(dismissible) && !get(snapPoints)) return; if ($drawerRef && !$drawerRef.contains(event.target as Node)) return; drawerHeightRef.set($drawerRef?.getBoundingClientRect().height || 0); - isDragging.set(true); - dragStartTime.set(new Date()); + + isDragging = true; + + dragStartTime = new Date(); // iOS doesn't trigger mouseUp after scrolling so we need to listen to touched in order to disallow dragging if (isIOS()) { @@ -256,7 +253,7 @@ export function createVaul(props: CreateVaulProps) { // Ensure we maintain correct pointer capture even when going outside of the drawer (event.target as HTMLElement).setPointerCapture(event.pointerId); - pointerStartY.set(event.screenY); + pointerStartY = event.screenY; } function shouldDrag(el: EventTarget, isDraggingDown: boolean) { @@ -327,10 +324,9 @@ export function createVaul(props: CreateVaulProps) { } function onDrag(event: SvelteEvent) { - if (!get(isDragging)) return; + if (!isDragging) return; // We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly - const $pointerStartY = get(pointerStartY); - const draggedDistance = $pointerStartY - event.screenY; + const draggedDistance = pointerStartY - event.screenY; const isDraggingDown = draggedDistance > 0; const $activeSnapPointIndex = get(activeSnapPointIndex); @@ -583,10 +579,6 @@ export function createVaul(props: CreateVaulProps) { } }); - onMount(() => { - mounted.set(true); - }); - function resetDrawer() { const $drawerRef = get(drawerRef); if (!$drawerRef) return; @@ -626,9 +618,8 @@ export function createVaul(props: CreateVaulProps) { } function onRelease(event: SvelteEvent) { - const $isDragging = get(isDragging); const $drawerRef = get(drawerRef); - if (!$isDragging || !$drawerRef) return; + if (!isDragging || !$drawerRef) return; const $isAllowedToDrag = get(isAllowedToDrag); @@ -638,7 +629,7 @@ export function createVaul(props: CreateVaulProps) { } $drawerRef.classList.remove(DRAG_CLASS); isAllowedToDrag.set(false); - isDragging.set(false); + isDragging = false; const $dragEndTime = new Date(); @@ -653,11 +644,10 @@ export function createVaul(props: CreateVaulProps) { ) return; - const $dragStartTime = get(dragStartTime); - if ($dragStartTime === null) return; + if (dragStartTime === null) return; - const timeTaken = $dragEndTime.getTime() - $dragStartTime.getTime(); - const distMoved = get(pointerStartY) - event.screenY; + const timeTaken = $dragEndTime.getTime() - dragStartTime.getTime(); + const distMoved = pointerStartY - event.screenY; const velocity = Math.abs(distMoved) / timeTaken; if (velocity > 0.05) { @@ -762,7 +752,7 @@ export function createVaul(props: CreateVaulProps) { ); } - function onNestedDrag(event: SvelteEvent, percentageDragged: number) { + function onNestedDrag(_: SvelteEvent, percentageDragged: number) { if (percentageDragged < 0) return; const initialScale = (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth; const newScale = initialScale + percentageDragged * (1 - initialScale); @@ -775,11 +765,10 @@ export function createVaul(props: CreateVaulProps) { } function onNestedRelease(_: SvelteEvent, o: boolean) { + if (!o) return; const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1; const y = o ? -NESTED_DISPLACEMENT : 0; - if (!o) return; - set(get(drawerRef), { transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`, transform: `scale(${scale}) translate3d(0, ${y}px, 0)` @@ -824,3 +813,7 @@ export function createVaul(props: CreateVaulProps) { export function dampenValue(v: number) { return 8 * (Math.log(v + 1) - 2); } + +function getScale() { + return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth; +}