ziko 0.0.12 → 0.0.13

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

@@ -0,0 +1,180 @@
+// Next 
+// Previous
+// Vertical 
+// Horizontal
+import { Flex, ZikoUIFlex } from "../../Flex";
+class ZikoUITabs extends ZikoUIFlex{
+    #ACTIVE_ELEMENT_INDEX=0;
+    constructor(Controllers,Contents){
+        super("div","Tabs");
+        Object.assign(this.cache,{
+            config:{
+                controllersPercent : .50
+            }
+        })
+        this.style({
+            boxSizing:"border-box",
+            backgroundColor: "blanchedalmond",
+            border:"1px red solid",
+            margin:"30px",
+        });
+        this.controllersContainer = Flex().size("auto","auto").style({
+            boxSizing:"border-box",
+            justifyContent:"center",
+            alignItems:"center",
+            textAlign:"center",
+
+            minWidth:"50px",
+            minHeight:"50px",
+
+            backgroundColor:"darkblue",
+            border:"1px darkblue solid",
+
+        }).setAttr("role","tablist")
+        this.contentContainer = Flex().style({
+            boxSizing:"border-box",
+            justifyContent:"center",
+            alignItems:"center",
+            textAlign:"center",
+
+            width:"100%",
+            height:"100%",
+            backgroundColor:"darkslategrey",
+        })
+        this.append(
+            this.controllersContainer,
+            this.contentContainer
+        )
+        if(Controllers.length!==Contents.length)console.error("")
+        else {
+            this.controllersContainer.append(...Controllers);
+            this.contentContainer.append(...Contents);
+        }
+        this.init()
+        this.display(0);
+        this.useVertical()
+    }
+    get isTabs(){
+        return true;
+    }
+    init(){  
+        // Remove old listener
+        for(let i=0;i<this.controllersContainer.length;i++){
+            this.controllersContainer[i].setAttr("role","tab").setAttr("aria-controls",`tab${i}`);
+            this.contentContainer[i].setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${i}`).setAttr("tabindex",-1);
+        }
+        this.controllersContainer.forEach(item=>item.onClick(e=>{
+            const tab=e.target.element.getAttribute("aria-controls");
+            const index=+tab.slice(3)
+            this.contentContainer.filter(n=>n.element.getAttribute("aria-labelledby")===tab,()=>{
+                if(this.#ACTIVE_ELEMENT_INDEX!==index)this.display(index);
+            })
+        }))
+        return this;
+    }
+    addPairs(ControllerItem,ContentItem){
+        this.controllersContainer.append(ControllerItem);
+        this.contentContainer.append(ContentItem);
+        const length=this.controllersContainer.length;
+        this.controllersContainer.at(-1).setAttr("role","tab").setAttr("aria-controls",`tab${length-1}`);
+        this.contentContainer.at(-1).setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${length-1}`).setAttr("tabindex",-1);
+        // Add listener
+        return this;
+    }
+    removePairs(index){
+
+    }
+    display(index){
+        this.#ACTIVE_ELEMENT_INDEX=index%this.contentContainer.length;
+        const ActiveContent = this.contentContainer.at(this.#ACTIVE_ELEMENT_INDEX);
+        this.controllersContainer.forEach(n=>n.setAttr("tabindex",-1).setAttr("aria-selected",false));
+        this.controllersContainer.at(this.#ACTIVE_ELEMENT_INDEX).setAttr("tabindex",0).setAttr("aria-selected",true);
+        
+        this.contentContainer.forEach(n=>n.st.hide());
+
+        ActiveContent.st.translateX(100,0)
+        ActiveContent.setAttr("tabindex",0).st.show();
+        ActiveContent.st.translateX(0,1000)
+
+        return this;   
+    }
+    next(i=1){
+        this.display(this.#ACTIVE_ELEMENT_INDEX+i);
+        return this;
+    }
+    previous(i=1){
+        this.display(this.#ACTIVE_ELEMENT_INDEX-i);
+        return this;
+    }
+    useVertical(){
+        this.vertical(0,0);
+        this.controllersContainer.horizontal(0,0)
+        this.controllersContainer.style({
+            width : "100%",
+            height : `${this.cache.config.controllersPercent*100}%`
+        });
+        this.contentContainer.style({
+            width : "100%",
+            height : `${(1-this.cache.config.controllersPercent)*100}%`
+        })
+        return this;
+    }
+    useHorizontal(){
+        this.horizontal(0,0);
+        this.controllersContainer.vertical(0, 0)
+        this.controllersContainer.style({
+            height : "100%",
+            width : `${this.cache.config.controllersPercent*100}%`
+        });
+        this.contentContainer.style({
+            height : "100%",
+            width : `${(1-this.cache.config.controllersPercent)*100}%`
+        })
+        return this;
+    }
+    // useHorizontalSwippe(){
+    //     this.onPtrDown();
+    //     this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_x)));
+    //     return this;
+    // }
+    // useVerticalSwippe(){
+    //     this.onPtrDown();
+    //     this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_y)));
+    //     return this;
+    // }
+}
+
+const Tabs=(Controllers,Contents)=>new ZikoUITabs(Controllers,Contents)
+export {Tabs}
+
+/*
+
+const cont=(txt = "A")=>btn(txt).style({width:"170px"})
+a=Tabs(
+  [cont("A1"),cont("A2"),cont("A3"),cont("A4")],
+   [cont("A1"),cont("A2"),cont("A3"),cont("A4")]
+).vertical().size("400px")
+a.controllersContainer.style({
+overflowX:"auto"
+})
+a.useHorizontal()
+
+*/
+
+/*
+
+a=Flex().size("400px","400px").style({background:"red"})
+a.element.animate([
+    { borderRadius: "0" , background : "red" },
+    { borderRadius: "50% 0" },
+    { borderRadius: "50% 50%" },
+    { borderRadius: "0 50%" },
+    { borderRadius: "0", background : "yellow"  },
+  ],
+  {
+    // temporisation
+    duration: 2000,
+    iterations: Infinity,
+  })
+
+  */

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

@@ -0,0 +1,3 @@
+export * from "./Flex.js";
+export * from "./Grid.js";
+export * from "./Elements/index.js"

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

@@ -0,0 +1,127 @@
+import ZikoUIElement from "./ZikoUIElement";
+import { text } from "./text";
+class ZikoUIContainerElement extends ZikoUIElement{
+    constructor(element, name=""){
+        super(element, name)
+        this.items = [];
+    }
+    maintain() {
+      for (let i = 0; i < this.items.length; i++)
+        Object.assign(this, { [[i]]: this.items[i] });
+      this.length = this.items.length;
+      return this;
+    }
+    at(index) {
+      return this.items.at(index);
+    }
+    append(...ele) {
+        if(this.cache.isFrozzen){
+          console.warn("You can't append new item to frozzen element");
+          return this;
+        }
+        for (let i = 0; i < ele.length; i++){
+        if(["number","string"].includes(typeof ele[i]))ele[i]=text(ele[i]);
+          if (ele[i] instanceof ZikoUIElement) {
+            ele[i].cache.parent=this;
+            this.element?.appendChild(ele[i].element);
+            ele[i].target = this.element;
+            this.items.push(ele[i]);
+          } else if (ele[i] instanceof Object) {
+            if (ele[i]?.style) this.style(ele[i]?.style);
+            if (ele[i]?.attr) {
+              Object.entries(ele[i].attr).forEach((n) =>
+                this.setAttr("" + n[0], n[1]),
+              );
+            }
+          }
+        }
+        this.maintain();
+        return this;
+      }
+      insertAt(index, ...ele) {
+        if (index >= this.element.children.length) this.append(...ele);
+        else
+          for (let i = 0; i < ele.length; i++) {
+            if(["number","string"].includes(typeof ele[i]))ele[i]=text(ele[i]);
+            this.element?.insertBefore(ele[i].element, this.items[index].element);
+            this.items.splice(index, 0, ele[i]);
+          }
+        return this;
+      }
+      // remove(...ele) {
+      //   if(ele.length==0){
+      //     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);
+      //   }
+      //   else {
+      //     const remove = (ele) => {
+      //       if(typeof ele === "number") ele=this.items[ele];
+      //       if(ele instanceof ZikoUIElement)this.element?.removeChild(ele.element);
+      //         this.items=this.items.filter(n=>n!==ele);
+      //     };
+      //     for (let i = 0; i < ele.length; i++) remove(ele[i]);
+      //     for (let i = 0; i < this.items.length; i++)Object.assign(this, { [[i]]: this.items[i] });
+      //     // Remove from item 
+      //   }
+      //   return this;
+      // }
+      remove(...ele) {
+          const remove = (ele) => {
+            if(typeof ele === "number") ele=this.items[ele];
+            if(ele instanceof ZikoUIElement)this.element?.removeChild(ele.element);
+              this.items=this.items.filter(n=>n!==ele);
+          };
+          for (let i = 0; i < ele.length; i++) remove(ele[i]);
+          for (let i = 0; i < this.items.length; i++)Object.assign(this, { [[i]]: this.items[i] });
+          // Remove from item 
+        return this;
+      }
+      forEach(callback){
+        this.items.forEach(callback);
+        return this;
+      }
+      map(callback){
+        return this.items.map(callback);
+      }
+      find(condition){
+        return this.items.filter(condition);
+      }
+      filter(condition_callback,if_callback=()=>{},else_callback=()=>{}){
+        const FilterItems=this.items.filter(condition_callback);
+        FilterItems.forEach(if_callback);
+        this.items.filter(item => !FilterItems.includes(item)).forEach(else_callback);
+        return this;
+      }
+      filterByTextContent(text,exactMatch=false){
+        this.items.forEach(n=>n.render());
+        this.filter(
+          n=>!(exactMatch?n.text===text:n.text.includes(text)),
+          e=>e.unrender()
+        )
+        // this.items.filter(n=>{
+        //   const content=n.element.textContent;
+        //   return !(exactMatch?content===text:content.includes(text))
+        // }).map(n=>n.unrender());
+        //  return this;
+      }
+      filterByClass(value){
+        this.items.map(n=>n.render());
+        this.items.filter(n=>!n.classes.includes(value)).map(n=>n.unrender());
+        return this; 
+      }
+      sortByTextContent(value, displays) {
+        let item = this.children;
+        item
+          .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
+          .map((n) => {
+            n.style.display = "none";
+          });
+        item
+          .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
+          .map((n, i) => (n.style.display = displays[i]));
+        //return item.filter(n=>n.style.display!="none")
+        item.filter((n) => n.style.display != "none");
+        return this;
+      }
+}
+export default ZikoUIContainerElement;