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

/**

 * The category list component.

 *

 * The category list is a drop target, so that a category may be dropped at the top or bottom of the list.

 *

 * @module     qbank_managecategories/categorylist

 * @class      qbank_managecategories/categorylist

 */

import {BaseComponent, DragDrop} from 'core/reactive';

import Templates from 'core/templates';

import {getString} from 'core/str';

import {categorymanager} from 'qbank_managecategories/categorymanager';

export default class extends BaseComponent {

    create(descriptor) {

        this.name = descriptor.element.id;

        this.selectors = {

            CATEGORY_LIST: '.qbank_managecategories-categorylist',

            CATEGORY_ITEM: '.qbank_managecategories-item[data-categoryid]',

            CATEGORY_CONTENTS: '.qbank_managecategories-item > .container',

            CATEGORY_DETAILS: '.qbank_managecategories-details',

            CATEGORY_NO_DRAGHANDLE: '.qbank_managecategories-item[data-categoryid]:not(.draghandle)',

            CATEGORY_ID: id => `#category-${id}`,

        };

        this.classes = {

            DROP_TARGET_BEFORE: 'qbank_managecategories-droptarget-before',

            DROP_TARGET: 'qbank_managecategories-droptarget',

            NO_BOTTOM_PADDING: 'pb-0',

        };

        this.ids = {

            CATEGORY: id => `category-${id}`,

        };

    }

    stateReady() {

        this.dragdrop = new DragDrop(this);

    }

    destroy() {

        // The draggable element must be unregistered.

        if (this.dragdrop !== undefined) {

            this.dragdrop.unregister();

            this.dragdrop = undefined;

        }

    }

    /**

     * Static method to create a component instance.

     *

     * @param {string} target the DOM main element or its ID

     * @param {object} selectors optional css selector overrides

     * @return {Component}

     */

    static init(target, selectors) {

        return new this({

            element: document.querySelector(target),

            selectors,

            reactive: categorymanager,

        });

    }

    validateDropData() {

        return true;

    }

    /**

     * Highlight the border of the list where the category will be moved.

     *

     * If dropping at the top of the list, highlight the top border.

     * If dropping at the bottom, highlight the bottom border.

     *

     * @param {Object} dropData

     * @param {Event} event

     */

    showDropZone(dropData, event) {

        const dropTarget = this.getElement();

        if (dropTarget.closest(this.selectors.CATEGORY_ID(dropData.id))) {

            // Can't drop onto its own child.

            return false;

        }

        if (this.getInsertBefore(event, dropTarget)) {

            dropTarget.classList.add(this.classes.DROP_TARGET_BEFORE);

            dropTarget.classList.remove(this.classes.DROP_TARGET);

        } else {

            dropTarget.classList.add(this.classes.DROP_TARGET);

            dropTarget.classList.remove(this.classes.DROP_TARGET_BEFORE);

        }

        return true;

    }

    /**

     * Remove highlighting.

     *

     * @param {Object} dropData

     * @param {Event} event

     */

    hideDropZone(dropData, event) {

        const dropTarget = event.target.closest(this.selectors.CATEGORY_LIST);

        dropTarget.classList.remove(this.classes.DROP_TARGET_BEFORE);

        dropTarget.classList.remove(this.classes.DROP_TARGET);

    }

    /**

     * Determine whether we're dragging over the top or bottom half of the list.

     *

     * @param {Event} event

     * @param {Element} dropTarget

     * @return {boolean}

     */

    getInsertBefore(event, dropTarget) {

        // Get the current mouse position within the drop target

        const mouseY = event.clientY - dropTarget.getBoundingClientRect().top;

        // Get the height of the drop target

        const targetHeight = dropTarget.clientHeight;

        // Check if the mouse is over the top half of the drop target

        return mouseY < targetHeight / 2;

    }

    /**

     * Find the new position of the dropped category, and trigger the move.

     *

     * @param {Object} dropData

     * @param {Event} event

     */

    drop(dropData, event) {

        const dropTarget = event.target.closest(this.selectors.CATEGORY_LIST);

        if (!dropTarget) {

            return;

        }

        if (dropTarget.closest(this.selectors.CATEGORY_ID(dropData.id))) {

            // Can't drop onto your own child.

            return;

        }

        const source = document.getElementById(this.ids.CATEGORY(dropData.id));

        if (!source) {

            return;

        }

        const targetParentId = dropTarget.dataset.categoryid;

        let precedingSibling;

        if (this.getInsertBefore(event, dropTarget)) {

            // Dropped at the top of the list.

            precedingSibling = null;

        } else {

            // Dropped at the bottom of the list.

            precedingSibling = dropTarget.lastElementChild;

        }

        // Insert the category after the target category

        categorymanager.moveCategory(dropData.id, targetParentId, precedingSibling?.dataset.categoryid);

    }

    /**

     * Watch for categories moving to a new parent.

     *

     * @return {Array} A list of watchers.

     */

    getWatchers() {

        return [

            // Watch for this category having its child count updated.

            {watch: `categoryLists[${this.element.dataset.categoryid}].childCount:updated`, handler: this.checkEmptyList},

            // Watch for any new category being created.

            {watch: `categories:created`, handler: this.addCategory},

        ];

    }

    /**

     * If this list is now empty, remove it.

     *

     * @param {Object} args

     * @param {Object} args.element The categoryList state element.

     */

    async checkEmptyList({element}) {

        if (element.childCount === 0) {

            // Display a new child drop zone.

            const categoryItem = this.getElement().closest(this.selectors.CATEGORY_ITEM);

            const {html, js} = await Templates.renderForPromise(

                'qbank_managecategories/newchild',

                {

                    categoryid: this.getElement().dataset.categoryid,

                    tooltip: getString('newchild', 'qbank_managecategories', categoryItem.dataset.categoryname)

                }

            );

            const activityNameArea = categoryItem.querySelector(this.selectors.CATEGORY_DETAILS);

            await Templates.appendNodeContents(activityNameArea, html, js);

            // Reinstate padding on the parent element.

            this.element.closest(this.selectors.CATEGORY_CONTENTS).classList.remove(this.classes.NO_BOTTOM_PADDING);

            // Remove this list.

            this.remove();

        }

    }

    /**

     * If a newly-created category has this list's category as its parent, add it to this list.

     *

     * @param {Object} args

     * @param {Object} args.element

     * @return {Promise<void>}

     */

    async addCategory({element}) {

        if (element.parent !== this.getElement().dataset.categoryid) {

            return; // Not for me.

        }

        const {html, js} = await Templates.renderForPromise('qbank_managecategories/category', element.templatecontext);

        Templates.appendNodeContents(this.getElement(), html, js);

        // If one of the children has no draghandle, it should do now it has a sibling.

        const noDragHandle = this.getElement(this.selectors.CATEGORY_NO_DRAGHANDLE);

        if (noDragHandle) {

            this.reactive.dispatch('showDragHandle', noDragHandle.dataset.categoryid);

        }

    }

}