mirror of
https://github.com/moodle/moodle.git
synced 2025-01-17 21:49:15 +01:00
MDL-82373 core_message: Make message drawer router behat-aware
The drawer router was modifying the DOM in a variety of ways and hiding content, without any pendingJS checks. As a result, there were cases where a part of the UI was not visible, but had been rendered and was in the DOM. This change wraps the router Go method in a pendingJS call that only resolves when the router transition completes. Additionally the lazy load manager had a similar issue.
This commit is contained in:
parent
bf6cf572ca
commit
91e70280a2
@ -5,6 +5,6 @@
|
||||
* @copyright 2018 Ryan Wyllie <ryan@moodle.com>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
define("core_message/message_drawer_lazy_load_list",["jquery","core/custom_interaction_events"],(function($,CustomEvents){var SELECTORS_ROOT='[data-region="lazy-load-list"]',SELECTORS_LOADING_ICON_CONTAINER='[data-region="loading-icon-container"]',SELECTORS_CONTENT_CONTAINER='[data-region="content-container"]',SELECTORS_EMPTY_MESSAGE='[data-region="empty-message-container"]',SELECTORS_PLACEHOLDER='[data-region="placeholder-container"]',stopLoading=function(root){root.attr("data-loading",!1)},getContentContainer=function(root){return root.find(SELECTORS_CONTENT_CONTAINER)},hideLoadingIcon=function(root){root.find(SELECTORS_LOADING_ICON_CONTAINER).addClass("hidden")},showEmptyMessage=function(root){root.find(SELECTORS_EMPTY_MESSAGE).removeClass("hidden")},hidePlaceholder=function(root){root.find(SELECTORS_PLACEHOLDER).addClass("hidden")},showContent=function(root){getContentContainer(root).removeClass("hidden")},hideContent=function(root){getContentContainer(root).addClass("hidden")},setLoadedAll=function(root,value){root.attr("data-loaded-all",value)},loadAndRender=function(root,loadCallback,renderCallback){var userId=function(root){return root.attr("data-user-id")}(root);return function(root){root.attr("data-loading",!0)}(root),loadCallback(root,userId).then((function(items){if(items.length>0){var contentContainer=getContentContainer(root);return renderCallback(contentContainer,items,userId).then((function(){return items}))}return items})).then((function(items){return stopLoading(root),root.attr("data-seen",!0),items.length||setLoadedAll(root,!0),items})).catch((function(){stopLoading(root),root.attr("data-seen",!0)}))},initialLoadAndRender=function(root,loadCallback,renderCallback){return getContentContainer(root).empty(),function(root){root.find(SELECTORS_PLACEHOLDER).removeClass("hidden")}(root),hideContent(root),loadAndRender(root,loadCallback,renderCallback).then((function(items){hidePlaceholder(root),items.length?showContent(root):showEmptyMessage(root)})).catch((function(){hidePlaceholder(root),showContent(root)}))},registerEventListeners=function(root,loadCallback,renderCallback){CustomEvents.define(root,[CustomEvents.events.scrollBottom]),root.on(CustomEvents.events.scrollBottom,(function(){(function(root){return!function(root){return"true"==root.attr("data-loaded-all")}(root)&&!function(root){return"true"===root.attr("data-loading")}(root)})(root)&&(!function(root){root.find(SELECTORS_LOADING_ICON_CONTAINER).removeClass("hidden")}(root),loadAndRender(root,loadCallback,renderCallback).then((function(){return hideLoadingIcon(root)})).catch((function(){return hideLoadingIcon(root)})))}))};return{show:function(root,loadCallback,renderCallback){(root=$(root)).attr("data-init")||(registerEventListeners(root,loadCallback,renderCallback),initialLoadAndRender(root,loadCallback,renderCallback),root.attr("data-init",!0))},getContentContainer:getContentContainer,getRoot:function(containerElement){return containerElement.find(SELECTORS_ROOT)},setLoadedAll:setLoadedAll,showEmptyMessage:showEmptyMessage,hideEmptyMessage:function(root){root.find(SELECTORS_EMPTY_MESSAGE).addClass("hidden")},showContent:showContent,hideContent:hideContent}}));
|
||||
define("core_message/message_drawer_lazy_load_list",["jquery","core/custom_interaction_events","core/pending"],(function($,CustomEvents,PendingPromise){var SELECTORS_ROOT='[data-region="lazy-load-list"]',SELECTORS_LOADING_ICON_CONTAINER='[data-region="loading-icon-container"]',SELECTORS_CONTENT_CONTAINER='[data-region="content-container"]',SELECTORS_EMPTY_MESSAGE='[data-region="empty-message-container"]',SELECTORS_PLACEHOLDER='[data-region="placeholder-container"]',stopLoading=function(root){root.attr("data-loading",!1)},getContentContainer=function(root){return root.find(SELECTORS_CONTENT_CONTAINER)},hideLoadingIcon=function(root){root.find(SELECTORS_LOADING_ICON_CONTAINER).addClass("hidden")},showEmptyMessage=function(root){root.find(SELECTORS_EMPTY_MESSAGE).removeClass("hidden")},hidePlaceholder=function(root){root.find(SELECTORS_PLACEHOLDER).addClass("hidden")},showContent=function(root){getContentContainer(root).removeClass("hidden")},hideContent=function(root){getContentContainer(root).addClass("hidden")},setLoadedAll=function(root,value){root.attr("data-loaded-all",value)},loadAndRender=function(root,loadCallback,renderCallback){var userId=function(root){return root.attr("data-user-id")}(root);return function(root){root.attr("data-loading",!0)}(root),loadCallback(root,userId).then((function(items){if(items.length>0){var contentContainer=getContentContainer(root);return renderCallback(contentContainer,items,userId).then((function(){return items}))}return items})).then((function(items){return stopLoading(root),root.attr("data-seen",!0),items.length||setLoadedAll(root,!0),items})).catch((function(){stopLoading(root),root.attr("data-seen",!0)}))},initialLoadAndRender=function(root,loadCallback,renderCallback){const pendingPromise=new PendingPromise("initialLoadAndRender");return getContentContainer(root).empty(),function(root){root.find(SELECTORS_PLACEHOLDER).removeClass("hidden")}(root),hideContent(root),loadAndRender(root,loadCallback,renderCallback).then((function(items){hidePlaceholder(root),items.length?showContent(root):showEmptyMessage(root)})).catch((function(){hidePlaceholder(root),showContent(root)})).then((()=>{pendingPromise.resolve()}))},registerEventListeners=function(root,loadCallback,renderCallback){CustomEvents.define(root,[CustomEvents.events.scrollBottom]),root.on(CustomEvents.events.scrollBottom,(function(){(function(root){return!function(root){return"true"==root.attr("data-loaded-all")}(root)&&!function(root){return"true"===root.attr("data-loading")}(root)})(root)&&(!function(root){root.find(SELECTORS_LOADING_ICON_CONTAINER).removeClass("hidden")}(root),loadAndRender(root,loadCallback,renderCallback).then((function(){return hideLoadingIcon(root)})).catch((function(){return hideLoadingIcon(root)})))}))};return{show:function(root,loadCallback,renderCallback){(root=$(root)).attr("data-init")||(registerEventListeners(root,loadCallback,renderCallback),initialLoadAndRender(root,loadCallback,renderCallback),root.attr("data-init",!0))},getContentContainer:getContentContainer,getRoot:function(containerElement){return containerElement.find(SELECTORS_ROOT)},setLoadedAll:setLoadedAll,showEmptyMessage:showEmptyMessage,hideEmptyMessage:function(root){root.find(SELECTORS_EMPTY_MESSAGE).addClass("hidden")},showContent:showContent,hideContent:hideContent}}));
|
||||
|
||||
//# sourceMappingURL=message_drawer_lazy_load_list.min.js.map
|
File diff suppressed because one or more lines are too long
@ -9,6 +9,6 @@
|
||||
* @copyright 2018 Ryan Wyllie <ryan@moodle.com>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
define("core_message/message_drawer_router",["jquery","core/pubsub","core/str","core_message/message_drawer_events","core/aria"],(function($,PubSub,Str,MessageDrawerEvents,Aria){var routes={},history={},SELECTORS_CAN_RECEIVE_FOCUS='input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]',SELECTORS_ROUTES_BACK="[data-route-back]",changeRoute=function(namespace,newRoute){var newConfig,fromPanel=[].slice.call(arguments).some((function(arg){return"frompanel"==arg})),args=[].slice.call(arguments,2),renderPromise=$.Deferred().resolve().promise();if(Object.keys(routes[namespace]).forEach((function(route){var config=routes[namespace][route],isMatch=route===newRoute;isMatch&&(newConfig=config),config.parameters.forEach((function(element){"object"==typeof element&&null!==element&&(element.removeClass("previous"),element.attr("data-from-panel",!1),isMatch?(fromPanel&&element.attr("data-from-panel",!0),element.removeClass("hidden"),Aria.unhide(element.get())):element.attr("data-in-panel")&&"view-search"!=newRoute&&"view-overview"!=newRoute||(element.addClass("hidden"),Aria.hide(element.get())))}))})),newConfig&&newConfig.onGo){renderPromise=newConfig.onGo.apply(void 0,newConfig.parameters.concat(args));for(var currentFocusElement=$(document.activeElement),hasFocus=!1,firstFocusable=null,i=1;i<newConfig.parameters.length;i++){var element=newConfig.parameters[i];if("object"==typeof element&&null!==element&&(firstFocusable||(firstFocusable=element),element.has(currentFocusElement).length)){hasFocus=!0;break}}hasFocus||firstFocusable.find(SELECTORS_CAN_RECEIVE_FOCUS).filter(":visible").first().focus()}var record={route:newRoute,params:args,renderPromise:renderPromise};return PubSub.publish(MessageDrawerEvents.ROUTE_CHANGED,record),record},go=function(namespace){var currentFocusElement=$(document.activeElement),record=changeRoute.apply(namespace,arguments),inHistory=!1;history[namespace]||(history[namespace]=[]),history[namespace]=history[namespace].reduce((function(carry,previous){return previous.route===record.route&&(inHistory=!0),inHistory||carry.push(previous),carry}),[]);var historylength=history[namespace].length,previousRecord=historylength?history[namespace][historylength-1]:null;if(previousRecord){for(var prevConfig=routes[namespace][previousRecord.route],elements=prevConfig.parameters,i=1;i<elements.length;i++)"object"==typeof elements[i]&&null!==elements[i]&&elements[i].addClass("previous");previousRecord.focusElement=currentFocusElement,prevConfig.getDescription&&prevConfig.getDescription.apply(null,prevConfig.parameters.concat(previousRecord.params)).then((function(description){return Str.get_string("backto","core_message",description)})).then((function(label){return record.renderPromise.then((function(){routes[namespace][record.route].parameters.forEach((function(element){"object"==typeof element&&element&&element.find(SELECTORS_ROUTES_BACK).attr("aria-label",label)}))}))})).catch((function(){}))}return history[namespace].push(record),record};return{add:function(namespace,route,parameters,onGo,getDescription){routes[namespace]||(routes[namespace]=[]),routes[namespace][route]={parameters:parameters,onGo:onGo,getDescription:getDescription}},go:go,back:function(namespace){if(history[namespace].length){history[namespace].pop();var previous=history[namespace].pop();previous&&(go.apply(void 0,[namespace,previous.route].concat(previous.params)),window.setTimeout((function(){previous.focusElement.focus()}),50))}}}}));
|
||||
define("core_message/message_drawer_router",["jquery","core/pubsub","core/str","core_message/message_drawer_events","core/aria","core/pending"],(function($,PubSub,Str,MessageDrawerEvents,Aria,PendingPromise){var routes={},history={},SELECTORS_CAN_RECEIVE_FOCUS='input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]',SELECTORS_ROUTES_BACK="[data-route-back]",changeRoute=function(namespace,newRoute){var newConfig,pendingPromise=new PendingPromise("message-drawer-router-".concat(namespace,"-").concat(newRoute)),fromPanel=[].slice.call(arguments).some((function(arg){return"frompanel"==arg})),args=[].slice.call(arguments,2),renderPromise=$.Deferred().resolve().promise();if(Object.keys(routes[namespace]).forEach((function(route){var config=routes[namespace][route],isMatch=route===newRoute;isMatch&&(newConfig=config),config.parameters.forEach((function(element){"object"==typeof element&&null!==element&&(element.removeClass("previous"),element.attr("data-from-panel",!1),isMatch?(fromPanel&&element.attr("data-from-panel",!0),element.removeClass("hidden"),Aria.unhide(element.get())):element.attr("data-in-panel")&&"view-search"!=newRoute&&"view-overview"!=newRoute||(element.addClass("hidden"),Aria.hide(element.get())))}))})),newConfig&&newConfig.onGo){renderPromise=newConfig.onGo.apply(void 0,newConfig.parameters.concat(args));for(var currentFocusElement=$(document.activeElement),hasFocus=!1,firstFocusable=null,i=1;i<newConfig.parameters.length;i++){var element=newConfig.parameters[i];if("object"==typeof element&&null!==element&&(firstFocusable||(firstFocusable=element),element.has(currentFocusElement).length)){hasFocus=!0;break}}hasFocus||firstFocusable.find(SELECTORS_CAN_RECEIVE_FOCUS).filter(":visible").first().focus()}var record={route:newRoute,params:args,renderPromise:renderPromise};return PubSub.publish(MessageDrawerEvents.ROUTE_CHANGED,record),renderPromise.then((()=>pendingPromise.resolve())),record},go=function(namespace){var currentFocusElement=$(document.activeElement),record=changeRoute.apply(namespace,arguments),inHistory=!1;history[namespace]||(history[namespace]=[]),history[namespace]=history[namespace].reduce((function(carry,previous){return previous.route===record.route&&(inHistory=!0),inHistory||carry.push(previous),carry}),[]);var historylength=history[namespace].length,previousRecord=historylength?history[namespace][historylength-1]:null;if(previousRecord){for(var prevConfig=routes[namespace][previousRecord.route],elements=prevConfig.parameters,i=1;i<elements.length;i++)"object"==typeof elements[i]&&null!==elements[i]&&elements[i].addClass("previous");previousRecord.focusElement=currentFocusElement,prevConfig.getDescription&&prevConfig.getDescription.apply(null,prevConfig.parameters.concat(previousRecord.params)).then((function(description){return Str.get_string("backto","core_message",description)})).then((function(label){return record.renderPromise.then((function(){routes[namespace][record.route].parameters.forEach((function(element){"object"==typeof element&&element&&element.find(SELECTORS_ROUTES_BACK).attr("aria-label",label)}))}))})).catch((function(){}))}return history[namespace].push(record),record};return{add:function(namespace,route,parameters,onGo,getDescription){routes[namespace]||(routes[namespace]=[]),routes[namespace][route]={parameters:parameters,onGo:onGo,getDescription:getDescription}},go:go,back:function(namespace){if(history[namespace].length){history[namespace].pop();var previous=history[namespace].pop();previous&&(go.apply(void 0,[namespace,previous.route].concat(previous.params)),window.setTimeout((function(){previous.focusElement.focus()}),50))}}}}));
|
||||
|
||||
//# sourceMappingURL=message_drawer_router.min.js.map
|
File diff suppressed because one or more lines are too long
@ -23,11 +23,13 @@
|
||||
define(
|
||||
[
|
||||
'jquery',
|
||||
'core/custom_interaction_events'
|
||||
'core/custom_interaction_events',
|
||||
'core/pending',
|
||||
],
|
||||
function(
|
||||
$,
|
||||
CustomEvents
|
||||
CustomEvents,
|
||||
PendingPromise,
|
||||
) {
|
||||
|
||||
var SELECTORS = {
|
||||
@ -248,6 +250,7 @@ function(
|
||||
* @return {Object} promise
|
||||
*/
|
||||
var initialLoadAndRender = function(root, loadCallback, renderCallback) {
|
||||
const pendingPromise = new PendingPromise('initialLoadAndRender');
|
||||
getContentContainer(root).empty();
|
||||
showPlaceholder(root);
|
||||
hideContent(root);
|
||||
@ -267,6 +270,10 @@ function(
|
||||
hidePlaceholder(root);
|
||||
showContent(root);
|
||||
return;
|
||||
})
|
||||
.then(() => {
|
||||
pendingPromise.resolve();
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -31,13 +31,15 @@ define(
|
||||
'core/str',
|
||||
'core_message/message_drawer_events',
|
||||
'core/aria',
|
||||
'core/pending',
|
||||
],
|
||||
function(
|
||||
$,
|
||||
PubSub,
|
||||
Str,
|
||||
MessageDrawerEvents,
|
||||
Aria
|
||||
Aria,
|
||||
PendingPromise,
|
||||
) {
|
||||
|
||||
/* @var {object} routes Message drawer route elements and callbacks. */
|
||||
@ -82,6 +84,7 @@ function(
|
||||
*/
|
||||
var changeRoute = function(namespace, newRoute) {
|
||||
var newConfig;
|
||||
var pendingPromise = new PendingPromise(`message-drawer-router-${namespace}-${newRoute}`);
|
||||
|
||||
// Check if the Route change call is made from an element in the app panel.
|
||||
var fromPanel = [].slice.call(arguments).some(function(arg) {
|
||||
@ -170,6 +173,7 @@ function(
|
||||
|
||||
PubSub.publish(MessageDrawerEvents.ROUTE_CHANGED, record);
|
||||
|
||||
renderPromise.then(() => pendingPromise.resolve());
|
||||
return record;
|
||||
};
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user