From 2ec2f506a279961d1f90f39e0bfb8186d5e50c65 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Wed, 11 Sep 2019 18:40:10 +0200
Subject: [PATCH] Implemented resizeable

---
 package-lock.json                             |  2 +-
 .../side-panel/side-panel.component.html      |  5 +-
 .../side-panel/side-panel.component.scss      | 35 ++++++++--
 .../side-panel/side-panel.component.ts        | 69 +++++++++++++++++--
 src/app/app-side-panel-test.component.ts      |  2 +-
 5 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3308bee..d501b95 100644
--- a/package-lock.json
+++ b/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"
       }
     },
diff --git a/projects/common/src/lib/components/side-panel/side-panel.component.html b/projects/common/src/lib/components/side-panel/side-panel.component.html
index 54bddec..e7af4fe 100644
--- a/projects/common/src/lib/components/side-panel/side-panel.component.html
+++ b/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>
 
diff --git a/projects/common/src/lib/components/side-panel/side-panel.component.scss b/projects/common/src/lib/components/side-panel/side-panel.component.scss
index 5bf9373..17259ad 100644
--- a/projects/common/src/lib/components/side-panel/side-panel.component.scss
+++ b/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%;
diff --git a/projects/common/src/lib/components/side-panel/side-panel.component.ts b/projects/common/src/lib/components/side-panel/side-panel.component.ts
index 358abfd..65f97eb 100644
--- a/projects/common/src/lib/components/side-panel/side-panel.component.ts
+++ b/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,18 +7,79 @@ 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) {
     if (this.collapsable) {
-      this.collapsed = !this.collapsed;
+      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();
+  }
 }
diff --git a/src/app/app-side-panel-test.component.ts b/src/app/app-side-panel-test.component.ts
index 23fab8a..41da0e2 100644
--- a/src/app/app-side-panel-test.component.ts
+++ b/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 {