added EE to intro
This commit is contained in:
37
buildoz.css
37
buildoz.css
@@ -137,3 +137,40 @@ 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%);
|
||||
}
|
||||
56
buildoz.js
56
buildoz.js
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user