MDL-81050 course: Propagate section name change in the content

Add a new feature to propagate the section name change through the
course content. Any element with data-section-name-for=<sectionid>
will automatically update the section name.

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

@@ -63,6 +63,7 @@ export default class Component extends BaseComponent {
         };
         this.selectorGenerators = {
             cmNameFor: (id) => `[data-cm-name-for='${id}']`,
+            sectionNameFor: (id) => `[data-section-name-for='${id}']`,
         };
         // Default classes to toggle on refresh.
         this.classes = {
@@ -236,6 +237,7 @@ export default class Component extends BaseComponent {
             {watch: `cm.name:updated`, handler: this._refreshCmName},
             // Update section number and title.
             {watch: `section.number:updated`, handler: this._refreshSectionNumber},
+            {watch: `section.title:updated`, handler: this._refreshSectionTitle},
             // Collapse and expand sections.
             {watch: `section.contentcollapsed:updated`, handler: this._refreshSectionCollapsed},
             // Sections and cm sorting.
@@ -429,6 +431,22 @@ export default class Component extends BaseComponent {
         }
     }
 
+    /**
+     * Update a course section name on the whole page.
+     *
+     * @param {object} param
+     * @param {Object} param.element details the update details.
+     */
+    _refreshSectionTitle({element}) {
+        // Replace the text content of the section name in the whole page.
+        const allSectionNamesFor = document.querySelectorAll(
+            this.selectorGenerators.sectionNameFor(element.id)
+        );
+        allSectionNamesFor.forEach((sectionNameFor) => {
+            sectionNameFor.textContent = element.title;
+        });
+    }
+
     /**
      * Refresh a section cm list.
      *