added EE to intro

This commit is contained in:
STEINNI
2025-11-15 20:10:31 +00:00
parent b3e776762b
commit cb6e2c1952
2 changed files with 93 additions and 0 deletions

View File

@@ -136,4 +136,41 @@ bz-toggler div.toggle-switch span.toggle-thumb {
bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
left : 1em;
}
bz-slidepane div.handle.top {
position: absolute;
top: 0;
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%);
}
bz-slidepane div.handle.bottom {
position: absolute;
bottom: 0;
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%);
}
bz-slidepane div.handle.left {
position: absolute;
left: 0;
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%);
}
bz-slidepane div.handle.right {
position: absolute;
right: 0;
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%);
}

View File

@@ -247,3 +247,59 @@ class BZtoggler extends Buildoz {
}
}
Buildoz.define('toggler', BZtoggler)
class BZslidePane extends Buildoz {
constructor(){
super()
this.open = false
this.defaultAttrs = {
side: 'bottom'
}
this.dragMove = this.dragMove.bind(this)
this.dragEnd = this.dragEnd.bind(this)
}
connectedCallback(){
super.connectedCallback()
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))
}
dragStart(evt){
evt.target.setPointerCapture(evt.pointerId)
this.dragStartX = evt.clientX
this.dragStartY = evt.clientY
this.handle.addEventListener('pointermove', this.dragMove)
this.handle.addEventListener('pointerup', this.dragEnd)
}
dragMove(evt){
const dx = evt.clientX - this.dragStartX
const dy = evt.clientY - this.dragStartY
switch(this.getAttribute('side')){
case 'top':
break
case 'bottom':
break
case 'left':
break
case'right':
break
}
}
dragEnd(evt){
evt.target.releasePointerCapture(evt.pointerId)
this.handle.removeEventListener('pointermove', this.dragMove)
this.handle.removeEventListener('pointerup', this.dragEnd)
}
}
Buildoz.define('slidepane', BZslidePane)