ziko 0.0.4 → 0.0.6

package/src/Reactivity/Use/UI/useFavIcon.js

@@ -1,38 +0,0 @@
-import { useEventEmitter } from "../Interactions/useEventEmmiter";
-class ZikoUseFavIcon{
-    constructor(FavIcon,useEventEmitter=true){
-        this.#init();
-        this.cache={
-            Emitter:null
-        }
-        if(useEventEmitter)this.useEventEmitter();
-        this.set(FavIcon);
-    }
-    #init(){     
-        this.__FavIcon__=document.querySelector("link[rel*='icon']") || document.createElement('link');   
-        this.__FavIcon__.type = 'image/x-icon';
-        this.__FavIcon__.rel = 'shortcut icon';
-        return this;
-    }
-    set(href){
-        if(href!==this.__FavIcon__.href){
-            this.__FavIcon__.href=href;
-            if(this.cache.Emitter)this.cache.Emitter.emit("ziko:favicon-changed");
-        }
-        return this;
-    }
-    get current(){
-        return document.__FavIcon__.href;
-    }
-    onChange(callback){
-        if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
-        return this;
-    }
-    useEventEmitter(){
-        this.cache.Emitter=useEventEmitter();
-        return this;
-    }
-
-}
-const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
-export{ useFavIcon }

package/src/Reactivity/Use/UI/useMediaQuery.js

@@ -1 +0,0 @@
-//window.matchMedia('(max-width: 600px)');

package/src/Reactivity/Use/UI/useStyle.js

@@ -1,54 +0,0 @@
-class ZikoUseStyle{
-    constructor(style,id=0){
-      this.id="Ziko-Style-"+id;
-      this.use(style);
-      this.keys=new Set();
-      this.styles={
-        default:{
-          fontSize:"1em"
-        }
-      }
-    }
-    get current(){
-      return [...this.keys].reduce((key, value) => {
-        key[value] = `var(--${value}-${this.id})`;
-        return key;
-      }, {});
-    }
-    add(name,style={}){
-      if(name instanceof Object)Object.assign(this.styles,name)
-      else Object.assign(this.styles,{[name]:style});
-      return this;
-    }
-    #useStyleIndex(index){
-      const keys=Object.keys(this.styles);
-        for(let a in this.styles[keys[index]]){
-          document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
-          this.keys.add(a);
-        }
-
-        return this;
-    }
-    #useStyleName(name){
-      for(let a in this.styles[name]){
-        document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
-        this.keys.add(a);
-      }
-      return this;
-    }
-    #useStyleObject(Style){
-      for(let a in Style){
-        document.documentElement.style.setProperty(`--${a}-${this.id}`, Style[a]);
-        this.keys.add(a);
-      }
-      return this;
-    }
-    use(style){
-      if(typeof style === "number")this.#useStyleIndex(style);
-      if(typeof style === "string")this.#useStyleName(style);
-      if(style instanceof Object)this.#useStyleObject(style);
-      return this;
-    }
-  }  
-const useStyle=id=>style=>new ZikoUseStyle(style,id)
-export {useStyle}

package/src/Reactivity/Use/UI/useTheme.js

