hoodcms 5.0.7 → 5.0.11

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

@@ -0,0 +1,22 @@
+import { SweetAlertOptions, SweetAlertResult } from 'sweetalert2';
+import 'jquery-toast-plugin';
+export declare class Alerts {
+    static log(message: any, type?: 'message' | 'error' | 'warning' | 'info'): void;
+    static error(message: string, title?: string, hideAfter?: number): void;
+    static warning(message: string, title?: string, hideAfter?: number): void;
+    static message(message: string, title?: string, hideAfter?: number): void;
+    static success(message: string, title?: string, hideAfter?: number): void;
+    static alert(message: string, title?: string, icon?: string, hideAfter?: number): void;
+    static sweetAlert(options: SweetAlertOptions, callback: (result: SweetAlertResult<any>) => void): void;
+    static confirm(options: SweetAlertOptions, callback: (result: SweetAlertResult<any>) => void): void;
+    static prompt(options: SweetAlertOptions, callback: (result: SweetAlertResult<any>) => void): void;
+    log(message: string, type?: 'message' | 'error' | 'warning' | 'info'): void;
+    error(message: string, title?: string, hideAfter?: number): void;
+    warning(message: string, title?: string, hideAfter?: number): void;
+    message(message: string, title?: string, hideAfter?: number): void;
+    success(message: string, title?: string, hideAfter?: number): void;
+    alert(message: string, title?: string, icon?: string, hideAfter?: number): void;
+    sweetAlert(options: SweetAlertOptions, callback: (result: SweetAlertResult<any>) => void): void;
+    confirm(options: SweetAlertOptions, callback: (result: SweetAlertResult<any>) => void): void;
+    prompt(options: SweetAlertOptions, callback: (result: SweetAlertResult<any>) => void): void;
+}

package/dist/js/core/Alerts.js

@@ -0,0 +1,151 @@
+import Swal from 'sweetalert2';
+import 'jquery-toast-plugin';
+const BootstrapSwal = Swal.mixin({
+    customClass: {
+        confirmButton: 'btn btn-success m-1 px-3',
+        cancelButton: 'btn btn-danger m-1 px-3'
+    },
+    buttonsStyling: false
+});
+export class Alerts {
+    static log(message, type = 'message') {
+        if (!document.body.classList.contains('dev-mode')) {
+            return;
+        }
+        switch (type) {
+            case 'error':
+                console.error(message);
+                break;
+            case 'message':
+                console.log(message);
+                break;
+            case 'warning':
+                console.warn(message);
+                break;
+            case 'info':
+                console.info(message);
+                break;
+        }
+    }
+    static error(message, title = null, hideAfter = null) {
+        $.toast({
+            heading: title,
+            text: message,
+            icon: 'error',
+            position: 'bottom-left',
+            loader: false,
+            bgColor: '#d0100b',
+            textColor: 'white',
+            hideAfter: hideAfter
+        });
+    }
+    static warning(message, title = null, hideAfter = null) {
+        $.toast({
+            heading: title,
+            text: message,
+            icon: 'error',
+            position: 'bottom-left',
+            loader: false,
+            bgColor: '#ef9007',
+            textColor: 'white',
+            hideAfter: hideAfter
+        });
+    }
+    static message(message, title = null, hideAfter = null) {
+        $.toast({
+            heading: title,
+            text: message,
+            icon: 'error',
+            position: 'bottom-left',
+            loader: false,
+            bgColor: '#222222',
+            textColor: 'white',
+            hideAfter: hideAfter
+        });
+    }
+    static success(message, title = null, hideAfter = null) {
+        $.toast({
+            heading: title,
+            text: message,
+            icon: 'error',
+            position: 'bottom-left',
+            loader: false,
+            bgColor: '#28a745',
+            textColor: 'white',
+            hideAfter: hideAfter
+        });
+    }
+    static alert(message, title = null, icon = 'info', hideAfter = 10000) {
+        switch (icon) {
+            case 'error':
+                Alerts.error(message, title, hideAfter);
+                break;
+            case 'warning':
+                Alerts.warning(message, title, hideAfter);
+                break;
+            case 'info':
+                Alerts.message(message, title, hideAfter);
+                break;
+            case 'success':
+                Alerts.success(message, title, hideAfter);
+                break;
+        }
+    }
+    static sweetAlert(options, callback) {
+        BootstrapSwal.fire(options).then(function (result) {
+            callback(result);
+        });
+    }
+    static confirm(options, callback) {
+        let baseOptions = {
+            showCancelButton: true,
+            footer: null,
+            title: 'Are you sure?',
+            html: 'Are you sure you want to do this?',
+            confirmButtonText: 'Ok',
+            cancelButtonText: 'Cancel'
+        };
+        Alerts.sweetAlert(Object.assign(Object.assign({}, baseOptions), options), callback);
+    }
+    static prompt(options, callback) {
+        let baseOptions = {
+            input: 'text',
+            inputAttributes: {
+                autocapitalize: 'off'
+            },
+            showCancelButton: true,
+            icon: 'info',
+            footer: '<span class="text-warning"><i class="fa fa-exclamation-triangle"></i> This cannot be undone.</span>',
+            confirmButtonText: 'Ok',
+            cancelButtonText: 'Cancel'
+        };
+        Alerts.sweetAlert(Object.assign(Object.assign({}, baseOptions), options), callback);
+    }
+    log(message, type = 'message') {
+        Alerts.log(message, type);
+    }
+    error(message, title = null, hideAfter = null) {
+        Alerts.error(message, title, hideAfter);
+    }
+    warning(message, title = null, hideAfter = null) {
+        Alerts.warning(message, title, hideAfter);
+    }
+    message(message, title = null, hideAfter = null) {
+        Alerts.message(message, title, hideAfter);
+    }
+    success(message, title = null, hideAfter = null) {
+        Alerts.success(message, title, hideAfter);
+    }
+    alert(message, title = null, icon = 'info', hideAfter = 10000) {
+        Alerts.alert(message, message, icon, hideAfter);
+    }
+    sweetAlert(options, callback) {
+        Alerts.sweetAlert(options, callback);
+    }
+    confirm(options, callback) {
+        Alerts.confirm(options, callback);
+    }
+    prompt(options, callback) {
+        Alerts.prompt(options, callback);
+    }
+}

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

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

