added EE to intro
This commit is contained in:
37
buildoz.css
37
buildoz.css
@@ -136,4 +136,41 @@ bz-toggler div.toggle-switch span.toggle-thumb {
|
|||||||
|
|
||||||
bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
|
bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
|
||||||
left : 1em;
|
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)
|
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