diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css
index bb7fa7e..226ee48 100755
--- a/app/assets/styles/app.css
+++ b/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{
-
-}*/
\ No newline at end of file
+
+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;
+}
\ No newline at end of file
diff --git a/app/controllers/WindozAppController.json b/app/controllers/WindozAppController.json
index d370fa3..179b352 100755
--- a/app/controllers/WindozAppController.json
+++ b/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."}
diff --git a/app/thirdparty/buildoz/buildoz.css b/app/thirdparty/buildoz/buildoz.css
new file mode 100644
index 0000000..7e7e68b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/app/thirdparty/buildoz/buildoz.js b/app/thirdparty/buildoz/buildoz.js
new file mode 100644
index 0000000..eb0d4ba
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html
index 6565a4a..31348c7 100644
--- a/app/views/editors/KeyframeView.html
+++ b/app/views/editors/KeyframeView.html
@@ -18,10 +18,16 @@
agents selector
-
+
+
+
+
+
+
+
-
+
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js
index 2311b23..369942e 100644
--- a/app/views/editors/KeyframeView.js
+++ b/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){
- const opt = new Option(agentType, agentType)
- this.outputs.agentsSelector.add(opt)
- }
- this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
+ // for(const agentType in this.agentDefs){
+ // const opt = new Option(agentType, agentType)
+ // this.outputs.agentsSelector.add(opt)
+ // }
+ // this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
- this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
- this.onChangeAgent()
- this.agentPreview.startRendering()
- this.agentPreview.animation = true
+ // const x = new tinySelector('[data-output="agentsSelector"]',{
+ // selectorOptions: Object.keys(this.agentDefs).map(aname => ({ markup: aname, value: aname}))
+ // })
+
+ // 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)
}