ziko 0.67.0 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "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

@@ -0,0 +1,57 @@
+export class EventController {
+  constructor(target, category){
+    this.cache = {
+      category,
+      target,
+      listeners : {},
+      currentEvent : null,
+      event : null
+    }
+  }
+  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)
+        }
+      },
+      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;
+  }
+}

package/src/events/custom-events-registry/click-away.js

@@ -7,6 +7,7 @@ class ClickAwayEvent extends Event {
 }
 
 function register_click_away_event(element) {
+  // console.log(element)
   function handler(e) {
     if (!element.contains(e.target)) {
       const clickAwayEvent = new ClickAwayEvent(e, element);

package/src/events/index.js

@@ -1,3 +1 @@
-export * from './binders/index.js'
-export * from "./ziko-event.js"
-export * from "./utils.js";
+export * from './controller/index.js'

package/src/{exp-events → events-dep}/custom-events-registry/click-away.js

@@ -7,7 +7,6 @@ class ClickAwayEvent extends Event {
 }
 
 function register_click_away_event(element) {
-  // console.log(element)
   function handler(e) {
     if (!element.contains(e.target)) {
       const clickAwayEvent = new ClickAwayEvent(e, element);

package/src/events-dep/index.js

@@ -0,0 +1,3 @@
+// export * from './binders/index.js'
+// export * from "./ziko-event.js"
+// export * from "./utils.js";

package/src/ui/constructors/UIElement.js

@@ -5,13 +5,16 @@ import {
   AttrsMethods,
   DomMethods,
   IndexingMethods,
-  EventsMethodes,
-  StyleMethods
+  // EventsMethodes,
+  StyleMethods,
+  PtrListeners,
+  ClickListeners,
+  KeyListeners,
 } from "./mixins/index.js";
 
 import {
   EventController
-} from '../../exp-events/index.js'
+} from '../../events/index.js'
 class UIElement extends UIElementCore{
   constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
     super()
@@ -27,16 +30,23 @@ class UIElement extends UIElementCore{
       DomMethods, 
       StyleMethods,
       IndexingMethods, 
-      EventsMethodes
+      PtrListeners,
+      ClickListeners,
+      KeyListeners
     );
 
     if(element)this.init(element, name, type, render)
   }
-  _on(event, callback, {details_setter, category = 'global'} = {}){
+  _on(event, callback, {details_setter, category = 'global', preventDefault = false} = {}){
     if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
     const EVENT = this.exp.events[category]
-    EVENT.addListener(event, callback);
-    if(details_setter) details_setter.call(EVENT);
+    EVENT.addListener(event, (e)=>{
+      if(details_setter) details_setter(EVENT);
+      callback(e)
+    },{
+      preventDefault
+    });
+    
   }
   _off(event, category = 'global'){
     this.exp.events[category].removeListener(event)

package/src/ui/constructors/mixins/attrs.js

@@ -1,8 +1,8 @@
-import { _set_attrs_ } from "./utils/index.js";
-// import { 
-//   is_camelcase,
-//   camel2hyphencase
-//  } from '../../data/string/index.js'
+import { isStateGetter } from "../../../hooks/use-state.js";
+import { 
+  is_camelcase,
+  camel2hyphencase
+ } from '../../../data/string/index.js'
 
 export function setAttr(name, value) {
   if(name instanceof Object){
@@ -31,3 +31,17 @@ export function setContentEditable(bool = true) {
   return this;
 }
 
+
+export function _set_attrs_(name, value){
+    if(globalThis.SVGAElement && this.element instanceof globalThis.SVGAElement) name = is_camelcase(name) ? camel2hyphencase(name) : name;
+    if(this?.attr[name] && this?.attr[name]===value) return;
+    if(isStateGetter(value)){
+        const getter = value()
+        getter._subscribe(
+            (newValue) => this.element?.setAttribute(name, newValue),
+            this 
+        );
+    }
+    else this.element?.setAttribute(name, value)
+    Object.assign(this.cache.attributes, {[name]:value});   
+}

package/src/ui/constructors/mixins/dom.js

@@ -1,5 +1,10 @@
+// import { isStateGetter } from "../../../hooks/use-state.js";
+// import { 
+//   is_camelcase,
+//   camel2hyphencase
+//  } from '../../../data/string/index.js';
 import { text } from "../../text/index.js";
-import { __addItem__ } from "./utils/index.js";
+
 export function append(...ele) {
   __addItem__.call(this, "append", "push", ...ele);
   return this;
@@ -54,3 +59,50 @@ export function before(ui){
 }
 
 
+
+
+export async function __addItem__(adder, pusher, ...ele) {
+  if (this.cache.isFrozzen) {
+    console.warn("You can't append new item to frozzen element");
+    return this;
+  }
+  for (let i = 0; i < ele.length; i++) {
+    if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+        // Fix Items Latter
+    if (ele[i] instanceof Function) {
+     const getter = ele[i]();
+      if (getter.isStateGetter) {
+        ele[i] = text(getter.value);
+        getter._subscribe(
+            (newValue) => (ele[i].element.textContent = newValue),
+            ele[i] 
+        );
+        // this.element.appendChild(textNode);
+      }
+    }
+    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
+    if (ele[i]?.isUINode) {
+        ele[i].cache.parent = this;
+        this.element?.[adder](ele[i].element);
+        ele[i].target = this.element;
+        this.items[pusher](ele[i]);
+    } 
+    else if(ele[i] instanceof Promise){
+      const UIEle = await ele[i]
+      UIEle.cache.parent = this;
+      this.element?.[adder](UIEle.element);
+      UIEle.target = this.element;
+      this.items[pusher](UIEle)
+    }
+    else if (ele[i] instanceof Object) {
+      if (ele[i]?.style) this.style(ele[i]?.style);
+      if (ele[i]?.attr) {
+        Object.entries(ele[i].attr).forEach((n) =>
+          this.setAttr("" + n[0], n[1]),
+        );
+      }
+    }
+  }
+  this.maintain();
+  return this;
+}

package/src/ui/constructors/mixins/events/click.js

@@ -0,0 +1,22 @@
+const CATEGORY = 'click';
+import {register_click_away_event} from '../../../../events/custom-events-registry/click-away.js'
+export const ClickListeners = {
+    onClick(callback){
+        this._on(
+            'click', callback, 
+            { category : CATEGORY })
+    },
+    onDblClick(callback){
+        this._on(
+            'dblclick', callback, 
+            { category : CATEGORY})
+    },
+    onClickAway(callback){
+        register_click_away_event(this.element)
+        this._on(
+            'clickaway', callback, 
+            { category : CATEGORY})
+    },
+}
+
+

package/src/ui/constructors/mixins/events/index.js

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

package/src/ui/constructors/mixins/events/key.js

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

package/src/ui/constructors/mixins/events/ptr.js

@@ -0,0 +1,44 @@
+import { getCoordinates } from "./utils/index.js";
+const CATEGORY = 'ptr';
+export const PtrListeners = {
+    onPtrDown(callback, useNormalizedCoordinates = false){
+        this._on(
+            'pointerdown', callback, 
+            { category : CATEGORY, 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(
+            'pointermove', callback, 
+            { category : CATEGORY, 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(
+            'pointerup', callback, 
+            { category : CATEGORY, details_setter : (ctx)=> {
+                const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
+                ctx.ux = x;
+                ctx.uy = y;
+                ctx.isDown = false;
+                ctx.isMoving = false;
+                ctx.isDragging = false;
+            }}
+        )
+    }
+}
+
+
+

package/src/ui/constructors/mixins/events/utils/index.js

@@ -0,0 +1,15 @@
+export const getCoordinates = (ctx, normalized = false) =>{
+    const rect = ctx.element.getBoundingClientRect();
+    const e = ctx.event;
+    let x = (e?.clientX - rect.left) | 0;
+    let y = (e?.clientY - rect.top) | 0;
+
+    if(normalized){
+        const w = ctx.element.clientWidth;
+        const h = ctx.element.clientHeight;
+        x = +((x / w) * 2 - 1).toFixed(8);
+        y = +((y / h) * -2 + 1).toFixed(8);
+    }
+
+    return {x, y};
+}

package/src/ui/constructors/mixins/index.js

@@ -7,11 +7,13 @@ export * as AttrsMethods from './attrs.js'
 export * from './dom.js'
 export * as DomMethods from './dom.js'
 
-export * from './events.js'
+// export * from './events.js'
 
 export * from './indexing.js'
 export * as IndexingMethods from './indexing.js'
 
 
 export * from './style.js'
-export * as StyleMethods from './style.js'
+export * as StyleMethods from './style.js'
+
+export * from './events/index.js'

package/src/exp-events/controller/index.js

@@ -1,41 +0,0 @@
-export class EventController {
-  constructor(target, category){
-    this.cache = {
-      category,
-      target,
-      listeners : {},
-      currentEvent : null
-    }
-  }
-  get element(){
-    return this.cache.target.element;
-  }
-  get currentEvent(){
-    return this.cache.currentEvent;
-  }
-  addListener(event, callback){
-    this.cache.listeners[event] = {
-      paused : false,
-      callback : ()=>{
-        if(!this.cache.listeners[event].paused) {
-          this.cache.currentEvent = event
-          callback.call(this, this)
-        }
-      },
-    };
-    this.element.addEventListener(event, this.cache.listeners[event].callback);
-    return this;
-  }
-  removeListener(event){
-    this.element.removeEventListener(event, this.cache.listeners[event].callback);
-    return this;
-  }
-  pause(event){
-    this.cache.listeners[event].paused = true;
-    return this;
-  }
-  resume(event){
-    this.cache.listeners[event].paused = false;
-    return this;
-  }
-}

package/src/exp-events/index.js

@@ -1 +0,0 @@
-export * from './controller/index.js'

package/src/ui/constructors/mixins/events.js

@@ -1,57 +0,0 @@
-import { EventsMap } from "../../../events/events-map/index.js";
-import {
-  bind_pointer_event,
-  bind_mouse_event,
-  bind_key_event,
-  bind_click_event,
-  bind_drag_event,
-  bind_clipboard_event,
-  bind_focus_event,
-  bind_wheel_event,
-  bind_view_event,
-  bind_swipe_event
-} from "../../../events/binders/index.js";
-
-import { bind_custom_event } from "../../../events/binders/custom-event.js";
-
-const binderMap = {
-  ptr: bind_pointer_event,
-  mouse : bind_mouse_event,
-  key: bind_key_event,
-  click : bind_click_event,
-  drag : bind_drag_event,
-  clipboard : bind_clipboard_event,
-  focus : bind_focus_event,
-  wheel : bind_wheel_event,
-  view : bind_view_event,
-  swipe : bind_swipe_event
-};
-
-const EventsMethodes = {
-  on(event_name,...callbacks){
-    if(!this.events.custom)this.events.custom = bind_custom_event(this);
-    this.events.custom.on(event_name,...callbacks);
-    return this;
-  },
-  emit(event_name,detail={}){
-    if(!this.events.custom)this.events.custom = bind_custom_event(this);
-    this.events.custom.emit(event_name,detail);
-    return this;
-  }
-};
-
-Object.entries(EventsMap).forEach(([name, eventList]) => {
-  const lname = name.toLowerCase()
-  eventList.forEach(event => {
-    const methodName = `on${event}`;
-    EventsMethodes[methodName] = function (callbacks) {
-      if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
-      this.events[lname][methodName](callbacks);
-      return this;
-    };
-  });
-});
-
-
-
-export {EventsMethodes}

package/src/ui/constructors/mixins/utils/index.js

@@ -1,64 +0,0 @@
-import { isStateGetter } from "../../../../hooks/use-state.js";
-import { 
-  is_camelcase,
-  camel2hyphencase
- } from '../../../../data/string/index.js'
- import { text } from "../../../text/index.js";
-export async function __addItem__(adder, pusher, ...ele) {
-  if (this.cache.isFrozzen) {
-    console.warn("You can't append new item to frozzen element");
-    return this;
-  }
-  for (let i = 0; i < ele.length; i++) {
-    if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-        // Fix Items Latter
-    if (ele[i] instanceof Function) {
-     const getter = ele[i]();
-      if (getter.isStateGetter) {
-        ele[i] = text(getter.value);
-        getter._subscribe(
-            (newValue) => (ele[i].element.textContent = newValue),
-            ele[i] 
-        );
-        // this.element.appendChild(textNode);
-      }
-    }
-    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isUINode) {
-        ele[i].cache.parent = this;
-        this.element?.[adder](ele[i].element);
-        ele[i].target = this.element;
-        this.items[pusher](ele[i]);
-    } 
-    else if(ele[i] instanceof Promise){
-      const UIEle = await ele[i]
-      UIEle.cache.parent = this;
-      this.element?.[adder](UIEle.element);
-      UIEle.target = this.element;
-      this.items[pusher](UIEle)
-    }
-    else if (ele[i] instanceof Object) {
-      if (ele[i]?.style) this.style(ele[i]?.style);
-      if (ele[i]?.attr) {
-        Object.entries(ele[i].attr).forEach((n) =>
-          this.setAttr("" + n[0], n[1]),
-        );
-      }
-    }
-  }
-  this.maintain();
-  return this;
-}
-export function _set_attrs_(name, value){
-    if(globalThis.SVGAElement && this.element instanceof globalThis.SVGAElement) name = is_camelcase(name) ? camel2hyphencase(name) : name;
-    if(this?.attr[name] && this?.attr[name]===value) return;
-    if(isStateGetter(value)){
-        const getter = value()
-        getter._subscribe(
-            (newValue) => this.element?.setAttribute(name, newValue),
-            this 
-        );
-    }
-    else this.element?.setAttribute(name, value)
-    Object.assign(this.cache.attributes, {[name]:value});   
-}