@@ -1,62 +0,0 @@
-import { Themes } from "../../../App/Themes";
-class ZikoUseTheme{
-    constructor(theme,id=0){
-      this.id="Ziko-Theme-"+id;
-      this.use(theme)
-    }
-    get current(){
-      const colorNames = [
-        'background',
-        'currentLine',
-        'selection',
-        'foreground',
-        'comment',
-        'cyan',
-        'green',
-        'orange',
-        'pink',
-        'purple',
-        'red',
-        'yellow',
-    ];
-    return colorNames.reduce((theme, color) => {
-        theme[color] = `var(--${color}-${this.id})`;
-        return theme;
-    }, {});
-  
-  }
-    useThemeIndex(index){
-      const keys=Object.keys(Themes);
-          for(let a in Themes[keys[index]]){
-              document.documentElement.style.setProperty(`--${a}-${this.id}`, Themes[keys[index]][a]);
-          }
-          return this;
-    }
-    useThemeName(str){
-      str=str.toLowerCase()
-      const Themes_With_Lower_Case=Object.fromEntries(Object.entries(Themes).map(n=>[n[0].toLowerCase(),n[1]]))
-          for(let a in Themes_With_Lower_Case[str]){
-              document.documentElement.style.setProperty(`--${a}-${this.id}`, Themes_With_Lower_Case[str][a]);
-          }
-          return this;
-    }
-    useThemeObject(Theme){
-      for(let a in Theme){
-        document.documentElement.style.setProperty(`--${a}-${this.id}`, Theme[a]);
-      }
-      return this;
-    }
-    use(theme){
-      if(typeof theme === "number")this.useThemeIndex(theme);
-      if(typeof theme === "string")this.useThemeName(theme);
-      if(theme instanceof Object)this.useThemeObject(theme);
-      return this;
-    }
-  }  
-  const useTheme=(id=0)=>(theme=0)=>new ZikoUseTheme(theme,id)
-  export {
-      useTheme,
-      // Themes,
-      // LightThemes,
-      // DarkThemes,
-  };

package/src/Reactivity/Use/UI/useTitle.js

@@ -1,30 +0,0 @@
-import { useEventEmitter } from "../Interactions/useEventEmmiter";
-class ZikoUseTitle{
-    constructor(title=document.title,useEventEmitter=true){
-        this.cache={
-            Emitter:null
-        }
-        if(useEventEmitter)this.useEventEmitter();
-        this.set(title);
-    }
-    useEventEmitter(){
-        this.cache.Emitter=useEventEmitter();
-        return this;
-    }
-    set(title){
-        if(title!==document.title){
-            document.title=title;
-            if(this.cache.Emitter)this.cache.Emitter.emit("ziko:title-changed");
-        }
-        return this;
-    }
-    get current(){
-        return document.title;
-    }
-    onChange(callback){
-        if(this.cache.Emitter)this.cache.Emitter.on("ziko:title-changed",callback);
-        return this;
-    }
-}
-const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
-export{ useTitle }

package/src/Reactivity/Use/index.js

@@ -1,82 +0,0 @@
-import { 
-    useStyle,
-    useTheme,
-    useTitle,
-    useFavIcon
- } from "./UI";
-import { 
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth
- } from "./Interactions";
-import { 
-    useBattery,
-    useGeolocation
- } from "./Sensors";
-import { 
-    useThrottle,
-    useDebounce
- } from "./Decorators";
-import {
-    useLocaleStorage,
-    useSessionStorage
-} from "./Storage"
-import { 
-    useSuccesifKeys
- } from "./Contexte";
-const Use={
-    useStyle,
-    useTheme,
-    useBattery,
-    useGeolocation,
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth,
-    useTitle,
-    useFavIcon,
-    useThrottle,
-    useDebounce,
-    useLocaleStorage,
-    useSessionStorage,
-    useSuccesifKeys,
-    ExtractAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                globalThis[key] = this[key];
-            }
-        }
-        return this;
-    },
-    RemoveAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'RemoveAll') {
-                delete globalThis[key];
-            }
-        }
-        return this;
-    }
-}
-export default Use;
-export{
-    useStyle,
-    useTheme,
-    useTitle,
-    useFavIcon,
-    useBattery,
-    useGeolocation,
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth,
-    useThrottle,
-    useDebounce,
-    useLocaleStorage,
-    useSessionStorage,
-    useSuccesifKeys
-}

package/src/Reactivity/Use/todo.md

