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 class helpers for image and embed.

 *

 * @module      tiny_media/mediabase

 * @copyright   2024 Stevani Andolo <stevani@hotmail.com.au>

 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import {

    isPercentageValue,

    hideElements,

    showElements,

} from './helpers';

import Selectors from './selectors';

export class MediaBase {

    /**

     * Handles the selection of media size options and updates the form inputs accordingly.

     *

     * @param {string} option - The selected media size option ("original" or "custom").

     */

    sizeChecked = async(option) => {

        const widthInput = this.root.querySelector(Selectors[this.selectorType].elements.width);

        const heightInput = this.root.querySelector(Selectors[this.selectorType].elements.height);

        if (option === "original") {

            this.sizeOriginalChecked();

            widthInput.value = this.mediaDimensions.width;

            heightInput.value = this.mediaDimensions.height;

        } else if (option === "custom") {

            this.sizeCustomChecked();

            widthInput.value = this.currentWidth;

            heightInput.value = this.currentHeight;

            // If the current size is equal to the original size and selectorType = IMAGE,

            // then check the Keep proportion checkbox.

            if (

                this.selectorType === Selectors.IMAGE.type &&

                this.currentWidth === this.mediaDimensions.width &&

                this.currentHeight === this.mediaDimensions.height

            ) {

                const constrainField = this.root.querySelector(Selectors[this.selectorType].elements.constrain);

                constrainField.checked = true;

            }

        }

        this.autoAdjustSize();

    };

    /**

     * Handles the selection of the "Original Size" option and updates the form elements accordingly.

     */

    sizeOriginalChecked() {

        this.root.querySelector(Selectors[this.selectorType].elements.sizeOriginal).checked = true;

        this.root.querySelector(Selectors[this.selectorType].elements.sizeCustom).checked = false;

        hideElements(Selectors[this.selectorType].elements.properties, this.root);

    }

    /**

     * Handles the selection of the "Custom Size" option and updates the form elements accordingly.

     */

    sizeCustomChecked() {

        this.root.querySelector(Selectors[this.selectorType].elements.sizeOriginal).checked = false;

        this.root.querySelector(Selectors[this.selectorType].elements.sizeCustom).checked = true;

        showElements(Selectors[this.selectorType].elements.properties, this.root);

    }

    /**

     * Auto adjust the media width/height.

     * It is put here so image.js and/or friends can extend this class and call this for media proportion.

     *

     * @param {boolean} forceHeight Whether set by height or not

     */

    autoAdjustSize = (forceHeight = false) => {

        // If we do not know the media size, do not do anything.

        if (!this.mediaDimensions) {

            return;

        }

        const widthField = this.root.querySelector(Selectors[this.selectorType].elements.width);

        const heightField = this.root.querySelector(Selectors[this.selectorType].elements.height);

        const normalizeFieldData = (fieldData) => {

            fieldData.isPercentageValue = isPercentageValue(fieldData.field.value);

            if (fieldData.isPercentageValue) {

                fieldData.percentValue = parseInt(fieldData.field.value, 10);

                fieldData.pixelSize = this.mediaDimensions[fieldData.type] / 100 * fieldData.percentValue;

            } else {

                fieldData.pixelSize = parseInt(fieldData.field.value, 10);

                fieldData.percentValue = fieldData.pixelSize / this.mediaDimensions[fieldData.type] * 100;

            }

            return fieldData;

        };

        const getKeyField = () => {

            const getValue = () => {

                if (forceHeight) {

                    return {

                        field: heightField,

                        type: 'height',

                    };

                } else {

                    return {

                        field: widthField,

                        type: 'width',

                    };

                }

            };

            const currentValue = getValue();

            if (currentValue.field.value === '') {

                currentValue.field.value = this.mediaDimensions[currentValue.type];

            }

            return normalizeFieldData(currentValue);

        };

        const getRelativeField = () => {

            if (forceHeight) {

                return normalizeFieldData({

                    field: widthField,

                    type: 'width',

                });

            } else {

                return normalizeFieldData({

                    field: heightField,

                    type: 'height',

                });

            }

        };

        // Now update with the new values.

        const constrainField = this.root.querySelector(Selectors[this.selectorType].elements.constrain); // Only image.

        if ((constrainField && constrainField.checked) || this.mediaType === 'video') {

            const keyField = getKeyField();

            const relativeField = getRelativeField();

            // We are keeping the media in proportion.

            // Calculate the size for the relative field.

            if (keyField.isPercentageValue) {

                // In proportion, so the percentages are the same.

                relativeField.field.value = keyField.field.value;

                relativeField.percentValue = keyField.percentValue;

            } else {

                relativeField.pixelSize = Math.round(

                    keyField.pixelSize / this.mediaDimensions[keyField.type] * this.mediaDimensions[relativeField.type]

                );

                relativeField.field.value = relativeField.pixelSize;

            }

        }

        if (this.selectorType === Selectors.IMAGE.type) {

            // Store the custom width and height to reuse.

            this.currentWidth = Number(widthField.value) !== this.mediaDimensions.width ? widthField.value : this.currentWidth;

            this.currentHeight = Number(heightField.value) !== this.mediaDimensions.height ? heightField.value : this.currentHeight;

        }

    };

}