ziko 0.0.12 → 0.0.14

package/src/user-interface/elements/primitives/ZikoUIElement.js

@@ -0,0 +1,480 @@
+import { ZikoUseStyle } from "../../../reactivity/hooks/UI/useStyle.js";
+import { ZikoStyle } from "../../style/index.js";
+import { 
+  usePointerEvent,
+  useMouseEvent, 
+  useWheelEvent,
+  useKeyEvent, 
+  useDragEvent , 
+  useDropEvent, 
+  useClickEvent , 
+  useClipboardEvent ,
+  useFocusEvent,
+  useCustomEvent,
+  useSwipeEvent,
+  watchIntersection, 
+  watchSize,
+  watchAttr,
+  watchChildren
+} from "../../../reactivity/index.js"
+import { Random } from "../../../math/index.js";
+import { Str } from "../../../data/index.js";
+class ZikoUIElement {
+  constructor(element ,name="") {
+    this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
+    if(typeof element === "string") {
+      element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
+    }
+    this.element = element;
+    this.uuid=this.constructor.name+"-"+Random.string(10);
+    this.cache = {
+      name,
+      parent:null,
+      isRoot:false,
+      isHidden: false,
+      isFrozzen:false,
+      legacyParent : null,
+      style: ZikoStyle({}),
+      attributes: {},
+      filters: {},
+      temp:{}
+    };
+    this.events = {
+      ptr:null,
+      mouse:null,
+      wheel:null,
+      key:null,
+      drag:null,
+      drop:null,
+      click:null,
+      clipboard:null,
+      focus:null,
+      swipe:null,
+      custom:null,
+    }
+    this.observer={
+      resize:null,
+      intersection:null
+    }
+    this.cache.style.linkTo(this);
+    this.style({ 
+      position: "relative",
+      boxSizing:"border-box",
+      // fontFamily:"verdana",
+      margin:0,
+      padding:0,
+     });
+    this.size("auto", "auto");
+    globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
+    // this.render(globalThis.__Ziko__.__Config__.default.render);
+    globalThis.__Ziko__.__Config__.default.render && this.render()
+  }
+  get st(){
+    return this.cache.style;
+  }
+  get attr(){
+    return this.cache.attributes;
+  }
+  get evt(){
+    return this.cache.events;
+  }
+  get html(){
+    return this.element.innerHTML;
+  }
+  get text(){
+    return this.element.textContent;
+  }
+  get __app__(){
+    if(this.cache.isRoot)return this;
+    let root=this.cache.parent;
+    while(1){
+      if(!root)return null;
+      if(root.cache.isRoot)return root;
+      root=root.parent;
+    }
+  }
+  get parent(){
+    return this.cache.parent;
+  }
+  get width(){
+    return this.element.getBoundingClientRect().width;
+  }
+  get height(){
+    return this.element.getBoundingClientRect().height;
+  }
+  get top(){
+    return this.element.getBoundingClientRect().top;
+  }
+  get right(){
+    return this.element.getBoundingClientRect().right;
+  }
+  get bottom(){
+    return this.element.getBoundingClientRect().bottom;
+  }
+  get left(){
+    return this.element.getBoundingClientRect().left;
+  }
+  clone(render=false) {
+    const UI = new this.constructor();
+    UI.__proto__=this.__proto__;
+    if(this.items.length){
+      const items = [...this.items].map(n=>n.clone());
+      UI.append(...items);
+    }
+    else UI.element=this.element.cloneNode(true);
+    return UI.render(render);
+  }
+  style(styles){
+    styles instanceof ZikoUseStyle ? this.st.style(styles.current): this.st.style(styles);
+    return this;
+  }
+  size(width,height){
+    this.st.size(width,height);
+    return this; 
+  }
+  get #SwitchedStyleRTL_LTR(){
+    const CalculedStyle = globalThis.getComputedStyle(this.element); 
+    const SwitchedStyle = {}
+    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
+    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
+    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
+    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
+    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
+    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
+    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
+    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
+    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
+    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
+    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
+    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
+    if(["flex","inline-flex"].includes(CalculedStyle.display)){
+      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
+      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
+    }
+    return SwitchedStyle;
+  }
+  useRtl(switchAll = false){
+    switchAll ? this.style({
+      ...this.#SwitchedStyleRTL_LTR,
+      direction : "rtl"
+    }) : this.style({direction : "rtl"}); 
+    return this;
+  }
+  useLtr(switchAll = false){
+    switchAll ? this.style({
+      ...this.#SwitchedStyleRTL_LTR,
+      direction : "ltr"
+    }) : this.style({direction : "ltr"}); 
+    return this;
+  }
+  freeze(freeze){
+    this.cache.isFrozzen=freeze;
+    return this;
+  }
+  setTarget(tg) {
+    if (tg instanceof ZikoUIElement) tg = tg.element;
+    this.unrender();
+    this.target = tg;
+    this.render();
+    return this;
+  }
+  render(/*render = true , */target = this.target) {
+    if(target instanceof ZikoUIElement)target=target.element;
+    this.target=target;
+    this.target?.appendChild(this.element);
+    // if(render) {
+    //   this.target.appendChild(this.element);
+    // }
+    // else this.remove();
+    return this;
+  }
+  unrender(){
+    if(this.cache.parent)this.cache.parent.remove(this);
+    else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
+    return this;
+  }
+  renderAfter(t = 1) {
+    setTimeout(() => this.render(), t);
+    return this;
+  }
+  unrenderAfter(t = 1) {
+    setTimeout(() => this.unrender(), t);
+    return this;
+  }
+  after(ui){
+    if(ui instanceof ZikoUIElement) ui=ui.element;
+    this.element?.after(ui)
+    return this;
+  }
+  before(ui){
+    if(ui instanceof ZikoUIElement) ui=ui.element;
+    this.element?.before(ui)
+    return this;
+  }
+  animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
+    this.element?.animate(keyframe,{duration, iterations, easing});
+    return this;
+  }
+    // Attributes
+  #setAttr(name, value){
+    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this?.attr[name] && this?.attr[name]===value) return;
+    this.element.setAttribute(name, value)
+    Object.assign(this.cache.attributes, {[name]:value});
+  }
+  setAttr(name, value) {
+    if(name instanceof Object){
+      const [names,values]=[Object.keys(name),Object.values(name)];
+      for(let i=0;i<names.length;i++){
+        if(values[i] instanceof Array)value[i] = values[i].join(" ");
+        this.#setAttr(names[i], values[i])
+      }
+    }
+    else{
+      if(value instanceof Array)value = value.join(" ");
+      this.#setAttr(name, value)
+    }
+    return this;
+  }
+  removeAttr(...names) {
+    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
+    return this;
+  }
+  getAttr(name){
+    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    return this.element.attributes[name].value;
+  }
+  setContentEditable(bool = true) {
+    this.setAttr("contenteditable", bool);
+    return this;
+  }
+  get children() {
+    return [...this.element.children];
+  }
+  get cloneElement() {
+    return this.element.cloneNode(true);
+  }
+  setClasses(...value) {
+    this.setAttr("class", value.join(" "));
+    return this;
+  }
+  get classes(){
+    const classes=this.element.getAttribute("class");
+    return classes===null?[]:classes.split(" ");
+  }
+  addClass() {
+    /*this.setAttr("class", value);
+        return this;*/
+  }
+  setId(id) {
+    this.setAttr("id", id);
+    return this;
+  }
+  get id() {
+    return this.element.getAttribute("id");
+  }
+  onPtrMove(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onMove(...callbacks);
+    return this;
+  }
+  onPtrDown(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onDown(...callbacks);
+    return this;
+  }
+  onPtrUp(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onUp(...callbacks);
+    return this;
+  }
+  onPtrEnter(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onEnter(...callbacks);
+    return this;
+  }
+  onPtrLeave(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onLeave(...callbacks);
+    return this;
+  }
+  onPtrOut(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onOut(...callbacks);
+    return this;
+  }
+  onPtrCancel(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onCancel(...callbacks);
+    return this;
+  }
+  onSwipe(width_threshold, height_threshold,...callbacks){
+    if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
+    this.events.swipe.onSwipe(...callbacks);
+    return this;
+  }
+  onMouseMove(...callbacks){
+    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
+    this.events.mouse.onMove(...callbacks);
+    return this;
+  }
+  onMouseDown(...callbacks){
+    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
+    this.events.mouse.onDown(...callbacks);
+    return this;
+  }
+  onMouseUp(...callbacks){
+    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
+    this.events.mouse.onUp(...callbacks);
+    return this;
+  }
+  onMouseEnter(...callbacks){
+    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
+    this.events.mouse.onEnter(...callbacks);
+    return this;
+  }
+  onMouseLeave(...callbacks){
+    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
+    this.events.mouse.onLeave(...callbacks);
+    return this;
+  }
+  onMouseOut(...callbacks){
+    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
+    this.events.mouse.onOut(...callbacks);
+    return this;
+  }
+  onWheel(...callbacks){
+    if(!this.events.wheel)this.events.wheel = useWheelEvent(this);
+    this.events.wheel.onWheel(...callbacks);
+    return this;
+  }
+  onKeyDown(...callbacks){
+    if(!this.events.key)this.events.key = useKeyEvent(this);
+    this.events.key.onDown(...callbacks);
+    return this;
+  }
+  onKeyPress(...callbacks){
+    if(!this.events.key)this.events.key = useKeyEvent(this);
+    this.events.key.onPress(...callbacks);
+    return this;
+  }
+  onKeyUp(...callbacks){
+    if(!this.events.key)this.events.key = useKeyEvent(this);
+    this.events.key.onUp(...callbacks);
+    return this;
+  }
+  onKeysDown({keys=[],callback}={}){
+    if(!this.events.key)this.events.key = useKeyEvent(this);
+    this.events.key.handleSuccessifKeys({keys,callback});
+    return this;
+  }
+  onDragStart(...callbacks){
+    if(!this.events.drag)this.events.drag = useDragEvent(this);
+    this.events.drag.onStart(...callbacks);
+    return this;
+  }
+  onDrag(...callbacks){
+    if(!this.events.drag)this.events.drag = useDragEvent(this);
+    this.events.drag.onDrag(...callbacks);
+    return this;
+  }
+  onDragEnd(...callbacks){
+    if(!this.events.drag)this.events.drag = useDragEvent(this);
+    this.events.drag.onEnd(...callbacks);
+    return this;
+  }
+  onDrop(...callbacks){
+    if(!this.events.drop)this.events.drop = useDropEvent(this);
+    this.events.drop.onDrop(...callbacks);
+    return this;
+  }
+  onClick(...callbacks){
+    if(!this.events.click)this.events.click = useClickEvent(this);
+    this.events.click.onClick(...callbacks);
+    return this;
+  }
+  onDbClick(...callbacks){
+    if(!this.events.click)this.events.click = useClickEvent(this);
+    this.events.click.onDbClick(...callbacks);
+    return this;
+  }
+  onCopy(...callbacks){
+    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
+    this.events.clipboard.onCopy(...callbacks);
+    return this;
+  }
+  onCut(...callbacks){
+    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
+    this.events.clipboard.onCut(...callbacks);
+    return this;
+  }
+  onPaste(...callbacks){
+    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
+    this.events.clipboard.onPaste(...callbacks);
+    return this;
+  }
+  onSelect(...callbacks){
+    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
+    this.events.clipboard.onSelect(...callbacks);
+    return this;
+  }
+  onFocus(...callbacks){
+    if(!this.events.focus)this.events.focus = useFocusEvent(this);
+    this.events.focus.onFocus(...callbacks);
+    return this;
+  }
+  onBlur(...callbacks){
+    if(!this.events.focus)this.events.focus = useFocusEvent(this);
+    this.events.focus.onFocus(...callbacks);
+    return this;
+  }
+  on(event_name,...callbacks){
+    if(!this.events.custom)this.events.custom = useCustomEvent(this);
+    this.events.custom.on(event_name,...callbacks);
+    return this;
+  }
+  emit(event_name,detail={}){
+    if(!this.events.custom)this.events.custom = useCustomEvent(this);
+    this.events.custom.emit(event_name,detail);
+    return this;
+  }
+  watchAttr(callback){
+    if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
+    return this;
+  }
+  watchChildren(callback){
+    if(!this.observer.children)this.observer.children = watchChildren(this,callback);
+    return this;
+  }
+  watchSize(callback){
+    if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
+    this.observer.resize.start();
+    return this;
+  }
+  watchIntersection(callback,config){
+    if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
+    this.observer.intersection.start();
+    return this;
+  }
+  setFullScreen(set = true, e) {
+    if(!this.element.requestFullscreen){
+      console.error("Fullscreen API is not supported in this browser.");
+      return this;
+    }
+    if (set) this.element.requestFullscreen(e);
+    else globalThis.document.exitFullscreen();
+    return this;
+  }
+  toggleFullScreen(e) {
+    if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
+    else globalThis.document.exitFullscreen();
+    return this;
+  }
+  toPdf(){
+    if(__ZikoPdf__){
+
+    }
+    return this;
+  }
+}
+export default ZikoUIElement;

