Refactored js file structure to be standard throughout app

Still work to be done but a good start in standardisation.

resources/assets/js/services/code.js

@@ -0,0 +1,233 @@
+require('codemirror/mode/css/css');
+require('codemirror/mode/clike/clike');
+require('codemirror/mode/diff/diff');
+require('codemirror/mode/go/go');
+require('codemirror/mode/htmlmixed/htmlmixed');
+require('codemirror/mode/javascript/javascript');
+require('codemirror/mode/markdown/markdown');
+require('codemirror/mode/nginx/nginx');
+require('codemirror/mode/php/php');
+require('codemirror/mode/powershell/powershell');
+require('codemirror/mode/python/python');
+require('codemirror/mode/ruby/ruby');
+require('codemirror/mode/shell/shell');
+require('codemirror/mode/sql/sql');
+require('codemirror/mode/toml/toml');
+require('codemirror/mode/xml/xml');
+require('codemirror/mode/yaml/yaml');
+
+const CodeMirror = require('codemirror');
+
+const modeMap = {
+    css: 'css',
+    c: 'clike',
+    java: 'clike',
+    scala: 'clike',
+    kotlin: 'clike',
+    'c++': 'clike',
+    'c#': 'clike',
+    csharp: 'clike',
+    diff: 'diff',
+    go: 'go',
+    html: 'htmlmixed',
+    javascript: 'javascript',
+    json: {name: 'javascript', json: true},
+    js: 'javascript',
+    php: 'php',
+    md: 'markdown',
+    mdown: 'markdown',
+    markdown: 'markdown',
+    nginx: 'nginx',
+    powershell: 'powershell',
+    py: 'python',
+    python: 'python',
+    ruby: 'ruby',
+    rb: 'ruby',
+    shell: 'shell',
+    sh: 'shell',
+    bash: 'shell',
+    toml: 'toml',
+    sql: 'sql',
+    xml: 'xml',
+    yaml: 'yaml',
+    yml: 'yaml',
+};
+
+/**
+ * Highlight pre elements on a page
+ */
+function highlight() {
+    let codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
+    for (let i = 0; i < codeBlocks.length; i++) {
+        highlightElem(codeBlocks[i]);
+    }
+}
+
+/**
+ * Add code highlighting to a single element.
+ * @param {HTMLElement} elem
+ */
+function highlightElem(elem) {
+    let innerCodeElem = elem.querySelector('code[class^=language-]');
+    let mode = '';
+    if (innerCodeElem !== null) {
+        let langName = innerCodeElem.className.replace('language-', '');
+        mode = getMode(langName);
+    }
+    elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
+    let content = elem.textContent.trim();
+
+    CodeMirror(function(elt) {
+        elem.parentNode.replaceChild(elt, elem);
+    }, {
+        value: content,
+        mode:  mode,
+        lineNumbers: true,
+        theme: getTheme(),
+        readOnly: true
+    });
+}
+
+/**
+ * Search for a codemirror code based off a user suggestion
+ * @param suggestion
+ * @returns {string}
+ */
+function getMode(suggestion) {
+    suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
+    return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
+}
+
+/**
+ * Ge the theme to use for CodeMirror instances.
+ * @returns {*|string}
+ */
+function getTheme() {
+    return window.codeTheme || 'base16-light';
+}
+
+/**
+ * Create a CodeMirror instance for showing inside the WYSIWYG editor.
+ *  Manages a textarea element to hold code content.
+ * @param {HTMLElement} elem
+ * @returns {{wrap: Element, editor: *}}
+ */
+function wysiwygView(elem) {
+    let doc = elem.ownerDocument;
+    let codeElem = elem.querySelector('code');
+
+    let lang = (elem.className || '').replace('language-', '');
+    if (lang === '' && codeElem) {
+        lang = (codeElem.className || '').replace('language-', '')
+    }
+
+    elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
+    let content = elem.textContent;
+    let newWrap = doc.createElement('div');
+    let newTextArea = doc.createElement('textarea');
+
+    newWrap.className = 'CodeMirrorContainer';
+    newWrap.setAttribute('data-lang', lang);
+    newTextArea.style.display = 'none';
+    elem.parentNode.replaceChild(newWrap, elem);
+
+    newWrap.appendChild(newTextArea);
+    newWrap.contentEditable = false;
+    newTextArea.textContent = content;
+
+    let cm = CodeMirror(function(elt) {
+        newWrap.appendChild(elt);
+    }, {
+        value: content,
+        mode:  getMode(lang),
+        lineNumbers: true,
+        theme: getTheme(),
+        readOnly: true
+    });
+    setTimeout(() => {
+        cm.refresh();
+    }, 300);
+    return {wrap: newWrap, editor: cm};
+}
+
+/**
+ * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
+ * @param {HTMLElement} elem
+ * @param {String} modeSuggestion
+ * @returns {*}
+ */
+function popupEditor(elem, modeSuggestion) {
+    let content = elem.textContent;
+
+    return CodeMirror(function(elt) {
+        elem.parentNode.insertBefore(elt, elem);
+        elem.style.display = 'none';
+    }, {
+        value: content,
+        mode:  getMode(modeSuggestion),
+        lineNumbers: true,
+        theme: getTheme(),
+        lineWrapping: true
+    });
+}
+
+/**
+ * Set the mode of a codemirror instance.
+ * @param cmInstance
+ * @param modeSuggestion
+ */
+function setMode(cmInstance, modeSuggestion) {
+      cmInstance.setOption('mode', getMode(modeSuggestion));
+}
+
+/**
+ * Set the content of a cm instance.
+ * @param cmInstance
+ * @param codeContent
+ */
+function setContent(cmInstance, codeContent) {
+    cmInstance.setValue(codeContent);
+    setTimeout(() => {
+        cmInstance.refresh();
+    }, 10);
+}
+
+/**
+ * Get a CodeMirror instace to use for the markdown editor.
+ * @param {HTMLElement} elem
+ * @returns {*}
+ */
+function markdownEditor(elem) {
+    let content = elem.textContent;
+
+    return CodeMirror(function (elt) {
+        elem.parentNode.insertBefore(elt, elem);
+        elem.style.display = 'none';
+    }, {
+        value: content,
+        mode: "markdown",
+        lineNumbers: true,
+        theme: getTheme(),
+        lineWrapping: true
+    });
+}
+
+/**
+ * Get the 'meta' key dependant on the user's system.
+ * @returns {string}
+ */
+function getMetaKey() {
+    let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
+    return mac ? "Cmd" : "Ctrl";
+}
+
+module.exports = {
+    highlight: highlight,
+    highlightElem: highlightElem,
+    wysiwygView: wysiwygView,
+    popupEditor: popupEditor,
+    setMode: setMode,
+    setContent: setContent,
+    markdownEditor: markdownEditor,
+    getMetaKey: getMetaKey,
+};

