ziko 0.0.12 → 0.0.13

package/src/user-interface/elements/derived/elements/code-note/sub-elements.js

@@ -0,0 +1,67 @@
+import { html } from "../../../primitives/misc/index.js";
+import { Flex } from "../../Flex";
+import { text } from "../../../primitives/text/index.js";
+import { ZikoUICodeNote } from "./code-note";
+
+
+const Input=(codeText="")=>html("code",codeText).style({
+    width:"100%",
+    height:"auto",
+    padding:"10px",
+    boxSizing:"border-box",
+    border: "1px solid #ccc", 
+    outline: "none",
+    fontSize: "1rem", 
+    fontFamily: "Lucida Console, Courier New, monospace", 
+    padding: "1rem 0.5rem", 
+    wordBreak:"break-all",
+    background:"#f6f8fa",
+    color:"#0062C3"
+}).setAttr("contenteditable",true).setAttr("spellcheck",false);
+
+const Output=()=>html("output").style({
+    width:"100%",
+    height:"auto",
+    padding:"5px 0",
+})
+const Left=(ctx)=>Flex(
+    text("[ ]")
+    ).style({
+        width:"50px",
+        //height:getComputedStyle(ctx.Input.element).height,
+        height:"50px",
+        margin:"10px 4px",
+        padding:"5px",
+        color:"darkblue",
+        borderBottom:"4px solid gold",
+    }).horizontal(0,0);
+const BTN_STYLE={
+    background:"none",
+    width:"25px",
+    height:"25px",
+    fontSize:"1.2rem",
+    cursor:"pointer"
+}
+const Right=(ctx)=>Flex(
+    text('▶️').style(BTN_STYLE).onClick(e=>{
+        if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
+        ctx.execute();
+        globalThis.__Ziko__.__Config__.default.target=e.target.parent.parent[1][1];
+    }),
+    text('📋').style(BTN_STYLE).onClick(()=>{
+        navigator.clipboard.writeText(ctx.codeText)
+    }),
+    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
+    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
+).style({
+    width:"70px",
+    height:"50px",
+    //background:"cyan",
+    margin:"10px 0"
+}).horizontal(0,0).wrap(true);
+export{
+    Input,
+    Output,
+    Right,
+    Left
+}

package/src/user-interface/elements/derived/elements/columns.js

@@ -0,0 +1 @@
+// dipslay table

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

@@ -0,0 +1,9 @@
+export * from "./accordion/index.js";
+export * from "./carousel/index.js";
+export * from "./code-note/index.js";
+export * from "./tabs/index.js";
+export * from "./alert/index.js";
+export * from "./splitter/index.js";
+export * from "./pagination/index.js";
+export * from "./menu/index.js";
+export * from "./modal/index.js"

package/src/user-interface/elements/derived/elements/menu/index.js

@@ -0,0 +1 @@
+export * from "./menu3d.js"

package/src/user-interface/elements/derived/elements/menu/menu3d.js