package/src/user-interface/elements/primitives/embaded/html.js

@@ -0,0 +1,21 @@
+import ZikoUIElement from "../ZikoUIElement";
+
+class ZikoUIHtmlViewer extends ZikoUIElement{
+    constructor(src, title){
+        super("iframe", "HTMLViewer")
+        this.setAttr({
+            src,
+            title,
+            // ariaLabel : "Interactive YouTube video player for zikojs apps",
+            role:"application",
+            loading:"lazy" 
+        })
+    }
+}
+
+const HTMLViewer = (src, title) => new ZikoUIHtmlViewer(src, title);
+window.HTMLViewer = HTMLViewer
+export{
+    YoutubePlayer,
+    ZikoUIHtmlViewer
+}

package/src/user-interface/elements/primitives/embaded/index.js

@@ -0,0 +1,3 @@
+export * from "./html.js"
+export * from "./pdf.js"
+export * from "./youtube.js"

package/src/user-interface/elements/primitives/embaded/pdf.js

@@ -0,0 +1,18 @@
+import  ZikoUIElement  from "../ZikoUIElement.js";
+class ZikoUIPdf extends ZikoUIElement{
+    constructor(src, title = "Pdf Document Embaded in Zikojs App"){
+        super("embed","PDFViewer")
+        this.setAttr({
+            src:src,
+            type: "application/pdf",
+            ariaLabel: title,
+            tabIndex: "0",
+        })
+    }
+}
+const PDFViewer=(src, title)=>new ZikoUIPdf(src, title);
+window.PDFViewer = PDFViewer
+export{
+    ZikoUIPdf,
+    PDFViewer
+}

