MDL-67513 forum: View conversations while fullscreen grading

Before this change when a modal was shown and an element on the page
was fullscreen the modal would be created behind it.

This change ensures that the modal will be inside an element that is
fullscreen so that it will be correctly displayed.

lib/amd/build/fullscreen.min.js

@@ -0,0 +1,2 @@
+define ("core/fullscreen",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.getElement=void 0;a.getElement=function getElement(){var a=null;if(document.fullscreenElement){a=document.fullscreenElement}else if(document.mozFullscreenElement){a=document.mozFullscreenElement}else if(document.msFullscreenElement){a=document.msFullscreenElement}else if(document.webkitFullscreenElement){a=document.webkitFullscreenElement}return a}});
+//# sourceMappingURL=fullscreen.min.js.map

lib/amd/build/fullscreen.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/fullscreen.js"],"names":["getElement","element","document","fullscreenElement","mozFullscreenElement","msFullscreenElement","webkitFullscreenElement"],"mappings":"iJA+B0B,QAAbA,CAAAA,UAAa,EAAM,CAC5B,GAAIC,CAAAA,CAAO,CAAG,IAAd,CACA,GAAIC,QAAQ,CAACC,iBAAb,CAAgC,CAC5BF,CAAO,CAAGC,QAAQ,CAACC,iBACtB,CAFD,IAEO,IAAID,QAAQ,CAACE,oBAAb,CAAmC,CAEtCH,CAAO,CAAGC,QAAQ,CAACE,oBACtB,CAHM,IAGA,IAAIF,QAAQ,CAACG,mBAAb,CAAkC,CAErCJ,CAAO,CAAGC,QAAQ,CAACG,mBACtB,CAHM,IAGA,IAAIH,QAAQ,CAACI,uBAAb,CAAsC,CAEzCL,CAAO,CAAGC,QAAQ,CAACI,uBACtB,CAED,MAAOL,CAAAA,CACV,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Detects if an element is fullscreen.\n *\n * @module     core/fullscreen\n * @class      fullscreen\n * @package    core\n * @copyright  2020 University of Nottingham\n * @author     Neill Magill <[email protected]>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * Gets the element that is fullscreen or null if no element is fullscreen.\n *\n * @returns {HTMLElement}\n */\nexport const getElement = () => {\n    let element = null;\n    if (document.fullscreenElement) {\n        element = document.fullscreenElement;\n    } else if (document.mozFullscreenElement) {\n        // Fallback for older Firefox.\n        element = document.mozFullscreenElement;\n    } else if (document.msFullscreenElement) {\n        // Fallback for Edge and IE.\n        element = document.msFullscreenElement;\n    } else if (document.webkitFullscreenElement) {\n        // Fallback for Chrome, Edge and Safari.\n        element = document.webkitFullscreenElement;\n    }\n\n    return element;\n};\n"],"file":"fullscreen.min.js"}

lib/amd/build/modal_backdrop.min.js

@@ -1,2 +1,2 @@
-define ("core/modal_backdrop",["jquery","core/templates","core/notification"],function(a,b,c){var d={ROOT:"[data-region=\"modal-backdrop\"]"},e=function(b){this.root=a(b);this.isAttached=!1;if(!this.root.is(d.ROOT)){c.exception({message:"Element is not a modal backdrop"})}};e.prototype.getRoot=function(){return this.root};e.prototype.attachToDOM=function(){if(this.isAttached){return}a("body").append(this.root);this.isAttached=!0};e.prototype.setZIndex=function(a){this.root.css("z-index",a)};e.prototype.isVisible=function(){return this.root.hasClass("show")};e.prototype.hasTransitions=function(){return this.getRoot().hasClass("fade")};e.prototype.show=function(){if(this.isVisible()){return}if(!this.isAttached){this.attachToDOM()}this.root.removeClass("hide").addClass("show")};e.prototype.hide=function(){if(!this.isVisible()){return}if(this.hasTransitions()){this.getRoot().one("transitionend webkitTransitionEnd oTransitionEnd",function(){this.getRoot().removeClass("show").addClass("hide")}.bind(this))}else{this.getRoot().removeClass("show").addClass("hide")}};e.prototype.destroy=function(){this.root.remove()};return e});
+define ("core/modal_backdrop",["jquery","core/templates","core/notification","core/fullscreen"],function(a,b,c,d){var e={ROOT:"[data-region=\"modal-backdrop\"]"},f=function(b){this.root=a(b);this.isAttached=!1;if(!this.root.is(e.ROOT)){c.exception({message:"Element is not a modal backdrop"})}};f.prototype.getRoot=function(){return this.root};f.prototype.getAttachmentPoint=function(){return a(d.getElement()||document.body)};f.prototype.attachToDOM=function(){this.getAttachmentPoint().append(this.root);if(this.isAttached){return}this.isAttached=!0};f.prototype.setZIndex=function(a){this.root.css("z-index",a)};f.prototype.isVisible=function(){return this.root.hasClass("show")};f.prototype.hasTransitions=function(){return this.getRoot().hasClass("fade")};f.prototype.show=function(){if(this.isVisible()){return}this.attachToDOM();this.root.removeClass("hide").addClass("show")};f.prototype.hide=function(){if(!this.isVisible()){return}if(this.hasTransitions()){this.getRoot().one("transitionend webkitTransitionEnd oTransitionEnd",function(){this.getRoot().removeClass("show").addClass("hide")}.bind(this))}else{this.getRoot().removeClass("show").addClass("hide")}a(document.body).append(this.getRoot())};f.prototype.destroy=function(){this.root.remove()};return f});
 //# sourceMappingURL=modal_backdrop.min.js.map

lib/amd/src/fullscreen.js

@@ -0,0 +1,48 @@
+// 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/>.
+
+/**
+ * Detects if an element is fullscreen.
+ *
+ * @module     core/fullscreen
+ * @class      fullscreen
+ * @package    core
+ * @copyright  2020 University of Nottingham
+ * @author     Neill Magill <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Gets the element that is fullscreen or null if no element is fullscreen.
+ *
+ * @returns {HTMLElement}
+ */
+export const getElement = () => {
+    let element = null;
+    if (document.fullscreenElement) {
+        element = document.fullscreenElement;
+    } else if (document.mozFullscreenElement) {
+        // Fallback for older Firefox.
+        element = document.mozFullscreenElement;
+    } else if (document.msFullscreenElement) {
+        // Fallback for Edge and IE.
+        element = document.msFullscreenElement;
+    } else if (document.webkitFullscreenElement) {
+        // Fallback for Chrome, Edge and Safari.
+        element = document.webkitFullscreenElement;
+    }
+
+    return element;
+};

lib/amd/src/modal.js

@@ -33,7 +33,20 @@ define([
     'core/modal_events',
     'core/local/aria/focuslock',
     'core/pending',
-], function($, Templates, Notification, KeyCodes, CustomEvents, ModalBackdrop, Event, ModalEvents, FocusLock, Pending) {
+    'core/fullscreen'
+], function(
+    $,
+    Templates,
+    Notification,
+    KeyCodes,
+    CustomEvents,
+    ModalBackdrop,
+    Event,
+    ModalEvents,
+    FocusLock,
+    Pending,
+    Fullscreen
+) {
 
     var SELECTORS = {
         CONTAINER: '[data-region="modal-container"]',
@@ -116,17 +129,20 @@ define([
     };
 
     /**
-     * Add the modal to the page, if it hasn't already been added. This includes running any
+     * Attach the modal to the correct part of the page.
+     *
+     * If it hasn't already been added it runs any
      * javascript that has been cached until now.
      *
      * @method attachToDOM
      */
     Modal.prototype.attachToDOM = function() {
+        this.getAttachmentPoint().append(this.root);
+
         if (this.isAttached) {
             return;
         }
 
-        $('body').append(this.root);
         FocusLock.trapFocus(this.root[0]);
 
         // If we'd cached any JS then we can run it how that the modal is
@@ -608,6 +624,15 @@ define([
         return this.getRoot().hasClass('fade');
     };
 
+    /**
+     * Gets the jQuery wrapped node that the Modal should be attached to.
+     *
+     * @returns {jQuery}
+     */
+    Modal.prototype.getAttachmentPoint = function() {
+        return $(Fullscreen.getElement() || document.body);
+    };
+
     /**
      * Display this modal. The modal will be attached to the DOM if it hasn't
      * already been.
@@ -628,9 +653,7 @@ define([
             this.hideFooter();
         }
 
-        if (!this.isAttached) {
-            this.attachToDOM();
-        }
+        this.attachToDOM();
 
         return this.getBackdrop()
         .then(function(backdrop) {
@@ -672,6 +695,7 @@ define([
     Modal.prototype.hide = function() {
         this.getBackdrop().done(function(backdrop) {
             FocusLock.untrapFocus();
+
             if (!this.countOtherVisibleModals()) {
                 // Hide the backdrop if we're the last open modal.
                 backdrop.hide();
@@ -693,6 +717,9 @@ define([
                 this.getRoot().removeClass('show').addClass('hide');
             }
 
+            // Ensure the modal is moved onto the body node.
+            $(document.body).append(this.getRoot());
+
             this.root.trigger(ModalEvents.hidden, this);
         }.bind(this));
     };

lib/amd/src/modal_backdrop.js

@@ -22,8 +22,8 @@
  * @copyright  2016 Ryan Wyllie <[email protected]>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-define(['jquery', 'core/templates', 'core/notification'],
-     function($, Templates, Notification) {
+define(['jquery', 'core/templates', 'core/notification', 'core/fullscreen'],
+     function($, Templates, Notification, Fullscreen) {
 
     var SELECTORS = {
         ROOT: '[data-region="modal-backdrop"]',
@@ -53,17 +53,27 @@ define(['jquery', 'core/templates', 'core/notification'],
         return this.root;
     };
 
+     /**
+      * Gets the jQuery wrapped node that the Modal should be attached to.
+      *
+      * @returns {jQuery}
+      */
+     ModalBackdrop.prototype.getAttachmentPoint = function() {
+         return $(Fullscreen.getElement() || document.body);
+     };
+
     /**
      * Add the modal backdrop to the page, if it hasn't already been added.
      *
      * @method attachToDOM
      */
     ModalBackdrop.prototype.attachToDOM = function() {
+        this.getAttachmentPoint().append(this.root);
+
         if (this.isAttached) {
             return;
         }
 
-        $('body').append(this.root);
         this.isAttached = true;
     };
 
@@ -108,9 +118,7 @@ define(['jquery', 'core/templates', 'core/notification'],
             return;
         }
 
-        if (!this.isAttached) {
-            this.attachToDOM();
-        }
+        this.attachToDOM();
 
         this.root.removeClass('hide').addClass('show');
     };
@@ -133,6 +141,9 @@ define(['jquery', 'core/templates', 'core/notification'],
         } else {
             this.getRoot().removeClass('show').addClass('hide');
         }
+
+        // Ensure the modal is moved back onto the body node.
+        $(document.body).append(this.getRoot());
     };
 
     /**