This commit is contained in:
STEINNI
2026-06-05 15:16:04 +00:00
19 changed files with 1267 additions and 202 deletions
+100 -13
View File
@@ -11,10 +11,60 @@
* as long as the copyright notice and license are kept.
*/
function BZModalDialog(title, message) {
const getFields = (dlg) => {
const form = dlg.querySelector('form')
if (!form) return {}
const fd = new FormData(form)
const out = {}
for (const [key, value] of fd.entries()) {
if (Object.prototype.hasOwnProperty.call(out, key)) {
out[key] = Array.isArray(out[key]) ? [...out[key], value] : [out[key], value]
} else {
out[key] = value
}
}
return out
}
return new Promise(resolve => {
const dlg = document.createElement('dialog')
dlg.classList.add('bz-modal-dialog')
dlg.innerHTML = `
<form method="dialog">
<header>${title}</header>
<section>${message}</section>
<footer>
<button value="cancel">Cancel</button>
<button value="ok">OK</button>
</footer>
</form>
`
dlg.addEventListener('close', () => {
const ok = dlg.returnValue.toLowerCase() === 'ok'
if(ok) {
resolve(getFields(dlg))
} else {
resolve(ok)
}
dlg.remove()
})
document.body.appendChild(dlg)
dlg.showModal()
})
}
class Buildoz extends HTMLElement {
// static is evaluated when the class is defined, therefore while buildoz.js is executing.
// therefore document.currentScript refers to buildoz.js (but not later!!)
static _buildozUrl = document.currentScript?.src ?? ''
constructor(){
super() // always call super() first!
this.attrs = {}
// Usefull for relative dependencies, to keep lib fully portable
this.buildozUrl = Buildoz._buildozUrl // was defined in the past
}
static get observedAttributes(){ //observable attributes triggering attributeChangedCallback
@@ -48,6 +98,17 @@ class Buildoz extends HTMLElement {
getBZAttribute(attrName){ // Little helper for defaults
return(this.getAttribute(attrName) || this.defaultAttrs[attrName] )
}
fireEvent(eventName, detail){
let myname = this.tagName.toLocaleLowerCase()
myname = myname.substring(myname.indexOf('-')+1)
const eventFullName = `bz:${myname}:${eventName}`
this.dispatchEvent(new CustomEvent(eventFullName, {
detail,
bubbles: true,
composed: true,
}))
}
}
class BZselect extends Buildoz {
@@ -365,6 +426,8 @@ class BZslidePane extends Buildoz {
}
this.dragMove = this.dragMove.bind(this)
this.dragEnd = this.dragEnd.bind(this)
this.lastClientX = 0
this.lastClientY = 0
// Fill with innerHTML or other DOM manip should not allow coating to be removed
this._observer = new MutationObserver(muts => { this.coat() })
}
@@ -394,37 +457,62 @@ class BZslidePane extends Buildoz {
dragStart(evt){
evt.target.setPointerCapture(evt.pointerId)
this.dragStartX = evt.clientX
this.dragStartY = evt.clientY
this.dragStartY = evt.clientY
this.lastClientX = evt.clientX
this.lastClientY = evt.clientY
this.handle.addEventListener('pointermove', this.dragMove)
this.handle.addEventListener('pointerup', this.dragEnd)
}
dragMove(evt){
const box = this.getBoundingClientRect()
const parentBox = this.parentElement.getBoundingClientRect()
let width, height
const boundaryEl = this.offsetParent || this.parentElement
const parentBox = boundaryEl.getBoundingClientRect()
let width, height, min, max
switch(this.getAttribute('side')){
case 'top':
height = (evt.clientY > box.top) ? (evt.clientY - box.top) : 0
if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
min = parseInt(this.getBZAttribute('minheight')) || 0
if(evt.clientY > (box.top + min)) height = (evt.clientY - box.top)
else if(evt.clientY < this.lastClientY) height = min
else if(evt.clientY > this.lastClientY) height = 0
else break
max = parseInt(this.getBZAttribute('maxheight')) || Math.floor(parentBox.height/2)
height = Math.min(height, parentBox.height, max)
this.style.height = height+'px'
break
case 'bottom':
height = (evt.clientY < box.bottom) ? (box.bottom - evt.clientY) : 0
if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
min = parseInt(this.getBZAttribute('minheight')) || 0
if(evt.clientY < (box.bottom - min)) height = (box.bottom - evt.clientY)
else if(evt.clientY > this.lastClientY) height = min
else if(evt.clientY < this.lastClientY) height = 0
else break
max = parseInt(this.getBZAttribute('maxheight')) || Math.floor(parentBox.height/2)
height = Math.min(height, parentBox.height, max)
this.style.height = height+'px'
break
case 'left':
width = (evt.clientX > box.left) ? (evt.clientX - box.left) : 0
if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
min = parseInt(this.getBZAttribute('minwidth')) || 0
if(evt.clientX < (box.left + min)) width = (evt.clientX - box.left)
else if(evt.clientX > this.lastClientX) width = min
else if(evt.clientX < this.lastClientX) width = 0
else break
max = parseInt(this.getBZAttribute('maxwidth')) || Math.floor(parentBox.width/2)
width = Math.min(width, parentBox.width, max)
this.style.width = width+'px'
break
case'right':
width = (evt.clientX < box.right) ? (box.right - evt.clientX) : 0
if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
case 'right':
min = parseInt(this.getBZAttribute('minwidth')) || 0
if(evt.clientX < (box.right - min)) width = (box.right - evt.clientX)
else if(evt.clientX < this.lastClientX) width = min
else if(evt.clientX > this.lastClientX) width = 0
else break
max = parseInt(this.getBZAttribute('maxwidth')) || Math.floor(parentBox.width/2)
width = Math.min(width, parentBox.width, max)
this.style.width = width+'px'
break
}
this.lastClientX = evt.clientX
this.lastClientY = evt.clientY
}
dragEnd(evt){
@@ -434,4 +522,3 @@ class BZslidePane extends Buildoz {
}
}
Buildoz.define('slidepane', BZslidePane)