MDL-79693 core: Move toast regions to document on modal close

lib/amd/build/toast.min.js

@@ -5,6 +5,6 @@ define("core/toast",["exports","core/templates","core/notification","core/pendin
    * @module     core/toast
    * @copyright  2019 Andrew Nicols <andrew@nicols.co.uk>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.addToastRegion=_exports.add=void 0,_templates=_interopRequireDefault(_templates),_notification=_interopRequireDefault(_notification),_pending=_interopRequireDefault(_pending);const addToastRegion=async parent=>{const pendingPromise=new _pending.default("addToastRegion");try{const{html:html,js:js}=await _templates.default.renderForPromise("core/local/toast/wrapper",{});_templates.default.prependNodeContents(parent,html,js)}catch(e){_notification.default.exception(e)}pendingPromise.resolve()};_exports.addToastRegion=addToastRegion;_exports.add=async(message,configuration)=>{const pendingPromise=new _pending.default("addToastRegion");configuration={type:"info",closeButton:!1,autohide:!0,delay:4e3,...configuration};try{const targetNode=await getTargetNode(),{html:html,js:js}=await _templates.default.renderForPromise("core/local/toast/message",{message:await message,...configuration});_templates.default.prependNodeContents(targetNode,html,js)}catch(e){_notification.default.exception(e)}pendingPromise.resolve()};const getTargetNode=async()=>{const regions=document.querySelectorAll(".toast-wrapper");return regions.length?regions[regions.length-1]:(await addToastRegion(document.body),getTargetNode())}}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.removeToastRegion=_exports.addToastRegion=_exports.add=void 0,_templates=_interopRequireDefault(_templates),_notification=_interopRequireDefault(_notification),_pending=_interopRequireDefault(_pending);const addToastRegion=async parent=>{const pendingPromise=new _pending.default("addToastRegion");try{const{html:html,js:js}=await _templates.default.renderForPromise("core/local/toast/wrapper",{});_templates.default.prependNodeContents(parent,html,js)}catch(e){_notification.default.exception(e)}pendingPromise.resolve()};_exports.addToastRegion=addToastRegion;_exports.add=async(message,configuration)=>{const pendingPromise=new _pending.default("addToastRegion");configuration={type:"info",closeButton:!1,autohide:!0,delay:4e3,...configuration};try{const{html:html,js:js}=await _templates.default.renderForPromise("core/local/toast/message",{message:await message,...configuration}),targetNode=await getTargetNode();_templates.default.prependNodeContents(targetNode,html,js)}catch(e){_notification.default.exception(e)}pendingPromise.resolve()};const getTargetNode=async()=>{const regions=document.querySelectorAll(".toast-wrapper");return regions.length?regions[regions.length-1]:(await addToastRegion(document.body),getTargetNode())};_exports.removeToastRegion=async function(parent){let newParent=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;const pendingPromise=new _pending.default("core/toast:removeToastRegion"),getRegionFromParent=thisParent=>thisParent.querySelector(".toast-wrapper"),regionToRemove=getRegionFromParent(parent);if(regionToRemove){const targetRegion=getRegionFromParent(newParent);regionToRemove.children.forEach((node=>{targetRegion.insertBefore(node,targetRegion.firstChild)})),regionToRemove.remove()}pendingPromise.resolve()}}));
 
 //# sourceMappingURL=toast.min.js.map

lib/amd/src/modal.js

@@ -34,6 +34,7 @@ import * as FilterEvents from 'core_filters/events';
 import * as FocusLock from 'core/local/aria/focuslock';
 import * as Aria from 'core/aria';
 import * as Fullscreen from 'core/fullscreen';
+import {removeToastRegion} from './toast';
 
 /**
  * A configuration to provide to the modal.
@@ -935,6 +936,7 @@ export default class Modal {
      */
     destroy() {
         this.hide();
+        removeToastRegion(this.getBody().get(0));
         this.root.remove();
         this.root.trigger(ModalEvents.destroyed, this);
         this.attachmentPoint.remove();

lib/amd/src/toast.js

@@ -24,6 +24,8 @@ import Templates from 'core/templates';
 import Notification from 'core/notification';
 import Pending from 'core/pending';
 
+const regionSelector = '.toast-wrapper';
+
 /**
  * Add a new region to place toasts in, taking in a parent element.
  *
@@ -84,11 +86,11 @@ export const add = async(message, configuration) => {
 
     const templateName = `core/local/toast/message`;
     try {
-        const targetNode = await getTargetNode();
         const {html, js} = await Templates.renderForPromise(templateName, {
             message: await message,
             ...configuration
         });
+        const targetNode = await getTargetNode();
         Templates.prependNodeContents(targetNode, html, js);
     } catch (e) {
         Notification.exception(e);
@@ -98,7 +100,7 @@ export const add = async(message, configuration) => {
 };
 
 const getTargetNode = async() => {
-    const regions = document.querySelectorAll('.toast-wrapper');
+    const regions = document.querySelectorAll(regionSelector);
 
     if (regions.length) {
         return regions[regions.length - 1];
@@ -107,3 +109,28 @@ const getTargetNode = async() => {
     await addToastRegion(document.body, 'fixed-bottom');
     return getTargetNode();
 };
+
+/**
+ * Remove a parent region.
+ *
+ * This is useful in cases such as where a dialog is to be removed and the toast region should be moved back to the body.
+ *
+ * @param {HTMLElement} parent The region that the toast region is currently a child of.
+ * @param {HTMLElement} newParent The parent element to move the toast region content to.
+ */
+export const removeToastRegion = async(parent, newParent = document) => {
+    const pendingPromise = new Pending('core/toast:removeToastRegion');
+    const getRegionFromParent = (thisParent) => thisParent.querySelector(regionSelector);
+
+    const regionToRemove = getRegionFromParent(parent);
+    if (regionToRemove) {
+        const targetRegion = getRegionFromParent(newParent);
+
+        regionToRemove.children.forEach((node) => {
+            targetRegion.insertBefore(node, targetRegion.firstChild);
+        });
+
+        regionToRemove.remove();
+    }
+    pendingPromise.resolve();
+};