bz-select improvements

app/assets/styles/app.css

@@ -367,9 +367,9 @@ bz-select option{
     background-color: #676;
     color: #EEE;
 }
-bz-select option:hover{
+bz-select option i{ margin-right:0.3em; }
-    background-color: #493;
+bz-select option i.icon-atom1{ color:#FF4; }
-}
+bz-select option i.icon-bug{ color:#4DF; }
 
 bz-toggler div.toggle-switch span.toggle-bar { background-color: #473; }
 bz-toggler div.toggle-switch span.toggle-thumb { background-color:#9D8; }

app/thirdparty/buildoz/buildoz.css

@@ -29,9 +29,16 @@ bz-select > button::after {
     font-size: 1.5em;
     color: #444;
 }    
-
+bz-select >  div.options-container{
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    z-index: 99;
+}
 bz-select option{
     background-color: #DDD;
+    border: 1px solid black;
     color: #000;
     padding: 0.2em .2em .3em .5em;
     margin: -1em 0 0 0;
@@ -46,7 +53,7 @@ bz-select option{
         opacity 0.3s ease;
 }
 bz-select option.open{
-    margin: 2px 0 0 0;
+    margin: 0;
     opacity: 1;
     pointer-events: auto;
 }

app/thirdparty/buildoz/buildoz.js

@@ -55,9 +55,12 @@ class BZselect extends Buildoz {
     connectedCallback() { 
         super.connectedCallback()
         this.button = document.createElement('button')
-        this.button.textContent =  this.getBZAttribute('label')
+        this.button.textContent = this.getBZAttribute('label')
         this.prepend(this.button)
         this.button.addEventListener('click', this.toggle.bind(this))
+        if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
+        this.optionscontainer.classList.add('options-container')
+        this.append(this.optionscontainer)
         this.options = this.querySelectorAll('option')
         if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
             for(const opt of this.options){ 
@@ -112,18 +115,19 @@ class BZselect extends Buildoz {
     }
 
     addOption(value, markup){
-        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
+        // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM
         const opt = document.createElement('option')
         opt.setAttribute('value', value)
         opt.innerHTML = markup
         opt.addEventListener('click',this.onClick.bind(this))
-        this.append(opt)
+        if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
+        this.optionscontainer.append(opt)
         this.options = this.querySelectorAll('option')
         this.#fillFromMarkup = false
     }
 
     fillOptions(opts, erase = true){ 
-        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
+        // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM
         if(erase){
             this.options = this.querySelectorAll('option') 
             this.options.forEach(node => { node.remove() })

app/views/editors/KeyframeView.html

@@ -31,7 +31,15 @@
     <article eiccard class="agent-preview">
          <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
-            <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
+            <div>
+                <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
+                <div>Something in the way</div>
+                <bz-select label="TEST...">
+                    <option value="a">AA</option>
+                    <option value="b">BB</option>
+                    <option value="c">CC</option>
+                </bz-select>
+            </div>
             <div class="actions cols-2">
                 <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
                 <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>

app/views/editors/KeyframeView.js

@@ -32,7 +32,7 @@ class KeyframeView extends WindozDomContent {
 
 
         this.outputs.agentsSelector.fillOptions( this.agentTypes.map(item => {
-            return({ markup: `${item.atp_name}`, value: item.atp_id})
+            return({ markup: `<i class="icon-${item.atp_hascode ? 'bug' : 'atom1'}"></i>${item.atp_name}`, value: item.atp_id})
         }))
         this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))