package/src/user-interface/elements/primitives/embaded/youtube.js

@@ -0,0 +1,26 @@
+import ZikoUIElement from "../ZikoUIElement";
+import { Str } from "../../../../data";
+class ZikoUIYoutubePlayer extends ZikoUIElement{
+    constructor(src, title){
+        super("iframe", "YoutubePlayer");
+        const id = Str.isUrl(src)?getYouTubeVideoId(src):src
+        this.setAttr({
+            src:`https://www.youtube.com/embed/${id}`,
+            title,
+            ariaLabel : title ?? "Interactive YouTube video player for zikojs apps",
+            role:"application"
+        })
+    }
+}
+function getYouTubeVideoId(url) {
+    const regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|embed)\/|.*[?&]v=)|youtu\.be\/|embed\/)([a-zA-Z0-9_-]{11})/;
+    const match = url.match(regex);
+    return match ? match[1] : null;
+  }
+const YoutubePlayer = (id, title) => new ZikoUIYoutubePlayer(id, title);
+window.YoutubePlayer = YoutubePlayer
+window.YB = YoutubePlayer
+export{
+    YoutubePlayer,
+    ZikoUIYoutubePlayer
+}

package/src/user-interface/elements/primitives/index.js

@@ -0,0 +1,8 @@
+export * from "./text/index.js";
+export * from "./list/index.js";
+export * from "./io/index.js";
+export * from "./semantic/index.js";
+export * from "./embaded/index.js";
+export * from "./table/index.js";
+export * from "./media/index.js";
+export * from "./misc/index.js";

