feat: image field

source/js/edit/fields/image.ts

@@ -0,0 +1,78 @@
+declare const wp: any;
+
+class Image implements Field {
+    imageContainer: HTMLElement|null;
+    image: HTMLInputElement|null;
+    button: HTMLButtonElement|null;
+    constructor(private overlayInstance: OverlayInterface) {
+        this.imageContainer = this.overlayInstance.getOverlay()?.querySelector('[data-js-field-edit-image]') ?? null;
+        this.button = this.getContainer()?.querySelector('[data-js-field-edit-image-button]') ?? null;
+        this.image = this.getContainer()?.querySelector('input') ?? null;
+        this.setButtonListener();
+    }
+
+    private setButtonListener(): void {
+        this.button?.addEventListener('click', () => {
+            if (!wp) {
+                return;
+            }
+
+            const mediaUploader = wp.media({
+                title: 'Select Image',
+                button: {
+                    text: 'Use this image'
+                },
+                multiple: false
+            });
+
+            mediaUploader.on('select', () => {
+                const imageUrl = mediaUploader.state().get('selection').first().toJSON().url;
+                this.setValue(imageUrl);
+            });
+
+            mediaUploader.open();
+        });
+    }
+
+    public getContainer(): HTMLElement|null {
+        return this.imageContainer;
+    }
+
+    public getField(): HTMLInputElement|null {
+        return this.image;
+    }
+
+    public setValue(value: string): void {
+        if (!this.getField()) {
+            return;
+        }
+
+        this.getField()!.value = value;
+    }
+
+    public getValue(): string {
+        if (!this.getField()) {
+            return '';
+        }
+
+        return this.getField()!.value;
+    }
+
+    public showField(): void {
+        if (!this.getContainer()) {
+            return;
+        }
+
+        this.getContainer()!.classList.add('is-visible');
+    }
+
+    public hideField(): void {
+        if (!this.getContainer()) {
+            return;
+        }
+
+        this.getContainer()!.classList.remove('is-visible');
+    }
+}
+
+export default Image;

source/js/main.ts

@@ -2,6 +2,8 @@ import { createMap } from '../OpenStreetMap/js/map';
 import { MapInterface } from '../OpenStreetMap/js/mapInterface';
 import { CreateMarker } from '../OpenStreetMap/js/features/createMarker/createMarker';
 import { CreateLayerGroup } from '../OpenStreetMap/js/features/createLayerGroup/createLayerGroup';
+import { CreateImageOverlay } from '../OpenStreetMap/js/features/createImageOverlay/createImageOverlay';
+import { CreateRectangle } from '../OpenStreetMap/js/features/createRectangle/createRectangle';
 import HandleSelected from './options/handleSelected';
 import OptionCreateMarker from './options/createMarker/optionCreateMarker';
 import OptionSetStartPosition from './options/startPosition/optionSetStartPosition';
@@ -29,6 +31,10 @@ import SaveLayerGroups from './options/createLayerGroup/saveLayerGroups';
 import Color from './edit/fields/color';
 import Layer from './edit/fields/layer';
 import Icon from './edit/fields/icon';
+import OptionCreateImageOverlay from './options/createImageOverlay/optionCreateImageOverlay';
+import ImageOverlayFactory from './options/createImageOverlay/imageOverlayFactory';
+import EditImageOverlayFactory from './options/createImageOverlay/edit/editImageOverlayDataFactory';
+import Image from './edit/fields/image';
 
 declare const acf: any;
 
