Merge pull request #460 from deckgo/dummy-bottom-sheet

feat(#459): display notes in a dummy bottom sheet

remote/package.json

@@ -35,7 +35,6 @@
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.1-3",
     "@deckdeckgo/utils": "^1.0.0-rc.1-2",
     "@ionic/core": "^4.11.3",
-    "bottom-sheet": "file:../../../lab/bottom-sheet",
     "date-fns": "^2.6.0",
     "idb-keyval": "^3.2.0",
     "remarkable": "^2.0.0",

remote/src/app/components/app-bottom-sheet/app-bottom-sheet.scss

@@ -0,0 +1,52 @@
+app-bottom-sheet {
+  ion-backdrop {
+    opacity: 0.4;
+  }
+
+  div.container {
+    position: absolute;
+    left: 0;
+
+    @supports (padding-top: constant(safe-area-inset-bottom)) {
+      --safe-area-inset-bottom: constant(safe-area-inset-bottom);
+      top: calc(var(--contentheight) - var(--safe-area-inset-bottom) - var(--bottom-sheet-toolbaroffset) - var(--bottom-sheet-top));
+    }
+
+    @supports (padding-top: env(safe-area-inset-bottom)) {
+      --safe-area-inset-bottom: env(safe-area-inset-bottom);
+      top: calc(var(--contentheight) - var(--safe-area-inset-bottom) - var(--bottom-sheet-toolbaroffset) - var(--bottom-sheet-top));
+    }
+
+    background: var(--ion-background-color, white);
+    width: 100%;
+
+    height: var(--bottom-sheet-top);
+
+    overflow: hidden;
+
+    user-select: none;
+    cursor: pointer;
+
+    transition: all 0.4s ease-in-out;
+
+    box-shadow: 0 -4px 4px rgba(0, 0, 0, .12);
+    border-radius: 10px 10px 0 0;
+
+    z-index: 1000;
+
+    div.content {
+      height: fit-content;
+    }
+
+    div.indicator {
+      position: absolute;
+      top: 8px;
+      left: 50%;
+      transform: translate(0, -50%);
+      width: 16px;
+      height: 4px;
+      background: rgba(var(--ion-color-medium-rgb), 0.8);
+      border-radius: 16px;
+    }
+  }
+}

remote/src/app/components/app-bottom-sheet/app-bottom-sheet.tsx

@@ -0,0 +1,150 @@
+import {Component, h, Element, Host, State} from '@stencil/core';
+
+import {debounce, unifyEvent} from '@deckdeckgo/utils';
+
+@Component({
+    tag: 'app-bottom-sheet',
+    styleUrl: 'app-bottom-sheet.scss'
+})
+export class AppBottomSheet {
+    @Element() el: HTMLElement;
+
+    private startY: number;
+
+    private bottomSheetMinHeight: number = 48;
+    private heightOffset: number;
+
+    @State()
+    private contentHeight: number;
+
+    @State()
+    private toolbarOffset: number = 56;
+
+    @State()
+    private bottomSheetTop: number = this.bottomSheetMinHeight;
+
+    private container: HTMLElement;
+    private content: HTMLElement;
+
+    async componentDidLoad() {
+        await this.initSize();
+        await this.init();
+
+        this.initWindowResize();
+    }
+
+    async componentDidUnload() {
+        await this.destroy();
+
+        this.removeWindowResize();
+    }
+
+    private initWindowResize() {
+        if (window) {
+            window.addEventListener('resize', debounce(this.onWindowResize));
+        }
+    }
+
+    private removeWindowResize() {
+        if (window) {
+            window.removeEventListener('resize', debounce(this.onWindowResize));
+        }
+    }
+
+    private onWindowResize = async () => {
+        await this.initSize();
+    };
+
+    private initSize(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.bottomSheetTop = this.bottomSheetMinHeight;
+            this.heightOffset = (window.innerHeight || screen.height) * 0.8;
+            this.contentHeight = (window.innerHeight || screen.height);
+
+            const header: HTMLElement = document.querySelector('ion-nav ion-header');
+
+            if (header) {
+                this.toolbarOffset = header.offsetHeight;
+            }
+
+            resolve();
+        });
+    }
+
+    private init(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            if (!this.container) {
+                resolve();
+                return;
+            }
+
+            this.container.addEventListener('mousedown', this.startEvent, {passive: false});
+            this.container.addEventListener('touchstart', this.startEvent, {passive: false});
+            document.addEventListener('mouseup', this.endEvent, {passive: false});
+            document.addEventListener('touchend', this.endEvent, {passive: false});
+
+            resolve();
+        });
+    }
+
+    private destroy(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            if (!this.container) {
+                resolve();
+                return;
+            }
+
+            this.container.removeEventListener('mousedown', this.startEvent, true);
+            this.container.removeEventListener('touchstart', this.startEvent, true);
+            document.removeEventListener('mouseup', this.endEvent, true);
+            document.removeEventListener('touchend', this.endEvent, true);
+
+            resolve();
+        });
+    }
+
+    private startEvent = ($event: MouseEvent | TouchEvent) => {
+        $event.preventDefault();
+
+        this.startY = unifyEvent($event).clientY;
+    };
+
+    private endEvent = ($event: MouseEvent) => {
+        if (!this.startY || this.startY === undefined) {
+            return;
+        }
+
+        $event.preventDefault();
+
+        const toY: number = unifyEvent($event).clientY;
+
+        if (this.startY > toY) {
+            this.bottomSheetTop = this.bottomSheetTop <= this.bottomSheetMinHeight ? this.heightOffset : (this.bottomSheetTop + this.heightOffset >= this.content.offsetHeight ? this.content.offsetHeight : (this.bottomSheetTop + this.heightOffset));
+        } else {
+            this.bottomSheetTop = this.bottomSheetMinHeight;
+        }
+
+        this.startY = undefined;
+    };
+
+    render() {
+        return <Host style={{'--bottom-sheet-top': `${this.bottomSheetTop}px`, '--bottom-sheet-toolbaroffset': `${this.toolbarOffset}px`, '--contentheight': `${this.contentHeight}px`}}>
+            {this.renderBackdrop()}
+            <div class="container" ref={el => this.container = el}>
+                <div class="indicator"></div>
+                <div class="content ion-padding-top" ref={el => this.content = el}>
+                    <slot></slot>
+                </div>
+            </div>
+        </Host>
+    }
+
+    private renderBackdrop() {
+        if (this.bottomSheetTop > this.bottomSheetMinHeight) {
+            return <ion-backdrop></ion-backdrop>
+        } else {
+            return undefined;
+        }
+    }
+
+}