@@ -0,0 +1,260 @@
+import ZikoUIElement from "../../../primitives/ZikoUIElement.js";
+import { ZikoUIFlex } from "../../Flex.js"
+class ZikoUIMenu3d extends ZikoUIFlex{
+    constructor(controller, content){
+        super("div", "menu3d")
+        this.controller = controller;
+        this.content = content;
+        this.cover = null;
+        Object.assign(this.cache,{
+            config:{
+                useTransfo : false,
+                isOpen : false,
+                position : "left",
+                threshold : 40,
+                angle : 70,
+                overlap : 6,
+                width : 300,
+                height : 300,
+                transitionDuration: '0.5s',
+                transitionEasing: 'ease',
+                menuTransformOrigin : null,
+                menuTransformClosed : null,
+                menuTransformOpened : null,
+                contentTransformOrigin : null,
+                contentTransformClosed : null,
+                contentTransformOpened : null,
+            }
+        })
+        this.append(
+            this.controller,
+            this.content
+        )
+        this.update();
+    }
+    get isOpen(){
+        return this.cache.config.isOpen;
+    }
+    update(){
+        this.controller.style({
+            display:"none",
+            padding:"20px",
+            overflow:"auto",
+            background:"darkblue",
+            color: "#eee",
+            webkitboxSizing: "border-box",
+            mozBoxSizing: "border-box",
+	        boxSizing:"border-box",
+        });
+        this.content.style({
+            padding:"20px 40px",
+            width: "100%",
+            height: "100%",
+            // overflowY:"auto",
+            background:"gold",
+            color: "#eee",
+            webkitboxSizing: "border-box",
+            mozBoxSizing: "border-box",
+	        boxSizing:"border-box",
+            webkitOverflowScrolling:"touch",
+            webkitTransformStyle: "preserve-3d"
+        });
+        this.setupPositions();
+        this.setupWrapper();
+        this.setupCover()
+        this.setupMenu();
+        this.setupContent()
+    }
+    setupPositions() {
+        this.cache.config.menuTransformOpened = '';
+        this.cache.config.contentTransformClosed = '';
+        let menuAngle = this.cache.config.angle;
+        let contentAngle = this.cache.config.angle / -2;
+        switch( this.cache.config.position ) {
+            case "top":
+                this.cache.config.menuTransformOrigin = '50% 0%';
+                this.cache.config.menuTransformClosed = `rotateX(${menuAngle}deg) translateY(-100%) translateY(${this.cache.config.overlap}px)`
+                this.cache.config.contentTransformOrigin = '50% 0';
+                this.cache.config.contentTransformOpened = `translateY(${this.height/2}px) rotateX(${contentAngle}deg)`
+                break;
+            case "right":
+                this.cache.config.menuTransformOrigin = '100% 50%';
+                this.cache.config.menuTransformClosed = 'rotateY( ' + menuAngle + 'deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )';
+                this.cache.config.contentTransformOrigin = '100% 50%';
+                this.cache.config.contentTransformOpened = 'translateX( -'+ this.width/2 +'px ) rotateY( ' + contentAngle + 'deg )';
+                break;
+            case "bottom":
+                this.cache.config.menuTransformOrigin = '50% 100%';
+                this.cache.config.menuTransformClosed = 'rotateX( ' + -menuAngle + 'deg ) translateY( 100% ) translateY( -'+ this.cache.config.overlap +'px )';
+                this.cache.config.contentTransformOrigin = '50% 100%';
+                this.cache.config.contentTransformOpened = 'translateY( -'+ this.height/2 +'px ) rotateX( ' + -contentAngle + 'deg )';
+                break;
+            default:
+                this.cache.config.menuTransformOrigin = '100% 50%';
+                this.cache.config.menuTransformClosed = 'translateX( -100% ) translateX( '+ this.cache.config.overlap +'px ) scale( 1.01 ) rotateY( ' + -menuAngle + 'deg )';
+                this.cache.config.contentTransformOrigin = '0 50%';
+                this.cache.config.contentTransformOpened = 'translateX( '+ this.width/2 +'px ) rotateY( ' + -contentAngle + 'deg )';
+                break;
+        }
+    }
+    setupWrapper() {
+        this.style({
+            perspective : "800px",
+            perspectiveOrigin : this.cache.config.contentTransformOrigin
+        })
+    }
+    setupCover(){
+        if( this.cover ) this.cover.element.parentNode.removeChild( this.cover.element );
+                this.cover=new ZikoUIElement("div","div").style({
+                    position:"absolute",
+					display:"block",
+					width:"100%",
+					height:"100%",
+					left:0,
+					top:0,
+					zIndex:1000,
+					visibility:"hidden",
+					opacity:0,
+					transition: `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
+                })
+				this.content.element.appendChild( this.cover.element );
+    }
+    setupMenu() {
+        // var style = dom.menu.style;
+        switch( this.cache.config.position ) {
+            case "top":
+                this.controller.style({
+                    width : "100%",
+                    height : `${this.height/2}px`
+                });break;
+            case "right":
+                this.controller.style({
+                    right : 0,
+                    width : `${this.width/2}px`,
+                    height : "100%"
+                });break;
+            case "bottom":
+                this.controller.style({
+                    bottom : "0",
+                    width : "100%",
+                    height : `${this.height/2}px`
+                });break;
+            case "left":
+                this.controller.style({
+                    width : `${this.width/2}px`,
+                    height : "100%"
+                });break;
+        }
+        this.controller.style({
+            position : "fixed",
+            display : "block",
+            zIndex : 1,
+            transform : this.cache.config.menuTransformClosed,
+            transformOrigin : this.cache.config.menuTransformOrigin,
+            transition : 'all ' + this.cache.config.transitionDuration +' '+ this.cache.config.transitionEasing
+        })
+        }
+        setupContent() {
+            this.content.style({
+                transform : this.cache.config.contentTransformClosed,
+                transformOrigin : this.cache.config.contentTransformOrigin,
+                transition : `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
+            })
+        }
+        open(){
+            if(!this.cache.config.isOpen){
+                this.cache.config.isOpen = true;
+                this.cover.style({
+                    height : this.content.element.scrollHeight + "px",
+                    visibility : "visible",
+                    opacity : 1,
+                })
+                if(this.cache.config.useTransfo)this.content.style({
+                    transform : this.cache.config.contentTransformOpened,
+                    userSelect : "default"
+                })
+                this.controller.style({
+                    transform : this.cache.config.menuTransformOpened,
+                    useSelect : "none"
+                });
+                this.emit("opened");
+            }
+        }
+        close() {
+            if( this.cache.config.isOpen ) {
+                this.cache.config.isOpen = false;
+                this.cover.style({
+                    // height : this.content.element.scrollHeight + "px",
+                    visibility : "hidden",
+                    opacity : 0,
+                })
+                this.content.style({
+                    transform : this.cache.config.contentTransformClosed,
+                    useSelect : "default"
+                })
+                this.controller.style({
+                    transform : this.cache.config.menuTransformClosed,
+                    userSelect : "none"
+                })
+            }
+            this.emit("closed");
+        }
+        onOpen(callback){
+            this.on("opened", callback.bind(this));
+            return this;
+        }
+        onClose(callback){
+            this.on("closed", callback.bind(this));
+            return this;
+        }
+        #usePosition(position){
+            if(this.cache.config.position!==position){
+                this.cache.config.position=position;
+                const isOpen = this.isOpen;
+                this.close();
+                this.update();
+                if(isOpen)this.open();
+            }
+        }
+        useRight(){
+            this.#usePosition("left");
+            return this;
+        }
+        useRight(){
+            this.#usePosition("right");
+            return this;
+        }
+        useTop(){
+            this.#usePosition("top");
+            return this;
+        }
+        useBottom(){
+            this.#usePosition("bottom");
+            return this;
+        }
+}
+const menu3d = (controller, content) => new ZikoUIMenu3d(controller, content);
+globalThis.menu3d = menu3d;
+export{
+    menu3d,
+    ZikoUIMenu3d
+}
+
+
+/*
+
+a = menu3d(Flex(text("Menu")), Flex(text("Content")))
+  .size("80vw", "50vh")
+  .style({ userSelect: "none" });
+a.onOpen((e) => console.log(e));
+a.open();
+a.controller.onSwipe(0.05, 1, (e) => {
+  if (e.event.detail.direction.x === "left") a.close();
+});
+a.content.onSwipe(0.1, 1, (e) => {
+  if (e.event.detail.direction.x === "left") a.close();
+  if (e.event.detail.direction.x === "right") a.open();
+});
+
+
+*/

