ESLINT: Addressed remaining detected issues

resources/js/services/animations.js

@@ -5,6 +5,53 @@
  */
 const animateStylesCleanupMap = new WeakMap();
 
+/**
+ * Animate the css styles of an element using FLIP animation techniques.
+ * Styles must be an object where the keys are style properties, camelcase, and the values
+ * are an array of two items in the format [initialValue, finalValue]
+ * @param {Element} element
+ * @param {Object} styles
+ * @param {Number} animTime
+ * @param {Function} onComplete
+ */
+function animateStyles(element, styles, animTime = 400, onComplete = null) {
+    const styleNames = Object.keys(styles);
+    for (const style of styleNames) {
+        element.style[style] = styles[style][0];
+    }
+
+    const cleanup = () => {
+        for (const style of styleNames) {
+            element.style[style] = null;
+        }
+        element.style.transition = null;
+        element.removeEventListener('transitionend', cleanup);
+        animateStylesCleanupMap.delete(element);
+        if (onComplete) onComplete();
+    };
+
+    setTimeout(() => {
+        element.style.transition = `all ease-in-out ${animTime}ms`;
+        for (const style of styleNames) {
+            element.style[style] = styles[style][1];
+        }
+
+        element.addEventListener('transitionend', cleanup);
+        animateStylesCleanupMap.set(element, cleanup);
+    }, 15);
+}
+
+/**
+ * Run the active cleanup action for the given element.
+ * @param {Element} element
+ */
+function cleanupExistingElementAnimation(element) {
+    if (animateStylesCleanupMap.has(element)) {
+        const oldCleanup = animateStylesCleanupMap.get(element);
+        oldCleanup();
+    }
+}
+
 /**
  * Fade in the given element.
  * @param {Element} element
@@ -113,50 +160,3 @@ export function transitionHeight(element, animTime = 400) {
         animateStyles(element, animStyles, animTime);
     };
 }
-
-/**
- * Animate the css styles of an element using FLIP animation techniques.
- * Styles must be an object where the keys are style properties, camelcase, and the values
- * are an array of two items in the format [initialValue, finalValue]
- * @param {Element} element
- * @param {Object} styles
- * @param {Number} animTime
- * @param {Function} onComplete
- */
-function animateStyles(element, styles, animTime = 400, onComplete = null) {
-    const styleNames = Object.keys(styles);
-    for (const style of styleNames) {
-        element.style[style] = styles[style][0];
-    }
-
-    const cleanup = () => {
-        for (const style of styleNames) {
-            element.style[style] = null;
-        }
-        element.style.transition = null;
-        element.removeEventListener('transitionend', cleanup);
-        animateStylesCleanupMap.delete(element);
-        if (onComplete) onComplete();
-    };
-
-    setTimeout(() => {
-        element.style.transition = `all ease-in-out ${animTime}ms`;
-        for (const style of styleNames) {
-            element.style[style] = styles[style][1];
-        }
-
-        element.addEventListener('transitionend', cleanup);
-        animateStylesCleanupMap.set(element, cleanup);
-    }, 15);
-}
-
-/**
- * Run the active cleanup action for the given element.
- * @param {Element} element
- */
-function cleanupExistingElementAnimation(element) {
-    if (animateStylesCleanupMap.has(element)) {
-        const oldCleanup = animateStylesCleanupMap.get(element);
-        oldCleanup();
-    }
-}

resources/js/services/components.js

@@ -19,44 +19,6 @@ const componentModelMap = {};
  */
 const elementComponentMap = new WeakMap();
 
-/**
- * Initialize a component instance on the given dom element.
- * @param {String} name
- * @param {Element} element
- */
-function initComponent(name, element) {
-    /** @type {Function<Component>|undefined} * */
-    const componentModel = componentModelMap[name];
-    if (componentModel === undefined) return;
-
-    // Create our component instance
-    /** @type {Component} * */
-    let instance;
-    try {
-        instance = new componentModel();
-        instance.$name = name;
-        instance.$el = element;
-        const allRefs = parseRefs(name, element);
-        instance.$refs = allRefs.refs;
-        instance.$manyRefs = allRefs.manyRefs;
-        instance.$opts = parseOpts(name, element);
-        instance.setup();
-    } catch (e) {
-        console.error('Failed to create component', e, name, element);
-    }
-
-    // Add to global listing
-    if (typeof components[name] === 'undefined') {
-        components[name] = [];
-    }
-    components[name].push(instance);
-
-    // Add to element mapping
-    const elComponents = elementComponentMap.get(element) || {};
-    elComponents[name] = instance;
-    elementComponentMap.set(element, elComponents);
-}
-
 /**
  * Parse out the element references within the given element
  * for the given component name.
@@ -93,13 +55,13 @@ function parseRefs(name, element) {
 
 /**
  * Parse out the element component options.
- * @param {String} name
+ * @param {String} componentName
  * @param {Element} element
  * @return {Object<String, String>}
  */
