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/>.

/**

 * Javascript for customising the user's view of the question bank

 *

 * @module     qbank_columnsortorder/user_actions

 * @copyright  2021 Catalyst IT Australia Pty Ltd

 * @author     Ghaly Marc-Alexandre <marc-alexandreghaly@catalyst-ca.net>

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

 */

import * as actions from 'qbank_columnsortorder/actions';

import * as repository from 'qbank_columnsortorder/repository';

import {get_string as getString} from 'core/str';

import ModalEvents from 'core/modal_events';

import ModalSaveCancel from 'core/modal_save_cancel';

import Notification from "core/notification";

import SortableList from 'core/sortable_list';

import Templates from "core/templates";

const SELECTORS = {

    uiRoot: '.questionbankwindow',

    moveAction: '.menu-action[data-action=move]',

    resizeAction: '.menu-action[data-action=resize]',

    resizeHandle: '.qbank_columnsortorder-action-handle.resize',

    handleContainer: '.handle-container',

    headerContainer: '.header-container',

    tableColumn: identifier => `td[data-columnid="${identifier.replace(/["\\]/g, '\\$&')}"]`,

};

/** To track mouse event on a table header */

let currentHeader;

/** Current mouse x postion, to track mouse event on a table header */

let currentX;

/** Minimum size for the column currently being resized. */

let currentMin;

/**

 * Flag to temporarily prevent move and resize handles from being shown or hidden.

 *

 * @type {boolean}

 */

let suspendShowHideHandles = false;

/**

 * Add handle containers for move and resize handles.

 *

 * @param {Element} uiRoot The root element of the quesiton bank UI.

 * @return {Promise} Resolved after the containers have been added to each column header.

 */

const addHandleContainers = uiRoot => {

    return new Promise((resolve) => {

        const headerContainers = uiRoot.querySelectorAll(SELECTORS.headerContainer);

        Templates.renderForPromise('qbank_columnsortorder/handle_container', {})

            .then(({html, js}) => {

                headerContainers.forEach(container => {

                    Templates.prependNodeContents(container, html, js);

                });

                resolve();

                return headerContainers;

            }).catch(Notification.exception);

    });

};

/**

 * Render move handles in each container.

 *

 * This takes a list of the move actions rendered in each column header, and creates a corresponding drag handle for each.

 *

 * @param {NodeList} moveActions Menu actions for moving columns.

 */

const setUpMoveHandles = moveActions => {

    moveActions.forEach(moveAction => {

        const header = moveAction.closest('th');

        header.classList.add('qbank-sortable-column');

        const handleContainer = header.querySelector(SELECTORS.handleContainer);

        const context = {

            action: "move",

            dragtype: "move",

            target: '',

            title: moveAction.title,

            pixicon: "i/dragdrop",

            pixcomponent: "core",

            popup: true

        };

        return Templates.renderForPromise('qbank_columnsortorder/action_handle', context)

            .then(({html, js}) => {

                Templates.prependNodeContents(handleContainer, html, js);

                return handleContainer;

            }).catch(Notification.exception);

    });

};

/**

 * Serialise the current column sizes.

 *

 * This finds the current width set in each column header's style property, and returns them encoded as a JSON string.

 *

 * @param {Element} uiRoot The root element of the quesiton bank UI.

 * @return {String} JSON array containing a list of objects with column and width properties.

 */

const serialiseColumnSizes = (uiRoot) => {

    const columnSizes = [];

    const tableHeaders = uiRoot.querySelectorAll('th');

    tableHeaders.forEach(header => {

        // Only get the width set via style attribute (set by move action).

        const width = parseInt(header.style.width);

        if (!width || isNaN(width)) {

            return;

        }

        columnSizes.push({

            column: header.dataset.columnid,

            width: width

        });

    });

    return JSON.stringify(columnSizes);

};

/**

 * Find the minimum width for a header, based on the width of its contents.

 *

 * This is to simulate `min-width: min-content;`, which doesn't work on Chrome because

 * min-width is ignored width `table-layout: fixed;`.

 *

 * @param {Element} header The table header

 * @return {Number} The minimum width in pixels

 */

const getMinWidth = (header) => {

    const contents = Array.from(header.querySelector('.header-text').children);

    const contentWidth = contents.reduce((width, contentElement) => width + contentElement.getBoundingClientRect().width, 0);

    return Math.ceil(contentWidth);

};

