diff --git a/package-lock.json b/package-lock.json index f7c4fd59..7b8a7bbd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,11 +12,9 @@ "@babel/runtime": "^7.20.13", "@hotwired/stimulus": "^3.2.1", "date-fns": "^2.29.3", - "mitt": "^3.0.0", - "smoothscroll-polyfill": "^0.4.4" + "mitt": "^3.0.0" }, "devDependencies": { - "@types/smoothscroll-polyfill": "^0.3.1", "agadoo": "^3.0.0", "cypress": "^12.5.1", "fast-glob": "^3.2.12", @@ -640,12 +638,6 @@ "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", "dev": true }, - "node_modules/@types/smoothscroll-polyfill": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@types/smoothscroll-polyfill/-/smoothscroll-polyfill-0.3.1.tgz", - "integrity": "sha512-+KkHw4y+EyeCtVXET7woHUhIbfWFCflc0E0mZnSV+ZdjPQeHt/9KPEuT7gSW/kFQ8O3EG30PLO++YhChDt8+Ag==", - "dev": true - }, "node_modules/@types/yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz", @@ -3904,11 +3896,6 @@ "node": ">=8" } }, - "node_modules/smoothscroll-polyfill": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", - "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==" - }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -4946,12 +4933,6 @@ "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", "dev": true }, - "@types/smoothscroll-polyfill": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@types/smoothscroll-polyfill/-/smoothscroll-polyfill-0.3.1.tgz", - "integrity": "sha512-+KkHw4y+EyeCtVXET7woHUhIbfWFCflc0E0mZnSV+ZdjPQeHt/9KPEuT7gSW/kFQ8O3EG30PLO++YhChDt8+Ag==", - "dev": true - }, "@types/yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz", @@ -7363,11 +7344,6 @@ "is-fullwidth-code-point": "^3.0.0" } }, - "smoothscroll-polyfill": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", - "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==" - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/package.json b/package.json index 3fbdbb78..a3b2de8c 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,9 @@ "@babel/runtime": "^7.20.13", "@hotwired/stimulus": "^3.2.1", "date-fns": "^2.29.3", - "mitt": "^3.0.0", - "smoothscroll-polyfill": "^0.4.4" + "mitt": "^3.0.0" }, "devDependencies": { - "@types/smoothscroll-polyfill": "^0.3.1", "agadoo": "^3.0.0", "cypress": "^12.5.1", "fast-glob": "^3.2.12", diff --git a/src/utilities/scroll.ts b/src/utilities/scroll.ts index 1ae17f14..c529ed21 100644 --- a/src/utilities/scroll.ts +++ b/src/utilities/scroll.ts @@ -1,74 +1,62 @@ -import smoothScroll from 'smoothscroll-polyfill'; - -export async function scrollToElement(element: Element, {behavior = "smooth", block = "start", inline = "nearest"}: ScrollIntoViewOptions = {}) { - smoothScroll.polyfill(); - element.scrollIntoView({behavior, block, inline}); -} - -export async function scrollAbsoluteTop(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - element.scrollTo({top: 0, left: 0, behavior}); -} - -export async function scrollAbsoluteBottom(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - if (element == window) { - element.scrollTo({top: document.body.scrollHeight, left: 0, behavior}); - } else { - element.scrollTo({top: (element as Element).scrollHeight, left: 0, behavior}); - } -} - -export async function scrollAbsoluteLeft(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - element.scrollTo({left: 0, behavior}); -} - -export async function scrollAbsoluteRight(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - if (element == window) { - element.scrollTo({left: document.body.scrollWidth, behavior}); - } else { - element.scrollTo({left: (element as Element).scrollWidth, behavior}); - } -} - -export async function scrollUp(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - element.scrollBy({top: -amount, left: 0, behavior}); -} - -export async function scrollDown(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - element.scrollBy({top: amount, left: 0, behavior}); -} - -export async function scrollLeft(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - element.scrollBy({top: 0, left: -amount, behavior}); -} - -export async function scrollRight(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { - smoothScroll.polyfill(); - element.scrollBy({top: 0, left: amount, behavior}); -} - -export function getScrollParent(node: HTMLElement | null): Window | HTMLElement | null { - smoothScroll.polyfill(); - if (!node) { - return null; - } - - if (node == document.body) { - return window; - } - - const overflowY = getComputedStyle(node).overflowY; - const isScrollable = overflowY !== "visible" && overflowY !== "hidden"; - - if (isScrollable && node.scrollHeight >= node.clientHeight) { - return node; - } - - return getScrollParent(node.parentElement) || document.body; -} +export async function scrollToElement(element: Element, {behavior = "smooth", block = "start", inline = "nearest"}: ScrollIntoViewOptions = {}) { + element.scrollIntoView({behavior, block, inline}); +} + +export async function scrollAbsoluteTop(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { + element.scrollTo({top: 0, left: 0, behavior}); +} + +export async function scrollAbsoluteBottom(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { + if (element == window) { + element.scrollTo({top: document.body.scrollHeight, left: 0, behavior}); + } else { + element.scrollTo({top: (element as Element).scrollHeight, left: 0, behavior}); + } +} + +export async function scrollAbsoluteLeft(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { + element.scrollTo({left: 0, behavior}); +} + +export async function scrollAbsoluteRight(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) { + if (element == window) { + element.scrollTo({left: document.body.scrollWidth, behavior}); + } else { + element.scrollTo({left: (element as Element).scrollWidth, behavior}); + } +} + +export async function scrollUp(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { + element.scrollBy({top: -amount, left: 0, behavior}); +} + +export async function scrollDown(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { + element.scrollBy({top: amount, left: 0, behavior}); +} + +export async function scrollLeft(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { + element.scrollBy({top: 0, left: -amount, behavior}); +} + +export async function scrollRight(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) { + element.scrollBy({top: 0, left: amount, behavior}); +} + +export function getScrollParent(node: HTMLElement | null): Window | HTMLElement | null { + if (!node) { + return null; + } + + if (node == document.body) { + return window; + } + + const overflowY = getComputedStyle(node).overflowY; + const isScrollable = overflowY !== "visible" && overflowY !== "hidden"; + + if (isScrollable && node.scrollHeight >= node.clientHeight) { + return node; + } + + return getScrollParent(node.parentElement) || document.body; +}