P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

buildoz is born, bz-select is coming

Browse Source
This commit is contained in:
STEINNI
2025-10-17 22:32:59 +00:00
parent 91554e5925
commit dfb5d75197
6 changed files with 192 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/styles/app.css
+12 -22
View File
@@ -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
+6 -1
View File
@@ -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
Vendored
+46
View File
@@ -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
Vendored
+104
View File
@@ -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
+8 -2
View File
@@ -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
+15 -9
View File
@@ -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)
}