npm - ziko - Versions diffs - 0.0.2 → 0.0.5 - Mend

ziko 0.0.2 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/README.md CHANGED Viewed

@@ -4,24 +4,20 @@
 <br>
-## ⚡ Get started
-### NPX
+# Install
+```bash
+npm install ziko
+```
+# ⚡ Get started
+## Node
  ```bash
   npx create-ziko-app [My_App]
-  cd [My_App]
  ```
- #### Commands
   ```
+  cd [My_App]
   npm run dev
   ```
-  ```
-  npm start
-  ```
-  ```
-  npm run build
-  ```
-### Browser
+## Browser
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -53,11 +49,11 @@
 </body>
 </html>
 ```
+## Documentation
 ## 🎬 Demos
 - ### [  Windows entanglement using zikojs and ziko-three ](https://www.linkedin.com/feed/update/urn:li:activity:7144023650394918913/)
-## 📃 [wiki](https://github.com/zakarialaoui10/ziko.js/wiki/Math-Functions)
+## 📃 [wiki](https://github.com/zakarialaoui10/ziko.js/wiki)
 ## 💡 [Features]()
 <details>
@@ -319,7 +315,7 @@ useThread(() => {
 If you appreciate the library, kindly demonstrate your support by giving it a star!<br>
 [![Star](https://img.shields.io/github/stars/zakarialaoui10/ziko.js?style=social)](https://github.com/zakarialaoui10/ziko.js)
+<!--## Financial support-->
 # License
 This projet is licensed under the terms of MIT License
 <img src="https://img.shields.io/github/license/zakarialaoui10/zikojs?color=rgb%2820%2C21%2C169%29" width="100" align="right">

package/core/App/Globals/index.js ADDED Viewed

@@ -0,0 +1,18 @@
+// var __Target__=null;
+// if(globalThis?.document?.body)__Target__=document.body;
+const __ZikoConfig__={
+    default:{
+        target:null,
+        render:true
+    },
+    setDefault:function(pairs){
+        const keys=Object.keys(pairs);
+        const values=Object.values(pairs);
+        for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
+    },
+    init:()=>document.documentElement.setAttribute("data-engine","zikojs")
+}
+export * from "./__init__";
+export * from "./__Target__";
+export * from "./__UI__";
+export {__ZikoConfig__}

package/{src → core}/App/app.js RENAMED Viewed

@@ -1,5 +1,6 @@
 import { ZikoUIFlex } from "../UI/CustomElement/Flex.js";
 import { Seo } from "./Seo/index.js";
+import { HashEvent } from "../Reactivity/index.js";
 class ZikoUIApp extends ZikoUIFlex{
     constructor(){
         super("main");
@@ -7,11 +8,14 @@ class ZikoUIApp extends ZikoUIFlex{
         this.head=null;
         this.#init();
         this.seo=Seo(this);
+        Object.assign(this.events,{
+            hash:null
+        })
         Object.assign(this.cache,{
             theme:null,
             isRoot:true
         });
-        this.render();
+        this.render(globalThis.__ZikoConfig__.default.render);
     }
     #init(){
         this.root.setAttribute("data-engine","zikojs");
@@ -32,6 +36,11 @@ class ZikoUIApp extends ZikoUIFlex{
     description(){
     }
+    onHashChange(...callbacks){
+        if(!this.events.hash)this.events.hash = HashEvent(this);
+        this.events.hash.onChange(...callbacks);
+        return this;
+      }
 }
 const App=(...UIElement)=>new ZikoUIApp().append(...UIElement)
 export {App};

package/{src → core}/App/index.js RENAMED Viewed

@@ -8,4 +8,5 @@ export {
 } from "./Themes";
 export {
     __init__,
+    __ZikoConfig__
 } from "./Globals"

package/{src → core}/Graphics/Canvas/canvas.js RENAMED Viewed

@@ -20,7 +20,7 @@ class ZikoUICanvas extends ZikoUIElement{
             [-10,-10],
             [10,10]
         ])
-        this.render();
+        this.render(globalThis.__ZikoConfig__.default.render);
         setTimeout(()=>this.resize(w,h),0);
         this.on("sizeupdated",()=>this.adjust())
     }

package/{src → core}/Reactivity/Events/Global/CustomEvent.js RENAMED Viewed

@@ -49,5 +49,5 @@ class ZikoCustomEvent extends ZikoEvent{
         return this;
     }
 }
-const CustomEvent=Target=>new ZikoCustomEvent(Target);
-export default CustomEvent;
+const customEvent=Target=>new customEvent(Target);
+export default customEvent;

package/core/Reactivity/Events/Global/Mouse.js ADDED Viewed

@@ -0,0 +1,230 @@
+import {ZikoEvent,EVENT_CONTROLLER} from "../ZikoEvent.js";
+class ZikoEventMouse extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.dx=0;
+        this.dy=0;
+        this.dt=0;
+        this.mx=0;
+        this.my=0;
+        this.mt=0;
+        this.ux=0;
+        this.uy=0;
+        this.ut=0;
+        this.swippe={
+            h:null,
+            v:null,
+            delta_x:0,
+            delta_y:0
+        }
+        this.isMoving=false;
+        this.isDown=false;
+        this.cache={
+            prefixe:"mouse",
+            preventDefault:{
+                down:false,
+                move:false,
+                up:false,
+                enter:false,
+                out:false,
+                leave:false,
+                over:false,
+            },
+            paused:{
+                down:false,
+                move:false,
+                up:false,
+                enter:false,
+                out:false,
+                leave:false,
+                over:false,
+            },
+            stream:{
+                enabled:{
+                    down:false,
+                    move:false,
+                    up:false,
+                    enter:false,
+                    out:false,
+                    leave:false,
+                    over:false,
+                },
+                clear:{
+                    down:false,
+                    move:false,
+                    up:false,
+                    enter:false,
+                    out:false,
+                    leave:false,
+                    over:false,
+                },
+                history:{
+                    down:[],
+                    move:[],
+                    up:[],
+                    enter:[],
+                    out:[],
+                    leave:[],
+                    over:[]
+                }
+            },
+            callbacks:{
+                down:[(self)=>console.log({dx:self.dx,dy:self.dy,down:self.down,move:self.move,t:self.dt})],
+                move:[(self)=>console.log({mx:self.mx,my:self.my,down:self.down,move:self.move,t:self.dt})],
+                up:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})],
+                enter:[(self)=>console.log({dx:self.dx,dy:self.dy,down:self.down,move:self.move,t:self.dt})],
+                out:[(self)=>console.log({mx:self.mx,my:self.my,down:self.down,move:self.move,t:self.dt})],
+                leave:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})],
+                over:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})]
+            }
+        }
+        this.__controller={
+            down:mousedown_controller.bind(this),
+            move:mousemove_controller.bind(this),
+            up:mouseup_controller.bind(this),
+            enter:mouseenter_controller.bind(this),
+            out:mouseout_controller.bind(this),
+            leave:mouseleave_controller.bind(this),
+            over:mouseover_controller.bind(this),
+        }
+    }
+    onDown(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("down",{down:true,move:false,up:false,enter:false,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onMove(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("move",{down:false,move:true,up:false,enter:false,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onUp(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("up",{down:false,move:false,up:true,enter:false,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onEnter(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("enter",{down:false,move:false,up:false,enter:true,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onOut(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("out",{down:false,move:false,up:false,enter:false,out:true,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onLeave(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("leave",{down:false,move:false,up:false,enter:false,out:false,leave:true,over:false},...callbacks)
+        return this;
+    }
+    onOver(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("over",{down:false,move:false,up:false,enter:false,out:false,leave:false,over:true},...callbacks)
+        return this;
+    }
+}
+function mousedown_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "down",
+        ()=>{
+            this.dx=parseInt(e.offsetX);
+            this.dy=parseInt(e.offsetY);
+            this.isDown=true;
+        },
+        {
+            x:this.dx,
+            y:this.dy,
+            t:Date.now()-this.cache.stream.t0
+        }
+    )
+}
+function mousemove_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "move",
+        ()=>{
+            this.mx=parseInt(e.offsetX);
+            this.my=parseInt(e.offsetY);
+            this.isMoving=true;
+        },
+        {
+            x:this.mx,
+            y:this.my,
+            t:Date.now()-this.cache.stream.t0
+        }
+    )
+}
+function mouseup_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "up",
+        ()=>{
+            this.ux=parseInt(e.offsetX);
+            this.uy=parseInt(e.offsetY);
+            this.isDown=false;
+            const dx=this.dx;
+            const dy=this.dy;
+            const ux=this.ux;
+            const uy=this.uy;
+            const delta_x=(ux-dx)/this.target.Width;
+            const delta_y=(dy-uy)/this.target.Height;
+            const HORIZONTAL_SWIPPE=(delta_x<0)?"left":(delta_x>0)?"right":"none";
+            const VERTICAL_SWIPPE=(delta_y<0)?"bottom":(delta_y>0)?"top":"none";
+            this.swippe={
+                h:HORIZONTAL_SWIPPE,
+                v:VERTICAL_SWIPPE,
+                delta_x,
+                delta_y
+            }
+        },
+        {
+            x:this.ux,
+            y:this.uy,
+            t:Date.now()-this.cache.stream.t0
+        }
+    )
+}
+function mouseenter_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "enter",
+        null,
+        null
+    )
+}
+function mouseleave_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "leave",
+        null,
+        null
+    )
+}
+function mouseout_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "out",
+        null,
+        null
+    )
+}
+function mouseover_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "out",
+        null,
+        null
+    )
+}
+const Mouse=target=>new ZikoEventMouse(target);
+export default Mouse;

package/core/Reactivity/Events/Global/Wheel.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function wheel_controller(e){
+    EVENT_CONTROLLER.call(this,e,"wheel",null,null)
+}
+class ZikoEventWheel extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                wheel:false,
+            },
+            paused:{
+                wheel:false,
+            },
+            stream:{
+                enabled:{
+                    wheel:false,
+                },
+                clear:{
+                    wheel:false,
+                },
+                history:{
+                    wheel:[],
+                }
+            },
+            callbacks:{
+                click:[],
+            }
+        }
+        this.__controller={
+            wheel:wheel_controller.bind(this),
+        }
+    }
+    onWheel(...callbacks){
+        this.__onEvent("wheel",{},...callbacks)
+        return this;
+     }
+}
+const Wheel=Target=>new ZikoEventWheel(Target);
+export default Wheel

package/core/Reactivity/Events/Partiel/Hash.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function hashchange_controller(e){
+    EVENT_CONTROLLER.call(this,e,"hashchange",null,null)
+}
+class ZikoEventHash extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                hashchange:false,
+            },
+            paused:{
+                hashchange:false,
+            },
+            stream:{
+                enabled:{
+                    hashchange:false,
+                },
+                clear:{
+                    hashchange:false,
+                },
+                history:{
+                    hashchange:[],
+                }
+            },
+            callbacks:{
+                hashchange:[],
+            }
+        }
+        this.__controller={
+            hashchange:hashchange_controller.bind(this),
+        }
+    }
+    onChange(...callbacks){
+        this.__onEvent("hashchange",{},...callbacks)
+        return this;
+     }
+}
+const HashEvent=Target=>new ZikoEventHash(Target);
+export default HashEvent

package/core/Reactivity/Events/Partiel/MediaEvent.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ // Timeupdate

package/{src → core}/Reactivity/Events/index.js RENAMED Viewed

@@ -1,13 +1,18 @@
 import Pointer from "./Global/Pointer.js";
+import Mouse from "./Global/Mouse.js";
+import Wheel from "./Global/Wheel.js";
 import Key from "./Global/Key.js";
 import {Drag,Drop} from "./Global/Drag.js";
 import Click from "./Global/Click.js";
 import Clipboard from "./Global/Clipboard.js";
 import Focus from "./Global/Focus.js";
 import Input from "./Partiel/Input.js";
-import CustomEvent from "./Global/CustomEvent.js";
+import HashEvent from "./Partiel/Hash.js";
+import customEvent from "./Global/CustomEvent.js";
 const Events={
     Pointer,
+    Mouse,
+    Wheel,
     Key,
     Drag,
     Drop,
@@ -15,7 +20,8 @@ const Events={
     Clipboard,
     Focus,
     Input,
-    CustomEvent,
+    HashEvent,
+    customEvent,
     ExtractAll: function () {
         const keys = Object.keys(this);
         for (let i = 0; i < keys.length; i++) {
@@ -39,6 +45,8 @@ const Events={
 }
 export {
     Pointer,
+    Mouse,
+    Wheel,
     Key,
     Drag,
     Drop,
@@ -46,6 +54,7 @@ export {
     Clipboard,
     Focus,
     Input,
-    CustomEvent
+    HashEvent,
+    customEvent
 }
 export default Events

package/{src → core}/UI/CustomElement/Elements/Accordion/index.js RENAMED Viewed

@@ -1,10 +1,10 @@
 import ZikoUIElement from "../../../ZikoUIElement";
 import { ZikoUIFlex } from "../../Flex";
-import { ZikoHtml } from "../../../Misc";
+import { html } from "../../../Misc";
 class ZikoUIAccordion extends ZikoUIElement{
     constructor(summary,content,icon="😁"){
         super("details","Accordion")
-        this.summary=ZikoHtml("summary",summary).style({
+        this.summary=html("summary",summary).style({
             fontSize:"1.1em",
             padding:"0.625rem",
             fontWeight:"bold",

package/{src → core}/UI/CustomElement/Elements/CodeNote/CodeCell.js RENAMED Viewed

@@ -142,7 +142,7 @@ class ZikoUICodeCell extends ZikoUIFlex{
     }
     evaluate(order){
-        globalThis.__Target__=this.Output.element;
+        globalThis.__ZikoConfig__.default.target=this.Output.element;
         switch(this.cache.type){
             case "js":this.#evaluateJs(order);break;
         }

package/{src → core}/UI/CustomElement/Elements/CodeNote/SubElements.js RENAMED Viewed

@@ -1,8 +1,8 @@
-import { ZikoHtml } from "../../../Misc";
+import { html } from "../../../Misc";
 import { Flex } from "../../Flex";
 import { text } from "../../../Text";
 import { ZikoUICodeNote } from "./CodeNote";
-const Input=(codeText="")=>ZikoHtml("code",codeText).style({
+const Input=(codeText="")=>html("code",codeText).style({
     width:"100%",
     height:"auto",
     padding:"10px",
@@ -16,7 +16,7 @@ const Input=(codeText="")=>ZikoHtml("code",codeText).style({
     background:"#f6f8fa",
     color:"#0062C3"
 }).setAttr("contenteditable",true).setAttr("spellcheck",false);
-const Output=()=>ZikoHtml("output").style({
+const Output=()=>html("output").style({
     width:"100%",
     height:"auto",
     padding:"5px 0",
@@ -43,7 +43,7 @@ const Right=(ctx)=>Flex(
     text('▶️').style(BTN_STYLE).onClick(e=>{
         if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
         ctx.execute();
-        globalThis.__Target__=e.target.parent.parent[1][1];
+        globalThis.__ZikoConfig__.default.target=e.target.parent.parent[1][1];
     }),
     text('📋').style(BTN_STYLE).onClick(()=>{
         navigator.clipboard.writeText(ctx.codeText)

package/{src → core}/UI/CustomElement/Flex.js RENAMED Viewed

@@ -1,27 +1,7 @@
 import ZikoUIElement from "../ZikoUIElement.js"
-function set_vertical(direction){
-    direction == 1
-      ? this.style({ flexDirection: "column" })
-      : direction == -1 && this.style({ flexDirection: "column-reverse" });
-    return this;
-  }
-function set_horizontal(direction){
-  direction == 1
-      ? this.style({ flexDirection: "row" })
-      : direction == -1 && this.style({ flexDirection: "row-reverse" });
-    return this;
-}
-function map_pos_x(align){
-  let pos = ["flex-start", "center", "flex-end"];
-  if (typeof align === "number") align = pos[align + 1];
-  return align;
-}
-function map_pos_y(align){
-  return map_pos_x(-align);
-}
 class ZikoUIFlex extends ZikoUIElement {
-  constructor(tag , w = "100%", h = "100%") {
-    super(tag,"Flex");
+  constructor(tag = "div", w = "100%", h = "100%") {
+    super(tag ,"Flex");
     this.direction = "cols";
     if (typeof w == "number") w += "%";
     if (typeof h == "number") h += "%";
@@ -94,4 +74,24 @@ const Flex = (...ZikoUIElement) =>{
   }
   return new ZikoUIFlex(tag).append(...ZikoUIElement);
 }
+function set_vertical(direction){
+  direction == 1
+    ? this.style({ flexDirection: "column" })
+    : direction == -1 && this.style({ flexDirection: "column-reverse" });
+  return this;
+}
+function set_horizontal(direction){
+direction == 1
+    ? this.style({ flexDirection: "row" })
+    : direction == -1 && this.style({ flexDirection: "row-reverse" });
+  return this;
+}
+function map_pos_x(align){
+let pos = ["flex-start", "center", "flex-end"];
+if (typeof align === "number") align = pos[align + 1];
+return align;
+}
+function map_pos_y(align){
+return map_pos_x(-align);
+}
 export{Flex,ZikoUIFlex}

package/{src → core}/UI/Inputs/Primitives/btn.js RENAMED Viewed

@@ -1,10 +1,9 @@
 import ZikoUIElement from "../../ZikoUIElement.js";
 class ZikoUIBtn extends ZikoUIElement {
     constructor(value = "button") {
-      super();
+      super("button","btn");
       this.element = document.createElement("button");
       this.setValue(value);
-      this.render();
       this.st.cursor("pointer");
     }
     setValue(value) {