Merge branch 'main' of https://gitea.internike.com/nike/buildoz
This commit is contained in:
+100
-13
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user