@inizioevoke/astro-core 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "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

@@ -1,4 +1,10 @@
-export class ScrollContainer {
+export interface IScrollContainer {
+  scroll(args?: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' }): void;
+  getScroll(): { left: number, top: number }
+  resize(args: { height?: number }): void;
+  refresh(): void;
+}
+export class ScrollContainer implements IScrollContainer {
   #container: HTMLElement;
   #content: HTMLElement;
   #track: HTMLElement;
@@ -6,12 +12,11 @@ export class ScrollContainer {
   #isDragging: boolean;
   #startY: number;
   #startScrollTop: number;
-  // #enabled: boolean;
   
-  #mouseupHandler: any = undefined; // [] = [];
-  #mousemoveHandler: any = undefined; // [] = [];
+  #mouseupHandler: any = undefined;
+  #mousemoveHandler: any = undefined;
 
-  constructor(container: HTMLElement) { // ,  { enabled }: { enabled?: boolean } = {}) {
+  constructor(container: HTMLElement) {
     const _this = this;
     this.#container = container;
     this.#content = container.querySelector('.evo-scroll-content') as HTMLElement;
@@ -35,13 +40,6 @@ export class ScrollContainer {
     }, { passive: true });
   }
 
-  // enable(flag?: boolean) {
-  //   this.#enabled = flag ?? true;
-  // }
-  // get isEnabled() {
-  //   return this.#enabled === true;
-  // }
-
   scroll({ left, top, behavior = 'auto' }: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
     const current = this.getScroll();
     if (typeof left == 'string') {
@@ -103,11 +101,11 @@ export class ScrollContainer {
   }
 
   #thumbMouseDown(e: MouseEvent) {
-    this.#mouseupHandler = this.#mouseDetach.bind(this); // .push(this.#mouseDetach.bind(this));
-    this.#mousemoveHandler = this.#thumbMouseMove.bind(this); // .push(this.#thumbMouseMove.bind(this));
-    document.addEventListener('mouseup', this.#mouseupHandler, { passive: true }); // this.#mouseupHandler[this.#mouseupHandler.length - 1]);
-    document.addEventListener('dragend', this.#mouseupHandler, { passive: true }); // this.#mouseupHandler[this.#mouseupHandler.length - 1]);
-    document.addEventListener('mousemove', this.#mousemoveHandler, { passive: true }); // this.#mousemoveHandler[this.#mousemoveHandler.length - 1]);
+    this.#mouseupHandler = this.#mouseDetach.bind(this);
+    this.#mousemoveHandler = this.#thumbMouseMove.bind(this);
+    document.addEventListener('mouseup', this.#mouseupHandler, { passive: true });
+    document.addEventListener('dragend', this.#mouseupHandler, { passive: true });
+    document.addEventListener('mousemove', this.#mousemoveHandler, { passive: true });
     this.#isDragging = true;
     this.#startY = e.clientY;
     this.#startScrollTop = this.#content.scrollTop;
@@ -115,7 +113,6 @@ export class ScrollContainer {
   }
 
   #thumbMouseMove(e: MouseEvent) {
-    // console.log(performance.now());
     if (this.#isDragging) {
       const deltaY = e.clientY - this.#startY;
       const scrollRatio =
@@ -127,26 +124,12 @@ export class ScrollContainer {
     }
   }
 
-  // #thumbMouseUp(e: MouseEvent) {
-  //   this.#isDragging = false;
-  //   this.#thumb.style.cursor = 'grab';
-  // }
-
   #mouseDetach() {
     this.#isDragging = false;
     this.#thumb.style.cursor = 'grab';
     document.removeEventListener('mouseup', this.#mouseupHandler);
     document.removeEventListener('dragend', this.#mouseupHandler);
     document.removeEventListener('mousemove', this.#mousemoveHandler);
-    // for (const m of this.#mouseupHandler) {
-    //   document.removeEventListener('mouseup', m);
-    //   document.removeEventListener('dragend', m);
-    // }
-    // for (const m of this.#mousemoveHandler) {
-    //   document.removeEventListener('mousemove', m);
-    // }
-    // this.#mouseupHandler = [];
-    // this.#mousemoveHandler = [];
   }
 
   #scrollContent() {
@@ -156,7 +139,6 @@ export class ScrollContainer {
     const top = scrollRatio * (this.#track.clientHeight - this.#thumb.clientHeight);
     this.#thumb.style.top = `${top}px`;
   }
-
 }
 
 export function resize(scrollContainer: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
@@ -198,7 +180,7 @@ export function scroll(scrollContainer: string | HTMLElement | ScrollContainer,
   }
 }
 
-export function getScrollContainer(selector: string | HTMLElement | ScrollContainer): ScrollContainer | undefined {
+export function getScrollContainer(selector: string | HTMLElement | ScrollContainer): IScrollContainer | undefined {
   if (selector instanceof ScrollContainer) {
     return selector;
   }
@@ -227,7 +209,7 @@ const intersectionObserver = new IntersectionObserver((entries) => {
 );
 
 const mutationObserver = new MutationObserver((mutations) => {
-  const containers = new Set<ScrollContainer>();
+  const containers = new Set<IScrollContainer>();
   mutations.forEach((mutation) => {
     const sc = getScrollContainer(mutation.target as HTMLElement);
     if (sc) {