/**

 * Render resize handles in each container.

 *

 * This takes a list of the resize actions rendered in each column header, and creates a corresponding drag handle for each.

 * It also initialises the event handlers for the drag handles and resize modal.

 *

 * @param {Element} uiRoot Question bank UI root element.

 */

const setUpResizeHandles = (uiRoot) => {

    const resizeActions = uiRoot.querySelectorAll(SELECTORS.resizeAction);

    resizeActions.forEach(resizeAction => {

        const headerContainer = resizeAction.closest(SELECTORS.headerContainer);

        const header = resizeAction.closest(actions.SELECTORS.sortableColumn);

        const minWidth = getMinWidth(header);

        if (header.offsetWidth < minWidth) {

            header.style.width = minWidth + 'px';

        }

        const handleContainer = headerContainer.querySelector(SELECTORS.handleContainer);

        const context = {

            action: "resize",

            target: '',

            title: resizeAction.title,

            pixicon: 'i/twoway',

            pixcomponent: 'core',

            popup: true

        };

        return Templates.renderForPromise('qbank_columnsortorder/action_handle', context)

            .then(({html, js}) => {

                Templates.appendNodeContents(handleContainer, html, js);

                return handleContainer;

            }).catch(Notification.exception);

    });

    let moveTracker = false;

    let currentResizeHandle = null;

    // Start mouse event on headers.

    uiRoot.addEventListener('mousedown', e => {

        currentResizeHandle = e.target.closest(SELECTORS.resizeHandle);

        // Return if it is not ' resize' button.

        if (!currentResizeHandle) {

            return;

        }

        // Save current position.

        currentX = e.pageX;

        // Find the header.

        currentHeader = e.target.closest(actions.SELECTORS.sortableColumn);

        currentMin = getMinWidth(currentHeader);

        moveTracker = false;

        suspendShowHideHandles = true;

    });

    // Resize column as the mouse move.

    document.addEventListener('mousemove', e => {

        if (!currentHeader || !currentResizeHandle || currentX === 0) {

            return;

        }

        // Prevent text selection as the handle is dragged.

        document.getSelection().removeAllRanges();

        // Adjust the column width according the amount the handle was dragged.

        const offset = e.pageX - currentX;

        currentX = e.pageX;

        const newWidth = currentHeader.offsetWidth + offset;

        if (newWidth >= currentMin) {

            currentHeader.style.width = newWidth + 'px';

        }

        moveTracker = true;

    });

    // Set new size when mouse is up.

    document.addEventListener('mouseup', () => {

        if (!currentHeader || !currentResizeHandle || currentX === 0) {

            return;

        }

        if (moveTracker) {

            // If the mouse moved, we are changing the size by drag, so save the change.

            repository.setColumnSize(serialiseColumnSizes(uiRoot)).catch(Notification.exception);

        } else {

            // If the mouse didn't move, display a modal to change the size using a form.

            showResizeModal(currentHeader, uiRoot);

        }

        currentMin = null;

        currentHeader = null;

        currentResizeHandle = null;

        currentX = 0;

        moveTracker = false;

        suspendShowHideHandles = false;

    });

};

/**

 * Event handler for resize actions in each column header.

 *

 * This will listen for a click on any resize action, and activate the corresponding resize modal.

 *

 * @param {Element} uiRoot Question bank UI root element.

 */

const setUpResizeActions = uiRoot => {

    uiRoot.addEventListener('click', (e) => {

        const resizeAction = e.target.closest(SELECTORS.resizeAction);

        if (resizeAction) {

            e.preventDefault();

            const currentHeader = resizeAction.closest('th');

            showResizeModal(currentHeader, uiRoot);

        }

    });

};

/**

 * Show a modal containing a number input for changing a column width without click-and-drag.

 *

 * @param {Element} currentHeader The header element that is being resized.

 * @param {Element} uiRoot The question bank UI root element.

 * @returns {Promise<void>}

 */