package/src/user-interface/elements/primitives/io/Form/index.js

@@ -0,0 +1,42 @@
+import { ZikoUIFlex } from "../../../derived/Flex.js";
+class ZikoUIForm extends ZikoUIFlex{
+    constructor(...items){
+        super("form", "Form");
+        this.append(...items);
+        this.setMethod("POST");
+        this.setAction("/");
+    }
+    setAction(action = "/"){
+        this.setAttr("action", action);
+        return this;
+    }
+    setMethod(method = "post"){
+        this.setAttr("method", method);
+        return this;
+    }
+    get data(){
+        let formData = new FormData(this.element);
+        this.items.forEach(n=>{
+            if(n.isInput||n.isSelect||n.isTextarea)formData.append(n.element.name, n.value)
+        })
+        return formData;
+    }
+    sendFormData(){
+        fetch(this.element.action, {
+            method: this.element.method,
+            body: this.data
+          })
+          .then(response => response.json())
+          .then(data => console.log(data))
+          .catch(error => console.error('Error:', error));
+        return this;
+    }
+    getByName(name){
+        return this.data.get(name);
+    }
+}
+const Form = (...items) => new ZikoUIForm(...items);
+export{
+    Form,
+    ZikoUIForm
+}

package/src/user-interface/elements/primitives/io/Form/index.js.txt

