ziko 0.0.12 → 0.0.14

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

@@ -0,0 +1,195 @@
+import { Flex, ZikoUIFlex } from "../../Flex";
+import { ZikoUICodeNote } from "./code-note";
+import { 
+    Input,
+    Output,
+    Right,
+    Left
+ } from "./sub-elements";
+class ZikoUICodeCell extends ZikoUIFlex{
+    constructor(code="",{type="js",order=null}={}){
+        super("section")
+        Object.assign(this.cache,{
+            state:null,
+            order,
+            type,
+            metadata:{
+                created:Date.now(),
+                updated:null
+            }
+        })
+        this.Input=Input(code);
+        this.Output=Output();
+        this.InOut=Flex(
+            this.Input,
+            this.Output
+        ).vertical().style({
+            width:"100%",
+            margin:"10px auto"
+        });
+        this.RightControl=Right(this);
+        this.LeftControl=Left(this)
+        this.append(
+            this.LeftControl,
+            this.InOut,
+            this.RightControl
+        )
+        this.horizontal(-1,1).style({
+            //background:"#444",
+            width:"95vw",
+            margin:"0 auto",
+            border:"1px darkblue dotted"
+        })
+        let cm_content = this.Input.element.getElementsByClassName("cm-content")[0];
+        if( cm_content ){
+            cm_content.addEventListener("keydown",e=>{
+                if(e.key === "Enter" && e.shiftKey){
+                    e.preventDefault();
+                    this.execute(this.cache.order);   
+                }
+            })
+        }
+        else{
+            this.Input.onKeyDown(e=>{
+                if(e.kd==="Enter"){
+                    if(e.event.shiftKey){
+                        e.event.preventDefault();
+                        this.execute(this.cache.order);
+                    }
+                    else {
+                        //console.log(this.Input.element.firstChild.firstChild.textContent.at(-1))
+                    }
+                }
+                if(this.cache.parent instanceof ZikoUICodeNote){
+                    if(e.kd==="ArrowDown" && e.event.shiftKey ){
+                        this.cache.parent.next();
+                    }
+                    if(e.kd==="ArrowUp" && e.event.shiftKey){
+                        this.cache.parent.previous();
+                    }
+                }
+            }
+            )
+            this.Input.onFocus(()=>{
+                if(this.cache.parent instanceof ZikoUICodeNote){
+                    this.cache.parent.cache.currentNote=this;
+                    this.cache.parent.setCurrentNote(this);
+                }
+            })
+            this.Input.onPaste((e)=>{
+                //e.event.preventDefault();
+                //this.setValue(this.codeText.trim())
+            })
+            // this.Input.onKeyPress(e=>{
+            //     if(e.kp==="(")a.Input.element.textContent+=")";
+            //     if(e.kp==="[")a.Input.element.textContent+="]";
+            //     if(e.kp==="{")a.Input.element.textContent+="}";
+            // })    
+        }
+        }
+    get isCodeCell(){
+        return true;
+    }
+    // space &nbsp
+    get codeText() {
+        return (this.Input.element.getElementsByClassName("cm-content")[0])
+        ?this.Input.element.getElementsByClassName("cm-content")[0].innerText.trim()
+        :this.Input.element.innerText.trim()
+        // return this.Input.element.innerText.trim();
+    }
+    get codeHTML() {
+        return this.Input.element.innerHTML;
+    }
+    get outputHTML(){
+        return this.Output.element.innerHTML;
+    }
+    setValue(codeText){
+        this.Input[0].setValue(codeText);
+        return this;
+    }
+    cellData(){
+        return {
+            input:this.codeText,
+            output:this.outputHTML,
+            order:this.cache.order,
+            type:this.cache.type     
+        }
+    }
+    execute(order){
+        this.clearOutput();
+        this.evaluate(order);
+        this.cache.metadata.updated=Date.now();
+        return this;
+    }
+    #evaluateJs(order){
+        try{
+            this.LeftControl[0].setValue("pending");
+            this.cache.state="pending";  
+            // globalThis.eval(this.Input.element.innerText);
+            globalThis.eval(this.codeText);
+
+        }
+        catch(err){
+            console.log(err)
+            text(`Error : ${err.message}`).style({
+                color:"red",
+                background:"gold",
+                border:"2px red solid",
+                padding:"10px",
+                margin:"10px 0",
+                display:"flex",
+                justifyContent: "center",
+            });
+            this.LeftControl[0].setValue("Err");
+            this.cache.state="Error";            
+        }
+        finally{
+            if(this.cache.state==="pending"){
+                this.cache.state="success";
+                this.setOrder(order);
+                if(this.cache.parent instanceof ZikoUICodeNote){
+                    this.cache.parent.incrementOrder();
+                    this.cache.parent.next();
+                }
+            }
+        }
+    }
+    #evaluateMd(){
+
+    }
+    #evaluateHtml(){
+
+    }
+    evaluate(order){
+        globalThis.__Ziko__.__Config__.default.target=this.Output.element;
+        switch(this.cache.type){
+            case "js":this.#evaluateJs(order);break;
+        }
+        return this;
+    }
+    clearInput(){
+        this.Output.element.innerText="";
+        return this;
+    }
+    clearOutput(){
+        this.Output.element.innerText="";
+        return this;
+    }
+    setOrder(order,render=true){
+        this.cache.order=order;
+        if(render){
+            (typeof order === "number")?this.LeftControl[0].setValue(`[${order}]`):this.LeftControl[0].setValue("[-]");
+        }
+        return this;
+    }
+    focus(){
+        this.Input.element.focus();
+        return this;
+    }
+}
+
+
+const CodeCell=(codeText,{type,order}={})=>new ZikoUICodeCell(codeText,{type,order});
+export{
+    CodeCell
+}

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