remote/src/app/components/app-notes/app-notes.scss

@@ -24,14 +24,6 @@ app-notes {
     }
   }
 
-  bottom-sheet {
-    --sheet-content-padding-top: 4px;
-    --sheet-z-index: 1000;
-    --sheet-background-color: var(--ion-background-color, white);
-    --sheet-indicator-color: var(--ion-text-color);
-    --sheet-max-width: 540px;
-  }
-
   div.landscape-notes {
     border-radius: 10px;
     height: calc(100% - 28px);
@@ -41,6 +33,12 @@ app-notes {
     margin: 16px 16px 0 4px;
   }
 
+  div.notes {
+    p {
+      padding: 16px 0;
+    }
+  }
+
   @media screen and (orientation: landscape) {
     bottom-sheet {
       display: none;

remote/src/app/components/app-notes/app-notes.tsx

@@ -80,9 +80,9 @@ export class AppNotes {
 
     render() {
         if (this.portrait) {
-            return <bottom-sheet arrow={true}>
+            return <app-bottom-sheet>
                 {this.renderNotes()}
-            </bottom-sheet>;
+            </app-bottom-sheet>;
         } else {
             return <div class="ion-padding landscape-notes">
                 {this.renderNotes()}
@@ -92,7 +92,7 @@ export class AppNotes {
 
     private renderNotes() {
         return [
-            <p slot="sheet-header" class="ion-margin-start ion-margin-end ion-text-uppercase">Notes</p>,
+            <p class="ion-margin-start ion-margin-end ion-text-uppercase">Notes</p>,
             this.renderNote()
         ]
     }