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 Equation UI.
 *
 * @module      tiny_equation/ui
 * @copyright   2022 Huong Nguyen <huongnv13@gmail.com>
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import EquationModal from 'tiny_equation/modal';
import ModalEvents from 'core/modal_events';
import {getContextId, getLibraries, getTexDocsUrl} from 'tiny_equation/options';
import {notifyFilterContentUpdated} from 'core/event';
import * as TinyEquationRepository from 'tiny_equation/repository';
import {exception as displayException} from 'core/notification';
import {debounce} from 'core/utils';
import Selectors from 'tiny_equation/selectors';
import {getSourceEquation, getCurrentEquationData, setEquation} from 'tiny_equation/equation';

let currentForm;
let lastCursorPos = 0;

/**
 * Handle action
 * @param {TinyMCE} editor
 */
export const handleAction = (editor) => {
    displayDialogue(editor);
};

/**
 * Display the equation editor
 * @param {TinyMCE} editor
 * @returns {Promise<void>}
 */
const displayDialogue = async(editor) => {
    let data = {};
    const currentEquationData = getCurrentEquationData(editor);
    if (currentEquationData) {
        Object.assign(data, currentEquationData);
    }
    const modal = await EquationModal.create({
        templateContext: getTemplateContext(editor, data),
    });

    const $root = await modal.getRoot();
    const root = $root[0];
    currentForm = root.querySelector(Selectors.elements.form);

    const contextId = getContextId(editor);
    const debouncedPreviewUpdater = debounce(() => updatePreview(getContextId(editor)), 500);

    $root.on(ModalEvents.shown, () => {
        const library = root.querySelector(Selectors.elements.library);
        TinyEquationRepository.filterEquation(contextId, library.innerHTML).then(async data => {
            library.innerHTML = data.content;
            updatePreview(contextId);
            notifyFilter(library);
            return data;
        }).catch(displayException);
    });

    root.addEventListener('click', (e) => {
        const libraryItem = e.target.closest(Selectors.elements.libraryItem);
        const submitAction = e.target.closest(Selectors.actions.submit);
        const textArea = e.target.closest('.tiny_equation_equation');
        if (libraryItem) {
            e.preventDefault();
            selectLibraryItem(libraryItem, contextId);
        }
        if (submitAction) {
            e.preventDefault();
            setEquation(currentForm, editor);
            modal.destroy();
        }
        if (textArea) {
            debouncedPreviewUpdater();
        }
    });

    root.addEventListener('keyup', (e) => {
        const textArea = e.target.closest(Selectors.elements.equationTextArea);
        if (textArea) {
            debouncedPreviewUpdater();
        }
    });

    root.addEventListener('keydown', (e) => {
        const libraryItem = e.target.closest(Selectors.elements.libraryItem);
        if (libraryItem) {
            if (e.keyCode == 37 || e.keyCode == 39) {
                groupNavigation(e);
            }
        }
    });
};

/**
 * Get template context.
 * @param {TinyMCE} editor
 * @param {Object} data
 * @returns {Object}
 */
const getTemplateContext = (editor, data) => {
    const libraries = getLibraries(editor);
    const texDocsUrl = getTexDocsUrl(editor);

    return Object.assign({}, {
        elementid: editor.id,
        elementidescaped: CSS.escape(editor.id),
        libraries: libraries,
        texdocsurl: texDocsUrl,
        delimiters: Selectors.delimiters,
    }, data);
};

/**
 * Handle select library item.
 * @param {Object} libraryItem
 * @param {number} contextId
 */
const selectLibraryItem = (libraryItem, contextId) => {
    const tex = libraryItem.getAttribute('data-tex');
    const input = currentForm.querySelector(Selectors.elements.equationTextArea);
    let oldValue;
    let newValue;
    let focusPoint = 0;

    oldValue = input.value;

    newValue = oldValue.substring(0, lastCursorPos);
    if (newValue.charAt(newValue.length - 1) !== ' ') {
        newValue += ' ';
    }
    newValue += tex;
    focusPoint = newValue.length;

    if (oldValue.charAt(lastCursorPos) !== ' ') {
        newValue += ' ';
    }
    newValue += oldValue.substring(lastCursorPos, oldValue.length);

    input.value = newValue;
    input.focus();

    input.selectionStart = input.selectionEnd = focusPoint;

    updatePreview(contextId);
};

/**
 * Update the preview section.
 * @param {number} contextId
 */
const updatePreview = (contextId) => {
    const textarea = currentForm.querySelector(Selectors.elements.equationTextArea);
    const preview = currentForm.querySelector(Selectors.elements.preview);
    const prefix = '';
    const cursorLatex = Selectors.cursorLatex;
    const isChar = /[a-zA-Z{]/;
    let currentPos = textarea.selectionStart;
    let equation = textarea.value;

    // Move the cursor so it does not break expressions.
    // Start at the very beginning.
    if (!currentPos) {
        currentPos = 0;
    }

    if (getSourceEquation()) {
        currentPos = equation.length;
    }

    // First move back to the beginning of the line.
    while (equation.charAt(currentPos) === '\\' && currentPos >= 0) {
        currentPos -= 1;
    }
    if (currentPos !== 0) {
        if (equation.charAt(currentPos - 1) != '{') {
            // Now match to the end of the line.
            while (isChar.test(equation.charAt(currentPos)) &&
                    currentPos < equation.length &&
                    isChar.test(equation.charAt(currentPos - 1))) {
                currentPos += 1;
            }
        }
    }
    // Save the cursor position - for insertion from the library.
    lastCursorPos = currentPos;
    equation = prefix + equation.substring(0, currentPos) + cursorLatex + equation.substring(currentPos);

    equation = Selectors.delimiters.start + ' ' + equation + ' ' + Selectors.delimiters.end;
    TinyEquationRepository.filterEquation(contextId, equation).then((data) => {
        preview.innerHTML = data.content;
        notifyFilter(preview);

        return data;
    }).catch(displayException);
};

/**
 * Notify the filters about the modified nodes
 * @param {Element} element
 */
const notifyFilter = (element) => {
    notifyFilterContentUpdated(element);
};

/**
 * Callback handling the keyboard navigation in the groups of the library.
 * @param {Event} e
 */
const groupNavigation = (e) => {
    e.preventDefault();

    const current = e.target.closest(Selectors.elements.libraryItem);
    const parent = current.parentNode; // This must be the <div> containing all the buttons of the group.
    const buttons = Array.prototype.slice.call(parent.querySelectorAll(Selectors.elements.libraryItem));
    const direction = e.keyCode !== 37 ? 1 : -1;
    let index = buttons.indexOf(current);
    let nextButton;

    if (index < 0) {
        index = 0;
    }

    index += direction;
    if (index < 0) {
        index = buttons.length - 1;
    } else if (index >= buttons.length) {
        index = 0;
    }
    nextButton = buttons[index];
    nextButton.focus();
};