Merge branch 'MDL-72291' of git://github.com/paulholden/moodle

lib/amd/build/local/inplace_editable/events.min.js

@@ -0,0 +1,2 @@
+define ("core/local/inplace_editable/events",["exports","jquery","core/event_dispatcher"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.notifyElementUpdateFailed=a.notifyElementUpdated=a.eventTypes=void 0;b=function(a){return a&&a.__esModule?a:{default:a}}(b);var d={elementUpdated:"core/inplace_editable:updated",elementUpdateFailed:"core/inplace_editable:updateFailed"};a.eventTypes=d;a.notifyElementUpdated=function notifyElementUpdated(a,b,e){return(0,c.dispatchEvent)(d.elementUpdated,{ajaxreturn:b,oldvalue:e},a)};a.notifyElementUpdateFailed=function notifyElementUpdateFailed(a,b,e){return(0,c.dispatchEvent)(d.elementUpdateFailed,{exception:b,newvalue:e},a,{cancelable:!0})};var e=!1;if(!e){document.addEventListener(d.elementUpdated,function(a){var c=b.default.Event("updated",a.detail);(0,b.default)(a.target).trigger(c)});document.addEventListener(d.elementUpdateFailed,function(a){var c=b.default.Event("updatefailed",a.detail);(0,b.default)(a.target).trigger(c);if(c.isDefaultPrevented()){a.preventDefault()}});e=!0}});
+//# sourceMappingURL=events.min.js.map

lib/amd/src/inplace_editable.js

@@ -37,8 +37,9 @@ define(
         'core/url',
         'core/form-autocomplete',
         'core/pending',
+        'core/local/inplace_editable/events',
     ],
-    function($, ajax, templates, notification, str, cfg, url, autocomplete, Pending) {
+    function($, ajax, templates, notification, str, cfg, url, autocomplete, Pending, Events) {
 
         const removeSpinner = function(element) {
             element.removeClass('updating');
@@ -79,11 +80,9 @@ define(
                             if (!silent) {
                                 newelement.find('[data-inplaceeditablelink]').focus();
                             }
-                            newelement.trigger({
+
-                                type: 'updated',
+                            // Trigger updated event on the DOM element.
-                                ajaxreturn: data,
+                            Events.notifyElementUpdated(newelement.get(0), data, oldvalue);
-                                oldvalue: oldvalue,
-                            });
 
                             return;
                         });
@@ -92,14 +91,12 @@ define(
                     return pendingPromise.resolve();
                 })
                 .fail(function(ex) {
-                    var e = $.Event('updatefailed', {
-                        exception: ex,
-                        newvalue: value
-                    });
                     removeSpinner(mainelement);
                     M.util.js_complete(pendingId);
-                    mainelement.trigger(e);
+
-                    if (!e.isDefaultPrevented()) {
+                    // Trigger update failed event on the DOM element.
+                    let updateFailedEvent = Events.notifyElementUpdateFailed(mainelement.get(0), ex, value);
+                    if (!updateFailedEvent.defaultPrevented) {
                         notification.exception(ex);
                     }
                 });

lib/amd/src/local/inplace_editable/events.js

@@ -0,0 +1,126 @@
+// 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/>.
+
+/**
+ * Inplace editable module events
+ *
+ * @module      core/local/inplace_editable/events
+ * @copyright   2021 Paul Holden <paulh@moodle.com>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import $ from 'jquery';
+import {dispatchEvent} from 'core/event_dispatcher';
+
+/**
+ * Module events
+ *
+ * @constant
+ * @property {String} elementUpdated See {@link event:elementUpdated}
+ * @property {String} elementUpdateFailed See {@link event:elementUpdateFailed}
+ */
+export const eventTypes = {
+
+    /**
+     * Event triggered when an element has been updated
+     *
+     * @event elementUpdated
+     * @type {CustomEvent}
+     * @property {HTMLElement} target The element that was updated
+     * @property {Object} detail
+     * @property {Object} detail.ajaxreturn The data returned from the update AJAX request
+     * @property {String} detail.oldvalue The previous value of the element
+     */
+    elementUpdated: 'core/inplace_editable:updated',
+
+    /**
+     * Event triggered when an element update has failed
+     *
+     * @event elementUpdateFailed
+     * @type {CustomEvent}
+     * @property {HTMLElement} target The element that failed to update
+     * @property {Object} detail
+     * @property {Object} detail.exception The raised exception
+     * @property {String} detail.newvalue The intended value of the element
+     */
+    elementUpdateFailed: 'core/inplace_editable:updateFailed',
+};
+
+/**
+ * Notify element of successful update
+ *
+ * @method
+ * @param {HTMLElement} element The element that was updated
+ * @param {Object} ajaxreturn The data returned from the update AJAX request
+ * @param {String} oldvalue The previous value of the element
+ * @returns {CustomEvent}
+ * @fires elementUpdated
+ */
+export const notifyElementUpdated = (element, ajaxreturn, oldvalue) => dispatchEvent(
+    eventTypes.elementUpdated,
+    {
+        ajaxreturn,
+        oldvalue,
+    },
+    element
+);
+
+/**
+ * Notify element of failed update
+ *
+ * @method
+ * @param {HTMLElement} element The element that failed to update
+ * @param {Object} exception The raised exception
+ * @param {String} newvalue The intended value of the element
+ * @returns {CustomEvent}
+ * @fires elementUpdateFailed
+ */
+export const notifyElementUpdateFailed = (element, exception, newvalue) => dispatchEvent(
+    eventTypes.elementUpdateFailed,
+    {
+        exception,
+        newvalue,
+    },
+    element,
+    {
+        cancelable: true
+    }
+);
+
+let legacyEventsRegistered = false;
+if (!legacyEventsRegistered) {
+    // The following event triggers are legacy and will be removed in the future.
+    // The following approach provides a backwards-compatability layer for the new events.
+    // Code should be updated to make use of native events.
+
+    // Listen for the new native elementUpdated event, and trigger the legacy jQuery event.
+    document.addEventListener(eventTypes.elementUpdated, event => {
+        const legacyEvent = $.Event('updated', event.detail);
+        $(event.target).trigger(legacyEvent);
+    });
+
+    // Listen for the new native elementUpdateFailed event, and trigger the legacy jQuery event.
+    document.addEventListener(eventTypes.elementUpdateFailed, event => {
+        const legacyEvent = $.Event('updatefailed', event.detail);
+        $(event.target).trigger(legacyEvent);
+
+        // If the legacy event is cancelled, so should the native event.
+        if (legacyEvent.isDefaultPrevented()) {
+            event.preventDefault();
+        }
+    });
+
+    legacyEventsRegistered = true;
+}

lib/upgrade.txt

@@ -67,6 +67,8 @@ information provided here is intended especially for developers.
   callers to get the name without escaped characters.
 * The inplace_editable element constructor now accepts an optional pix_icon parameter to use as it's editing icon when
   rendered. The default icon for "select" types has also changed to a dropdown caret ("t/expanded").
+* The inplace_editable Javascript module now emits native events, removing the jQuery dependency from calling code
+  that wants to listen for the events. Backwards compatibility with existing code using jQuery is preserved.
 * The function message_send() in messagelib.php now returns false if there is an error sending the message to the
   message processor (MDL-70046).
 * The following functions are deprecated in questionlib.php and moved to the new location.