@@ -59,18 +65,21 @@ class Main {
         // General
         const createMarkerInstance     = new CreateMarker();
         const createLayerGroupInstance = new CreateLayerGroup();
+        const createImageOverlayInstance = new CreateImageOverlay();
+        const createRectangleInstance  = new CreateRectangle();
         const handleSelectedInstance   = new HandleSelected(container);
 
         // Fields and Edit
         const fieldValidatorInstance = new FieldValidator();
         const overlayInstance        = new Overlay(container);
+        const editInstance           = new Edit(container);
         const titleInstance          = new Title(overlayInstance);
         const urlInstance            = new Url(overlayInstance);
         const descriptionInstance    = new Description(overlayInstance);
         const colorInstance          = new Color(overlayInstance);
-        const editInstance           = new Edit(container);
         const layerInstance          = new Layer(overlayInstance);
         const iconInstance           = new Icon(overlayInstance);
+        const imageInstance          = new Image(overlayInstance);
 
         // Create layer group
         const editLayerGroupDataFactory = new EditLayerGroupDataFactory(
@@ -107,13 +116,36 @@ class Main {
             new MarkersList(container, mapInstance)
         );
 
+        // Create image overlay
+        const editImageOverlayFactoryInstance = new EditImageOverlayFactory(
+            editInstance,
+            overlayInstance,
+            titleInstance,
+            layerInstance,
+            imageInstance
+        );
+
+        const imageOverlayFactoryInstance = new ImageOverlayFactory(
+            mapInstance,
+            createImageOverlayInstance,
+            createRectangleInstance,
+            editImageOverlayFactoryInstance
+        );
+        console.log(editImageOverlayFactoryInstance);
+
         // Main
         const OptionCreateLayerGroupInstance = new OptionCreateLayerGroup(
             container,
             handleSelectedInstance,
             layerGroupFactoryInstance
         );
 
+        const OptionCreateImageOverlayInstance = new OptionCreateImageOverlay(
+            container,
+            handleSelectedInstance,
+            imageOverlayFactoryInstance
+        );
+
         const OptionCreateMarkerInstance = new OptionCreateMarker(
             mapInstance, 
             handleSelectedInstance,

source/js/options/createImageOverlay/edit/editImageOverlayData.ts

@@ -0,0 +1,73 @@
+class EditImageOverlayData implements EditImageOverlayDataInterface, Editable {
+    constructor(
+        private imageOverlayData: ImageOverlayDataInterface,
+        private editInstance: EditInterface,
+        private overlayInstance: OverlayInterface,
+        private titleInstance: Field,
+        private layerInstance: Field,
+        private imageInstance: Field
+    ) {
+        // this.option = document.createElement('option');
+        // this.option.value = this.imageOverlayData.getId();
+        // this.layerInstance.getField()?.appendChild(this.option);
+    }
+
+    public edit(): void {
+        this.editInstance.setActiveEditable(this);
+        this.showFields();
+    }
+
+    private setDefaultFieldValues(): void {
+        // this.titleInstance.setValue(this.imageOverlayData.getTitle());
+        // this.colorInstance.setValue(this.imageOverlayData.getColor());
+        // this.layerInstance.setValue(this.imageOverlayData.getLayerGroup());
+        // this.iconInstance.setValue(this.imageOverlayData.getIcon());
+    }
+
+    public save() {
+        // if (this.imageOverlayData.getId() === this.layerInstance.getValue()) {
+        //     alert('Cannot set the layer group to itself');
+        //     return;
+        // }
+
+        // this.imageOverlayData.setTitle(this.titleInstance.getValue());
+        // this.imageOverlayData.setColor(this.colorInstance.getValue());
+        // this.imageOverlayData.setLayerGroup(this.layerInstance.getValue());
+        // this.imageOverlayData.setIcon(this.iconInstance.getValue());
+        // this.imageOverlayData.updateLayerGroup();
+        // this.editInstance.setActiveEditable(null);
+        // this.hideFields();
+    }
+
+    public setOptionTitle(title: string) {
+        // this.option.text = this.imageOverlayData.getTitle();
+    }
+
+    public cancel() {
+        // this.editInstance.setActiveEditable(null);
+        // this.hideFields();
+    }
+
+    public delete() {
+        // this.imageOverlayData.deleteLayerGroup();
+        // this.editInstance.setActiveEditable(null);
+        // this.option.remove();
+        // this.hideFields();
+    }
+
+    public showFields() {
+        this.layerInstance.showField();
+        this.titleInstance.showField();
+        this.imageInstance.showField();
+        this.overlayInstance.showOverlay();
+    }
+
+    public hideFields() {
+        this.layerInstance.hideField();
+        this.titleInstance.hideField();
+        this.imageInstance.hideField();
+        this.overlayInstance.hideOverlay();
+    }
+}
+
+export default EditImageOverlayData;

source/js/options/createImageOverlay/edit/editImageOverlayDataFactory.ts

@@ -0,0 +1,25 @@
+import EditImageOverlayData from "./editImageOverlayData";
+
+class EditImageOverlayFactory {
+    constructor(
+        private editInstance: EditInterface,
+        private overlayInstance: OverlayInterface,
+        private titleInstance: Field,
+        private layerInstance: Field,
+        private imageInstance: Field
+    ) {
+    }
+
+    public create(imageOverlayDataInstance: ImageOverlayDataInterface): EditImageOverlayDataInterface {
+        return new EditImageOverlayData(
+            imageOverlayDataInstance,
+            this.editInstance,
+            this.overlayInstance,
+            this.titleInstance,
+            this.layerInstance,
+            this.imageInstance
+        );
+    }
+}
+
+export default EditImageOverlayFactory;

source/js/options/createImageOverlay/edit/editImageOverlayDataInterface.d.ts

@@ -0,0 +1,3 @@
+interface EditImageOverlayDataInterface {
+    edit(): void;
+}

source/js/options/createImageOverlay/imageOverlayData.ts

@@ -0,0 +1,37 @@
+import { CreateImageOverlayInterface } from "../../../OpenStreetMap/js/features/createImageOverlay/createImageOverlayInterface";
+import { CreateRectangleInterface } from "../../../OpenStreetMap/js/features/createRectangle/createRectangleInterface";
+import { MapInterface } from "../../../OpenStreetMap/js/mapInterface";
+import EditImageOverlayFactory from "./edit/editImageOverlayDataFactory";
+
+class ImageOverlayData implements ImageOverlayDataInterface {
+    private editor: EditImageOverlayDataInterface;
+    constructor(
+        private mapInstance: MapInterface,
+        private createImageOverlayInstance: CreateImageOverlayInterface,
+        private createRectangle: CreateRectangleInterface,
+        private editImageOverlayFactoryInstance: EditImageOverlayFactory
+    ) {
+        this.editor = this.editImageOverlayFactoryInstance.create(this);
+    }
+
+    public createImageOverlay(): void {}
+    public editImageOverlay(): void {
+        this.editor.edit();
+    }
+
+    public setTitle(title: string): void {}
+    public getTitle(): string {
+        return '';
+    }
+    public getLayerGroup(): string {
+        return '';
+    }
+    public setLayerGroup(layerGroup: string): void {}
+    public updateImageOverlay(): void {}
+    public deleteImageOverlay(): void {}
+    public getId(): string {
+        return '';
+    }
+}
+
+export default ImageOverlayData;

source/js/options/createImageOverlay/imageOverlayDataInterface.d.ts

@@ -0,0 +1,11 @@
+interface ImageOverlayDataInterface {
+    createImageOverlay(): void;
+    editImageOverlay(): void;
+    getId(): string;
+    setTitle(title: string): void;
+    getTitle(): string;
+    getLayerGroup(): string;
+    setLayerGroup(layerGroup: string): void;
+    updateImageOverlay(): void;
+    deleteImageOverlay(): void;
+}

source/js/options/createImageOverlay/imageOverlayFactory.ts

@@ -0,0 +1,26 @@
+import { CreateImageOverlayInterface } from "../../../OpenStreetMap/js/features/createImageOverlay/createImageOverlayInterface";
+import { CreateRectangleInterface } from "../../../OpenStreetMap/js/features/createRectangle/createRectangleInterface";
+import { MapInterface } from "../../../OpenStreetMap/js/mapInterface";
+import EditImageOverlayFactory from "./edit/editImageOverlayDataFactory";
+import ImageOverlayData from "./imageOverlayData";
+
+class ImageOverlayFactory implements ImageOverlayFactoryInterface {
+    constructor(
+        private mapInstance: MapInterface,
+        private createImageOverlayInstance: CreateImageOverlayInterface,
+        private createRectangle: CreateRectangleInterface,
+        private editImageOverlayFactoryInstance: EditImageOverlayFactory,
+    ) {
+
+    }
+    public create(): ImageOverlayDataInterface {
+        return new ImageOverlayData(
+            this.mapInstance,
+            this.createImageOverlayInstance,
+            this.createRectangle,
+            this.editImageOverlayFactoryInstance,
+        );
+    }
+}
+
+export default ImageOverlayFactory;

source/js/options/createImageOverlay/imageOverlayFactoryInterface.d.ts

@@ -0,0 +1,3 @@
+interface ImageOverlayFactoryInterface {
+    create(): ImageOverlayDataInterface;
+}

source/js/options/createImageOverlay/optionCreateImageOverlay.ts

@@ -0,0 +1,28 @@
+class OptionCreateImageOverlay implements OptionFeature {
+    protected condition: string = 'create_image_overlay';
+
+    constructor(
+        private container: HTMLElement,
+        private handleSelectedInstance: HandleSelectedInterface,
+        private imageOverlayFactoryInstance: ImageOverlayFactoryInterface
+    ) {
+        this.addListener();
+    }
+
+    private addListener(): void {
+
+        this.container.querySelector(`[data-js-value="${this.condition}"]`)?.addEventListener('click', (e) => {
+            e.preventDefault();
+            const imageOverlayData = this.imageOverlayFactoryInstance.create();
+            imageOverlayData.editImageOverlay();
+
+            this.handleSelectedInstance.clearSelected();
+        });
+    }
+
+    public checkCondition(value: string): boolean {
+        return value === this.condition;
+    }
+}
+
+export default OptionCreateImageOverlay;