mirror of
https://github.com/moodle/moodle.git
synced 2025-04-22 08:55:15 +02:00
MDL-72291 output: emit native events from inplace editable element.
Removes jQuery dependency from calling code that wants to listen for these events. Maintains backwards compatibility with existing code that does want to listen to jQuery-style events.
This commit is contained in:
parent
214adb7984
commit
244d304b6e
2
lib/amd/build/inplace_editable.min.js
vendored
2
lib/amd/build/inplace_editable.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
lib/amd/build/local/inplace_editable/events.min.js
vendored
Normal file
2
lib/amd/build/local/inplace_editable/events.min.js
vendored
Normal file
@ -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
|
1
lib/amd/build/local/inplace_editable/events.min.js.map
Normal file
1
lib/amd/build/local/inplace_editable/events.min.js.map
Normal file
File diff suppressed because one or more lines are too long
@ -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',
|
||||
ajaxreturn: data,
|
||||
oldvalue: oldvalue,
|
||||
});
|
||||
|
||||
// Trigger updated event on the DOM element.
|
||||
Events.notifyElementUpdated(newelement.get(0), data, 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);
|
||||
}
|
||||
});
|
||||
|
126
lib/amd/src/local/inplace_editable/events.js
Normal file
126
lib/amd/src/local/inplace_editable/events.js
Normal file
@ -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;
|
||||
}
|
@ -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.
|
||||
|
Loading…
x
Reference in New Issue
Block a user