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

/**

 * Course index section component.

 *

 * This component is used to control specific course section interactions like drag and drop

 * in both course index and course content.

 *

 * @module     core_courseformat/local/courseeditor/dndsection

 * @class      core_courseformat/local/courseeditor/dndsection

 * @copyright  2021 Ferran Recio <ferran@moodle.com>

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

 */

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

import {getString} from 'core/str';

import {prefetchStrings} from 'core/prefetch';

import Templates from 'core/templates';

// Load global strings.

prefetchStrings('core', ['addfilehere']);

export default class extends BaseComponent {

    /**

     * Save some values form the state.

     *

     * @param {Object} state the current state

     */

    configState(state) {

        this.id = this.element.dataset.id;

        this.section = state.section.get(this.id);

        this.course = state.course;

    }

    /**

     * Register state values and the drag and drop subcomponent.

     *

     * @param {BaseComponent} sectionitem section item component

     */

    configDragDrop(sectionitem) {

        // Drag and drop is only available for components compatible course formats.

        if (this.reactive.isEditing && this.reactive.supportComponents) {

            // Init the inner dragable element.

            this.sectionitem = sectionitem;

            // Init the dropzone.

            this.dragdrop = new DragDrop(this);

            // Save dropzone classes.

            this.classes = this.dragdrop.getClasses();

        }

    }

    /**

     * Remove all subcomponents dependencies.

     */

    destroy() {

        if (this.sectionitem !== undefined) {

            this.sectionitem.unregister();

        }

        if (this.dragdrop !== undefined) {

            this.dragdrop.unregister();

        }

    }

    /**

     * Get the last CM element of that section.

     *

     * @returns {element|null} the las course module element of the section.

     */

    getLastCm() {

        return null;

    }

    /**

     * Get a fallback element when there is no CM in the section.

     *

     * This is used to show the correct dropzone position.

     *

     * @returns {element|null} the las course module element of the section.

     */

    getLastCmFallback() {

        return null;

    }

    // Drag and drop methods.

    /**

     * The element drop start hook.

     *

     * @param {Object} dropdata the dropdata

     */

    dragStart(dropdata) {

        this.reactive.dispatch('sectionDrag', [dropdata.id], true);

    }

    /**

     * The element drop end hook.

     *

     * @param {Object} dropdata the dropdata

     */

    dragEnd(dropdata) {

        this.reactive.dispatch('sectionDrag', [dropdata.id], false);

    }

    /**

     * Validate if the drop data can be dropped over the component.

     *

     * @param {Object} dropdata the exported drop data.

     * @returns {boolean}

     */

    validateDropData(dropdata) {

        // We accept files.

        if (dropdata?.type === 'files') {

            return true;

        }

        // We accept any course module unless it can form a subsection loop.

        if (dropdata?.type === 'cm') {

            if (this.section?.component && dropdata?.hasdelegatedsection === true) {

                return false;

            }

            return true;

        }

        if (dropdata?.type === 'section') {

            // Sections controlled by a plugin cannot accept sections.

            if (this.section.component !== null) {

                return false;

            }

            // We accept any section but yourself and the next one.

            return dropdata?.id != this.id && dropdata?.number != this.section.number + 1;

        }

        return false;

    }

    /**

     * Display the component dropzone.

     *

     * @param {Object} dropdata the accepted drop data

     */

    showDropZone(dropdata) {

        if (dropdata.type == 'files') {

            this.addOverlay({

                content: getString('addfilehere', 'core'),

                icon: Templates.renderPix('t/download', 'core'),

            }).then(() => {

                // Check if we still need the file dropzone.

                if (!this.dragdrop?.isDropzoneVisible()) {

                    this.removeOverlay();

                }

                return;

            }).catch((error) => {

                throw error;

            });

        }

        if (dropdata.type == 'cm') {

            const lastCm = this.getLastCm();

            lastCm?.classList.add(this.classes.DROPDOWN);

            if (!lastCm) {

                this.getLastCmFallback()?.classList.add(this.classes.DROPDOWN);

            }

        }

        if (dropdata.type == 'section') {

            this.element.classList.remove(this.classes.DROPUP);

            this.element.classList.add(this.classes.DROPDOWN);

        }

    }

    /**

     * Hide the component dropzone.

     */

    hideDropZone() {

        this.getLastCm()?.classList.remove(this.classes.DROPDOWN);

        this.getLastCmFallback()?.classList.remove(this.classes.DROPDOWN);

        this.element.classList.remove(this.classes.DROPUP);

        this.element.classList.remove(this.classes.DROPDOWN);

        this.removeOverlay();

    }

    /**

     * Drop event handler.

     *

     * @param {Object} dropdata the accepted drop data

     * @param {Event} event the drop event

     */

    drop(dropdata, event) {

        // File handling.

        if (dropdata.type == 'files') {

            this.reactive.uploadFiles(

                this.section.id,

                this.section.number,

                dropdata.files

            );

            return;

        }

        // Call the move mutation.

        if (dropdata.type == 'cm') {

            const mutation = (event.altKey) ? 'cmDuplicate' : 'cmMove';

            this.reactive.dispatch(mutation, [dropdata.id], this.id);

        }

        if (dropdata.type == 'section') {

            this.reactive.dispatch('sectionMoveAfter', [dropdata.id], this.id);

        }

    }

}