package/src/user-interface/elements/derived/elements/modal/index.js

@@ -0,0 +1,92 @@
+import ZikoUIContainerElement from "../../../primitives/ZikoUIContainerElement.js";
+class ZikoUIModal extends ZikoUIContainerElement{
+    constructor(...UIElements){
+        super("dialog", "modal")
+        this.append(...UIElements);
+        Object.assign(this.cache,{
+            config:{
+                mode:"modal",
+                useTransition:true
+            }
+        });
+        this.style({
+            display:"flex",
+            justifyContent:"center",
+            alignItems:"center",
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            padding: "20px",
+            border: "none",
+            backgroundCcolor: "#f5f5f5",
+            boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+            borderRadius: "8px"
+        });
+        this.close()
+    }
+    open(){
+        if(!this.element.open){
+            switch(this.cache.config.mode){
+                case "modal": this.element.showModal(); break;
+                case "dialog": this.element.show(); break;
+                default : this.element.show(); break;
+            }
+            // this.style({
+            //     display : "flex",
+            // })
+            this.st.fadeIn(1000)
+            this.emit("modal:opened");
+        }
+        return this;
+    }
+    close(){
+        // this.style({
+        //     display : "none"
+        // })
+        this.st.fadeOut(1000)
+        if(this.element.open){
+            this.element.close();
+        }
+        this.emit("modal:closed");
+        return this;
+    }
+    closeAfter(t = 1000){
+        globalThis?.setTimeout(()=>this.close(), t);
+        return this;
+    }
+    onOpen(callback){
+        this.on("modal:opened",callback.bind(this));
+        return this;
+    }
+    onClose(callback){
+        this.on("modal:closed",callback.bind(this));
+        return this;
+    }
+    useModal(){
+        this.cache.config.mode = "modal";
+        return this;
+    }
+    useDialog(){
+        this.cache.config.mode = "dialog";
+        return this; 
+    }
+    useTransition(enabled = true){
+        this.cache.config.useTransition = enabled;
+        return this;
+    }
+}
+
+const Modal=(...UIElements)=>new ZikoUIModal(...UIElements);
+export{
+    Modal,
+    ZikoUIModal
+}
+
+/*
+a=Modal(text("Hello")).style({
+ width:"100%",
+ height:"100%"
+})
+Flex(a).size("400px","400px").style({border:"1px red solid"})
+*/