resources/assets/js/services/dom-polyfills.js

@@ -0,0 +1,22 @@
+/**
+ * Polyfills for DOM API's
+ */
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Browser_compatibility
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function (s) {
+        var el = this;
+        var ancestor = this;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (ancestor.matches(s)) return ancestor;
+            ancestor = ancestor.parentElement;
+        } while (ancestor !== null);
+        return null;
+    };
+}

resources/assets/js/services/drawio.js

@@ -0,0 +1,69 @@
+
+const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
+let iFrame = null;
+
+let onInit, onSave;
+
+/**
+ * Show the draw.io editor.
+ * @param onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param onSaveCallback - Is called with the drawing data on save.
+ */
+function show(onInitCallback, onSaveCallback) {
+    onInit = onInitCallback;
+    onSave = onSaveCallback;
+
+    iFrame = document.createElement('iframe');
+    iFrame.setAttribute('frameborder', '0');
+    window.addEventListener('message', drawReceive);
+    iFrame.setAttribute('src', drawIoUrl);
+    iFrame.setAttribute('class', 'fullscreen');
+    iFrame.style.backgroundColor = '#FFFFFF';
+    document.body.appendChild(iFrame);
+}
+
+function close() {
+    drawEventClose();
+}
+
+function drawReceive(event) {
+    if (!event.data || event.data.length < 1) return;
+    let message = JSON.parse(event.data);
+    if (message.event === 'init') {
+        drawEventInit();
+    } else if (message.event === 'exit') {
+        drawEventClose();
+    } else if (message.event === 'save') {
+        drawEventSave(message);
+    } else if (message.event === 'export') {
+        drawEventExport(message);
+    }
+}
+
+function drawEventExport(message) {
+    if (onSave) {
+        onSave(message.data);
+    }
+}
+
+function drawEventSave(message) {
+    drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
+}
+
+function drawEventInit() {
+    if (!onInit) return;
+    onInit().then(xml => {
+        drawPostMessage({action: 'load', autosave: 1, xml: xml});
+    });
+}
+
+function drawEventClose() {
+    window.removeEventListener('message', drawReceive);
+    if (iFrame) document.body.removeChild(iFrame);
+}
+
+function drawPostMessage(data) {
+    iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
+}
+
+module.exports = {show, close};

