MDL-75781 javascript: Centering when resize for dialog

lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js

@@ -167,6 +167,18 @@ Y.extend(DIALOGUE, Y.Panel, {
             return node.eventName !== 'focusoutside';
         }));
 
+        Y.one('document').on('orientationchange', function() {
+            // This will detect a change in orientation and re-trigger centering.
+            this.centerDialogOnVisible();
+        }, this);
+
+        Y.one('window').on('resize', function() {
+            // Detect window resize (most browsers).
+            this.centerDialogOnVisible();
+        }, this);
+        // Observe dialog on size change.
+        this.centerDialogOnDialogSizeChange(this);
+
         // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
         // and allow setting of z-index in theme.
         bb = this.get('boundingBox');
@@ -409,6 +421,43 @@ Y.extend(DIALOGUE, Y.Panel, {
         }
         this.makeResponsive();
     },
+
+    /**
+     * Automatic re-center dialog when dialog size is changed.
+     *
+     * @method centerDialogOnDialogSizeChange
+     * @param {M.core.dialogue} dialog object to apply centering.
+     */
+    centerDialogOnDialogSizeChange: function(dialog) {
+        // ResizeObserver doesn't get recognized in JSHint.
+        // So we need to suppress the false warning.
+        var observer = new ResizeObserver(function() { // jshint ignore:line
+            dialog.centerDialogOnVisible();
+        });
+        var bb = dialog.get('boundingBox');
+        observer.observe(bb._node, {attributes: true, attributeFilter: ['class']});
+    },
+
+    /**
+     * Centering dialog when dialog is visible.
+     *
+     * @method centerDialogOnVisible
+     */
+    centerDialogOnVisible: function() {
+        if (!this.get('visible')) {
+            return; // Only centre visible dialogue.
+        }
+
+        if (this.name !== DIALOGUE_NAME) {
+            return; // Only centre Moodle dialogues.
+        }
+
+        if (this.shouldResizeFullscreen()) {
+            this.makeResponsive();
+        }
+        this.centerDialogue();
+    },
+
     /**
      * Return whether this dialogue should be fullscreen or not.
      *