MDL-60621 js: Add ability to set a modal to be scrollable or not
authorMihail Geshoski <mihail@moodle.com>
Tue, 16 Jun 2020 01:42:08 +0000 (09:42 +0800)
committerMihail Geshoski <mihail@moodle.com>
Tue, 30 Jun 2020 02:18:19 +0000 (10:18 +0800)
With this change the modal can be configured to be scrollable or not.
If enabled to be 'scrollable', the modal's body will become scrollable
when the modal's height exceeds the browser's height. This is useful
in cases where the content in the modal is quite large and extends the
modal beyond the browser's height, which usually results in a bad UI.
If 'scrollable' is not explicitely configured, it will be set as 'true'
by default as in most cases it would be the expected behaviour.

lib/amd/build/modal.min.js
lib/amd/build/modal.min.js.map
lib/amd/build/modal_factory.min.js
lib/amd/build/modal_factory.min.js.map
lib/amd/src/modal.js
lib/amd/src/modal_factory.js
lib/upgrade.txt

index 1b3b1b4..69414dc 100644 (file)
Binary files a/lib/amd/build/modal.min.js and b/lib/amd/build/modal.min.js differ
index 6ebad58..19c89db 100644 (file)
Binary files a/lib/amd/build/modal.min.js.map and b/lib/amd/build/modal.min.js.map differ
index 00c5ea4..3e6d275 100644 (file)
Binary files a/lib/amd/build/modal_factory.min.js and b/lib/amd/build/modal_factory.min.js differ
index e994255..8b2bf04 100644 (file)
Binary files a/lib/amd/build/modal_factory.min.js.map and b/lib/amd/build/modal_factory.min.js.map differ
index d04924f..442c5b0 100644 (file)
@@ -553,6 +553,22 @@ define([
         return !this.getModal().hasClass('modal-lg');
     };
 
         return !this.getModal().hasClass('modal-lg');
     };
 
+    /**
+     * Set this modal to be scrollable or not.
+     *
+     * @method setScrollable
+     * @param {bool} value Whether the modal is scrollable or not
+     */
+    Modal.prototype.setScrollable = function(value) {
+        if (!value) {
+            this.getModal()[0].classList.remove('modal-dialog-scrollable');
+            return;
+        }
+
+        this.getModal()[0].classList.add('modal-dialog-scrollable');
+    };
+
+
     /**
      * Determine the highest z-index value currently on the page.
      *
     /**
      * Determine the highest z-index value currently on the page.
      *
index 1e27c2f..e96681a 100644 (file)
@@ -161,6 +161,8 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
     var create = function(modalConfig, triggerElement) {
         var type = modalConfig.type || TYPES.DEFAULT;
         var isLarge = modalConfig.large ? true : false;
     var create = function(modalConfig, triggerElement) {
         var type = modalConfig.type || TYPES.DEFAULT;
         var isLarge = modalConfig.large ? true : false;
+        // If 'scrollable' is not configured, set the modal to be scrollable by default.
+        var isScrollable = modalConfig.hasOwnProperty('scrollable') ? modalConfig.scrollable : true;
         var registryConf = null;
         var templateContext = {};
 
         var registryConf = null;
         var templateContext = {};
 
@@ -203,6 +205,8 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
                     modal.setRemoveOnClose(modalConfig.removeOnClose);
                 }
 
                     modal.setRemoveOnClose(modalConfig.removeOnClose);
                 }
 
+                modal.setScrollable(isScrollable);
+
                 return modal;
             });
 
                 return modal;
             });
 
index 4e79b93..ab9d1d5 100644 (file)
@@ -1,6 +1,12 @@
 This files describes API changes in core libraries and APIs,
 information provided here is intended especially for developers.
 
 This files describes API changes in core libraries and APIs,
 information provided here is intended especially for developers.
 
+=== 4.0 ===
+* Added function setScrollable in core/modal. This function can be used to set the modal's body to be scrollable or not
+  when the modal's height exceeds the browser's height. This is also supported in core/modal_factory through the
+  'scrollable' config parameter which can be set to either true or false. If not explicitly defined, the default value
+  of 'scrollable' is true.
+
 === 3.9 ===
 * Following function has been deprecated, please use \core\task\manager::run_from_cli().
     - cron_run_single_task()
 === 3.9 ===
 * Following function has been deprecated, please use \core\task\manager::run_from_cli().
     - cron_run_single_task()