@inizioevoke/astro-core 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "",
   "license": "ISC",
   "author": "",

package/src/components/ScrollContainer/ScrollContainer.css

@@ -4,6 +4,7 @@
     --evo-scroll-container-track-width: 8px;
     --evo-scroll-container-track-top: 0px;
     --evo-scroll-container-track-bottom: 0px;
+    --evo-scroll-container-track-right: 0px;
     --evo-scroll-container-track-color: #dddddd;
     --evo-scroll-container-thumb-color: #666666;
     --evo-scroll-container-thumb-border-width: 0px;
@@ -42,7 +43,7 @@
     .evo-scroll-track {
       position: absolute;
       top: var(--evo-scroll-container-track-top);
-      right: 0px;
+      right: var(--evo-scroll-container-track-right);
       width: var(--evo-scroll-container-track-width);
       height: calc(100% - var(--evo-scroll-container-track-top) - var(--evo-scroll-container-track-bottom));
       background: var(--evo-scroll-container-track-color);

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -4,7 +4,8 @@ export interface IScrollContainer {
   resize(args: { height?: number }): void;
   refresh(): void;
 }
-export class ScrollContainer implements IScrollContainer {
+
+class ScrollContainer implements IScrollContainer {
   #container: HTMLElement;
   #content: HTMLElement;
   #track: HTMLElement;
@@ -17,7 +18,7 @@ export class ScrollContainer implements IScrollContainer {
   #mousemoveHandler: any = undefined;
 
   constructor(container: HTMLElement) {
-    const _this = this;
+    // const _this = this;
     this.#container = container;
     this.#content = container.querySelector('.evo-scroll-content') as HTMLElement;
     this.#track = container.querySelector('.evo-scroll-track') as HTMLElement;
@@ -25,19 +26,9 @@ export class ScrollContainer implements IScrollContainer {
     this.#isDragging = false;
     this.#startY = 0;
     this.#startScrollTop = 0;
-    // this.#enabled = enabled ?? true;
-
-    this.#thumb.addEventListener('mousedown', (e) => { 
-      _this.#thumbMouseDown(e); 
-    }, { passive: true });
-
-    // this.#thumb.addEventListener('mouseup', (e) => { 
-    //   _this.#thumbMouseUp(e); 
-    // }, { passive: true });
 
-    this.#content.addEventListener('scroll', () => { 
-      _this.#scrollContent(); 
-    }, { passive: true });
+    this.#thumb.addEventListener('mousedown', this.#thumbMouseDown.bind(this), { passive: true });
+    this.#content.addEventListener('scroll', this.#scrollContent.bind(this), { passive: true });
   }
 
   scroll({ left, top, behavior = 'auto' }: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
@@ -113,6 +104,7 @@ export class ScrollContainer implements IScrollContainer {
   }
 
   #thumbMouseMove(e: MouseEvent) {
+    // console.log(performance.now());
     if (this.#isDragging) {
       const deltaY = e.clientY - this.#startY;
       const scrollRatio =
@@ -141,30 +133,30 @@ export class ScrollContainer implements IScrollContainer {
   }
 }
 
-export function resize(scrollContainer: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
+export function resize(selector: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
   if (typeof height == 'number') {
-    const sc = getScrollContainer(scrollContainer);
+    const sc = getScrollContainer(selector);
     if (sc) {
       sc.resize({ height })
     }
   }
 }
 
-export function refresh(scrollContainer?: string | HTMLElement | ScrollContainer) {
-  if (scrollContainer) {
-    const sc = getScrollContainer(scrollContainer);
+export function refresh(selector?: string | HTMLElement | ScrollContainer) {
+  if (selector) {
+    const sc = getScrollContainer(selector);
     if (sc) {
       sc.refresh()
     }
   } else {
-    [...scrollContainers.values()].forEach((scrollContainer) => {
-      scrollContainer.refresh();
+    [...scrollContainers.values()].forEach((selector) => {
+      selector.refresh();
     });
   }
 }
 
-export function getScroll(scrollContainer: string | HTMLElement | ScrollContainer): { left: number, top: number } | undefined {
-  const sc = getScrollContainer(scrollContainer);
+export function getScroll(selector: string | HTMLElement | ScrollContainer): { left: number, top: number } | undefined {
+  const sc = getScrollContainer(selector);
   if (sc) {
     return sc.getScroll();
   } else {
@@ -172,8 +164,8 @@ export function getScroll(scrollContainer: string | HTMLElement | ScrollContaine
   }
 }
 
-export function scroll(scrollContainer: string | HTMLElement | ScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
-  const sc = getScrollContainer(scrollContainer);
+export function scroll(selector: string | HTMLElement | ScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
+  const sc = getScrollContainer(selector);
   if (sc) {
     const current = sc.getScroll();
     sc.scroll({ left: left ?? current.left, top: top ?? current.top, behavior });
@@ -188,6 +180,21 @@ export function getScrollContainer(selector: string | HTMLElement | ScrollContai
   return key ? scrollContainers.get(key) : undefined;
 }
 
+export function createScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
+  const container = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
+  if (container) {
+    if (scrollContainers.has(container)) {
+      return scrollContainers.get(container);
+    } else {
+      const scrollContainer = new ScrollContainer(container);
+      initNewScrollContainer(container, scrollContainer);
+      return scrollContainer;
+    }
+  } else {
+    return undefined;
+  }
+}
+
 function getPaddingY(content: HTMLElement): number {
   const style = getComputedStyle(content);
   return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
@@ -221,16 +228,20 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
-document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
-  const scrollContainer = new ScrollContainer(container);
+function initNewScrollContainer(container: HTMLElement, scrollContainer: ScrollContainer) {
   scrollContainers.set(container, scrollContainer);
 
   intersectionObserver.observe(container);
   mutationObserver.observe(container, { attributes: true, childList: true, subtree: true });
+}
+
+document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
+  const scrollContainer = new ScrollContainer(container);
+  initNewScrollContainer(container, scrollContainer);
 });
 
 window.addEventListener('resize', () => {
   [...scrollContainers.values()].forEach((scrollContainer) => {
     scrollContainer.refresh();
   });
-});
+}, { passive: true });