jcloud_frontend/assets/scripts/tools/main.js

import { getUiLabels } from '../i18n/main.js';

const getCookie = function (name) {
    const cookies = document.cookie.split('; ');
    for (const cookie of cookies) {
        const [key, value] = cookie.split('=');
        if (key === name) return decodeURIComponent(value);
    };
    return null;
};

const getFileExtension = function (filename) {
    const lastDot = filename.lastIndexOf('.');
    if (lastDot === -1 || lastDot === 0) {
        return '';
    };
    return filename.slice(lastDot + 1);
};

const getFileName = function (path) {
    const dirs = path.split('/');
    if (path.endsWith('/')) {
        return dirs[dirs.length - 2];
    }
    return dirs[dirs.length - 1];
};

const getDirName = function (path) {
    const dirs = path.split('/');
    if (path.endsWith('/')) {
        return dirs.slice(0, dirs.length - 2).join('/') + '/';
    }
    return dirs.slice(0, dirs.length - 1).join('/') + '/';
};

const getHumanReadableFileSize = function (size, decimals = 1) {
    if (size >= 1e3 && size < 1e6) {
        return String(round(size / 1e3, decimals)) + ' KB';
    } else if (size >= 1e6 && size < 1e9) {
        return String(round(size / 1e6, decimals)) + ' MB';
    } else if (size >= 1e9 && size < 1e12) {
        return String(round(size / 1e9, decimals)) + ' GB';
    } else if (size >= 1e12) {
        return String(round(size / 1e9, decimals)) + ' TB';
    } else {
        return String(size) + ' B';
    };
};

const round = function (n, decimals) {
    const factor = 10 ** decimals;
    return Math.round(n * factor) / factor;
};

const validatePasswordSecurity = function (password) {
    let numberOfCaps = 0;
    let numberOfSmalls = 0;
    let numberOfNumbers = 0;
    let numberOfSpecials = 0;

    for (const char of password) {
        if (char.match(/[a-zA-Z0-9]/)) { // Alphanumeric check
            if (char.match(/[a-zA-Z]/)) { // Alphabet check
                if (char === char.toUpperCase()) {
                    numberOfCaps++;
                } else {
                    numberOfSmalls++;
                };
            } else {
                numberOfNumbers++;
            };
        } else {
            numberOfSpecials++;
        };
    };

    return (
        numberOfCaps > 0 &&
        numberOfSmalls > 0 &&
        numberOfNumbers > 0 &&
        numberOfSpecials > 0 &&
        password.length > 7
    );
};

const countOccurrences = function (string, char) {
    if (!string) {
        return 0;
    } else {
        return string.split(char).length - 1;
    };
};

const scrollToTop = function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
};

const showDialog = function (dialog, closeCallbacks = [], clickOutsideClose = true) {
    dialog.showModal();
    setTimeout(() => {
        if (clickOutsideClose) {
            dialog.addEventListener('click', function (event) {
                if (event.target === dialog) {
                    for (const callback of closeCallbacks) {
                        callback();
                    }
                    dialog.close();
                };
            });
        }
    }, 500);
};
const closeDialog = function (dialog) {
    dialog.close();
};

function waitForEvent(element, eventType) {
    return new Promise(resolve => {
        element.addEventListener(eventType, resolve, { once: true });
    });
};

const startLoading = function () {
    document.querySelector('#loader').showModal();
};

const stopLoading = function () {
    document.querySelector('#loader').close();
};

const middleEllipsis = function (str, maxLength = 30) {
    if (str.length <= maxLength) return str;
    const keep = Math.floor((maxLength - 3) / 2);
    return str.slice(0, keep) + ' ... ' + str.slice(-keep);
};

const escapeRegex = function (s) {
    return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
};

const strip = function (str, char) {
    if (char === undefined) {
        return str.trim();
    };
    const pattern = new RegExp(`^[${escapeRegex(char)}]+|[${escapeRegex(char)}]+$`, 'g');
    return str.replace(pattern, '');
};

const addQueryParam = function (url, key, value) {
    const urlObj = new URL(url, window.location.origin);
    urlObj.searchParams.set(key, value);
    return urlObj.toString();
};

const removeQueryParam = function (url, key) {
    const urlObj = new URL(url, window.location.origin);
    urlObj.searchParams.delete(key);

    const baseUrl = urlObj.origin + urlObj.pathname;
    const queryString = urlObj.searchParams.toString();
    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
};

const getTextWidth = function (text, cssClass = '', html = false) {
    const span = document.createElement('span');
    span.style.position = 'fixed';
    span.style.visibility = 'hidden';
    span.style.whiteSpace = 'nowrap';
    span.classList.add(cssClass)
    if (html) {
        span.innerHTML = text;
    } else {
        span.textContent = text;
    };
    document.body.appendChild(span);
    const width = span.getBoundingClientRect().width;
    document.body.removeChild(span);
    return width;
}

