hoodcms 5.0.15 → 6.0.2

package/src/scss/core/_images.scss

@@ -1,9 +1,9 @@
 .hood-image,
 .img {
-    position: relative;
-    background-repeat: no-repeat;
+    position:            relative;
+    background-repeat:   no-repeat;
     background-position: center;
-    background-size: cover;
+    background-size:     cover;
 
     img {
         display: none !important;
@@ -11,48 +11,48 @@
 
     &.darkened {
         &::before {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            content: "";
+            position:         absolute;
+            top:              0;
+            right:            0;
+            bottom:           0;
+            left:             0;
+            width:            100%;
+            height:           100%;
+            content:          "";
             background-color: rgba(0, 0, 0, .5);
         }
     }
 
     &.lightened {
         &::before {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            content: "";
+            position:         absolute;
+            top:              0;
+            right:            0;
+            bottom:           0;
+            left:             0;
+            width:            100%;
+            height:           100%;
+            content:          "";
             background-color: rgba(255, 255, 255, .5);
         }
     }
 
     &.loading {
         i {
-            position: absolute;
-            top: 50%;
-            @include transform(translateY(-50%));
+            position:  absolute;
+            top:       50%;
+            transform: translateY(-50%);
         }
 
         &::before {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            content: "";
+            position:         absolute;
+            top:              0;
+            right:            0;
+            bottom:           0;
+            left:             0;
+            width:            100%;
+            height:           100%;
+            content:          "";
             background-color: rgba(255, 255, 255, .5);
         }
     }
@@ -66,38 +66,38 @@
     }
 
     &.img-xxs {
-        width: 1.5rem;
+        width:  1.5rem;
         height: 1.5rem;
     }
 
     &.img-xs {
-        width: 3.25rem;
+        width:  3.25rem;
         height: 3.25rem;
     }
 
     &.img-sm {
-        width: 5rem;
+        width:  5rem;
         height: 5rem;
     }
 
     &.img-md {
-        width: 10rem;
+        width:  10rem;
         height: 10rem;
     }
 
     &.img-lg {
-        width: 20rem;
+        width:  20rem;
         height: 20rem;
     }
 
     &.img-xl {
-        width: 40rem;
+        width:  40rem;
         height: 40rem;
     }
 
     &.img-full {
         display: block;
-        width: 100%;
+        width:   100%;
     }
 
     &.img-4x3,
@@ -110,9 +110,9 @@
     &.img-wide,
     &.img-mobile-card {
         &::after {
-            display: block;
-            padding-top: 100%;
-            content: "";
+            display:         block;
+            padding-top:     100%;
+            content:         "";
             background-size: contain;
         }
     }
@@ -168,17 +168,17 @@
 }
 
 .hood-bg-image {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    background-size: cover;
+    position:            absolute;
+    top:                 0;
+    right:               0;
+    bottom:              0;
+    left:                0;
+    overflow:            hidden;
+    background-size:     cover;
     backface-visibility: hidden;
     backface-visibility: hidden;
 
     img {
         display: none !important;
     }
-}
+}

package/src/scss/login.scss

@@ -1,6 +1,7 @@
 @import "~bootstrap/scss/bootstrap";
 @import "core/_alerts.scss";
 @import "core/_forms.scss";
+@import "core/_images.scss";
 body {
     .login-container {
         flex-shrink: 0;

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

@@ -1,11 +1,10 @@
 /// <reference types="google.maps" />
 
-import { HoodApi } from "./core/HoodApi";
-import { PropertyController } from './app/PropertyController';
+import { HoodApi, PropertyService } from ".";
 
 export class App extends HoodApi {
-    property: PropertyController;
-    
+    property: PropertyService;
+
     constructor() {
         super();
 
@@ -13,7 +12,7 @@ export class App extends HoodApi {
         this.initialise();
 
         // Initialise the property controllers.
-        this.property = new PropertyController();
+        this.property = new PropertyService();
     }
 
 }

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/index.ts

@@ -23,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'