hoodcms 6.0.0 → 6.0.1

package/dist/js/app/PropertyService.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="google.maps" />
+import { DataList } from "../core/DataList";
+declare global {
+    namespace google.maps {
+        interface Marker {
+            info: string;
+        }
+    }
+}
+export interface PropertyServiceOptions {
+    listElementId?: string;
+    mapListElementId?: string;
+    mapElementId?: string;
+    /**
+     * Called before the data is fetched.
+     */
+    onListLoad?: (sender?: HTMLElement) => void;
+    /**
+     * Called before the fetched HTML is rendered to the list. Must return the data back to datalist to render.
+     */
+    onListRender?: (html: string, sender?: HTMLElement) => string;
+    /**
+     * Called before the data is fetched.
+     */
+    onMapLoad?: (data: string, sender?: HTMLElement) => void;
+    /**
+     * Called before the fetched HTML is rendered to the list. Must return the data back to datalist to render.
+     */
+    onMapRender?: (sender?: HTMLElement) => string;
+}
+export declare class PropertyService {
+    options: PropertyServiceOptions;
+    constructor(options?: PropertyServiceOptions);
+    element: HTMLElement;
+    list: DataList;
+    mapListElement: HTMLElement;
+    mapList: DataList;
+    map: google.maps.Map;
+    center: google.maps.LatLngLiteral;
+    mapElement: HTMLElement;
+    markers: any[];
+    initList(): void;
+    initMapList(): void;
+    initMap(): void;
+    reloadMarkers(): void;
+}

package/{src/ts/app/PropertyController.ts → dist/js/app/PropertyService.js}

@@ -1,125 +1,91 @@
 /// <reference types="google.maps" />
-
 import { Alerts } from "../core/Alerts";
 import { DataList } from "../core/DataList";
-
-declare global {
-    namespace google.maps {
-        interface Marker {
-            info: string;
-        }
-    }
-}
-
-export class PropertyController {
-    constructor() {
+export class PropertyService {
+    constructor(options) {
+        this.options = {
+            listElementId: 'property-list',
+            mapListElementId: 'property-map-list',
+            mapElementId: 'property-map'
+        };
+        this.map = null;
+        this.center = { lat: 30, lng: -110 };
+        this.options = Object.assign(Object.assign({}, this.options), options);
         this.initList();
     }
-
-    element: HTMLElement;
-    list: DataList;
-    mapListElement: HTMLElement;
-    mapList: DataList;
-    map: google.maps.Map = null;
-    center: google.maps.LatLngLiteral = { lat: 30, lng: -110 };
-    mapElement: HTMLElement;
-    markers: any[];
-
     initList() {
-
-        this.element = document.getElementById('property-list');
+        this.element = document.getElementById(this.options.listElementId);
         if (!this.element) {
             return;
         }
-
         this.list = new DataList(this.element, {
-            onComplete: function (this: PropertyController, data: string, sender: HTMLElement = null) {
-
+            onLoad: function (sender = null) {
+                if (this.options.onListLoad) {
+                    this.options.onListLoad(sender);
+                }
+            }.bind(this),
+            onComplete: function (data, sender = null) {
+                if (this.options.onListRender) {
+                    this.options.onListRender(data, sender);
+                }
                 Alerts.log('Finished loading property list.', 'info');
-
             }.bind(this)
         });
-
     }
-
     initMapList() {
-
-        this.mapListElement = document.getElementById('property-map-list');
+        this.mapListElement = document.getElementById(this.options.mapListElementId);
         if (!this.mapElement) {
             return;
         }
-
         this.mapList = new DataList(this.mapListElement, {
-            onComplete: function (this: PropertyController, data: string, sender: HTMLElement = null) {
-
+            onComplete: function (data, sender = null) {
+                if (this.options.onMapLoad) {
+                    this.options.onMapLoad(data, sender);
+                }
                 Alerts.log('Finished loading map list.', 'info');
                 this.reloadMarkers();
-
             }.bind(this)
         });
     }
-
-    initMap(mapElementId: string = 'property-map') {
-
-        this.mapElement = document.getElementById(mapElementId);
+    initMap() {
+        this.mapElement = document.getElementById(this.options.mapElementId);
         if (!this.mapElement) {
             return;
         }
-
         this.center = { lat: +this.mapElement.dataset.lat, lng: +this.mapElement.dataset.long };
-
         this.map = new google.maps.Map(this.mapElement, {
             zoom: +this.mapElement.dataset.zoom || 15,
             center: this.center,
             scrollwheel: false
         });
-
-        $(window).resize(function (this: PropertyController) {
+        $(window).resize(function () {
             google.maps.event.trigger(this.map, 'resize');
         }.bind(this));
-
         google.maps.event.trigger(this.map, 'resize');
-
         this.initMapList();
-
     }
-
     reloadMarkers() {
-
-        var infowindow: google.maps.InfoWindow = null;
-
+        var infowindow = null;
         if (!this.mapElement) {
             return;
         }
-
         var map = this.map;
-
         if (this.markers) {
             for (var i = 0; i < this.markers.length; i++) {
                 this.markers[i].setMap(null);
             }
         }
-
         this.markers = [];
-
         var locations = $("#property-map-locations").data('locations');
-
-        locations.map(function (this: PropertyController, location: any, i: number) {
-
+        locations.map(function (location, i) {
             let marker = new google.maps.Marker({
                 position: new google.maps.LatLng(+location.Latitude, +location.Longitude),
                 map: this.map,
                 optimized: true // makes SVG icons work in IE
             });
-
-
-
-            //marker.setIcon({
-            //    url: '/images/marker.png',
-            //    size: new google.maps.Size(30, 41),
-            //    scaledSize: new google.maps.Size(30, 41)
-            //});
-
+            if (this.mapElement.dataset.marker) {
+                marker.setIcon(this.mapElement.dataset.marker);
+            }
             marker.info = `<div class="card border-0" style="max-width:300px">
     <div style="background-image:url(${location.ImageUrl})" class="rounded img-full img img-wide"></div>
     <div class="card-body border-0">
@@ -130,21 +96,23 @@ export class PropertyController {
         <a href="${location.MarkerUrl}" class="btn btn-block btn-primary">Find out more...</a>
     </div>
 </div>`;
-
-            google.maps.event.addListener(marker, 'click', function (this: google.maps.Marker) {
-
+            marker.addListener("click", () => {
                 if (infowindow) {
                     infowindow.close();
                 }
                 infowindow = new google.maps.InfoWindow({
-                    content: this.info
+                    content: marker.info
+                });
+                infowindow.open({
+                    anchor: marker,
+                    map,
+                    shouldFocus: false,
                 });
-                infowindow.open(map, this);
-
-            }.bind(this));
-
+            });
             this.markers.push(marker);
-
         }.bind(this));
+        if (this.options.onMapRender) {
+            this.options.onMapRender();
+        }
     }
 }