Optimize + Brand

VaelVictus · Jul 22, 2023 · d05fd12 · d05fd12
1 parent d533843
commit d05fd12
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
+# Forked
+Vael's fork of svelte-scrollto-element, supporting Svelte 4 and bringing with it slight optimizations.
+
 # svelte-scrollto-element
 
 > Animating vertical and horizontal scrolling (for Svelte)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "svelte-scrollto-element",
-  "version": "0.7.1",
+  "name": "@vaelvictus/svelte-scrollto-element",
+  "version": "0.7.2",
   "description": "Svelte action that listens for click events and scrolls to elements with animation. Inspired by rigor789/vue-scrollto.",
   "scripts": {
     "start": "tsc -w",

diff --git a/src/services/service.ts b/src/services/service.ts
@@ -17,7 +17,7 @@ const defaultOptions: ScrollToElementOptions = {
 };
 
 const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
-  const {
+  let {
     duration,
     delay,
     easing,
@@ -29,35 +29,27 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
     onDone,
     container,
     onAborting,
-    element
+    element,
+    offset
   } = options;
 
-  let { offset } = options;
+  offset = typeof offset === 'function' ? offset() : offset;
 
-  if (typeof offset === 'function') {
-    offset = offset() as Function;
-  }
-
-  const cumulativeOffsetContainer = cumulativeOffset(container);
-  const cumulativeOffsetTarget = element ? cumulativeOffset(element) : { top: y, left: x };
-
-  const initialX = scrollLeft(container);
-  const initialY = scrollTop(container);
+  const { top: containerTop, left: containerLeft } = cumulativeOffset(container);
+  const { top: targetTop, left: targetLeft } = element ? cumulativeOffset(element) : { top: y, left: x };
 
-  const targetX = cumulativeOffsetTarget.left - cumulativeOffsetContainer.left + (offset as number);
-  const targetY = cumulativeOffsetTarget.top - cumulativeOffsetContainer.top + (offset as number);
-
-  const diffX = targetX - initialX;
-  const diffY = targetY - initialY;
+  const [initialX, initialY] = [scrollLeft(container), scrollTop(container)];
+  const [targetX, targetY] = [targetLeft - containerLeft, targetTop - containerTop].map(t => t + offset);
+  const [diffX, diffY] = [targetX - initialX, targetY - initialY];
 
   let scrolling = true;
   let started = false;
   const startTime = now() + delay;
   const endTime = startTime + duration;
 
-  function scrollToTopLeft(element: HTMLElement, top: number, left: number): void {
-    if (scrollX) scrollLeft(element, left);
-    if (scrollY) scrollTop(element, top);
+  function scrollToTopLeft(top: number, left: number): void {
+    if (scrollX) scrollLeft(container, left);
+    if (scrollY) scrollTop(container, top);
   }
 
   function start(delayStart: number | boolean): void {
@@ -68,7 +60,7 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
   }
 
   function tick(progress: number): void {
-    scrollToTopLeft(container, initialY + diffY * progress, initialX + diffX * progress);
+    scrollToTopLeft(initialY + diffY * progress, initialX + diffX * progress);
   }
 
   function stop(): void {
@@ -91,16 +83,14 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => {
       return false;
     }
     if (started) {
-      const p = now - startTime;
-      const t = 0 + 1 * easing(p / duration);
+      const t = easing((now - startTime) / duration);
       tick(t);
     }
 
     return true;
   });
 
   start(delay);
-
   tick(0);
 
   return stop;
@@ -139,27 +129,16 @@ const setGlobalOptions = (options: ScrollToElementOptions): void => {
 const scrollTo = (options: ScrollToElementOptions): (() => void) =>
   scrollToInternal(proceedOptions(options));
 
-const scrollToBottom = (options?: ScrollToElementOptions): (() => void) => {
+const scrollToY = (y: number, options?: ScrollToElementOptions): (() => void) => {
   options = proceedOptions(options);
-
-  return scrollToInternal(
-    extend(options, {
-      element: null,
-      y: scrollContainerHeight(options.container)
-    })
-  );
+  return scrollToInternal(extend(options, { element: null, y }));
 };
 
-const scrollToTop = (options?: ScrollToElementOptions): (() => void) => {
-  options = proceedOptions(options);
+const scrollToBottom = (options?: ScrollToElementOptions): (() => void) => 
+  scrollToY(scrollContainerHeight(proceedOptions(options).container), options);
 
-  return scrollToInternal(
-    extend(options, {
-      element: null,
-      y: 0
-    })
-  );
-};
+const scrollToTop = (options?: ScrollToElementOptions): (() => void) => 
+  scrollToY(0, options);
 
 const makeScrollToAction =
   (scrollToFunc: Function) => (node: Node, options: ScrollToElementOptions) => {
@@ -187,4 +166,4 @@ export const scrolltotop = makeScrollToAction(scrollToTop);
 export const scrolltobottom = makeScrollToAction(scrollToBottom);
 
 // Methods
-export const animateScroll = { scrollTo, scrollToTop, scrollToBottom, setGlobalOptions };
+export const animateScroll = { scrollTo, scrollToTop, scrollToBottom, setGlobalOptions };