Merge pull request #12 from helsingborg-stad/feat/create-popup-class

feat: create popup class

Author: NiclasNorin

js/addableInterface.ts

@@ -1,5 +1,5 @@
 import { LayerGroup, Map as LeafletMap } from 'leaflet';
 
 export interface Addable {
-    getAddable(): LeafletMap|LayerGroup;
+    getAddable(): LeafletMap | LayerGroup;
 }

js/bindableInterface.ts

@@ -1,4 +1,5 @@
 import { ImageOverlay, Layer, LayerGroup, Map as LeafletMap, Marker } from 'leaflet';
+import { PopupInterface } from './features/popup/popupInterface';
 
 export interface Bindable {
     getBindable(): Layer;

js/features/createRectangle/rectangle.ts

@@ -2,6 +2,7 @@ import L, { Rectangle as LeafletRectangle } from "leaflet";
 import { RectangleInterface } from "./rectangleInterface";
 import { Addable } from "../../addableInterface";
 import { LatLngBoundsObject, InteractionEvent, InteractionEventCallback } from "../../types";
+import { PopupInterface } from "../popup/popupInterface";
 
 export class Rectangle implements RectangleInterface {
     private listeners: { [key: string]: InteractionEventCallback[] } = {};

js/features/popup/createPopup.ts

@@ -0,0 +1,12 @@
+import L from "leaflet";
+import { Bindable } from "../../bindableInterface";
+import { Popup } from "./popup";
+import { PopupInterface, PopupOptions } from "./popupInterface";
+import { CreatePopupInterface } from "./createPopupInterface";
+
+export class CreatePopup implements CreatePopupInterface {
+    public create(popupOptions: PopupOptions = {}): PopupInterface {
+        const popup = L.popup(popupOptions);
+        return new Popup(popup);
+    }
+}

js/features/popup/createPopupInterface.ts

@@ -0,0 +1,6 @@
+import { Bindable } from "../../bindableInterface";
+import { PopupInterface, PopupOptions } from "./popupInterface";
+
+export interface CreatePopupInterface {
+    create(popupOptions?: PopupOptions): PopupInterface;
+}

js/features/popup/popup.ts

@@ -1,43 +1,46 @@
+import { Popup as LeafletPopup } from "leaflet";
 import { Bindable } from "../../bindableInterface";
 import { PopupInterface, PopupOptions } from "./popupInterface";
 
+
 export class Popup implements PopupInterface {
-    public bindTo(bindable: Bindable, content: string | HTMLElement, options: PopupOptions = {}): Bindable {
-        bindable.getBindable().bindPopup(content, options);
-        return bindable;
+    constructor(private popup: LeafletPopup) { }
+
+    public bindTo(bindable: Bindable, options: PopupOptions = {}): this {
+        bindable.getBindable().bindPopup(this.popup, options);
+        return this;
     }
 
-    public unbindPopup(bindable: Bindable): Bindable {
-        bindable.getBindable().unbindPopup();
-        return bindable;
+    public unbind(): this {
+        this.popup.unbindPopup();
+        return this;
     }
 
-    public openPopup(bindable: Bindable): Bindable {
-        bindable.getBindable().openPopup();
-        return bindable;
+    public getElement(): HTMLElement | null {
+        return this.popup.getElement() ?? null;
     }
 
-    public closePopup(bindable: Bindable): Bindable {
-        bindable.getBindable().closePopup();
-        return bindable;
+    public open(): this {
+        this.popup.openPopup();
+        return this;
     }
 
-    public togglePopup(bindable: Bindable): Bindable {
-        bindable.getBindable().togglePopup();
-        return bindable;
+    public close(): this {
+        this.popup.close();
+        return this;
     }
 
-    public isPopupOpen(bindable: Bindable): boolean {
-        return bindable.getBindable().isPopupOpen();
+    public toggle(): this {
+        this.popup.toggle();
+        return this;
     }
 
-    public setPopupContent(bindable: Bindable, content: string | HTMLElement): Bindable {
-        bindable.getBindable().setPopupContent(content);
-        return bindable;
+    public isOpen(): boolean {
+        return this.popup.isOpen();
     }
 
-    public getPopup(bindable: Bindable): this | null {
-        const popup = bindable.getBindable().getPopup();
-        return popup ? this : null;
+    public setContent(content: string | HTMLElement): this {
+        this.popup.setContent(content);
+        return this;
     }
 }

js/features/popup/popupInterface.ts

@@ -1,14 +1,14 @@
 import { Bindable } from "../../bindableInterface";
 
 export interface PopupInterface {
-    setPopupContent(bindable: Bindable, content: string | HTMLElement): Bindable;
-    bindTo(bindable: Bindable, content: string | HTMLElement, options?: PopupOptions): Bindable;
-    unbindPopup(bindable: Bindable): Bindable;
-    openPopup(bindable: Bindable): Bindable;
-    closePopup(bindable: Bindable): Bindable;
-    togglePopup(bindable: Bindable): Bindable;
-    isPopupOpen(bindable: Bindable): boolean;
-    getPopup(bindable: Bindable): this | null;
+    setContent(content: string | HTMLElement): this;
+    bindTo(bindable: Bindable, options?: PopupOptions): this;
+    unbind(): this;
+    getElement(): HTMLElement | null;
+    open(): this;
+    close(): this;
+    toggle(): this;
+    isOpen(): boolean;
 }
 
 export type PopupOptions = {