@@ -1,26 +0,0 @@
-- Device :
-  - useBattery
-  - useGeolocation
-  - useFullScrean
-  - useOrientation
-  - useNotification
-- UI
-  - useTheme
-  - useStyle 
-  - useCss
-  - useTitle
-  - useFavIcon
-- Interactions
-  - useEventEmitter
-  - useChannel
-  - useBluetooth
-  - useSerial
-  - useUsb
-  - useSocket
-- Storage
-  - useSessionStorage
-  - useLocalStorage
-- Timing
-  - useDebounce
-  - useThrottle
-

package/src/Reactivity/index.js

@@ -1,3 +0,0 @@
-export * from "./Events";
-export * from "./Observer";
-export * from "./Use";

package/src/Time/animation.js

@@ -1,76 +0,0 @@
-import { Ease } from "./utils";
-import { map } from "../Math/Utils"
-class ZikoTimeAnimation{
-    constructor(callback,{ease=Ease.Linear,step=50,t=[0,null],start=true,duration=3000}={}){
-        this.cache={
-            isRunning:false,
-            AnimationId:null,
-            startTime:null,
-            ease,
-            step,
-            intervall:t,
-            started:start,
-            duration
-        }
-        this.t=0;
-        this.tx=0;
-        this.ty=0;
-        this.i=0;
-        this.callback=callback;
-    }
-    #animation_handler(){
-            this.t+=this.cache.step;
-            this.i++;
-            this.tx=map(this.t,0,this.cache.duration,0,1);
-            this.ty=this.cache.ease(this.tx);
-            this.callback(this)
-            if(this.t>=this.cache.duration){
-                clearInterval(this.cache.AnimationId);
-                this.cache.isRunning=false;
-            }
-    }
-    reset(restart=true){
-        this.t=0
-        this.tx=0;
-        this.ty=0;
-        this.i=0;
-        if(restart)this.start();
-        return this;
-    }
-    #animate(reset=true){
-        if(!this.cache.isRunning){
-            if(reset)this.reset(false);
-            this.cache.isRunning=true;
-            this.cache.startTime = Date.now();
-            this.cache.AnimationId=setInterval(this.#animation_handler.bind(this),this.cache.step);
-        }
-        return this;
-    }
-    start(){
-        this.#animate(true);
-        return this;
-    }
-    pause(){
-        if (this.cache.isRunning) {
-            clearTimeout(this.cache.AnimationId);
-            this.cache.isRunning = false;
-          }
-        return this;
-    }
-    resume(){
-        this.#animate(false);
-        return this;
-    }
-    stop(){
-        this.pause();
-        this.reset(false);
-        return this;
-    }
-    // clear(){
-    // }
-    // stream(){
-    // }
-}
-
-const animation=(callback,config)=>new ZikoTimeAnimation(callback,config)
-export{animation}

package/src/Time/index.js

@@ -1,54 +0,0 @@
-import{
-    loop
-} from "./loop.js"
-import{
-    animation
-} from "./animation.js"
-import {
-    wait,
-    timeTaken,
-    useThrottle,
-    useDebounce,
-    Ease,
-    time_memory_Taken,
-    waitForUIElm,
-    waitForUIElmSync
-} from "./utils/index.js";
-const Time={
-    wait,
-    timeTaken,
-    useThrottle,
-    useDebounce,
-    Ease,
-    time_memory_Taken,
-    loop,
-    animation,
-    waitForUIElm,
-    waitForUIElmSync,
-    ExtractAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                globalThis[key] = this[key];
-            }
-        }
-        return this;
-    },
-    RemoveAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'RemoveAll') {
-                delete globalThis[key];
-            }
-        }
-        return this;
-    }
-}
-export * from "./utils/index.js"
-export {
-    loop,
-    animation
-}
-export default Time;

package/src/Time/loop.js

