FilterDrawer Overflow & Overlay

jsfrocha · jsfrocha · commit 10b4da37317c · 2020-04-22T02:52:26.000+01:00
diff --git a/src/app/shared/filter-drawer/filter-drawer.component.ts b/src/app/shared/filter-drawer/filter-drawer.component.ts
@@ -1,19 +1,28 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, Renderer2, SimpleChanges} from '@angular/core';
 
 @Component({
   selector: 't4e-filter-drawer',
   templateUrl: './filter-drawer.component.html',
   styleUrls: ['./filter-drawer.component.scss']
 })
-export class FilterDrawerComponent implements OnInit {
+export class FilterDrawerComponent implements OnChanges {
 
   @Input() isOpened: boolean = false;
   @Output() onClose: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  constructor() { }
-
-  ngOnInit(): void {
+  constructor(
+    private renderer: Renderer2
+  ) { }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['isOpened'].currentValue === true) {
+      this.renderer.addClass(document.body, 'overflow-hidden')
+      this.renderer.addClass(document.body, 'overlay')
+      document.querySelector('.t4e-filter-drawer__content').scroll(0,0);
+    } else {
+      this.renderer.removeClass(document.body, 'overflow-hidden')
+      this.renderer.removeClass(document.body, 'overlay')
+    }
   }
 
   handleClose() {
diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
+  <div class="body-overlay"></div>
   <t4e-root></t4e-root>
 </body>
 </html>
diff --git a/src/theme/index.scss b/src/theme/index.scss
@@ -2,6 +2,27 @@
 @import './mixins';
 @import "./reset";
 
+body {
+  &.overflow-hidden {
+    overflow: hidden;
+  }
+
+  &.overlay {
+    .body-overlay {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: $color-text-blue;
+      opacity: 0.6;
+      z-index: 150;
+    }
+  }
+}
+
 t4e-root {
   .t4e-page-container {
     padding-left: 220px;
