Convert Resizer to Typescript and create a Percentage based sizer

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/resizer/distributors/collapse.ts

@@ -16,9 +16,15 @@ limitations under the License.
 
 import FixedDistributor from "./fixed";
 import ResizeItem from "../item";
+import {IConfig} from "../resizer";
 
-class CollapseItem extends ResizeItem {
-    notifyCollapsed(collapsed) {
+interface ICollapseConfig extends IConfig {
+    toggleSize: number;
+    onCollapsed?(collapsed: boolean, id: string, element: HTMLElement): void;
+}
+
+class CollapseItem extends ResizeItem<ICollapseConfig> {
+    notifyCollapsed(collapsed: boolean) {
         const callback = this.resizer.config.onCollapsed;
         if (callback) {
             callback(collapsed, this.id, this.domNode);
@@ -26,18 +32,21 @@ class CollapseItem extends ResizeItem {
     }
 }
 
-export default class CollapseDistributor extends FixedDistributor {
+export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
     static createItem(resizeHandle, resizer, sizer) {
         return new CollapseItem(resizeHandle, resizer, sizer);
     }
 
-    constructor(item, config) {
+    private readonly toggleSize: number;
+    private isCollapsed: boolean;
+
+    constructor(item: CollapseItem) {
         super(item);
-        this.toggleSize = config && config.toggleSize;
+        this.toggleSize = item.resizer?.config?.toggleSize;
         this.isCollapsed = false;
     }
 
-    resize(newSize) {
+    public resize(newSize: number) {
         const isCollapsedSize = newSize < this.toggleSize;
         if (isCollapsedSize && !this.isCollapsed) {
             this.isCollapsed = true;

src/resizer/distributors/fixed.ts

@@ -16,6 +16,7 @@ limitations under the License.
 
 import ResizeItem from "../item";
 import Sizer from "../sizer";
+import Resizer, {IConfig} from "../resizer";
 
 /**
 distributors translate a moving cursor into
@@ -27,29 +28,34 @@ they have two methods:
         within the container bounding box. For internal use.
         This method usually ends up calling `resize` once the start offset is subtracted.
 */
-export default class FixedDistributor {
-    static createItem(resizeHandle, resizer, sizer) {
+export default class FixedDistributor<C extends IConfig, I extends ResizeItem<any> = ResizeItem<C>> {
+    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer) {
         return new ResizeItem(resizeHandle, resizer, sizer);
     }
 
-    static createSizer(containerElement, vertical, reverse) {
+    static createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean) {
         return new Sizer(containerElement, vertical, reverse);
     }
 
-    constructor(item) {
-        this.item = item;
+    private readonly beforeOffset: number;
+
+    constructor(protected item: I) {
         this.beforeOffset = item.offset();
     }
 
-    resize(size) {
+    public resize(size: number) {
         this.item.setSize(size);
     }
 
-    resizeFromContainerOffset(offset) {
+    public resizeFromContainerOffset(offset: number) {
         this.resize(offset - this.beforeOffset);
     }
 
-    start() {}
+    public start() {
+        this.item.start();
+    }
 
-    finish() {}
+    public finish() {
+        this.item.finish();
+    }
 }

src/resizer/distributors/percentage.ts

@@ -0,0 +1,48 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Sizer from "../sizer";
+import FixedDistributor from "./fixed";
+import {IConfig} from "../resizer";
+
+class PercentageSizer extends Sizer {
+    public start(item: HTMLElement) {
+        if (this.vertical) {
+            item.style.minHeight = null;
+        } else {
+            item.style.minWidth = null;
+        }
+    }
+
+    public finish(item: HTMLElement) {
+        const parent = item.offsetParent as HTMLElement;
+        if (this.vertical) {
+            const p = ((item.offsetHeight / parent.offsetHeight) * 100).toFixed(2) + "%";
+            item.style.minHeight = p;
+            item.style.height = p;
+        } else {
+            const p = ((item.offsetWidth / parent.offsetWidth) * 100).toFixed(2) + "%";
+            item.style.minWidth = p;
+            item.style.width = p;
+        }
+    }
+}
+
+export default class PercentageDistributor extends FixedDistributor<IConfig> {
+    static createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean) {
+        return new PercentageSizer(containerElement, vertical, reverse);
+    }
+}