hoodcms 5.0.14 → 6.0.1

package/src/ts/app/PropertyService.ts

@@ -0,0 +1,202 @@
+/// <reference types="google.maps" />
+
+import { Alerts } from "../core/Alerts";
+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 class PropertyService {
+    options: PropertyServiceOptions = {
+        listElementId: 'property-list',
+        mapListElementId: 'property-map-list',
+        mapElementId: 'property-map'
+    };
+
+    constructor(options?: PropertyServiceOptions) {
+
+        this.options = { ...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(this.options.listElementId);
+        if (!this.element) {
+            return;
+        }
+
+        this.list = new DataList(this.element, {
+            onLoad: function (this: PropertyService, sender: HTMLElement = null) {
+
+                if (this.options.onListLoad) {
+                    this.options.onListLoad(sender);
+                }
+
+            }.bind(this),
+            onComplete: function (this: PropertyService, data: string, sender: HTMLElement = null) {
+
+                if (this.options.onListRender) {
+                    this.options.onListRender(data, sender);
+                }
+                Alerts.log('Finished loading property list.', 'info');
+
+            }.bind(this)
+        });
+
+    }
+
+    initMapList() {
+
+        this.mapListElement = document.getElementById(this.options.mapListElementId);
+        if (!this.mapElement) {
+            return;
+        }
+
+        this.mapList = new DataList(this.mapListElement, {
+            onComplete: function (this: PropertyService, data: string, sender: HTMLElement = null) {
+
+                if (this.options.onMapLoad) {
+                    this.options.onMapLoad(data, sender);
+                }
+                Alerts.log('Finished loading map list.', 'info');
+                this.reloadMarkers();
+
+            }.bind(this)
+        });
+    }
+
+    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: PropertyService) {
+            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;
+
+        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: PropertyService, location: any, i: number) {
+
+            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
+            });
+
+            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">
+        <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+            <strong>${location.Address1}, ${location.Postcode}</strong>
+        </p>
+        <p>${location.Description}</p>
+        <a href="${location.MarkerUrl}" class="btn btn-block btn-primary">Find out more...</a>
+    </div>
+</div>`;
+
+            marker.addListener("click", () => {
+                if (infowindow) {
+                    infowindow.close();
+                }
+                infowindow = new google.maps.InfoWindow({
+                    content: marker.info
+                });
+                infowindow.open({
+                    anchor: marker,
+                    map,
+                    shouldFocus: false,
+                });
+            });
+
+            this.markers.push(marker);
+
+        }.bind(this));
+
+
+        if (this.options.onMapRender) {
+            this.options.onMapRender();
+        }
+    }
+}

package/src/ts/app.property.ts

@@ -0,0 +1,20 @@
+/// <reference types="google.maps" />
+
+import { HoodApi, PropertyService } from ".";
+
+export class App extends HoodApi {
+    property: PropertyService;
+
+    constructor() {
+        super();
+
+        // Setup defaults with HoodApi default initialise function. 
+        this.initialise();
+
+        // Initialise the property controllers.
+        this.property = new PropertyService();
+    }
+
+}
+
+window.hood = new App();

package/src/ts/app.ts

@@ -1,91 +1,13 @@
 /// <reference types="google.maps" />
 
-import { HoodApi } from "./core/HoodApi";
-import { PropertyController } from './app/PropertyController';
-import { Validator } from './core/Validator';
-import { Response } from './core/Response';
-import { Alerts } from './core/Alerts';
+import { HoodApi } from ".";
 
 export class App extends HoodApi {
-    propertyController: PropertyController;
 
     constructor() {
         super();
-
-        // Hook up default handlers.
-        this.handlers.initDefaultHandlers();
-        this.initContactForms();
-
-
-        // Admin Controllers
-        this.propertyController = new PropertyController();
-    }
-
-    initGoogleMaps(tag: string = '.google-map') { 
-
-        $(tag).each(function () {
-
-            var myLatLng = new google.maps.LatLng($(this).data('lat'), $(this).data('long'));
-
-            console.log('Loading map at: ' + $(this).data('lat') + ', ' + $(this).data('long'));
-
-            var map = new google.maps.Map(this, {
-                zoom: $(this).data('zoom') || 15,
-                center: myLatLng,
-                scrollwheel: false
-            });
-
-            var marker = new google.maps.Marker({
-                position: myLatLng,
-                map: map,
-                title: $(this).data('marker')
-            });
-
-            $(window).resize(function () {
-                google.maps.event.trigger(map, 'resize');
-            });
-            google.maps.event.trigger(map, 'resize');
-
-        });
-
-    }
-    /**
-     * Initialisation function for contact forms on the site, will add validator, and submit/functionality to any forms matching the given tag selector string.
-     * @param  {string='.contact-form'} tag
-     */
-    initContactForms(tag: string = '.contact-form') {
-
-        let $form = $(tag);
-
-        $form.find('.thank-you').hide();
-        $form.find('.form-content').show();
-
-        let form: HTMLFormElement = $(tag)[0] as HTMLFormElement;
-        new Validator(form, {
-            onComplete: function (this: App, response: Response) {
-
-                Response.process(response, 5000);
-
-                if (response.success) {
-
-                    if ($form.attr('data-redirect'))
-                        window.location.href = $form.attr('data-redirect');
-
-                    if ($form.attr('data-alert-message'))
-                        Alerts.success($form.attr('data-alert-message'), "Success");
-
-                    $form.find('.form').hide();
-                    $form.find('.thank-you').show();
-                } else {
-                    if ($form.attr('data-alert-error'))
-                        Alerts.error($form.attr('data-alert-error'), "Error");
-                    else
-                        Alerts.error("There was an error sending the message: " + response.errors, "Error");
-                }
-
-            }.bind(this)
-        });
-
+        // Setup defaults with HoodApi default initialise function. 
+        this.initialise();
     }
 
 }

package/src/ts/core/DataList.ts

@@ -46,7 +46,7 @@ export class DataList {
 
         this.element = element;
         this.element.hoodDataList = this;
-        if (typeof(element) == 'undefined' || element == null) {
+        if (typeof (element) == 'undefined' || element == null) {
             Alerts.log('Could not DataList to element, element does not exist.', 'error');
             return;
         }
@@ -54,9 +54,32 @@ export class DataList {
         this.options = { ...this.options, ...options };
 
         if ($(this.element).hasClass('query')) {
-            let pageUrl = $(this.element).data('url') + window.location.search;
-            $(this.element).attr('data-url', pageUrl);
-            $(this.element).data('url', pageUrl);
+
+            let r = new RegExp('^(?:[a-z]+:)?//', 'i');
+            let pageUrl: URL = null;
+            if (r.test(this.element.dataset.url)) {
+                pageUrl = new URL(this.element.dataset.url);
+            } else {
+                pageUrl = new URL(window.location.origin + this.element.dataset.url);
+            }
+            if ('URLSearchParams' in window) {
+                var searchParams = new URLSearchParams(window.location.search);
+                var urlParams = new URLSearchParams(pageUrl.search);
+                searchParams.forEach((value, key, parent) => {
+                    urlParams.set(key, value);
+                });
+                if (urlParams.get("page") == "0") {
+                    urlParams.set("page", "1");
+                }
+                pageUrl.search = urlParams.toString();
+            } else {
+                pageUrl.search = window.location.search;
+            }
+
+            let url = pageUrl.pathname + pageUrl.search;
+            $(this.element).attr('data-url', url);
+            $(this.element).data('url', url);
+
         }
 
         if (!$(this.element).hasClass('refresh-only')) {

package/src/ts/core/HoodApi.ts

@@ -1,8 +1,8 @@
-import { Alerts } from "./Alerts";
-import { ColorPickers } from "./ColorPicker";
-import { Editors } from "./Editors";
+/// <reference types="google.maps" />
+
+import { Response, Validator } from "..";
+import { Alerts } from "./Alerts";
 import { Handlers } from "./Handlers";
-import { MediaModal } from "./Media";
 import { Uploader } from "./Uploader";
 
 declare global {
@@ -17,22 +17,104 @@ declare global {
     }
 }
 
-export class HoodApi implements Hood {
+/**
+ * Base class for extending a Hood CMS website, ensure you call HoodApi.initialise() to setup loaders and contact form defaults.
+ */
+export class HoodApi {
     alerts: Alerts = new Alerts();
-    uploader: Uploader = new Uploader();
     handlers: Handlers = new Handlers();
-    editors: Editors = new Editors();
-    colorPickers: ColorPickers = new ColorPickers();
-
-    private mediaModal: MediaModal = new MediaModal();
+    uploader: Uploader = new Uploader();
 
     constructor() {
-        // Global Handlers
+    }
+
+    // Initialise Hood CMS site defaults, can be overridden or individual setup items can be called instead of the initialise function. 
+    initialise() {
+        // Initialise loaders (default, adds loading to body tag)
         this.setupLoaders();
+
+        // Hook up default handlers.
+        this.handlers.initDefaultHandlers();
+
+        // Init hood contact forms. 
+        this.initContactForms();
     }
 
+    /**
+     * Default Hood CMS loaders, can be used however, this simply adds a "loading" class to the body tag on show/hide.
+     */
     setupLoaders(): void {
-        $('body').on('loader-show', function () { Alerts.success("Showing loader..."); })
-        $('body').on('loader-hide', function () { Alerts.error("Hiding loader..."); })
+        $('body').on('loader-show', function () { document.body.classList.add('loading') })
+        $('body').on('loader-hide', function () { document.body.classList.remove('loading') })
     }
-}
+
+    /**
+     * Default initialisation function for Google Maps, should be called as the callback from the Google Maps API script tag.
+     */
+    initGoogleMaps(tag: string = '.google-map') {
+
+        $(tag).each(function () {
+
+            var myLatLng = new google.maps.LatLng($(this).data('lat'), $(this).data('long'));
+
+            console.log('Loading map at: ' + $(this).data('lat') + ', ' + $(this).data('long'));
+
+            var map = new google.maps.Map(this, {
+                zoom: $(this).data('zoom') || 15,
+                center: myLatLng,
+                scrollwheel: false
+            });
+
+            var marker = new google.maps.Marker({
+                position: myLatLng,
+                map: map,
+                title: $(this).data('marker')
+            });
+
+            $(window).on('resize', function () {
+                google.maps.event.trigger(map, 'resize');
+            });
+            google.maps.event.trigger(map, 'resize');
+
+        });
+
+    }
+    
+    /**
+     * Initialisation function for contact forms on the site, will add validator, and submit/functionality to any forms matching the given tag selector string.
+     */
+    initContactForms(tag: string = '.contact-form') {
+
+        let $form = $(tag);
+
+        $form.find('.thank-you').hide();
+        $form.find('.form-content').show();
+
+        let form: HTMLFormElement = $(tag)[0] as HTMLFormElement;
+        new Validator(form, {
+            onComplete: function (this: HoodApi, response: Response) {
+                if (response.success) {
+
+                    if ($form.attr('data-redirect'))
+                        window.location.href = $form.attr('data-redirect');
+
+                    if ($form.attr('data-alert-message'))
+                        Alerts.success($form.attr('data-alert-message'));
+
+                    $form.find('.form').hide();
+                    $form.find('.thank-you').show();
+                } else {
+                    if ($form.attr('data-alert-error'))
+                        Alerts.error($form.attr('data-alert-error'));
+                    else {
+                        console.error(response.errors);
+                        Alerts.error("There are errors on the form, please check your answers and try again.");
+                    }
+                }
+
+            }.bind(this)
+        });
+
+    }
+
+}

package/src/ts/core/Validator.ts

@@ -29,7 +29,7 @@ export interface ValidatorOptions {
 export class Validator {
     element: HTMLFormElement;
     options: ValidatorOptions = {
-        errorAlert: 'There are errors, please check the form.',
+        errorAlert: 'There are errors on the form, please check your answers and try again.',
         useAjax: true
     };
 

package/src/ts/index.ts

@@ -5,7 +5,6 @@ export * from './models/Property'
 export * from './models/Users'
 
 export * from './core/Alerts'
-export * from './core/BaseSite'
 export * from './core/ColorPicker'
 export * from './core/DataList'
 export * from './core/Editors'
@@ -24,3 +23,17 @@ export * from './core/Validator'
 export * from './extensions/jqueryExtensions'
 export * from './extensions/numberExtensions'
 export * from './extensions/stringExtensions'
+
+// Extendables for admin area
+export * from './admin/ContentController'
+export * from './admin/ContentTypeController'
+export * from './admin/HomeController'
+export * from './admin/LogsController'
+export * from './admin/MediaController'
+export * from './admin/PropertyController'
+export * from './admin/PropertyImporter'
+export * from './admin/ThemesController'
+export * from './admin/UsersController'
+
+// Extendables for app
+export * from './app/PropertyService'

package/temp.txt

@@ -0,0 +1 @@
+8^N2a43)Kd|.wdl,

package/dist/js/core/BaseSite.d.ts

@@ -1,6 +0,0 @@
-export declare class BaseSite {
-    constructor();
-    initialise(): void;
-    onLoad(): void;
-    onResize(): void;
-}

package/dist/js/core/BaseSite.js

@@ -1,14 +0,0 @@
-export class BaseSite {
-    constructor() {
-        // Initialise
-        this.initialise();
-        $(window).on('load', this.onLoad.bind(this));
-        $(window).on('resize', this.onResize.bind(this));
-    }
-    initialise() {
-    }
-    onLoad() {
-    }
-    onResize() {
-    }
-}

package/src/ts/core/BaseSite.ts

@@ -1,21 +0,0 @@
-export class BaseSite  {
-
-    constructor() {
-
-        // Initialise
-        this.initialise();
-
-        $(window).on('load', this.onLoad.bind(this));
-        $(window).on('resize', this.onResize.bind(this));
-
-    }
-
-    initialise() {
-    }
-
-    onLoad() {
-    }
-
-    onResize() {
-    }
-}