package/dist/js/core/BaseSite.js

@@ -0,0 +1,14 @@
+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/dist/js/core/ColorPicker.d.ts

@@ -0,0 +1,5 @@
+import '@simonwep/pickr';
+export declare class ColorPickers {
+    constructor();
+    loadColorPickers(tag?: string): void;
+}

package/dist/js/core/ColorPicker.js

@@ -0,0 +1,71 @@
+import Pickr from '@simonwep/pickr';
+import '@simonwep/pickr';
+export class ColorPickers {
+    constructor() {
+    }
+    loadColorPickers(tag = '.color-picker') {
+        let updateColorFieldValue = function (color, eventSource, instance) {
+            let elemId = $(instance._root.button).parent().data('target');
+            $(instance._root.button).parent().css({ 'background-color': color.toHEXA().toString() });
+            let colorHex = instance.getColor().toHEXA();
+            var result = "";
+            for (let i = colorHex.length - 1; i >= 0; i--) {
+                result = colorHex[i] + result;
+            }
+            $(elemId).val('#' + result);
+            $(elemId).change();
+        };
+        var pickrs = [];
+        // Simple example, see optional options for more configuration.
+        $(tag).each(function (index, elem) {
+            let lockOpacity = true;
+            if ($(this).data('opacity') == 'true') {
+                lockOpacity = false;
+            }
+            let pickr = Pickr.create({
+                el: elem.children[0],
+                appClass: 'custom-class',
+                theme: 'monolith',
+                useAsButton: true,
+                default: $(this).data('default') || 'none',
+                lockOpacity: lockOpacity,
+                defaultRepresentation: 'HEXA',
+                position: 'bottom-end',
+                components: {
+                    opacity: true,
+                    hue: true,
+                    interaction: {
+                        hex: false,
+                        rgba: false,
+                        hsva: false,
+                        input: true,
+                        clear: true
+                    }
+                }
+            })
+                .on('init', function (instance) {
+                let elemId = $(instance._root.button).parent().data('target');
+                let value = $(elemId).val();
+                $(instance._root.button).parent().on('click', $.proxy(function () {
+                    this.show();
+                }, instance));
+                $(elemId).on('click', $.proxy(function () {
+                    this.show();
+                }, instance));
+                if (value) {
+                    instance.setColor(value);
+                    updateColorFieldValue(instance.getColor(), null, instance);
+                }
+            })
+                .on('clear', function (instance) {
+                let elemId = $(instance._root.button).parent().data('target');
+                instance.setColor('transparent');
+                updateColorFieldValue(instance.getColor(), null, instance);
+                $(elemId).val('');
+                $(elemId).change();
+            })
+                .on('change', updateColorFieldValue);
+            pickrs.push(pickr);
+        });
+    }
+}

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

