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

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * Course index section title draggable component.
  18.  *
  19.  * This component is used to control specific course section interactions like drag and drop
  20.  * in both course index and course content.
  21.  *
  22.  * @module     core_courseformat/local/courseeditor/dndsectionitem
  23.  * @class      core_courseformat/local/courseeditor/dndsectionitem
  24.  * @copyright  2021 Ferran Recio <ferran@moodle.com>
  25.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  26.  */
  28. import {BaseComponent, DragDrop} from 'core/reactive';
  30. export default class extends BaseComponent {
  32.     /**
  33.      * Initial state ready method.
  34.      *
  35.      * @param {number} sectionid the section id
  36.      * @param {Object} state the initial state
  37.      * @param {Element} fullregion the complete section region to mark as dragged
  38.      */
  39.     configDragDrop(sectionid, state, fullregion) {
  41.         this.id = sectionid;
  42.         if (this.section === undefined) {
  43.             this.section = state.section.get(this.id);
  44.         }
  45.         if (this.course === undefined) {
  46.             this.course = state.course;
  47.         }
  49.         // Prevent topic zero and delegated sections from being draggable.
  50.         if (this.section.number > 0 && this.section.component === null) {
  51.             this.getDraggableData = this._getDraggableData;
  52.         }
  54.         this.fullregion = fullregion;
  56.         // Drag and drop is only available for components compatible course formats.
  57.         if (this.reactive.isEditing && this.reactive.supportComponents) {
  58.             // Init the dropzone.
  59.             this.dragdrop = new DragDrop(this);
  60.             // Save dropzone classes.
  61.             this.classes = this.dragdrop.getClasses();
  62.         }
  63.     }
  65.     /**
  66.      * Remove all subcomponents dependencies.
  67.      */
  68.     destroy() {
  69.         if (this.dragdrop !== undefined) {
  70.             this.dragdrop.unregister();
  71.         }
  72.     }
  74.     /**
  75.      * Enable or disable the draggable property.
  76.      *
  77.      * @param {bool} value the new draggable value
  78.      */
  79.     setDraggable(value) {
  80.         if (this.getDraggableData) {
  81.             this.dragdrop?.setDraggable(value);
  82.         }
  83.     }
  85.     // Drag and drop methods.
  87.     /**
  88.      * The element drop start hook.
  89.      *
  90.      * @param {Object} dropdata the dropdata
  91.      */
  92.     dragStart(dropdata) {
  93.         this.reactive.dispatch('sectionDrag', [dropdata.id], true);
  94.     }
  96.     /**
  97.      * The element end start hook.
  98.      *
  99.      * @param {Object} dropdata the dropdata
  100.      */
  101.     dragEnd(dropdata) {
  102.         this.reactive.dispatch('sectionDrag', [dropdata.id], false);
  103.     }
  105.     /**
  106.      * Get the draggable data of this component.
  107.      *
  108.      * @returns {Object} exported course module drop data
  109.      */
  110.     _getDraggableData() {
  111.         const exporter = this.reactive.getExporter();
  112.         return exporter.sectionDraggableData(this.reactive.state, this.id);
  113.     }
  115.     /**
  116.      * Validate if the drop data can be dropped over the component.
  117.      *
  118.      * @param {Object} dropdata the exported drop data.
  119.      * @returns {boolean}
  120.      */
  121.     validateDropData(dropdata) {
  122.         // Course module validation.
  123.         if (dropdata?.type === 'cm') {
  124.             // Prevent content loops with subsections.
  125.             if (this.section?.component && dropdata?.hasdelegatedsection === true) {
  126.                 return false;
  127.             }
  128.             // The first section element is already there so we can ignore it.
  129.             const firstcmid = this.section?.cmlist[0];
  130.             return dropdata.id !== firstcmid;
  131.         }
  132.         return false;
  133.     }
  135.     /**
  136.      * Display the component dropzone.
  137.      */
  138.     showDropZone() {
  139.         this.element.classList.add(this.classes.DROPZONE);
  140.     }
  142.     /**
  143.      * Hide the component dropzone.
  144.      */
  145.     hideDropZone() {
  146.         this.element.classList.remove(this.classes.DROPZONE);
  147.     }
  149.     /**
  150.      * Drop event handler.
  151.      *
  152.      * @param {Object} dropdata the accepted drop data
  153.      * @param {Event} event the drop event
  154.      */
  155.     drop(dropdata, event) {
  156.         // Call the move mutation.
  157.         if (dropdata.type == 'cm') {
  158.             const mutation = (event.altKey) ? 'cmDuplicate' : 'cmMove';
  159.             this.reactive.dispatch(mutation, [dropdata.id], this.id, this.section?.cmlist[0]);
  160.         }
  161.     }
  162. }