ziko 0.68.0 → 0.68.2

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Feb 20 2026 11:36:37 GMT+0000 (UTC)
+  Date : Thu Feb 26 2026 13:06:11 GMT+0000 (UTC)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -2647,6 +2647,68 @@ var StyleMethods = /*#__PURE__*/Object.freeze({
    style: style$1
 });
 
+class EventController {
+  constructor(target, category){
+    this.cache = {
+      category,
+      target,
+      listeners : {},
+      currentEvent : null,
+      event : null,
+      customEvents : new Set()
+    };
+  }
+  get event(){
+    return this.cache.event
+  }
+  get target(){
+    return this.cache.target;
+  }
+  get element(){
+    return this.cache.target.element;
+  }
+  get currentEvent(){
+    return this.cache.currentEvent;
+  }
+  addListener(event_name, callback, {preventDefault = false, paused = false} = {}){
+    this.cache.listeners[event_name] = {
+      callback : e =>{
+        this.cache.event = e;
+        if(this.cache.listeners[event_name].preventDefault) e.preventDefault();
+        if(!this.cache.listeners[event_name].paused) {
+          this.cache.currentEvent = event_name;
+          callback.call(this, this);
+        }
+      },
+      preventDefault,
+      paused,
+    };
+    this.element.addEventListener(event_name, this.cache.listeners[event_name].callback);
+    return this;
+  }
+  removeListener(event_name){
+    this.element.removeEventListener(event_name, this.cache.listeners[event_name].callback);
+    return this;
+  }
+  pause(event_name){
+    this.cache.listeners[event_name].paused = true;
+    return this;
+  }
+  resume(event_name){
+    this.cache.listeners[event_name].paused = false;
+    return this;
+  }
+  preventDefault(event_name){
+    // if(!event_name) 
+    this.cache.listeners[event_name].preventDefault = true;
+    return this;
+  }
+  useDefault(event_name){
+    this.cache.listeners[event_name].preventDefault = false;
+    return this;
+  }
+}
+
 class ClickAwayEvent extends Event {
   constructor(originalEvent, targetElement) {
     super("clickaway", { bubbles: true, cancelable: true });
@@ -2682,26 +2744,6 @@ function register_click_away_event(element) {
 // // later, you can stop listening:
 // // stop();
 
-const CATEGORY$2 = 'click';
-const ClickListeners = {
-    onClick(callback){
-        this._on(
-            'click', callback, 
-            { category : CATEGORY$2 });
-    },
-    onDblClick(callback){
-        this._on(
-            'dblclick', callback, 
-            { category : CATEGORY$2});
-    },
-    onClickAway(callback){
-        register_click_away_event(this.element);
-        this._on(
-            'clickaway', callback, 
-            { category : CATEGORY$2});
-    },
-};
-
 const getCoordinates = (ctx, normalized = false) =>{
     const rect = ctx.element.getBoundingClientRect();
     const e = ctx.event;
@@ -2716,38 +2758,60 @@ const getCoordinates = (ctx, normalized = false) =>{
     }
 
     return {x, y};
+};
+
+const isCustomEventRegistred = (ctx, category, event_name) => ctx.exp.events?.[category]?.cache?.customEvents?.has(event_name);
+
+const CATEGORY$3 = 'click';
+const ClickListeners = {
+    onClick(callback){
+        return this.on(
+            'click', callback, 
+            { category : CATEGORY$3 })
+    },
+    onDblClick(callback){
+        return this.on(
+            'dblclick', callback, 
+            { category : CATEGORY$3})
+    },
+    onClickAway(callback){
+        if(!isCustomEventRegistred(this, CATEGORY$3, 'clickaway')) register_click_away_event(this.element);
+        return this.on(
+            'clickaway', callback, 
+            { category : CATEGORY$3, isCustom : true})
+    },
 };
 
-const CATEGORY$1 = 'ptr';
+const CATEGORY$2 = 'ptr';
 const PtrListeners = {
     onPtrDown(callback, useNormalizedCoordinates = false){
-        this._on(
+        return this.on(
             'pointerdown', callback, 
-            { category : CATEGORY$1, details_setter : (ctx)=> {
+            { category : CATEGORY$2, details_setter : (ctx)=> {
                 const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
                 ctx.dx = x;
                 ctx.dy = y;
                 ctx.isDown = true;
                 ctx.isDragging = ctx.isMoving ?? false;
             }}
-        );
+        )
     },
     onPtrMove(callback, useNormalizedCoordinates = false){
-        this._on(
+        return this.on(
             'pointermove', callback, 
-            { category : CATEGORY$1, details_setter : (ctx)=> {
+            { category : CATEGORY$2, details_setter : (ctx)=> {
                 const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
                 ctx.mx = x;
                 ctx.my = y;
                 ctx.isMoving = true;
                 ctx.isDragging = ctx.isDown ?? false;
             }}
-        );
+        )
     },
     onPtrUp(callback, useNormalizedCoordinates = false){
-        this._on(
+        return this.on(
             'pointerup', callback, 
-            { category : CATEGORY$1, details_setter : (ctx)=> {
+            { category : CATEGORY$2, details_setter : (ctx)=> {
                 const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
                 ctx.ux = x;
                 ctx.uy = y;
@@ -2755,89 +2819,208 @@ const PtrListeners = {
                 ctx.isMoving = false;
                 ctx.isDragging = false;
             }}
-        );
+        )
     }
 };
 
-const CATEGORY = 'key';
+const CATEGORY$1 = 'key';
 const KeyListeners = {
     onKeyDown(callback){
-        this._on(
+        return this.on(
             'keydown', callback, 
-            { category : CATEGORY, details_setter : ctx=> { ctx.kd = ctx.event.key; }
-        });
+            { category : CATEGORY$1, details_setter : ctx=> { ctx.kd = ctx.event.key; }
+        })
     },
     onKeyPress(callback){
-        this._on(
+        return this.on(
             'keypress', callback, 
-            { category : CATEGORY, details_setter : ctx=> { ctx.kp = ctx.event.key; }
-        });
+            { category : CATEGORY$1, details_setter : ctx=> { ctx.kp = ctx.event.key; }
+        })
     },
     onKeyUp(callback){
-        this._on(
+        return this.on(
             'keydown', callback, 
-            { category : CATEGORY, details_setter : ctx=> { ctx.ku = ctx.event.key; }
-        });
+            { category : CATEGORY$1, details_setter : ctx=> { ctx.ku = ctx.event.key; }
+        })
     },
     
 };
 
-class EventController {
-  constructor(target, category){
-    this.cache = {
-      category,
-      target,
-      listeners : {},
-      currentEvent : null,
-      event : null
+const debounce=(fn,delay=1000)=>{
+    let id;
+    return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+};
+const throttle=(fn,delay)=>{
+    let lastTime=0;
+    return (...args) => {
+        const now = new Date().getTime();
+        if(now-lastTime < delay) return;
+        lastTime = now;
+        fn(...args); 
+    }
+};
+
+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,
+        throttleResize = 100,
+        throttleEnterExit = 0
+    } = {}
+) {
+    let intersectionObserver, resizeObserver;
+    const resizeCallback = entries => {
+        for (let entry of entries) {
+            const { width, height } = entry.contentRect;
+
+            element.dispatchEvent(
+                new ViewEvent("resizeview", {
+                    width,
+                    height,
+                    entry
+                })
+            );
+        }
     };
-  }
-  get event(){
-    return this.cache.event
-  }
-  get element(){
-    return this.cache.target.element;
-  }
-  get currentEvent(){
-    return this.cache.currentEvent;
-  }
-  addListener(event_name, callback, {preventDefault = false, paused = false} = {}){
-    this.cache.listeners[event_name] = {
-      callback : e =>{
-        this.cache.event = e;
-        if(this.cache.listeners[event_name].preventDefault) e.preventDefault();
-        if(!this.cache.listeners[event_name].paused) {
-          this.cache.currentEvent = event_name;
-          callback.call(this, this);
+
+    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));
         }
-      },
-      preventDefault,
-      paused,
     };
-    this.element.addEventListener(event_name, this.cache.listeners[event_name].callback);
-    return this;
-  }
-  removeListener(event_name){
-    this.element.removeEventListener(event_name, this.cache.listeners[event_name].callback);
-    return this;
-  }
-  pause(event_name){
-    this.cache.listeners[event_name].paused = true;
-    return this;
-  }
-  resume(event_name){
-    this.cache.listeners[event_name].paused = false;
-    return this;
+
+    const throttledIntersections = throttleEnterExit > 0
+        ? throttle(intersectionCallback, throttleEnterExit)
+        : intersectionCallback;
+
+    if (intersection) {
+        intersectionObserver = new IntersectionObserver(throttledIntersections, { threshold });
+        intersectionObserver.observe(element);
+    }
+
+    if (resize) {
+        resizeObserver = new ResizeObserver(throttledResize);
+        resizeObserver.observe(element);
+    }
+
+    // ---- UNREGISTER ----
+    return () => {
+        if (intersectionObserver) {
+            intersectionObserver.unobserve(element);
+            intersectionObserver.disconnect();
+        }
+        if (resizeObserver) {
+            resizeObserver.unobserve(element);
+            resizeObserver.disconnect();
+        }
+    };
+}
+
+const CATEGORY = 'view';
+const ViewListeners = {
+    onEnterView(callback){
+        if(!this.exp.events?.[CATEGORY]) register_view_event(this.element);
+        return this.on(
+            'enterview', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+    onExitView(callback){
+        if(!this.exp.events?.[CATEGORY]) register_view_event(this.element);
+        return this.on(
+            'exitview', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+    onResizeView(callback){
+        if(!this.exp.events?.[CATEGORY]) register_view_event(this.element);
+        return this.on(
+            'resizeview', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+};
+
+class SwipeEvent extends CustomEvent {
+  constructor(type, detail) {
+    super(type, {
+      detail,
+      bubbles: true,
+      cancelable: true
+    });
   }
-  preventDefault(event_name){
-    // if(!event_name) 
-    this.cache.listeners[event_name].preventDefault = true;
-    return this;
+}
+
+function register_swipe_event(
+  element,
+  threshold = 5,
+  restraint = 100,
+  allowedTime = 500
+) {
+  let startX = 0,
+      startY = 0,
+      startTime = 0,
+      isPointerDown = false;
+
+  function onPointerDown(e) {
+    startX = e.clientX;
+    startY = e.clientY;
+    startTime = performance.now();
+    isPointerDown = true;
   }
-  useDefault(event_name){
-    this.cache.listeners[event_name].preventDefault = false;
-    return this;
+
+  function onPointerUp(e) {
+    if (!isPointerDown) return;
+    isPointerDown = false;
+
+    const distX = e.clientX - startX;
+    const distY = e.clientY - startY;
+    const elapsed = performance.now() - startTime;
+
+    let direction = null;
+    let eventName = null;
+
+    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) {
+        direction = distY < 0 ? "up" : "down";
+        eventName = "swipe" + direction;
+      }
+    }
+
+    // Emit event
+    if (eventName) {
+      element.dispatchEvent(
+        new SwipeEvent(eventName, {
+          direction,
+          distX,
+          distY,
+          originalEvent: e
+        })
+      );
+    }
   }
+
+  element.addEventListener("pointerdown", onPointerDown, { passive: true });
+  element.addEventListener("pointerup", onPointerUp, { passive: true });
+
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("pointerup", onPointerUp);
+  };
 }
 
 let UIElement$1 = class UIElement extends UIElementCore{
@@ -2854,24 +3037,26 @@ let UIElement$1 = class UIElement extends UIElementCore{
       AttrsMethods, 
       DomMethods, 
       StyleMethods,
-      IndexingMethods, 
+      IndexingMethods,
       PtrListeners,
       ClickListeners,
-      KeyListeners
+      KeyListeners,
+      ViewListeners,
     );
 
     if(element)this.init(element, name, type, render);
   }
-  _on(event, callback, {details_setter, category = 'global', preventDefault = false} = {}){
+  on(event_name, callback, {details_setter, category = 'global', isCustom = false,preventDefault = false} = {}){
     if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
+    isCustom && this.exp.events[category].cache.customEvents.add(event_name);
     const EVENT = this.exp.events[category];
-    EVENT.addListener(event, (e)=>{
+    EVENT.addListener(event_name, (e)=>{
       if(details_setter) details_setter(EVENT);
       callback(e);
     },{
       preventDefault
     });
-    
+    return this;
   }
   _off(event, category = 'global'){
     this.exp.events[category].removeListener(event);
@@ -3859,20 +4044,6 @@ const Scheduler = (tasks, { repeat = null} = {}) => new TimeScheduler(tasks, { r
 
 const step_fps = (step_or_fps) => 1000 / step_or_fps;
 
-const debounce=(fn,delay=1000)=>{
-    let id;
-    return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
-};
-const throttle=(fn,delay)=>{
-    let lastTime=0;
-    return (...args) => {
-        const now = new Date().getTime();
-        if(now-lastTime < delay) return;
-        lastTime = now;
-        fn(...args); 
-    }
-};
-
 const sleep= ms => new Promise(res => setTimeout(res, ms));
 function timeout(ms, fn) {
   let id;
@@ -4889,4 +5060,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, HTMLWrapper, Matrix, PI$1 as PI, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, Utils, View, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_prod, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, binomial, call_with_optional_props, cartesianProduct, cbrt, ceil, clamp, clock, cloneUI, complex, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, exp$1 as exp, floor, fract, geomspace, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isPrimitive, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, linspace, ln, logspace, loop, map$1 as map, mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, min, modulo, mul, nand, nor, norm, normalize_css_value, nthr, nums, obj2str, ones, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, percentile, pgcd, pow$1 as pow, ppcm, rad2deg, remove_class, round, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, trunc, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, xnor, xor, zeros };
+export { App, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, SVGWrapper, Scheduler, Suspense, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, Utils, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_prod, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, binomial, call_with_optional_props, cartesianProduct, cbrt, ceil, clamp, clock, cloneUI, complex, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, exp$1 as exp, floor, fract, geomspace, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isPrimitive, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, linspace, ln, logspace, loop, map$1 as map, mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, min, modulo, mul, nand, nor, norm, normalize_css_value, nthr, nums, obj2str, ones, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, percentile, pgcd, pow$1 as pow, ppcm, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, round, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, trunc, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, xnor, xor, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.68.0",
+  "version": "0.68.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/events/controller/index.js

@@ -5,12 +5,16 @@ export class EventController {
       target,
       listeners : {},
       currentEvent : null,
-      event : null
+      event : null,
+      customEvents : new Set()
     }
   }
   get event(){
     return this.cache.event
   }
+  get target(){
+    return this.cache.target;
+  }
   get element(){
     return this.cache.target.element;
   }

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

@@ -10,7 +10,7 @@ class SwipeEvent extends CustomEvent {
 
 function register_swipe_event(
   element,
-  threshold = 50,
+  threshold = 5,
   restraint = 100,
   allowedTime = 500
 ) {

package/src/events/index.js

@@ -1 +1,3 @@
-export * from './controller/index.js'
+export * from './controller/index.js'
+export * from './mixins/index.js'
+export * from './custom-events-registry/index.js'

package/src/events/mixins/click.js

@@ -0,0 +1,23 @@
+import {register_click_away_event} from '../custom-events-registry/click-away.js';
+import { isCustomEventRegistred } from './utils/index.js';
+const CATEGORY = 'click';
+export const ClickListeners = {
+    onClick(callback){
+        return this.on(
+            'click', callback, 
+            { category : CATEGORY })
+    },
+    onDblClick(callback){
+        return this.on(
+            'dblclick', callback, 
+            { category : CATEGORY})
+    },
+    onClickAway(callback){
+        if(!isCustomEventRegistred(this, CATEGORY, 'clickaway')) register_click_away_event(this.element);
+        return this.on(
+            'clickaway', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+}
+
+

package/src/events/mixins/index.js

@@ -0,0 +1,5 @@
+export * from './click.js'
+export * from './ptr.js'
+export * from './key.js'
+export * from './view.js'
+// export * from './swipe.js'

package/src/{ui/constructors/mixins/events → events/mixins}/key.js

@@ -1,19 +1,19 @@
 const CATEGORY = 'key'
 export const KeyListeners = {
     onKeyDown(callback){
-        this._on(
+        return this.on(
             'keydown', callback, 
             { category : CATEGORY, details_setter : ctx=> { ctx.kd = ctx.event.key }
         })
     },
     onKeyPress(callback){
-        this._on(
+        return this.on(
             'keypress', callback, 
             { category : CATEGORY, details_setter : ctx=> { ctx.kp = ctx.event.key }
         })
     },
     onKeyUp(callback){
-        this._on(
+        return this.on(
             'keydown', callback, 
             { category : CATEGORY, details_setter : ctx=> { ctx.ku = ctx.event.key }
         })

package/src/{ui/constructors/mixins/events → events/mixins}/ptr.js

@@ -2,7 +2,7 @@ import { getCoordinates } from "./utils/index.js";
 const CATEGORY = 'ptr';
 export const PtrListeners = {
     onPtrDown(callback, useNormalizedCoordinates = false){
-        this._on(
+        return this.on(
             'pointerdown', callback, 
             { category : CATEGORY, details_setter : (ctx)=> {
                 const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
@@ -14,7 +14,7 @@ export const PtrListeners = {
         )
     },
     onPtrMove(callback, useNormalizedCoordinates = false){
-        this._on(
+        return this.on(
             'pointermove', callback, 
             { category : CATEGORY, details_setter : (ctx)=> {
                 const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
@@ -26,7 +26,7 @@ export const PtrListeners = {
         )
     },
     onPtrUp(callback, useNormalizedCoordinates = false){
-        this._on(
+        return this.on(
             'pointerup', callback, 
             { category : CATEGORY, details_setter : (ctx)=> {
                 const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);

package/src/events/mixins/swipe.js

@@ -0,0 +1,30 @@
+import { register_swipe_event } from '../custom-events-registry/swipe.js';
+const CATEGORY = 'swipe';
+export const SwipeListeners = {
+    onSwipeLeft(callback){
+        if(!this.exp.events?.[CATEGORY]) register_swipe_event(this.element);
+        return this.on(
+            'swipeleft', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+    onSwipeRight(callback){
+        if(!this.exp.events?.[CATEGORY]) register_swipe_event(this.element);
+        return this.on(
+            'swiperight', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+    onSwipeUp(callback){
+        if(!this.exp.events?.[CATEGORY]) register_swipe_event(this.element);
+        return this.on(
+            'swipeup', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+    onSwipeDown(callback){
+        if(!this.exp.events?.[CATEGORY]) register_swipe_event(this.element);
+        return this.on(
+            'swipedown', callback, 
+            { category : CATEGORY, isCustom : true})
+    },
+}
+
+

package/src/{ui/constructors/mixins/events → events/mixins}/utils/index.js

@@ -12,4 +12,6 @@ export const getCoordinates = (ctx, normalized = false) =>{
     }
 
     return {x, y};
-}
+}
+
+export const isCustomEventRegistred = (ctx, category, event_name) => ctx.exp.events?.[category]?.cache?.customEvents?.has(event_name)