resources/assets/js/services/events.js

@@ -0,0 +1,28 @@
+/**
+ * Simple global events manager
+ */
+class Events {
+    constructor() {
+        this.listeners = {};
+        this.stack = [];
+    }
+
+    emit(eventName, eventData) {
+        this.stack.push({name: eventName, data: eventData});
+        if (typeof this.listeners[eventName] === 'undefined') return this;
+        let eventsToStart = this.listeners[eventName];
+        for (let i = 0; i < eventsToStart.length; i++) {
+            let event = eventsToStart[i];
+            event(eventData);
+        }
+        return this;
+    }
+
+    listen(eventName, callback) {
+        if (typeof this.listeners[eventName] === 'undefined') this.listeners[eventName] = [];
+        this.listeners[eventName].push(callback);
+        return this;
+    }
+}
+
+module.exports = Events;

resources/assets/js/services/global-ui.js

@@ -0,0 +1,58 @@
+// Global jQuery Config & Extensions
+
+import jQuery from "jquery"
+window.jQuery = window.$ = jQuery;
+
+/**
+ * Scroll the view to a specific element.
+ * @param {HTMLElement} element
+ */
+window.scrollToElement = function(element) {
+    if (!element) return;
+    let offset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+    let top = element.getBoundingClientRect().top + offset;
+    $('html, body').animate({
+        scrollTop: top - 60 // Adjust to change final scroll position top margin
+    }, 300);
+};
+
+/**
+ * Scroll and highlight an element.
+ * @param {HTMLElement} element
+ */
+window.scrollAndHighlight = function(element) {
+    if (!element) return;
+    window.scrollToElement(element);
+    let color = document.getElementById('custom-styles').getAttribute('data-color-light');
+    let initColor = window.getComputedStyle(element).getPropertyValue('background-color');
+    element.style.backgroundColor = color;
+    setTimeout(() => {
+        element.classList.add('selectFade');
+        element.style.backgroundColor = initColor;
+    }, 10);
+    setTimeout(() => {
+        element.classList.remove('selectFade');
+        element.style.backgroundColor = '';
+    }, 3000);
+};
+
+// Smooth scrolling
+jQuery.fn.smoothScrollTo = function () {
+    if (this.length === 0) return;
+    window.scrollToElement(this[0]);
+    return this;
+};
+
+// Making contains text expression not worry about casing
+jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
+    return function (elem) {
+        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+    };
+});
+
+// Detect IE for css
+if(navigator.userAgent.indexOf('MSIE')!==-1
+    || navigator.appVersion.indexOf('Trident/') > 0
+    || navigator.userAgent.indexOf('Safari') !== -1){
+    document.body.classList.add('flexbox-support');
+}

