ziko 0.50.1 → 0.50.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.50.1",
+  "version": "0.50.2",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",

package/src/data/api/fetchdom.js

@@ -1,14 +1,30 @@
-import { preload } from "./preload"
+import { preload } from "./preload";
 
-async function fetchdom(url='https://github.com/zakarialaoui10'){
-  const data=await fetch(url)
-  const html=await data.text()
-  const dom= new DOMParser().parseFromString(html,'text/xml')
-  return dom.documentElement
+async function fetchdom(url='https://github.com/zakarialaoui10') {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const html = await response.text();
+    const dom = new DOMParser().parseFromString(html, 'text/html');
+    return dom.documentElement;
+  } catch (err) {
+    console.error('Failed to fetch DOM:', err);
+    throw err;
+  }
 }
-function fetchdomSync(url='https://github.com/zakarialaoui10'){
-  const data=preload(url);
-  const dom= new DOMParser().parseFromString(data,'text/xml')
-  return dom.documentElement;
+
+function fetchdomSync(url='https://github.com/zakarialaoui10') {
+  try {
+    const data = preload(url);
+    const dom = new DOMParser().parseFromString(data, 'text/html');
+    return dom.documentElement;
+  } catch (err) {
+    console.error('Failed to fetch DOM synchronously:', err);
+    throw err;
+  }
 }
-export {fetchdom,fetchdomSync}
+
+export { 
+  fetchdom, 
+  fetchdomSync 
+};

package/src/events/binders/custom-event.js

@@ -1,7 +1,7 @@
 import { ZikoEvent } from "../ziko-event.js";
 class ZikoCustomEvent extends ZikoEvent{
     constructor(target, events, customizer){
-        super(target, events, details_setter, customizer)
+        super('custom', target, events, details_setter, customizer)
     }
     _register_events(events){
         super._register_events(events, null, null, false);

package/src/events/binders/index.js

@@ -4,11 +4,16 @@ import {
     ptr_details_setter,
     key_details_setter
 } from '../details-setter/index.js'
-import { register_click_away_event } from "../custom-events-registry/click-away.js";
+import { 
+    register_click_away_event,
+    register_view_event,
+    register_swipe_event
+} from "../custom-events-registry/index.js";
 
 export const bind_click_event = (target, customizer) => {
     register_click_away_event(target.element)
     return new ZikoEvent(
+        'click',
         target,
         EventsMap.Click,
         null,
@@ -16,57 +21,80 @@ export const bind_click_event = (target, customizer) => {
     );
 }
 export const bind_clipboard_event = (target, customizer) => new ZikoEvent(
+    'clipboard',
     target,
     EventsMap.Clipboard,
     null,
     customizer
 );
 export const bind_drag_event = (target, customizer) => new ZikoEvent(
+    'drag',
     target,
     EventsMap.Drag,
     null,
     customizer
 );
 export const bind_focus_event = (target, customizer) => new ZikoEvent(
+    'focus',
     target,
     EventsMap.Focus,
     null,
     customizer
 );
 export const bind_key_event = (target, customizer) => new ZikoEvent(
+    'key',
     target,
     EventsMap.Key, 
     key_details_setter, 
     customizer
 );
 export const bind_mouse_event = (target, customizer) => new ZikoEvent(
+    'mouse',
     target,
     EventsMap.Mouse,
     null,
     customizer
 );
 export const bind_pointer_event = (target, customizer) => new ZikoEvent(
+    'ptr',
     target,
     EventsMap.Ptr, 
     ptr_details_setter, 
     customizer
 );
 export const bind_touch_event = (target, customizer) => new ZikoEvent(
+    'touch',
     target,
     EventsMap.Touch,
     null,
     customizer
 );
 export const bind_wheel_event = (target, customizer) => new ZikoEvent(
+    'wheel',
     target,
     EventsMap.Wheel,
     null,
     customizer
 );
 
+export const bind_view_event = (target, customizer) => {
+    register_view_event(target.element)
+    return new ZikoEvent(
+        'view',
+        target, 
+        EventsMap.View,
+        null, 
+        customizer
+    )
+}
 
-// function details_setter(){
-//     if(this.currentEvent==="click") this.dx = 0
-//     else this.dx = 1
-//     // console.log(this.currentEvent)
-// }
+export const bind_swipe_event = (target, customizer) => {
+    register_swipe_event(target.element)
+    return new ZikoEvent(
+        'swipe',
+        target, 
+        EventsMap.Swipe,
+        null, 
+        customizer
+    )
+}

package/src/events/custom-events-registry/index.js

@@ -1 +1,3 @@
-export * from './click-away.js'
+export * from './click-away.js'
+export * from './view.js'
+export * from './swipe.js'

package/src/events/custom-events-registry/swipe.js

@@ -1,58 +1,76 @@
-class SwipeEvent extends Event {
-  constructor(type, direction, distX, distY, originalEvent) {
-    super(type, { bubbles: true, cancelable: true });
-    this.direction = direction; // "left" | "right" | "up" | "down"
-    this.distX = distX;
-    this.distY = distY;
-    this.originalEvent = originalEvent;
+class SwipeEvent extends CustomEvent {
+  constructor(type, detail) {
+    super(type, {
+      detail,
+      bubbles: true,
+      cancelable: true
+    });
   }
 }
 
-function register_swipe_event(element, threshold = 50, restraint = 100, allowedTime = 500) {
-  let startX, startY, startTime, isPointerDown = false;
+function register_swipe_event(
+  element,
+  threshold = 50,
+  restraint = 100,
+  allowedTime = 500
+) {
+  let startX = 0,
+      startY = 0,
+      startTime = 0,
+      isPointerDown = false;
+
   function onPointerDown(e) {
     startX = e.clientX;
     startY = e.clientY;
-    startTime = Date.now();
+    startTime = performance.now();
     isPointerDown = true;
   }
+
   function onPointerUp(e) {
     if (!isPointerDown) return;
     isPointerDown = false;
 
     const distX = e.clientX - startX;
     const distY = e.clientY - startY;
-    const elapsedTime = Date.now() - startTime;
+    const elapsed = performance.now() - startTime;
+
     let direction = null;
     let eventName = null;
 
-    if (elapsedTime <= allowedTime) {
+    if (elapsed <= allowedTime) {
       if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
         direction = distX < 0 ? "left" : "right";
         eventName = "swipe" + direction;
-      } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
+      } 
+      else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
         direction = distY < 0 ? "up" : "down";
         eventName = "swipe" + direction;
       }
     }
 
-    if (eventName && direction) {
+    // Emit event
+    if (eventName) {
       element.dispatchEvent(
-        new SwipeEvent(eventName, direction, distX, distY, e),
+        new SwipeEvent(eventName, {
+          direction,
+          distX,
+          distY,
+          originalEvent: e
+        })
       );
     }
   }
 
-  element.addEventListener("pointerdown", onPointerDown, false);
-  element.addEventListener("pointerup", onPointerUp, false);
+  element.addEventListener("pointerdown", onPointerDown, { passive: true });
+  element.addEventListener("pointerup", onPointerUp, { passive: true });
 
   return () => {
-    element.removeEventListener("pointerdown", onPointerDown, false);
-    element.removeEventListener("pointerup", onPointerUp, false);
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("pointerup", onPointerUp);
   };
 }
 
-export{
-    SwipeEvent,
-    register_swipe_event
-}
+export {
+  SwipeEvent,
+  register_swipe_event
+};

package/src/events/custom-events-registry/view.js

@@ -1,30 +1,61 @@
-class ViewEvent extends Event {
-    constructor(type, detail) {
-    super(type, { bubbles: true, cancelable: true });
-    this.detail = detail;
+import { throttle } from "../../time/decorators/index.js";
+class ViewEvent extends CustomEvent {
+    constructor(type, detail, { bubbles = true, cancelable = true } = {}) {
+        super(type, { detail, bubbles, cancelable });
     }
 }
 
-function register_view_event(element, { intersection = true, resize = true, threshold = 0 } = {}) {
+function register_view_event(
+    element,
+    {
+        intersection = true,
+        resize = true,
+        threshold = 0,
+        throttleResize = 100,
+        throttleEnterExit = 0
+    } = {}
+) {
     let intersectionObserver, resizeObserver;
-    if (intersection) {
-        intersectionObserver = new IntersectionObserver(entries => {
-            for (let entry of entries) {
-            const type = entry.isIntersecting ? "enterView" : "exitView";
+    const resizeCallback = entries => {
+        for (let entry of entries) {
+            const { width, height } = entry.contentRect;
+
+            element.dispatchEvent(
+                new ViewEvent("resizeview", {
+                    width,
+                    height,
+                    entry
+                })
+            );
+        }
+    };
+
+    const throttledResize = throttleResize > 0
+        ? throttle(resizeCallback, throttleResize)
+        : resizeCallback;
+
+    const intersectionCallback = entries => {
+        for (let entry of entries) {
+            const type = entry.isIntersecting ? "enterview" : "exitview";
             element.dispatchEvent(new ViewEvent(type, entry));
-            }
-        }, { threshold });
+        }
+    };
+
+    const throttledIntersections = throttleEnterExit > 0
+        ? throttle(intersectionCallback, throttleEnterExit)
+        : intersectionCallback;
+
+    if (intersection) {
+        intersectionObserver = new IntersectionObserver(throttledIntersections, { threshold });
         intersectionObserver.observe(element);
     }
+
     if (resize) {
-        resizeObserver = new ResizeObserver(entries => {
-            for (let entry of entries) {
-            const { width, height } = entry.contentRect;
-            element.dispatchEvent(new ViewEvent("resizeView", { width, height, entry }));
-            }
-        });
+        resizeObserver = new ResizeObserver(throttledResize);
         resizeObserver.observe(element);
     }
+
+    // ---- UNREGISTER ----
     return () => {
         if (intersectionObserver) {
             intersectionObserver.unobserve(element);
@@ -37,7 +68,7 @@ function register_view_event(element, { intersection = true, resize = true, thre
     };
 }
 
-export{
+export {
     ViewEvent,
     register_view_event
-}
+};

package/src/events/events-map/index.js

@@ -1,8 +1,4 @@
 const EventsMap = {
-    'Custom' : [
-        'emit',
-        'on'
-    ],
     'Click' : [
         'Click',
         'DblClick',
@@ -48,13 +44,25 @@ const EventsMap = {
     ],
     'Wheel': [
         'Wheel'
-    ]
+    ],
     // 'Media':[
 
     // ],
     // 'Hash':[
     //     "HashChange"
     // ]
+
+    'View':[
+        'EnterView',
+        'ExitView',
+        'ResizeView'
+    ],
+    'Swipe':[
+        'SwipeLeft',
+        'SwipeUp',
+        'SwipeRight',
+        'SwipeDown'
+    ]
 }
 
 export {

package/src/events/utils.js

@@ -1,3 +1,34 @@
+export function event_controller(e, event_name, details_setter, customizer) {
+    this.cache.currentEvent = event_name;
+    this.cache.event = e;
+
+    details_setter?.call(this);
+    if (customizer?.hasOwnProperty('prototype')) customizer?.call(this);
+    else customizer?.call(null, this);
+
+    if (this.cache.preventDefault[event_name]) e.preventDefault();
+    if (this.cache.stopPropagation[event_name]) e.stopPropagation();
+    if (this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
+
+    // Call the single callback if it exists
+    this.cache.callbacks[event_name]?.(this);
+}
+
+export function toggle_event_listener(method, ...events) {
+    const keys = events.length === 0
+        ? Object.keys(this.cache.paused) 
+        : events;
+    keys.forEach(key => {
+        if (!this.cache.paused.hasOwnProperty(key)) return;
+        this.targetElement?.[method](
+            key,
+            this.cache.__controllers__[key],
+            this.cache.options[key]
+        );
+        this.cache.paused[key] = method === 'removeEventListener';
+    });
+    return this;
+}
 const getEvent=(event = "")=>{
     if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
     return event.toLowerCase()

package/src/events/ziko-event.js

@@ -1,48 +1,54 @@
-import { getEvent } from "./utils.js"
+import { 
+    getEvent,
+    event_controller,
+    toggle_event_listener
+} from './utils.js'
 class ZikoEvent {
-    constructor(target = null, Events = [], details_setter, customizer){
+    constructor(signature, target = null, Events = [], details_setter, customizer){
         this.target = target;
         this.cache = {
+            signature,
             currentEvent : null,
             event: null,
             options : {},
             preventDefault : {},
             stopPropagation : {},
             stopImmediatePropagation : {},
-            event_flow : {},
             paused : {},
-            stream : {
-                enabled : {},
-                clear : {},
-                history : {}
-            },
             callbacks : {},
             __controllers__:{}
         }
-        if(Events)this._register_events(Events, details_setter, customizer);
-    }
-    _register_events(Events, details_setter, customizer, REGISTER_METHODES = true){
-        const events = Events?.map(n=>getEvent(n))
-        events?.forEach((event,i)=>{
-            Object.assign(this.cache.preventDefault, {[event] : false});
-            Object.assign(this.cache.options, {[event] : {}});
-            Object.assign(this.cache.paused, {[event] : false});
-            Object.assign(this.cache.stream.enabled, {[event] : false});
-            Object.assign(this.cache.stream.clear, {[event] : false});
-            Object.assign(this.cache.stream.history, {[event] : []});
-            Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
-            if(REGISTER_METHODES)Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)})
-        })
+        if (Events) this._register_events(Events, details_setter, customizer);
+    }
+    _register_events(Events, details_setter, customizer, REGISTER_METHODES = true) {
+        const events = Events?.map(n => getEvent(n));
+        events?.forEach((event, i) => {
+            this.cache.preventDefault[event] = false;
+            this.cache.options[event] = {};
+            this.cache.paused[event] = false;
+            this.cache.__controllers__[event] = (e) =>
+                event_controller.call(this, e, event, details_setter, customizer);
+            if (REGISTER_METHODES) {
+                this[`on${Events[i]}`] = (callback) =>
+                    this.__onEvent(event, this.cache.options[event], {}, callback);
+            }
+        });
+        return this;
+    }
+    __onEvent(event, options, dispose, callback) {
+        if (!callback) return this;
+        this.cache.callbacks[event] = callback;
+        this.__handle(event, this.cache.__controllers__[event], options, dispose);
         return this;
     }
     get targetElement(){
         return this.target?.element;
     }
     get isParent(){
-        return this.target?.element === this.event.srcElement;
+        return this.target?.element === this.event?.srcElement;
     }
     get item(){
-        return this.target.find(n=>n.element == this.event?.srcElement)?.[0];
+        return this.target.find(n => n.element == this.event?.srcElement)?.[0];
     }
     get currentEvent(){
         return this.cache.currentEvent;
@@ -50,117 +56,53 @@ class ZikoEvent {
     get event(){
         return this.cache.event;
     }
+    get detail(){
+        return this.cache.event.detail
+    }
     setTarget(UI){
-        this.target=UI;
+        this.target = UI;
         return this;
     }
-    __handle(event, handler, options, dispose){
+    __handle(event, handler, options){
         this.targetElement?.addEventListener(event, handler, options);
         return this;
     }
-    __onEvent(event, options, dispose, ...callbacks){
-        if(callbacks.length===0){
-            console.log("00")
-            if(this.cache.callbacks[event]){
-                console.log("Call")
-                // this.cache.callbacks.map(n=>e=>n.call(this,e));
-                this.cache.callbacks[event].map(n=>e=>n.call(this,e))
-            }   
-            else {
-                return this;
-            }
-        }
-        else this.cache.callbacks[event] = callbacks.map(n=>e=>n.call(this,e));
-        this.__handle(event, this.cache.__controllers__[event],options, dispose)
-        return this;  
-    }
-    #override(methode, overrides, defaultValue){
-        if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
-        const all = defaultValue === "default" 
-        ? this.cache[methode]
-        : Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
-        Object.assign(this.cache[methode], {...all,...overrides});
-        return this       
-    }
-    preventDefault(overrides = {}, defaultValue = "default"){
-        this.#override("preventDefault", overrides, defaultValue);
-        // const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
-        // Object.assign(this.cache.preventDefault, {...all,...overrides});
+    #override(method, ...events) {
+        const keys = events.length === 0 ? Object.keys(this.cache[method]) : events
+        keys.forEach(e => {
+            if (this.cache[method].hasOwnProperty(e)) this.cache[method][e] = true;
+        });
         return this;
     }
-    stopPropagation(overrides = {}, defaultValue = "default"){
-        this.#override("stopPropagation", overrides, defaultValue);
-        return this;
+    preventDefault(...events) {
+        return this.#override('preventDefault', ...events);
     }
-    stopImmediatePropagation(overrides = {}, defaultValue = "default"){
-        this.#override("stopImmediatePropagation", overrides, defaultValue);
-        return this;
+    stopPropagation(...events) {
+        return this.#override('stopPropagation', ...events);
+    }
+    stopImmediatePropagation(...events) {
+        return this.#override('stopImmediatePropagation', ...events);
     }
     setEventOptions(event, options){
-        this.pause({[event] : true, }, "default");
-        Object.assign(this.cache.options[getEvent(event)], options);
-        this.resume({[event] : true, }, "default");
+        const evt = getEvent(event);
+        this.pause();
+        Object.assign(this.cache.options[evt], options);
+        this.resume();
         return this;
     }
-    pause(overrides = {}, defaultValue = "default"){
-        const all = defaultValue === "default" 
-          ? this.cache.stream.enabled
-          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
-        overrides={...all,...overrides};
-        for(let key in overrides){
-            if(overrides[key]){
-                this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
-                this.cache.paused[key]=true;
-            }
-        }
-        return this;
+    pause(...events) {
+        return toggle_event_listener.call(this, 'removeEventListener', ...events)
     }
-    resume(overrides = {}, defaultValue = "default"){
-        const all = defaultValue === "default" 
-          ? this.cache.stream.enabled
-          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
-        overrides={...all,...overrides};
-        for(let key in overrides){
-            if(overrides[key]){
-                this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
-                this.cache.paused[key]=false;
-            }
-        }
-        return this;
-     }
-    stream(overrides = {}, defaultValue = "default"){
-        this.cache.stream.t0=Date.now();
-        const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]))
-        overrides={...all,...overrides}
-        Object.assign(this.cache.stream.enabled,overrides);
-        return this;
-     }
-    clear(){
-        return this;
+    resume(...events) {
+        return toggle_event_listener.call(this, 'addEventListener', ...events);
     }
-    dispose(overrides = {}, defaultValue = "default"){
-        this.pause(overrides, defaultValue);
-
+    dispose(){
+        this.pause();
+        this.target.events[this.cache.signature] = null
         return this;
     }
 }
-
-function event_controller(e, event_name, details_setter, customizer, push_object){
-    this.cache.currentEvent = event_name;
-    this.cache.event = e;
-    details_setter?.call(this);
-    customizer?.hasOwnProperty("prototype") ? customizer?.call(this) : customizer?.call(null, this);
-    // if(customizer?.hasOwnProperty("prototype")) customizer?.call(this)
-    // else customizer?.call(null, this)
-    if(this.cache.preventDefault[event_name]) e.preventDefault();
-    if(this.cache.stopPropagation[event_name]) e.stopPropagation();
-    if(this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
-    
-    if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
-    this.cache.callbacks[event_name]?.map(n=>n(this));
-}
-
 export {
     ZikoEvent,
     getEvent
-}
+}