package/src/user-interface/elements/derived/elements/pagination/breadcrumbs.js

@@ -0,0 +1,54 @@
+import ZikoUIElement from "../../../primitives/ZikoUIElement.js";
+import { html } from "../../../primitives/misc/index.js";
+import { text } from "../../../primitives/text/index.js";
+class ZikoUIBreadcrumbs extends ZikoUIElement{
+    constructor(...items){
+        super("ul", "Breadcrumbs")
+        Object.assign(this.cache,{
+            separatorTextContent:"/"
+        })
+        this.style({
+            listStyle: "none",
+            display: "flex",
+            flexWrap: "wrap"  
+        })
+        this.list=html('li').style({
+            display: "flex",
+            flexWrap: "wrap"
+        });
+        this.append(...items);
+    }
+    #addItem(item){
+        if(["string","number","boolean"].includes(typeof item))item = text(item);
+        const li = html("li", item).style({
+            display: "flex",
+            alignItems: "center"   
+        });
+        if(this.element.children.length>0){
+            const separator = text(this.cache.separatorTextContent).style({
+                padding: "0 4px"
+            });
+            this.element?.append(separator.element);
+        }
+        this.element?.append(li.element);
+    }
+    append(...items){
+        items.forEach(n=>this.#addItem(n));
+        return this;
+    }
+    configSeparator(separatorTextContent = this.cache.separator, style = {}){
+        this.cache.separatorTextContent = separatorTextContent;
+        const separators = [...this.element.children].filter(n=>n.tagName==="SPAN");
+        separators.forEach(node=>{
+            node.textContent = separatorTextContent;
+            Object.assign(node.style, style);
+        }
+        );
+        return this;
+    }
+}
+const Breadcrumbs=(...items)=>new ZikoUIBreadcrumbs(...items);
+export{
+    Breadcrumbs,
+    ZikoUIBreadcrumbs
+}

package/src/user-interface/elements/derived/elements/pagination/index.js

@@ -0,0 +1 @@
+export * from "./breadcrumbs"

package/src/user-interface/elements/derived/elements/splitter/__ZikoUISplitter__.js

@@ -0,0 +1,62 @@
+import ZikoUIElement from "../../../primitives/ZikoUIElement";
+class __ZikoUISplitter__ extends ZikoUIElement{
+    constructor(flexDirection, resizerCursor, resizerProp){
+        super("div", "Splitter")
+        Object.assign(this.cache,{
+            isResizing : false,
+            flexDirection,
+            resizerCursor,
+            resizerProp
+        })
+        this.style({
+            display:"flex",
+            flexDirection : this.cache.flexDirection,
+            border: "2px solid #333",
+            overflow: "hidden"
+        })
+        this.resizer = new ZikoUIElement("div", "resizer").style({
+            [this.cache.resizerProp]:"5px",
+            backgroundColor: "gold",
+            cursor: this.cache.resizerCursor,
+            touchAction: "none", 
+        });
+        this.onPtrDown(e=>{
+            this.cache.isResizing = true;
+            this.style({
+                cursor : this.cache.resizerCursor // ns-resize
+            });
+            this.resizer.element.setPointerCapture(e.event.pointerId);
+        })
+        this.onPtrUp(e=>{
+            this.cache.isResizing = false;
+            this.style({
+                cursor: "default"
+            })
+            this.resizer.element.releasePointerCapture(e.event.pointerId);
+        })
+        this.onPtrCancel(()=>{
+            this.cache.isResizing = false;
+            this.style({
+                cursor: "default"
+            })
+        })
+        this.onPtrOut(()=>{
+            if (this.cache.isResizing) {
+                this.cache.isResizing = false;
+                this.style({
+                    cursor: "default"
+                })
+            }
+        })
+    }
+    get isSplitter(){
+        return true;
+      }
+    styleResizer(style={}){
+        this.resizer.style(style);
+        return this;
+    }
+}
+export{
+    __ZikoUISplitter__
+}