@@ -0,0 +1,35 @@
+declare global {
+    interface HTMLElement {
+        hoodDataList: DataList;
+    }
+}
+export interface DataListOptions {
+    /**
+     * Called before the data is fetched.
+     */
+    onLoad?: (sender?: HTMLElement) => void;
+    /**
+     * Called before the fetched HTML is rendered to the list. Must return the data back to datalist to render.
+     */
+    onRender?: (html: string, sender?: HTMLElement) => string;
+    /**
+     * Called when loading and rendering is complete.
+     */
+    onComplete?: (html: string, sender?: HTMLElement) => void;
+    /**
+     * Called when an error occurs.
+     */
+    onError?: (jqXHR: any, textStatus: any, errorThrown: any) => void;
+}
+/**
+  * Attach a data list feed to an HTML element. The element must have a data-url attribute to connect to a feed.
+  */
+export declare class DataList {
+    element: HTMLElement;
+    options: DataListOptions;
+    /**
+      * @param element The datalist element. The element must have a data-url attribute to connect to a feed.
+      */
+    constructor(element: HTMLElement, options: DataListOptions);
+    reload(this: DataList, url?: URL): void;
+}

package/dist/js/core/DataList.js

@@ -0,0 +1,56 @@
+import { Alerts } from "./Alerts";
+import { Inline } from "./Inline";
+/**
+  * Attach a data list feed to an HTML element. The element must have a data-url attribute to connect to a feed.
+  */
+export class DataList {
+    /**
+      * @param element The datalist element. The element must have a data-url attribute to connect to a feed.
+      */
+    constructor(element, options) {
+        this.element = element;
+        this.element.hoodDataList = this;
+        if (typeof (element) == 'undefined' || element == null) {
+            Alerts.log('Could not DataList to element, element does not exist.', 'error');
+            return;
+        }
+        this.options = Object.assign(Object.assign({}, 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);
+        }
+        if (!$(this.element).hasClass('refresh-only')) {
+            var listUrl = document.createElement('a');
+            listUrl.href = $(this.element).data('url');
+            this.reload(new URL(listUrl.href));
+        }
+        $(this.element).on('click', '.pagination a, a.hood-inline-list-target', function (e) {
+            e.preventDefault();
+            var url = document.createElement('a');
+            url.href = e.currentTarget.href;
+            var listUrl = document.createElement('a');
+            listUrl.href = $(this.element).data('url');
+            listUrl.search = url.search;
+            this.reload(new URL(listUrl.href));
+        }.bind(this));
+        $('body').on('submit', `form.inline[data-target="#${this.element.id}"]`, function (e) {
+            e.preventDefault();
+            let $form = $(e.currentTarget);
+            var listUrl = document.createElement('a');
+            listUrl.href = $(this.element).data('url');
+            listUrl.search = "?" + $form.serialize();
+            this.reload(new URL(listUrl.href));
+        }.bind(this));
+    }
+    reload(url = null) {
+        if (url) {
+            if (history.pushState && $(this.element).hasClass('query')) {
+                let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + (url.href.contains('?') ? "?" + url.href.substring(url.href.indexOf('?') + 1) : '');
+                window.history.pushState({ path: newurl }, '', newurl);
+            }
+            $(this.element).data('url', url);
+        }
+        Inline.load(this.element, Object.assign({}, this.options));
+    }
+}

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