@@ -0,0 +1,104 @@
+import { ZikoUIFlex } from "../../custom-elements/Flex";
+
+class ZikoUIForm extends ZikoUIFlex {
+    constructor(...items) {
+        super("form", "Form");
+        this.append(...items);
+        this.setMethod("POST");
+        // this.setAction("/");
+        // this.addCSRFToken();  // Add CSRF token field by default
+    }
+    setAction(action = "/") {
+        // Ensure the action URL is trusted before setting it
+        if (this.isTrustedURL(action)) {
+            this.setAttr("action", action);
+        } else {
+            throw new Error('Untrusted action URL.');
+        }
+        return this;
+    }
+    setMethod(method = "post") {
+        const validMethods = ["post", "get"];
+        if (validMethods.includes(method.toLowerCase())) {
+            this.setAttr("method", method);
+        } else {
+            throw new Error('Invalid HTTP method.');
+        }
+        return this;
+    }
+
+    get data() {
+        const formData = new FormData(this.element);
+        this.items.forEach(n => {
+            if (n.isInput || n.isSelect || n.isTextarea) {
+                // Sanitize input values before appending
+                formData.append(n.element.name, this.#sanitizeInput(n.value));
+            }
+        });
+        return formData;
+    }
+
+    // Sanitize input data to prevent XSS
+    #sanitizeInput(input) {
+        const div = document?.createElement('div');
+        div.textContent = input;
+        return div.innerHTML;
+    }
+
+    // Include a CSRF token in the form
+    addCSRFToken() {
+        const token = this.getCSRFTokenFromServer();
+        const hiddenInput = document?.createElement('input');
+        hiddenInput.type = 'hidden';
+        hiddenInput.name = 'csrf_token';
+        hiddenInput.value = token;
+        this.element?.append(hiddenInput);
+    }
+
+    // Method to fetch CSRF token from the server (mocked here)
+    getCSRFTokenFromServer() {
+        // Replace with real token fetching logic
+        return 'mocked_csrf_token';
+    }
+
+    sendFormData() {
+        fetch(this.element.action, {
+            method: this.element.method,
+            body: this.data,
+            headers: {
+                'X-CSRF-Token': this.getByName('csrf_token'),  // Add CSRF token header
+            }
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => console.log('Success:', data))
+        .catch(error => {
+            console.error('Error:', error.message || error);
+        });
+        return this;
+    }
+
+    getByName(name) {
+        return this.data.get(name);
+    }
+
+    // Check if the action URL is trusted
+    isTrustedURL(url) {
+        const trustedDomains = ['/','yourdomain.com', 'anothertrustedsite.com'];
+        try {
+            const urlObj = new URL(url);
+            return trustedDomains.includes(urlObj.hostname);
+        } catch (e) {
+            return false;
+        }
+    }
+}
+const Form = (...items) => new ZikoUIForm(...items);
+export {
+    Form,
+    ZikoUIForm
+};