course/format/amd/src/local/courseeditor/dndsection.js

// 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);
        }
    }
}