@@ -0,0 +1,16 @@
+import { MediaService } from './Media';
+import { ModalController } from './Modal';
+export declare interface EditorOptions {
+    linkClasses?: any;
+    imageClasses?: any;
+}
+export declare class Editors {
+    options: EditorOptions;
+    constructor(options?: EditorOptions);
+    richTextEditors(): void;
+    mediaModal: ModalController;
+    list: HTMLElement;
+    service: MediaService;
+    currentEditor: JQuery<HTMLElement>;
+    setupCommands(editor: any): void;
+}

package/dist/js/core/Editors.js

@@ -0,0 +1,137 @@
+import tinymce from 'tinymce/tinymce';
+import { MediaService } from './Media';
+import { ModalController } from './Modal';
+export class Editors {
+    constructor(options) {
+        this.options = {
+            linkClasses: [
+                { title: 'None', value: '' },
+                { title: 'Button link', value: 'btn btn-default' },
+                { title: 'Theme coloured button link', value: 'btn btn-primary' },
+                { title: 'Popup image/video', value: 'colorbox-iframe' },
+                { title: 'Button popup link', value: 'btn btn-default colorbox-iframe' },
+                { title: 'Theme coloured button popup link', value: 'btn btn-primary colorbox-iframe' },
+                { title: 'Large link', value: 'font-lg' },
+                { title: 'Large button link', value: 'btn btn-default btn-lg' },
+                { title: 'Large theme coloured button link', value: 'btn btn-primary btn-lg' },
+                { title: 'Large popup image/video', value: 'font-lg colorbox-iframe' },
+                { title: 'Large Button popup link', value: 'btn btn-default btn-lg colorbox-iframe' },
+                { title: 'Theme coloured button popup link', value: 'btn btn-primary btn-lg colorbox-iframe' }
+            ],
+            imageClasses: [
+                { title: 'None', value: '' },
+                { title: 'Full Width', value: 'user-image full' },
+                { title: 'Left Aligned', value: 'user-image left' },
+                { title: 'Centered', value: 'user-image center' },
+                { title: 'Right Aligned', value: 'user-image right' },
+                { title: 'Inline with text, top aligned', value: 'user-image inline top' },
+                { title: 'Inline with text, middle aligned', value: 'user-image inline' },
+                { title: 'Inline with text, bottom aligned', value: 'user-image inline bottom' },
+                { title: 'Pulled Left', value: 'user-image pull-left' },
+                { title: 'Pulled Right', value: 'user-image pull-right' },
+            ]
+        };
+        this.options = Object.assign(Object.assign({}, this.options), options);
+    }
+    richTextEditors() {
+        tinymce.init({
+            selector: '.tinymce-full',
+            height: 150,
+            menubar: false,
+            plugins: [
+                'advlist autolink lists link image charmap print preview anchor media',
+                'searchreplace visualblocks code fullscreen',
+                'insertdatetime media contextmenu paste code textcolor'
+            ],
+            toolbar: "fullscreen | styleselect forecolor backcolor | hoodimage link media image | bold italic | alignleft aligncenter alignright | bullist numlist | table | undo redo",
+            link_class_list: this.options.linkClasses,
+            image_class_list: this.options.imageClasses,
+            setup: this.setupCommands.bind(this),
+            image_dimensions: false,
+            content_css: [
+                '/dist/css/editor.css'
+            ],
+        });
+        tinymce.init({
+            selector: '.tinymce-simple',
+            height: 150,
+            plugins: [
+                'advlist autolink lists link image charmap print preview anchor media',
+                'searchreplace visualblocks code fullscreen',
+                'insertdatetime media contextmenu paste code'
+            ],
+            menubar: false,
+            toolbar: 'fullscreen | bold italic | bullist numlist | undo redo | link',
+            link_class_list: this.options.linkClasses,
+            image_class_list: this.options.imageClasses,
+            setup: this.setupCommands.bind(this),
+            image_dimensions: false
+        });
+        tinymce.init({
+            selector: '.tinymce-full-content',
+            height: 500,
+            menubar: false,
+            plugins: [
+                'advlist autolink lists link image charmap print preview anchor media',
+                'searchreplace visualblocks code fullscreen',
+                'insertdatetime media contextmenu paste code textcolor'
+            ],
+            toolbar: "fullscreen | styleselect forecolor backcolor | hoodimage link media image | bold italic | alignleft aligncenter alignright | bullist numlist | table | undo redo",
+            link_class_list: this.options.linkClasses,
+            image_class_list: this.options.imageClasses,
+            setup: this.setupCommands.bind(this),
+            image_dimensions: false
+        });
+        tinymce.init({
+            selector: '.tinymce-simple-content',
+            height: 500,
+            plugins: [
+                'advlist autolink lists link image charmap print preview anchor media',
+                'searchreplace visualblocks code fullscreen',
+                'insertdatetime media contextmenu paste code'
+            ],
+            menubar: false,
+            toolbar: 'fullscreen | bold italic | bullist numlist | undo redo | link',
+            link_class_list: this.options.linkClasses,
+            image_class_list: this.options.imageClasses,
+            image_dimensions: false
+        });
+    }
+    setupCommands(editor) {
+        this.currentEditor = $('#' + editor.id);
+        if (this.currentEditor.data('hoodMediaList')) {
+            editor.addButton('hoodimage', {
+                text: 'Insert image...',
+                icon: false,
+                onclick: function (e) {
+                    this.mediaModal = new ModalController({
+                        onComplete: function (sender) {
+                            this.list = document.getElementById('media-list');
+                            this.service = new MediaService(this.list, {
+                                action: 'insert',
+                                url: this.currentEditor.data('hoodMediaList'),
+                                targetEditor: editor,
+                                size: this.currentEditor.data('hoodMediaSize'),
+                                beforeAction: function (sender, mediaObject) {
+                                }.bind(this),
+                                onAction: function (sender, mediaObject) {
+                                    this.mediaModal.close();
+                                }.bind(this),
+                                onListLoad: (sender) => {
+                                },
+                                onListRender: (data) => {
+                                    return data;
+                                },
+                                onListComplete: (data) => {
+                                },
+                                onError: (jqXHR, textStatus, errorThrown) => {
+                                },
+                            });
+                        }.bind(this)
+                    });
+                    this.mediaModal.show(this.currentEditor.data('hoodMediaList'), e.currentTarget);
+                }.bind(this)
+            });
+        }
+    }
+}

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