package/src/user-interface/elements/derived/elements/splitter/hsplitter.js

@@ -0,0 +1,40 @@
+import { __ZikoUISplitter__ } from "./__ZikoUISplitter__";
+class ZikoUIHorizontalSplitter extends __ZikoUISplitter__{
+    constructor(leftPane, rightPane){
+        super("row", "ew-resize", "width")
+        this.leftPane = leftPane.style({
+            width:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.rightPane = rightPane.style({
+            width:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.element?.append(
+            this.leftPane.element,
+            this.resizer.element,
+            this.rightPane.element
+        );
+        this.onPtrMove(e=>{
+            if (!this.cache.isResizing) return;
+            const containerWidth = this.element.getBoundingClientRect().width; // height
+            const pointerRelativeXpos = e.event.clientX - this.element.getBoundingClientRect().x; // y
+            let newLeftPaneWidth = (pointerRelativeXpos / containerWidth) * 100;
+            let newRightPaneWidth = 100 - newLeftPaneWidth;
+            if (newLeftPaneWidth < 0) newLeftPaneWidth = 0;
+            if (newRightPaneWidth < 0) newRightPaneWidth = 0;
+            this.leftPane.element.style.width = `${newLeftPaneWidth}%`;
+            this.rightPane.element.style.width = `${newRightPaneWidth}%`;
+        })
+    }
+    get isHorizontalSplitter(){
+        return true;
+      }
+}
+const hSplitter=(leftPane, rightPane)=>new ZikoUIHorizontalSplitter(leftPane, rightPane);
+export{
+    ZikoUIHorizontalSplitter,
+    hSplitter
+}

package/src/user-interface/elements/derived/elements/splitter/index.js

@@ -0,0 +1,2 @@
+export * from "./hsplitter"
+export * from "./vsplitter"

package/src/user-interface/elements/derived/elements/splitter/vsplitter.js

@@ -0,0 +1,40 @@
+import { __ZikoUISplitter__ } from "./__ZikoUISplitter__";
+class ZikoUIVerticalSplitter extends __ZikoUISplitter__{
+    constructor(topPane, bottomPane){
+        super("column", "ns-resize", "height")
+        this.topPane = topPane.style({
+            height:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.bottomPane = bottomPane.style({
+            height:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.element?.append(
+            this.topPane.element,
+            this.resizer.element,
+            this.bottomPane.element
+        );
+        this.onPtrMove(e=>{
+            if (!this.cache.isResizing) return;
+            const containerHeight = this.element.getBoundingClientRect().height; // height
+            const pointerRelativeYpos = e.event.clientY - this.element.getBoundingClientRect().y; // y
+            let newTopPaneHeight = (pointerRelativeYpos / containerHeight) * 100;
+            let newBottomPaneHeight = 100 - newTopPaneHeight;
+            if (newTopPaneHeight < 0) newTopPaneHeight = 0;
+            if (newBottomPaneHeight < 0) newBottomPaneHeight = 0;
+            this.topPane.element.style.height = `${newTopPaneHeight}%`;
+            this.bottomPane.element.style.height = `${newBottomPaneHeight}%`;
+        })
+    }
+    get isHorizontalSplitter(){
+        return true;
+    }
+}
+const vSplitter=(topPane, bottomPane)=>new ZikoUIVerticalSplitter(topPane, bottomPane);
+export{
+    ZikoUIVerticalSplitter,
+    vSplitter
+}