const jCloudUIElements = {
    alert: async function (message, html = false) {
        showDialog(document.querySelector('#jcloud-ui-elements-alert'));
        document.querySelector('#jcloud-ui-elements-alert-close').blur();
        document.querySelector('#jcloud-ui-elements-alert-close').innerHTML = (await getUiLabels()).DIALOG_OPTIONS.ok;
        if (html) {
            document.querySelector('#jcloud-ui-elements-alert-message').innerHTML = message;
        } else {
            document.querySelector('#jcloud-ui-elements-alert-message').textContent = message;
        };
        document.querySelector('#jcloud-ui-elements-alert-close').addEventListener('click', function () {
            closeDialog(document.querySelector('#jcloud-ui-elements-alert'));
        });
        await waitForEvent(document.querySelector('#jcloud-ui-elements-alert'), 'close');
    },
    confirm: async function (message, yesno = true, html = false, buttonTrue, buttonFalse) {
        const yes = document.querySelector('#jcloud-ui-elements-confirm-yes');
        const no = document.querySelector('#jcloud-ui-elements-confirm-no');
        const messageElement = document.querySelector('#jcloud-ui-elements-confirm-message');
        const dialog = document.querySelector('#jcloud-ui-elements-confirm');
        showDialog(dialog, false);
        if (yesno) {
            yes.innerHTML = (await getUiLabels()).DIALOG_OPTIONS.yes;
            no.innerHTML = (await getUiLabels()).DIALOG_OPTIONS.no;
        } else {
            yes.innerHTML = (await getUiLabels()).DIALOG_OPTIONS.ok;
            no.innerHTML = (await getUiLabels()).DIALOG_OPTIONS.cancel;
        };
        if (buttonTrue) {
            yes.textContent = buttonTrue;
        };
        if (buttonFalse) {
            no.textContent = buttonFalse;
        };
        if (html) {
            messageElement.innerHTML = message;
        } else {
            messageElement.textContent = message;
        };
        yes.addEventListener('click', function () {
            dialog.dataset.result = 'true';
            closeDialog(dialog);
        });
        no.addEventListener('click', function () {
            dialog.dataset.result = 'false';
            closeDialog(dialog);
        });
        await waitForEvent(dialog, 'close');
        if (dialog.dataset.result === 'true') {
            return true;
        } else {
            return false;
        };
    },
    prompt: async function (message, allowCancel = true, placeholder = '', value = '', type = 'text', select = false, html = false, closeCallbacks = [], error = '', errorHtml = false, inputCallbacks = [], closeAfterSubmit = true) {
        const ok = document.querySelector('#jcloud-ui-elements-prompt-ok');
        const cancel = document.querySelector('#jcloud-ui-elements-prompt-cancel');
        const messageElement = document.querySelector('#jcloud-ui-elements-prompt-message');
        const dialog = document.querySelector('#jcloud-ui-elements-prompt');
        const input = document.querySelector('#jcloud-ui-elements-prompt-input');
        const form = document.querySelector('#jcloud-ui-elements-prompt-form')
        if (errorHtml) {
            document.querySelector('#jcloud-ui-elements-prompt-error').innerHTML = error;
        } else {
            document.querySelector('#jcloud-ui-elements-prompt-error').textContent = error;
        };
        input.addEventListener('input', function () {
            for (let c of inputCallbacks) {
                c();
            };
        });
        dialog.dataset.isResult = 'false';
        showDialog(dialog, closeCallbacks, allowCancel);
        ok.innerHTML = (await getUiLabels()).DIALOG_OPTIONS.ok;
        cancel.innerHTML = (await getUiLabels()).DIALOG_OPTIONS.cancel;
        input.value = value;
        input.type = type;
        input.placeholder = placeholder
        if (select) {
            input.select();
        };
        if (allowCancel) {
            cancel.style.display = 'block';
            cancel.addEventListener('click', function () {
                dialog.dataset.isResult = 'false';
                closeDialog(dialog);
            }, { once: true });
        } else {
            cancel.style.display = 'none';
        };
        if (html) {
            messageElement.innerHTML = message;
        } else {
            messageElement.textContent = message;
        };
        form.addEventListener('submit', function (event) {
            event.preventDefault();
        });
        ok.addEventListener('click', function () {
            dialog.dataset.isResult = 'true';
            if (closeAfterSubmit) {
                closeDialog(dialog);
            };
        });
        await waitForEvent(form, 'submit');
        if (dialog.dataset.isResult === 'true') {
            return input.value;
        } else {
            return null;
        };
    },
    overlays: {
        showBlurryOverlay: function () {
            document.querySelector('#blurry-overlay').classList.remove('hidden');
        },
        hideBlurryOverlay: function () {
            document.querySelector('#blurry-overlay').classList.add('hidden');
        },
        showBlurryDarkOverlay: function () {
            document.querySelector('#blurry-dark-overlay').classList.remove('hidden');
        },
        hideBlurryDarkOverlay: function () {
            document.querySelector('#blurry-dark-overlay').classList.add('hidden');
        },
        showOverlay: function () {
            document.querySelector('#overlay').classList.remove('hidden');
        },
        hideOverlay: function () {
            document.querySelector('#overlay').classList.add('hidden');
        },
        showLightOverlay: function () {
            document.querySelector('#light-overlay').classList.remove('hidden');
        },
        hideLightOverlay: function () {
            document.querySelector('#light-overlay').classList.add('hidden');
        }
    }
};

export { getCookie, getFileExtension, getFileName, getDirName, getHumanReadableFileSize, round, validatePasswordSecurity, countOccurrences, scrollToTop, showDialog, closeDialog, waitForEvent, startLoading, stopLoading, middleEllipsis, escapeRegex, strip, addQueryParam, removeQueryParam, getTextWidth, jCloudUIElements };