From dfb5d75197cb19fd7d48ecd6806978a72adefc0e Mon Sep 17 00:00:00 2001 From: STEINNI Date: Fri, 17 Oct 2025 22:32:59 +0000 Subject: [PATCH] buildoz is born, bz-select is coming --- app/assets/styles/app.css | 36 +++----- app/controllers/WindozAppController.json | 7 +- app/thirdparty/buildoz/buildoz.css | 46 ++++++++++ app/thirdparty/buildoz/buildoz.js | 104 +++++++++++++++++++++++ app/views/editors/KeyframeView.html | 10 ++- app/views/editors/KeyframeView.js | 24 ++++-- 6 files changed, 192 insertions(+), 35 deletions(-) create mode 100644 app/thirdparty/buildoz/buildoz.css create mode 100644 app/thirdparty/buildoz/buildoz.js 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 - + + + + + + +
-
+
Arena
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) }