@@ -1,83 +0,0 @@
-class ZikoTimeLoop {
-  constructor(callback, {fps,step,t=[0,null],start=true}={}) {
-    this.callback = callback;
-    this.cache = {
-      isRunning: false,
-      AnimationId : null,
-      startTime : null,
-      step,
-      fps,
-      t,
-      started:start
-    };
-    this.adjust();
-    this.i=0;
-  }
-  adjust(){
-    if(this.cache.step && this.cache.fps){
-      console.warn(`Fps will be adjusted from ${this.cache.fps} to ${1000/this.cache.step} to ensure a smoother animation`);
-      this.cache.fps=1000/this.cache.step;
-    }
-    if(this.cache.started){
-      const t=this.cache.t;
-      t[0]?this.startAfter(t[0]):this.start();
-      if(t[1])this.stopAfter(t[1]);
-    }
-    return this;
-  }
-  get TIME_STEP() {
-    return this.cache.step?this.cache.step:1000 / this.cache.fps;
-  }
-  start() {
-    if (!this.cache.isRunning) {
-      this.i=0;
-      this.cache.isRunning = true;
-      this.cache.startTime = Date.now();
-      this.animate();
-    }
-    return this;
-  }
-  pause() {
-    if (this.cache.isRunning) {
-      clearTimeout(this.cache.AnimationId);
-      this.cache.isRunning = false;
-    }
-    return this;
-  }
-  stop(){
-    this.pause();
-    this.i=0;
-    return this;
-  }
-  resume(){
-    this.cache.isRunning=true;
-    this.animate();
-    return this;
-  }
-  startAfter(t=1000){
-    setTimeout(this.start.bind(this),t);
-    return this;
-  }
-  stopAfter(t=1000){
-    setTimeout(this.stop.bind(this),t);
-    return this;   
-  }
-  animate = () => {
-    if (this.cache.isRunning) {
-      const now = Date.now();
-      const delta = now - this.cache.startTime;
-      if (delta > this.TIME_STEP) {
-        this.callback(this);
-        this.i++;
-        this.cache.startTime = now - (delta % this.TIME_STEP);
-      }
-      this.cache.AnimationId = setTimeout(this.animate, 0);
-    };
-  }
-}
-
-const loop = (callback, options) => new ZikoTimeLoop(callback, options);
-
-
-//const a = loop((e) => console.log(e.i), {step:100,fps:30,t:[500,4001],start:true});
-export {loop}

package/src/Time/utils/decorators.js

@@ -1,17 +0,0 @@
-const useDebounce=(fn,delay=1000)=>{
-    let id;
-    return(...args)=>id?clearTimeout(id):setTimeout(()=>fn(...args),delay)
-}
-const useThrottle=(fn,delay)=>{
-    let lastTime=0;
-    return (...args)=>{
-        const now=new Date().getTime()
-        if(now-lastTime<delay)return;
-        lastTime=now;
-        fn(...args); 
-    }
-}
-export{
-    useDebounce,
-    useThrottle
-}

package/src/Time/utils/ease.js