@@ -0,0 +1,72 @@
+import { ZikoUIFlex } from "../../Flex";
+import { CodeCell } from "./code-cell";
+class ZikoUICodeNote extends ZikoUIFlex{
+    constructor(){
+        super("section");
+        Object.assign(this.cache,{
+            order:0,
+            currentNote:null,
+            currentNoteIndex:null
+        })
+        this.vertical(0,0);
+    }
+    get isCodeNote(){
+        return true;
+      }
+    setCurrentNote(currentNote){
+        this.cache.currentNote=currentNote;
+        this.cache.currentNoteIndex=this.items.findIndex(n=>n===currentNote);
+        currentNote.focus();
+        this.items.forEach(n=>n.Input.style({
+            border: "1px solid #ccc"
+        }))
+        currentNote.Input.style({
+            border:"2px lightgreen solid"
+        });
+        return this;
+    }
+    addNote(text=""){
+        this.append(CodeCell(text));
+        return this;
+    }
+    execute(){
+        this.cache.currentNote.execute();
+        this.incrementOrder();
+        return this;
+    }
+    incrementOrder(){
+        this.cache.order++;
+        this.cache.currentNote.setOrder(this.cache.order);
+        return this;
+    }
+    next(){
+        if(this.cache.currentNote===this.items.at(-1)){
+            this.addNote();
+            this.setCurrentNote(this.items.at(-1));
+        }
+        else this.setCurrentNote(this.items[this.cache.currentNoteIndex+1]); 
+        return this;
+    }
+    previous(){
+        // add append before
+        if(this.cache.currentNote!==this.items[0]){
+            this.setCurrentNote(this.items[this.cache.currentNoteIndex-1]);
+        }
+        return this;
+    }
+    data(){
+        return this.items.map(n=>n.cellData());
+    }
+    serialize(){
+        return JSON.stringify(this.data());
+    }
+    import(data=[]){
+        data.forEach((n,i)=>this.addNote(data[i].input));
+        return this;
+    }
+}
+const CodeNote=()=>new ZikoUICodeNote();
+export{
+    CodeNote,
+    ZikoUICodeNote
+}

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

@@ -0,0 +1,2 @@
+export * from "./code-cell.js";
+export * from "./code-note.js";

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();
+});
+
+
+*/