@@ -0,0 +1,47 @@
+/// <reference types="jquery" />
+export declare class Handlers {
+    constructor();
+    /**
+     * Initialise all default Hood CMS handlers.
+     */
+    initDefaultHandlers(): void;
+    /**
+     * Sets values of any selects that have the value set in data-selected, useful for
+     */
+    initSelectValues(tag?: string): void;
+    initSelectValuesHandler(this: HTMLElement, index: number, element: HTMLElement): void;
+    /**
+     * Sets up any Hood Icon selector fields, requires the correct HTML setup.
+     */
+    iconSelector(tag?: string): void;
+    iconSelectorHandler(this: HTMLElement, index: number, element: HTMLElement): void;
+    /**
+     * Submits the form when input is changed, mark inputs with .submit-on-change class.
+     */
+    selectText(tag?: string): void;
+    selectTextHandler(this: HTMLInputElement): void;
+    /**
+     * Attaches handlers for default scrolling functions, scroll to top, scroll to target (with header.header offset calculated)
+     * and scroll to target direct (with no calculated offset).
+     */
+    scrollHandlers(tag?: string): void;
+    scrollTop(this: HTMLAnchorElement, e: JQuery.ClickEvent): boolean;
+    scrollTarget(this: HTMLAnchorElement, e: JQuery.ClickEvent): void;
+    scrollTargetDirect(this: HTMLAnchorElement): boolean;
+    /**
+    * Compiles any selected checkboxes with matching data-hood-csv-input tags,
+    * then saves the CSV list of the values to the input given in the tag.
+    */
+    checkboxToCsvInput(tag?: string): void;
+    checkboxToCsvInputHandler(this: HTMLInputElement, e: JQuery.ChangeEvent<HTMLElement>): void;
+    /**
+    * Submits the form when input is changed, mark inputs with .submit-on-change class.
+    */
+    submitOnChange(tag?: string): void;
+    submitOnChangeHandler(this: HTMLFormElement, e: JQuery.ChangeEvent): void;
+    /**
+    * Sets the value of the input [data-target] when clicked to the value in [data-value]
+    */
+    setValueOnClick(tag?: string): void;
+    setValueOnClickHandler(this: HTMLElement): void;
+}