resources/assets/js/services/http.js

@@ -0,0 +1,21 @@
+import axios from "axios"
+
+function instance() {
+    let axiosInstance = axios.create({
+        headers: {
+            'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
+            'baseURL': window.baseUrl('')
+        }
+    });
+    axiosInstance.interceptors.request.use(resp => {
+        return resp;
+    }, err => {
+        if (typeof err.response === "undefined" || typeof err.response.data === "undefined") return Promise.reject(err);
+        if (typeof err.response.data.error !== "undefined") window.$events.emit('error', err.response.data.error);
+        if (typeof err.response.data.message !== "undefined") window.$events.emit('error', err.response.data.message);
+    });
+    return axiosInstance;
+}
+
+
+export default instance;

resources/assets/js/services/translations.js

@@ -0,0 +1,110 @@
+/**
+ *  Translation Manager
+ *  Handles the JavaScript side of translating strings
+ *  in a way which fits with Laravel.
+ */
+class Translator {
+
+    /**
+     * Create an instance, Passing in the required translations
+     * @param translations
+     */
+    constructor(translations) {
+        this.store = translations;
+    }
+
+    /**
+     * Get a translation, Same format as laravel's 'trans' helper
+     * @param key
+     * @param replacements
+     * @returns {*}
+     */
+    get(key, replacements) {
+        let text = this.getTransText(key);
+        return this.performReplacements(text, replacements);
+    }
+
+    /**
+     * Get pluralised text, Dependant on the given count.
+     * Same format at laravel's 'trans_choice' helper.
+     * @param key
+     * @param count
+     * @param replacements
+     * @returns {*}
+     */
+    getPlural(key, count, replacements) {
+        let text = this.getTransText(key);
+        let splitText = text.split('|');
+        let result = null;
+        let exactCountRegex = /^{([0-9]+)}/;
+        let rangeRegex = /^\[([0-9]+),([0-9*]+)]/;
+
+        for (let i = 0, len = splitText.length; i < len; i++) {
+            let t = splitText[i];
+
+            // Parse exact matches
+            let exactMatches = t.match(exactCountRegex);
+            if (exactMatches !== null && Number(exactMatches[1]) === count) {
+                result = t.replace(exactCountRegex, '').trim();
+                break;
+            }
+
+            // Parse range matches
+            let rangeMatches = t.match(rangeRegex);
+            if (rangeMatches !== null) {
+                let rangeStart = Number(rangeMatches[1]);
+                if (rangeStart <= count && (rangeMatches[2] === '*' || Number(rangeMatches[2]) >= count)) {
+                    result = t.replace(rangeRegex, '').trim();
+                    break;
+                }
+            }
+        }
+
+        if (result === null && splitText.length > 1) {
+            result = (count === 1) ? splitText[0] : splitText[1];
+        }
+
+        if (result === null) result = splitText[0];
+        return this.performReplacements(result, replacements);
+    }
+
+    /**
+     * Fetched translation text from the store for the given key.
+     * @param key
+     * @returns {String|Object}
+     */
+    getTransText(key) {
+        let splitKey = key.split('.');
+        let value = splitKey.reduce((a, b) => {
+            return a !== undefined ? a[b] : a;
+        }, this.store);
+
+        if (value === undefined) {
+            console.log(`Translation with key "${key}" does not exist`);
+            value = key;
+        }
+
+        return value;
+    }
+
+    /**
+     * Perform replacements on a string.
+     * @param {String} string
+     * @param {Object} replacements
+     * @returns {*}
+     */
+    performReplacements(string, replacements) {
+        if (!replacements) return string;
+        let replaceMatches = string.match(/:([\S]+)/g);
+        if (replaceMatches === null) return string;
+        replaceMatches.forEach(match => {
+            let key = match.substring(1);
+            if (typeof replacements[key] === 'undefined') return;
+            string = string.replace(match, replacements[key]);
+        });
+        return string;
+    }
+
+}
+
+module.exports = Translator;