nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bz-slidepane OK + console started + intro loader

Browse Source
This commit is contained in:
STEINNI
2025-11-16 21:45:56 +00:00
parent cb6e2c1952
commit 29579c3005
2 changed files with 55 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
buildoz.css
View File

@@ -138,39 +138,53 @@ bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
left : 1em;
}
bz-slidepane div.handle.top {
bz-slidepane {
display: block;
position: absolute;
top: 0;
background-color: #000A;
padding: 0 0.5em 0 0.5em;
}
bz-slidepane[side="top"] { top:0; left:0; width: 100%; height:0; border-bottom: 2px solid #DDD; }
bz-slidepane[side="bottom"] { bottom:0; left:0; width: 100%; height:0; border-top: 2px solid #DDD;}
bz-slidepane[side="left"] { top:0; left:0; height:100%; width:0; border-right: 2px solid #DDD;}
bz-slidepane[side="right"] { top:0; right:0; height:100%; width:0; border-left: 2px solid #DDD; }
bz-slidepane[side="top"] div.handle {
position: absolute;
bottom: -12px;
left: 50%;
width: 40px;
height: 11px;
background: repeating-linear-gradient( to top, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateX(-50%);
cursor: ns-resize;
}
bz-slidepane div.handle.bottom {
bz-slidepane[side="bottom"] div.handle {
position: absolute;
bottom: 0;
top: -12px;
left: 50%;
width: 40px;
height: 11px;
background: repeating-linear-gradient( to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateX(-50%);
cursor: ns-resize;
}
bz-slidepane div.handle.left {
bz-slidepane[side="left"] div.handle {
position: absolute;
left: 0;
right: -12px;
top: 50%;
width: 11px;
height: 40px;
background: repeating-linear-gradient( to left, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateY(-50%);
cursor: ew-resize;
}
bz-slidepane div.handle.right {
bz-slidepane[side="right"] div.handle {
position: absolute;
right: 0;
left: -12px;
top: 50%;
width: 11px;
height: 40px;
background: repeating-linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateY(-50%);
cursor: ew-resize;
}

37
buildoz.js
View File

@@ -260,15 +260,32 @@ class BZslidePane extends Buildoz {
}
this.dragMove = this.dragMove.bind(this)
this.dragEnd = this.dragEnd.bind(this)
this._observer = new MutationObserver(muts => { // Fill with innerHTML or other DOM manip should not allow coating to be removed
console.log('mutation...')
this.coat()
})
}
connectedCallback(){
super.connectedCallback()
this.coat()
this._observer.observe(this, { childList: true }) // Do this last
}
disconnectedCallback() {
super.disconnectedCallback()
this._observer.disconnect()
}
coat(){ console.log('coat')
if(this.handle && this.querySelector(this.dispatchEvent.handle)) return
this._observer.disconnect()
if(this.querySelector(this.dispatchEvent.handle)) this.querySelector(this.dispatchEvent.handle).remove()
this.handle = document.createElement('div')
this.handle.classList.add('handle')
this.handle.classList.add(this.getBZAttribute('side'))
this.prepend(this.handle)
this.handle.addEventListener('pointerdown', this.dragStart.bind(this))
this._observer.observe(this, { childList: true })
}
dragStart(evt){
@@ -280,17 +297,29 @@ class BZslidePane extends Buildoz {
}
dragMove(evt){
const dx = evt.clientX - this.dragStartX
const dy = evt.clientY - this.dragStartY
const box = this.getBoundingClientRect()
const parentBox = this.parentElement.getBoundingClientRect()
let width, height
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)
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)
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)
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)
this.style.width = width+'px'
break
}
}