@@ -1,144 +0,0 @@
-const Ease={
-    Linear:function(t){
-        return t;
-    },
-    InSin(t){
-        return 1 - Math.cos((t * Math.PI) / 2);
-    },
-    OutSin(t){
-        return Math.sin((t * Math.PI) / 2);
-    },
-    InOutSin(t){
-        return  -(Math.cos(Math.PI * t) - 1) / 2;
-    },
-    InQuad(t){
-        return t**2;
-    },
-    OutQuad(t){
-        return 1 - Math.pow((1 - t),2)
-    },
-    InOutQuad(t){
-        return t < 0.5 ? 2 * Math.pow(t,2) : 1 - Math.pow(-2 * t + 2, 2) / 2;
-    },
-    InCubic(t){
-        return t**3;    
-    },
-    OutCubic(t){
-        return 1 - Math.pow((1 - t),3)
-    },
-    InOutCubic(t){
-        return t < 0.5 ? 4 * Math.pow(t,3) : 1 - Math.pow(-2 * t + 2, 3) / 2;
-    },
-    InQuart(t){
-        return t**4;
-    },
-    OutQuart(t){
-        return 1 - Math.pow((1 - t),4);
-    },
-    InOutQuart(t){
-        return t < 0.5 ? 8 * Math.pow(t,4) : 1 - Math.pow(-2 * t + 2, 4) / 2;
-    },
-    InQuint(t){
-        return t**5;
-    },
-    OutQuint(t){
-        return 1 - Math.pow((1 - t),5);
-    },
-    InOutQuint(t){
-        return t < 0.5 ? 16 * Math.pow(t,5) : 1 - Math.pow(-2 * t + 2, 5) / 2;
-    },
-    InExpo(t){
-        return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
-    },
-    OutExpo(t){
-        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
-    },
-    InOutExpo(t){
-        return t === 0? 0: t === 1? 1: t < 0.5 ? Math.pow(2, 20 * t - 10) / 2: (2 - Math.pow(2, -20 * t + 10)) / 2;
-    },
-    InCirc(t){
-        return 1 - Math.sqrt(1 - Math.pow(t, 2));
-    },
-    OutCirc(t){
-        return Math.sqrt(1 - Math.pow(t - 1, 2));
-    },
-    InOutCic(t){
-        return t < 0.5? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2: (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
-    },
-    Arc(t){
-        return 1 - Math.sin(Math.acos(t));
-    },
-    Back(t){
-        // To Be Changed
-        let x=1
-        return Math.pow(t, 2) * ((x + 1) * t - x);  
-    },
-    Elastic(t){
-        return -2*Math.pow(2, 10 * (t - 1)) * Math.cos(20 * Math.PI * t / 3 * t);
-    },
-    InBack(t){
-        const c1 = 1.70158;
-        const c3 = c1 + 1;
-        return c3 *Math.pow(t,3)- c1 * (t**2);      
-    },
-    OutBack(t){
-        const c1 = 1.70158;
-        const c3 = c1 + 1;
-        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);     
-    },
-    InOutBack(t){
-        const c1 = 1.70158;
-        const c2 = c1 * 1.525;
-        return t < 0.5
-        ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
-        : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;        
-    },
-    InElastic(t){
-        const c4 = (2 * Math.PI) / 3;return t === 0
-        ? 0
-        : t === 1
-        ? 1
-        : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
-    },
-    OutElastic(t){
-        const c4 = (2 * Math.PI) / 3;
-        return t === 0
-        ? 0
-        : t === 1
-        ? 1
-        : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
-    },
-    InOutElastic(t){
-        const c5 = (2 * Math.PI) / 4.5;
-        return t === 0
-        ? 0
-        : t === 1
-        ? 1
-        : t < 0.5
-        ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2
-        : (Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5)) / 2 + 1;
-    },
-    InBounce(t){
-        return 1 - Ease.OutBounce(1-t);
-    },
-    OutBounce(t){
-        const n1 = 7.5625;
-        const d1 = 2.75;
-        if (t < 1 / d1) {
-            return n1 * t * t;
-        } else if (t < 2 / d1) {
-            return n1 * (t -= 1.5 / d1) * t + 0.75;
-        } else if (t < 2.5 / d1) {
-            return n1 * (t -= 2.25 / d1) * t + 0.9375;
-        } else {
-            return n1 * (t -= 2.625 / d1) * t + 0.984375;
-        }
-
-    },
-    InOutBounce(t){
-        return t < 0.5
-        ? (1 - Ease.OutBounce(1 - 2 * t)) / 2
-        : (1 + Ease.OutBounce(2 * t - 1)) / 2;
-    }
-}
-export default Ease

package/src/Time/utils/index.js

@@ -1,18 +0,0 @@
-import Ease from "./ease.js";
-const wait=(delayInMS)=>{
-    return new Promise((resolve) => setTimeout(resolve, delayInMS));
-}
-const timeTaken = callback => {
-    console.time('timeTaken');
-    const r = callback();
-    console.timeEnd('timeTaken');
-    return r;
-}
-export{
-    wait,
-    timeTaken,
-    Ease
-}
-export * from "./decorators.js";
-export * from "./performance.js";
-export * from "./ui.js"