buildoz is born, bz-select is coming

app/assets/styles/app.css

@@ -271,25 +271,6 @@ article[eiccard][media] > header {
     padding: var(--eicui-base-spacing-l) var(--eicui-base-spacing-m) var(--eicui-base-spacing-s) var(--eicui-base-spacing-m);
 }
 
-[eicapp] select {
-    width: 100%;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    color: #DDD;
-    border: 1px solid #444;
-    border-radius: 2rem;
-    padding: .3rem 2rem .3rem 1rem;
-    font-size: 15px;
-    cursor: pointer;
-    margin: 0.5rem 0 0.5rem 0;
-    background:
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4 8 12 16 20 8' stroke='green' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
-        no-repeat right 12px center / 12px 12px,
-        linear-gradient(0deg, #353, #222) no-repeat padding-box;
-
-} 
-
 .eic-session {
     padding: 0;
     display: grid;
@@ -350,7 +331,16 @@ menu[eicmenu] [menuitem]  a label {
 menu[eicmenu] [menuitem]  i[class^="icon-"] {
     color:#fdfb93;;
 }
-/*
-[eicdropdown] > menu{
 
-}*/
+bz-select > button{
+    background: linear-gradient( to bottom, #251, #372 15%, #483 50%, #372 85%, #251 ) !important;
+    color:#EEE;
+}
+bz-select > button::after{ color:#EEE; }
+bz-select option{
+    background-color: #676;
+    color: #EEE;
+}
+bz-select option:hover{
+    background-color: #493;
+}

app/controllers/WindozAppController.json

@@ -3,10 +3,15 @@
     "views": [ "templates/EICAppTemplate", "templates/dialogs/ConfirmDialog" ],
     "controllerDependencies": [ 
         "/thirdparty/eicui/eicui-2.1", 
+        "/thirdparty/buildoz/buildoz", 
         "/controllers/common/errorController"
     ],
     "assets": { 
-        "styles": [ {"path": "/app/thirdparty/eicui", "name":"/eicui-2.0.css" }, {"name":"app.css" } ],
+        "styles": [ 
+            {"path": "/app/thirdparty/eicui", "name":"/eicui-2.0.css" }, 
+            {"path": "/app/thirdparty/buildoz", "name":"/buildoz.css" }, 
+            {"name":"app.css" } 
+        ],
         "json": [ 
             {"name":"global/app-menu-map.json"},
             {"path": "/app/controllers/common/", "name": "errorController.json", "comment": "Trick to preload errorController stuff, to still have error messages if S3 is down."} 

app/thirdparty/buildoz/buildoz.css

@@ -0,0 +1,46 @@
+bz-select {
+    display: block;
+    margin: .5rem 0 .5rem 0;
+}
+bz-select > button{
+    width:100%;
+    text-align: left;
+    font-family: sans;
+    font-size: .9rem;
+    border-radius: 1rem;
+    border: none;
+    padding: 0.2rem .2rem .3rem .5rem;
+    background: linear-gradient( to bottom, #555, #aaa 15%, #ccc 50%, #aaa 85%, #555 );
+}
+bz-select > button::after {
+    content: "\00BB";
+    transform: rotate(90deg) translateX(-0.4rem);
+    position: absolute;
+    right: 1.5rem;
+    pointer-events: none;
+    font-size: 1.5rem;
+    color: #444;
+}    
+
+bz-select option{
+    background-color: #DDD;
+    color: #000;
+    padding: 0.2rem .2rem .3rem .5rem;
+    margin: -1rem 0 0 0;
+    border-radius: 1rem;
+    height: 1rem;
+    font-family: sans;
+    font-size: .9rem;
+    opacity: 0;
+    transition:
+        margin-top 0.3s ease,
+        opacity 0.3s ease;
+}
+bz-select option.open{
+    margin: 2px 0 0 0;
+    opacity: 1;
+}
+bz-select option:hover{
+    background-color: #44F;
+    color: #FFF;
+}

app/thirdparty/buildoz/buildoz.js

@@ -0,0 +1,104 @@
+
+
+class Buildoz extends HTMLElement {
+    constructor(){
+        super()              // always call super() first!
+        this.attrs = {}
+    }
+        
+    static get observedAttributes(){ //observable  attributes triggering attributeChangedCallback
+        // anything added here will be observed for all buildoz tags
+        // in your child, add you local 'color' observable attr with :
+        // return([...super.observedAttributes, 'color'])
+        return([]) 
+    }
+
+    static define(name, cls){
+        const tag = `bz-${name}`
+        if(!customElements.get(tag)) { // no wild redefinition
+            customElements.define(tag, cls)
+        }
+        return cls
+    }
+    
+    connectedCallback(){ // added to the DOM
+        this.classList.add('buildoz')
+    }
+    
+    disconnectedCallback(){ // removed from the DOM
+
+    }  
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.attr[name] = newValue
+        //console.log(`attr ${name} changed from ${oldValue} to ${newValue}`)
+    }
+
+}
+
+class BZselect extends Buildoz {
+    constructor(){
+        super()
+
+        this.open = false
+        //defaults, can be changed by corresponding attributes
+        this.attrs = {
+            size: 0,
+            label: 'Select...',
+        }
+    }
+
+    connectedCallback() {
+        super.connectedCallback()
+
+        this.button = document.createElement('button')
+        this.button.textContent =  this.attrs.label
+        this.prepend(this.button)
+        this.button.addEventListener('click', this.toggle.bind(this))
+
+        this.options = this.querySelectorAll('option')
+        // let toShow = this.attrs.size
+        // for(const opt of this.options){
+        //     if(toShow>0){
+        //         opt.style.display = 'block'
+        //     } else {
+        //         opt.style.display = 'none'
+        //     }
+        //     toShow--
+        // }
+    }
+    
+    static get observedAttributes(){
+        return [...super.observedAttributes, 'label', 'size']
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.connectedCallback()
+        // on the fly changes here
+    }
+
+    toggle(evt){
+        for(const opt of this.options){
+            if(this.open) opt.classList.remove('open')
+            else opt.classList.add('open')
+        }
+        this.open = !this.open
+    }
+
+    fill(opts){
+        this.el.innerHTML =''
+        if(!Array.isArray(opts)) opts = [opts]
+        const ul = Object.assign(document.createElement('ul'), 
+        { className: `bz-selector ${this.config.ulClass ? this.config.ulClass :''}`,
+        })
+        for(const opt of opts){
+            const li = document.createElement('li')
+            li.innerHTML = `${opt.markup}`
+            li.setAttribute('data-value', opt.value)
+            ul.append(li)
+        }
+        this.el.append(ul)
+    }
+}
+
+Buildoz.define('select', BZselect)

app/views/editors/KeyframeView.html

@@ -18,10 +18,16 @@
          <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
             agents selector
-            <select data-output="agentsSelector"></select>
+            <bz-select data-output="agentsSelector">
+                <option value="val1">First value</option>
+                <option value="val2">Second value</option>
+                <option value="val3">Third value</option>
+                <option value="val4">Fourth value</option>
+                <option value="val5">Fifth value</option>
+            </bz-select>
         </section>
     </article>
-    <article eiccard="" data-eicui-id="d9aace9b-9e60-4cfc-ad7c-98b9693d05f3" aria-enabled="true">
+    <article eiccard>
         <section>
             Arena
         </section>

app/views/editors/KeyframeView.js

@@ -23,18 +23,24 @@ class KeyframeView extends WindozDomContent {
 
 
         this.agentDefs = await this.models.agents.getSprites('Basic 3D')
-        for(const agentType in this.agentDefs){
+        // for(const agentType in this.agentDefs){
-            const opt = new Option(agentType, agentType)
+        //     const opt = new Option(agentType, agentType)
-            this.outputs.agentsSelector.add(opt)
+        //     this.outputs.agentsSelector.add(opt)
-        }
+        // }
-        this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
+        // this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
 
-        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
+        // const x = new tinySelector('[data-output="agentsSelector"]',{
-        this.onChangeAgent()
+        //     selectorOptions: Object.keys(this.agentDefs).map(aname => ({ markup: aname, value: aname}))
-        this.agentPreview.startRendering()
+        // })
-        this.agentPreview.animation = true
+        
+        // this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
+        // this.onChangeAgent()
+        // this.agentPreview.startRendering()
+        // this.agentPreview.animation = true
     }
 
+
+
     onChangeAgent(event){
         this.agentPreview.setAgent(this.outputs.agentsSelector.value)
     }