-function parseOpts(name, element) {
+function parseOpts(componentName, element) {
     const opts = {};
-    const prefix = `option:${name}:`;
+    const prefix = `option:${componentName}:`;
     for (const {name, value} of element.attributes) {
         if (name.startsWith(prefix)) {
             const optName = name.replace(prefix, '');
@@ -109,6 +71,44 @@ function parseOpts(name, element) {
     return opts;
 }
 
+/**
+ * Initialize a component instance on the given dom element.
+ * @param {String} name
+ * @param {Element} element
+ */
+function initComponent(name, element) {
+    /** @type {Function<Component>|undefined} * */
+    const ComponentModel = componentModelMap[name];
+    if (ComponentModel === undefined) return;
+
+    // Create our component instance
+    /** @type {Component} * */
+    let instance;
+    try {
+        instance = new ComponentModel();
+        instance.$name = name;
+        instance.$el = element;
+        const allRefs = parseRefs(name, element);
+        instance.$refs = allRefs.refs;
+        instance.$manyRefs = allRefs.manyRefs;
+        instance.$opts = parseOpts(name, element);
+        instance.setup();
+    } catch (e) {
+        console.error('Failed to create component', e, name, element);
+    }
+
+    // Add to global listing
+    if (typeof components[name] === 'undefined') {
+        components[name] = [];
+    }
+    components[name].push(instance);
+
+    // Add to element mapping
+    const elComponents = elementComponentMap.get(element) || {};
+    elComponents[name] = instance;
+    elementComponentMap.set(element, elComponents);
+}
+
 /**
  * Initialize all components found within the given element.
  * @param {Element|Document} parentElement

resources/js/services/drawio.js

@@ -3,50 +3,8 @@ let lastApprovedOrigin;
 let onInit; let
     onSave;
 
-/**
- * Show the draw.io editor.
- * @param {String} drawioUrl
- * @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
- * @param {Function} onSaveCallback - Is called with the drawing data on save.
- */
-function show(drawioUrl, 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);
-    lastApprovedOrigin = (new URL(drawioUrl)).origin;
-}
-
-function close() {
-    drawEventClose();
-}
-
-/**
- * Receive and handle a message event from the draw.io window.
- * @param {MessageEvent} event
- */
-function drawReceive(event) {
-    if (!event.data || event.data.length < 1) return;
-    if (event.origin !== lastApprovedOrigin) return;
-
-    const 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);
-    } else if (message.event === 'configure') {
-        drawEventConfigure();
-    }
+function drawPostMessage(data) {
+    iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
 }
 
 function drawEventExport(message) {
@@ -75,15 +33,54 @@ function drawEventConfigure() {
 }
 
 function drawEventClose() {
+    // eslint-disable-next-line no-use-before-define
     window.removeEventListener('message', drawReceive);
     if (iFrame) document.body.removeChild(iFrame);
 }
 
-function drawPostMessage(data) {
-    iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
+/**
+ * Receive and handle a message event from the draw.io window.
+ * @param {MessageEvent} event
+ */
+function drawReceive(event) {
+    if (!event.data || event.data.length < 1) return;
+    if (event.origin !== lastApprovedOrigin) return;
+
+    const 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);
+    } else if (message.event === 'configure') {
+        drawEventConfigure();
+    }
 }
 
-async function upload(imageData, pageUploadedToId) {
+/**
+ * Show the draw.io editor.
+ * @param {String} drawioUrl
+ * @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param {Function} onSaveCallback - Is called with the drawing data on save.
+ */
+export function show(drawioUrl, 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);
+    lastApprovedOrigin = (new URL(drawioUrl)).origin;
+}
+
+export async function upload(imageData, pageUploadedToId) {
     const data = {
         image: imageData,
         uploaded_to: pageUploadedToId,
@@ -92,12 +89,16 @@ async function upload(imageData, pageUploadedToId) {
     return resp.data;
 }
 
+export function close() {
+    drawEventClose();
+}
+
 /**
  * Load an existing image, by fetching it as Base64 from the system.
  * @param drawingId
  * @returns {Promise<string>}
  */
-async function load(drawingId) {
+export async function load(drawingId) {
     try {
         const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
         return `data:image/png;base64,${resp.data.content}`;
@@ -109,7 +110,3 @@ async function load(drawingId) {
         throw error;
     }
 }
-
-export default {
-    show, close, upload, load,
-};

resources/js/services/events.js

@@ -6,13 +6,12 @@ const stack = [];
  * @param {String} eventName
  * @param {*} eventData
  */
-function emit(eventName, eventData) {
+export function emit(eventName, eventData) {
     stack.push({name: eventName, data: eventData});
-    if (typeof listeners[eventName] === 'undefined') return this;
-    const eventsToStart = listeners[eventName];
-    for (let i = 0; i < eventsToStart.length; i++) {
-        const event = eventsToStart[i];
-        event(eventData);
+
+    const listenersToRun = listeners[eventName] || [];
+    for (const listener of listenersToRun) {
+        listener(eventData);
     }
 }
 
@@ -22,7 +21,7 @@ function emit(eventName, eventData) {
  * @param {Function} callback
  * @returns {Events}
  */
-function listen(eventName, callback) {
+export function listen(eventName, callback) {
     if (typeof listeners[eventName] === 'undefined') listeners[eventName] = [];
     listeners[eventName].push(callback);
 }
@@ -34,7 +33,7 @@ function listen(eventName, callback) {
  * @param {String} eventName
  * @param {Object} eventData
  */
-function emitPublic(targetElement, eventName, eventData) {
+export function emitPublic(targetElement, eventName, eventData) {
     const event = new CustomEvent(eventName, {
         detail: eventData,
         bubbles: true,
@@ -43,34 +42,40 @@ function emitPublic(targetElement, eventName, eventData) {
 }
 
 /**
- * Notify of standard server-provided validation errors.
- * @param {Object} error
+ * Emit a success event with the provided message.
+ * @param {String} message
  */
-function showValidationErrors(error) {
-    if (!error.status) return;
-    if (error.status === 422 && error.data) {
-        const message = Object.values(error.data).flat().join('\n');
-        emit('error', message);
+export function success(message) {
+    emit('success', message);
+}
+
+/**
+ * Emit an error event with the provided message.
+ * @param {String} message
+ */
+export function error(message) {
+    emit('error', message);
+}
+
+/**
+ * Notify of standard server-provided validation errors.
+ * @param {Object} responseErr
+ */
+export function showValidationErrors(responseErr) {
+    if (!responseErr.status) return;
+    if (responseErr.status === 422 && responseErr.data) {
+        const message = Object.values(responseErr.data).flat().join('\n');
+        error(message);
     }
 }
 
 /**
  * Notify standard server-provided error messages.
- * @param {Object} error
+ * @param {Object} responseErr
  */
-function showResponseError(error) {
-    if (!error.status) return;
-    if (error.status >= 400 && error.data && error.data.message) {
-        emit('error', error.data.message);
+export function showResponseError(responseErr) {
+    if (!responseErr.status) return;
+    if (responseErr.status >= 400 && responseErr.data && responseErr.data.message) {
+        error(responseErr.data.message);
     }
 }
-
-export default {
-    emit,
-    emitPublic,
-    listen,
-    success: msg => emit('success', msg),
-    error: msg => emit('error', msg),
-    showValidationErrors,
-    showResponseError,
-};

resources/js/services/translations.js

@@ -5,11 +5,7 @@
  */
 class Translator {
 
-    /**
-     * Create an instance, Passing in the required translations
-     * @param translations
-     */
-    constructor(translations) {
+    constructor() {
         this.store = new Map();
         this.parseTranslations();
     }
@@ -27,7 +23,7 @@ class Translator {
     }
 
     /**
-     * Get a translation, Same format as laravel's 'trans' helper
+     * Get a translation, Same format as Laravel's 'trans' helper
      * @param key
      * @param replacements
      * @returns {*}
@@ -38,8 +34,8 @@ class Translator {
     }
 
     /**
-     * Get pluralised text, Dependant on the given count.
-     * Same format at laravel's 'trans_choice' helper.
+     * Get pluralised text, Dependent on the given count.
+     * Same format at Laravel's 'trans_choice' helper.
      * @param key
      * @param count
      * @param replacements
@@ -52,7 +48,7 @@ class Translator {
 
     /**
      * Parse the given translation and find the correct plural option
-     * to use. Similar format at laravel's 'trans_choice' helper.
+     * to use. Similar format at Laravel's 'trans_choice' helper.
      * @param {String} translation
      * @param {Number} count
      * @param {Object} replacements
@@ -117,14 +113,17 @@ class Translator {
      */
     performReplacements(string, replacements) {
         if (!replacements) return string;
-        const replaceMatches = string.match(/:([\S]+)/g);
+        const replaceMatches = string.match(/:(\S+)/g);
         if (replaceMatches === null) return string;
+        let updatedString = string;
+
         replaceMatches.forEach(match => {
             const key = match.substring(1);
             if (typeof replacements[key] === 'undefined') return;
-            string = string.replace(match, replacements[key]);
+            updatedString = updatedString.replace(match, replacements[key]);
         });
-        return string;
+
+        return updatedString;
     }
 
 }