MDL-71727 course: sync dragged elements

Two new mutations are added to indicate that a section
or a cm is being dragged. The logic related to refresh
a section or a cm has been moved to components to
simplify the code.

course/format/amd/src/local/content/section.js

@@ -38,6 +38,11 @@ export default class extends DndSection {
             SECTION_ITEM: `[data-for='section_title']`,
             CM: `[data-for="cmitem"]`,
         };
+        // All classes will be loaded later by DndCmItem.
+        this.classes = {};
+
+        // We need our id to watch specific events.
+        this.id = this.element.dataset.id;
     }
 
     /**
@@ -63,6 +68,17 @@ export default class extends DndSection {
         }
     }
 
+    /**
+     * Component watchers.
+     *
+     * @returns {Array} of watchers
+     */
+    getWatchers() {
+        return [
+            {watch: `section[${this.id}]:updated`, handler: this._refreshSection},
+        ];
+    }
+
     /**
      * Get the last CM element of that section.
      *
@@ -76,4 +92,14 @@ export default class extends DndSection {
         }
         return cms[cms.length - 1];
     }
-}
\ No newline at end of file
+
+    /**
+     * Update a course index section using the state information.
+     *
+     * @param {Object} details the update details.
+     */
+    _refreshSection({element}) {
+        // Update classes.
+        this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);
+    }
+}

course/format/amd/src/local/content/section/cmitem.js

@@ -38,6 +38,8 @@ export default class extends DndCmItem {
         this.selectors = {
             DRAGICON: `.editing_move`,
         };
+        // All classes will be loaded later by DndCmItem.
+        this.classes = {};
         // We need our id to watch specific events.
         this.id = this.element.dataset.id;
     }
@@ -58,6 +60,17 @@ export default class extends DndCmItem {
     getWatchers() {
         return [
             {watch: `cm[${this.id}]:deleted`, handler: this.unregister},
+            {watch: `cm[${this.id}]:updated`, handler: this._refreshCm},
         ];
     }
+
+    /**
+     * Update a course index cm using the state information.
+     *
+     * @param {Object} details the update details.
+     */
+    _refreshCm({element}) {
+        // Update classes.
+        this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);
+    }
 }
\ No newline at end of file