Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * Tiny media plugin helpers for image and embed.
 *
 * @module      tiny_media/helpers
 * @copyright   2024 Stevani Andolo <stevani@hotmail.com.au>
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import Templates from 'core/templates';
import Selectors from './selectors';
import Config from 'core/config';

/**
 * Renders and inserts the body template for inserting an media into the modal.
 *
 * @param {object} templateContext - The context for rendering the template.
 * @param {HTMLElement} root - The root element where the template will be inserted.
 * @returns {Promise<void>}
 */
export const body = async(templateContext, root) => {
    return Templates.renderForPromise(templateContext.bodyTemplate, {...templateContext})
    .then(({html, js}) => {
        Templates.replaceNodeContents(root.querySelector(Selectors[templateContext.selector].elements.bodyTemplate), html, js);
        return;
    })
    .catch(error => {
        window.console.log(error);
    });
};

/**
 * Renders and inserts the footer template for inserting an media into the modal.
 *
 * @param {object} templateContext - The context for rendering the template.
 * @param {HTMLElement} root - The root element where the template will be inserted.
 * @returns {Promise<void>}
 */
export const footer = async(templateContext, root) => {
    return Templates.renderForPromise(templateContext.footerTemplate, {...templateContext})
    .then(({html, js}) => {
        Templates.replaceNodeContents(root.querySelector(Selectors[templateContext.selector].elements.footerTemplate), html, js);
        return;
    })
    .catch(error => {
        window.console.log(error);
    });
};

/**
 * Set extra properties on an instance using incoming data.
 *
 * @param {object} instance
 * @param {object} data
 * @return {object} Modified instance
 */
export const setPropertiesFromData = async(instance, data) => {
    for (const property in data) {
        if (typeof data[property] !== 'function') {
            instance[property] = data[property];
        }
    }
    return instance;
};

/**
 * Check if given string is a valid URL.
 *
 * @param {String} urlString URL the link will point to.
 * @returns {boolean} True is valid, otherwise false.
 */
export const isValidUrl = urlString => {
    const urlPattern = new RegExp('^(https?:\\/\\/)?' + // Protocol.
                                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // Domain name.
                                '((\\d{1,3}\\.){3}\\d{1,3})|localhost)' + // OR ip (v4) address, localhost.
                                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'); // Port and path.
    return !!urlPattern.test(urlString);
};

/**
 * Hide the element(s).
 *
 * @param {string|string[]} elements - The CSS selector for the elements to toggle.
 * @param {object} root - The CSS selector for the elements to toggle.
 */
export const hideElements = (elements, root) => {
    if (elements instanceof Array) {
        elements.forEach((elementSelector) => {
            const element = root.querySelector(elementSelector);
            if (element) {
                element.classList.add('d-none');
            }
        });
    } else {
        const element = root.querySelector(elements);
        if (element) {
            element.classList.add('d-none');
        }
    }
};

/**
 * Show the element(s).
 *
 * @param {string|string[]} elements - The CSS selector for the elements to toggle.
 * @param {object} root - The CSS selector for the elements to toggle.
 */
export const showElements = (elements, root) => {
    if (elements instanceof Array) {
        elements.forEach((elementSelector) => {
            const element = root.querySelector(elementSelector);
            if (element) {
                element.classList.remove('d-none');
            }
        });
    } else {
        const element = root.querySelector(elements);
        if (element) {
            element.classList.remove('d-none');
        }
    }
};

/**
 * Displays the upload loader and disables UI elements while loading a file.
 *
 * @param {html} root Modal element
 * @param {string} selector String of type IMAGE/EMBED
 */
export const startMediaLoading = (root, selector) => {
    showElements(Selectors[selector].elements.loaderIcon, root);
    const elementsToHide = [
        Selectors[selector].elements.insertMedia,
        Selectors[selector].elements.urlWarning,
        Selectors[selector].elements.modalFooter,
    ];
    hideElements(elementsToHide, root);
};

/**
 * Hide the upload loader and enable UI elements when loaded.
 *
 * @param {html} root Modal element
 * @param {string} selector String of type IMAGE/EMBED
 */
export const stopMediaLoading = (root, selector) => {
    hideElements(Selectors[selector].elements.loaderIcon, root);
    const elementsToShow = [
        Selectors[selector].elements.insertMedia,
        Selectors[selector].elements.modalFooter,
    ];
    showElements(elementsToShow, root);
};

/**
 * Return true or false if the url is external.
 *
 * @param {string} url
 * @returns {boolean} True if the URL is external, otherwise false.
 */
export const isExternalUrl = (url) => {
    const regex = new RegExp(`${Config.wwwroot}`);

    // True if the URL is from external, otherwise false.
    return regex.test(url) === false;
};

/**
 * Set the string for the URL label element.
 *
 * @param {object} props - The label text to set.
 */
export const setFilenameLabel = (props) => {
    const urlLabelEle = props.root.querySelector(props.fileNameSelector);
    if (urlLabelEle) {
        urlLabelEle.innerHTML = props.label;
        urlLabelEle.setAttribute("title", props.label);
    }
};

/**
 * This function checks whether an image URL is local (within the same website's domain) or external (from an external source).
 * Depending on the result, it dynamically updates the visibility and content of HTML elements in a user interface.
 * If the image is local then we only show it's filename.
 * If the image is external then it will show full URL and it can be updated.
 *
 * @param {object} props
 */
export const sourceTypeChecked = (props) => {
    if (props.fetchedTitle) {
        props.label = props.fetchedTitle;
    } else {
        if (!isExternalUrl(props.source)) {
            // Split the URL by '/' to get an array of segments.
            const segments = props.source.split('/');
            // Get the last segment, which should be the filename.
            const filename = segments.pop().split('?')[0];
            // Show the file name.
            props.label = decodeURI(filename);
        } else {
            props.label = decodeURI(props.source);
        }
    }
    setFilenameLabel(props);
};

/**
 * Get filename from the name label.
 *
 * @param {string} fileLabel
 * @returns {string}
 */
export const getFileName = (fileLabel) => {
    if (fileLabel.includes('/')) {
        const split = fileLabel.split('/');
        let fileName = split[split.length - 1];
        fileName = fileName.split('.');
        if (fileName.length > 1) {
            return decodeURI(fileName.slice(0, (fileName.length - 1)).join('.'));
        } else {
            return decodeURI(fileName[0]);
        }
    } else {
        return decodeURI(fileLabel.split('.')[0]);
    }
};

/**
 * Return true or false if % is found.
 *
 * @param {string} value
 * @returns {boolean}
 */
export const isPercentageValue = (value) => {
    return value.match(/\d+%/);
};