const showResizeModal = async(currentHeader, uiRoot) => {

    const initialWidth = currentHeader.offsetWidth;

    const minWidth = getMinWidth(currentHeader);

    const modal = await ModalSaveCancel.create({

        title: getString('resizecolumn', 'qbank_columnsortorder', currentHeader.dataset.name),

        body: Templates.render('qbank_columnsortorder/resize_modal', {width: initialWidth, min: minWidth}),

        show: true,

    });

    const root = modal.getRoot();

    root.on(ModalEvents.cancel, () => {

        currentHeader.style.width = `${initialWidth}px`;

    });

    root.on(ModalEvents.save, () => {

        repository.setColumnSize(serialiseColumnSizes(uiRoot)).catch(Notification.exception);

    });

    const body = await modal.bodyPromise;

    const input = body.get(0).querySelector('input');

    input.addEventListener('change', e => {

        const valid = e.target.checkValidity();

        e.target.closest('.has-validation').classList.add('was-validated');

        if (valid) {

            const newWidth = e.target.value;

            currentHeader.style.width = `${newWidth}px`;

        }

    });

};

/**

 * Event handler for move actions in each column header.

 *

 * This will listen for a click on any move action, pass the click to the corresponding move handle, causing its modal to be shown.

 *

 * @param {Element} uiRoot Question bank UI root element.

 */

const setUpMoveActions = uiRoot => {

    uiRoot.addEventListener('click', e => {

        const moveAction = e.target.closest(SELECTORS.moveAction);

        if (moveAction) {

            e.preventDefault();

            const sortableColumn = moveAction.closest(actions.SELECTORS.sortableColumn);

            const moveHandle = sortableColumn.querySelector(actions.SELECTORS.moveHandler);

            moveHandle.click();

        }

    });

};

/**

 * Event handler for showing and hiding handles when the mouse is over a column header.

 *

 * Implementing this behaviour using the :hover CSS pseudoclass is not sufficient, as the mouse may move over the neighbouring

 * header while dragging, leading to some odd behaviour. This allows us to suspend the show/hide behaviour while a handle is being

 * dragged, and so keep the active handle visible until the drag is finished.

 *

 * @param {Element} uiRoot Question bank UI root element.

 */

const setupShowHideHandles = uiRoot => {

    let shownHeader = null;

    let tableHead = uiRoot.querySelector('thead');

    uiRoot.addEventListener('mouseover', e => {

        if (suspendShowHideHandles) {

            return;

        }

        const header = e.target.closest(actions.SELECTORS.sortableColumn);

        if (!header && !shownHeader) {

            return;

        }

        if (!header || header !== shownHeader) {

            tableHead.querySelector('.show-handles')?.classList.remove('show-handles');

            shownHeader = header;

            if (header) {

                header.classList.add('show-handles');

            }

        }

    });

};

/**

 * Event handler for sortable list DROP event.

 *

 * Find all table cells corresponding to the column of the dropped header, and move them to the new position.

 *

 * @param {Event} event

 */

const reorderColumns = event => {

    // Current header.

    const header = event.target;

    // Find the previous sibling of the header, which will be used when moving columns.

    const insertAfter = header.previousElementSibling;

    // Move columns.

    const uiRoot = document.querySelector(SELECTORS.uiRoot);

    const columns = uiRoot.querySelectorAll(SELECTORS.tableColumn(header.dataset.columnid));

    columns.forEach(column => {

        const row = column.parentElement;

        if (insertAfter) {

            // Find the column to insert after.

            const insertAfterColumn = row.querySelector(SELECTORS.tableColumn(insertAfter.dataset.columnid));

            // Insert the column.

            insertAfterColumn.after(column);

        } else {

            // Insert as the first child (first column in the table).

            row.insertBefore(column, row.firstChild);

        }

    });

};

/**

 * Initialize module

 *

 * Add containers for the drag handles to each column header, then render handles, enable show/hide behaviour, set up drag/drop

 * column sorting, then enable the move and resize modals to be triggered from menu actions.

 */

export const init = async() => {

    const uiRoot = document.getElementById('questionscontainer');

    await addHandleContainers(uiRoot);

    setUpMoveHandles(uiRoot.querySelectorAll(SELECTORS.moveAction));

    setUpResizeHandles(uiRoot);

    setupShowHideHandles(uiRoot);

    const sortableColumns = actions.setupSortableLists(uiRoot.querySelector(actions.SELECTORS.columnList));

    sortableColumns.on(SortableList.EVENTS.DROP, reorderColumns);

    sortableColumns.on(SortableList.EVENTS.DRAGSTART, () => {

        suspendShowHideHandles = true;

    });

    sortableColumns.on(SortableList.EVENTS.DRAGEND, () => {

        suspendShowHideHandles = false;

    });

    setUpMoveActions(uiRoot);

    setUpResizeActions(uiRoot);

    actions.setupActionButtons(uiRoot);

};