Implemented resizeable

package-lock.json

@@ -646,7 +646,7 @@
       "version": "file:dist/common",
       "requires": {
         "angular-oauth2-oidc": "^5.0.2",
-        "ngx-uploadx": "^3.1.2",
+        "ngx-uploadx": "^3.1.3",
         "tslib": "^1.9.0"
       }
     },

projects/common/src/lib/components/side-panel/side-panel.component.html

@@ -1,7 +1,10 @@
-<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed}">
+<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
   <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
     <i class="fa fa-chevron-left" aria-hidden="true"></i>
   </div>
+  <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
+     <span class="rounded"></span>
+  </div>
   <div class="content">
     <ng-content>
 

projects/common/src/lib/components/side-panel/side-panel.component.scss

@@ -1,15 +1,18 @@
 .side-panel {
   position: absolute;
-  top: 50%;
   bottom: 0px;
   width: 100%;
   left: 0px;
-  height:50%;
+  top:50%;
   transition: left 0.3s, top 0.3s;
   background-color: white;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }
 
+.side-panel.resizing {
+  transition: left 0s, top 0s;
+}
+
 .side-panel.collapsed {
   left:-22rem;
 }
@@ -36,12 +39,37 @@
 }
 
 .content {
-  height:100%;
+  height:100% ;
   width:100%;
   overflow:hidden;
   overflow-y:auto;
 }
 
+.resizegrip {
+  height:1rem;
+  line-height: 1rem;
+  display: none;
+  text-align: center;
+}
+
+div.resizegrip > span {
+  position: relative;
+  top: -0.2rem;
+  display: inline-block;
+  height:0.3rem;
+  width:4rem;
+  background-color:rgba(0, 0, 0, 0.3)
+}
+
+.resizeable .resizegrip {
+  display:block;
+  
+}
+
+.resizeable .content {
+  height:calc(100% - 1rem);
+}
+
 @media screen and (min-width:44rem) {
   .side-panel {
     top:0px;
@@ -51,7 +79,6 @@
   }
 
   .side-panel.hidden {
-    top:0px;
     width: 22rem;
     left:-24rem;
     height:100%;

projects/common/src/lib/components/side-panel/side-panel.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef  } from '@angular/core';
 
 @Component({
   selector: 'side-panel',
@@ -7,13 +7,38 @@ import { Component, Input } from '@angular/core';
 })
 
 
-export class SidePanelComponent  {
+export class SidePanelComponent  implements OnChanges {
   @Input() public visible: boolean;
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
+  @Input() public resizeable: boolean = false;
+  @ViewChild("resizeGrip") elementView: ElementRef;
+  public mobile:boolean = true;
+  private parentHeight:number = 0;
+  public top = "100%";
+  private resizeTop:number=50;
+  public resizing:boolean=false;
 
-  constructor() {
+  constructor(private element: ElementRef,private ref: ChangeDetectorRef) {
     this.collapsable = false;
+    this.setTop();
+  }
+
+  checkMobile():boolean {
+    let size = parseFloat(getComputedStyle(document.documentElement).width);
+    let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    let threshold = 44 * rem;
+    return !(size>threshold);
+  }
+
+  setTop() {
+    this.mobile = this.checkMobile();
+    this.resizeTop = this.mobile?50:0;
+    this.top =  (this.collapsed? (this.mobile? 100:0): this.resizeTop) + "%";
+  }
+
+  ngAfterViewInit() {
+    this.parentHeight = this.element.nativeElement.offsetParent.clientHeight;
   }
 
   handleToggleClick(event) {
@@ -21,4 +46,40 @@ export class SidePanelComponent  {
       this.collapsed = !this.collapsed;     
     }
   }
+
+  handleStartGripDrag(event:DragEvent|TouchEvent) {
+    this.resizing=true;
+    if(event instanceof DragEvent) {
+      var crt = new Image();
+      crt.style.display = "none"; 
+      document.body.appendChild(crt);
+      event.dataTransfer.setDragImage(crt,0,0);
+    }   
+  }
+
+  handleEndGripDrag() {
+    this.resizing = false;
+  }
+
+  handleGripDrag(event:DragEvent|TouchEvent) {
+    var clientY = 0;
+    if((event instanceof TouchEvent)) {
+      clientY = (event as TouchEvent).changedTouches[0].clientY;
+    } else {
+      clientY=(event as DragEvent).clientY;
+    }
+    this.resizeTop =  Math.min(98, Math.max(0, clientY / (this.parentHeight  / 100)));
+    this.top =  (this.collapsed? (this.mobile? 100:0): this.resizeTop) + "%";
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes.visible) {
+      this.top =  (changes.visible.currentValue?this.resizeTop:(this.mobile? 100:0)) + "%";
+    }    
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.setTop();
+  }
 }

src/app/app-side-panel-test.component.ts

@@ -4,7 +4,7 @@ import { Component ,ChangeDetectorRef } from '@angular/core';
 
 @Component({
   selector: 'app-side-panel-test',
-  template: '<div><a (click)="handleOpen($event)" href="#">open</a> <side-panel [visible]="show"><a (click)="handleClose($event)" href="#">close</a></side-panel></div>'  
+  template: '<div><a (click)="handleOpen($event)" href="#">open</a> <side-panel [resizeable]="true" [visible]="show"><a (click)="handleClose($event)" href="#">close</a></side-panel></div>'  
 })
 export class AppSidePanelTestComponent {