bz-slidepane OK + console started + intro loader

buildoz.css

@@ -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;
 }

buildoz.js

@@ -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 box = this.getBoundingClientRect()
-        const dy = evt.clientY - this.dragStartY
+        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
         }
     }