MDL-60621 js: Add ability to set a modal to be scrollable or not

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_factory.min.js

@@ -1,2 +1,2 @@
-function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(!a)return;if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);if("Object"===c&&a.constructor)c=a.constructor.name;if("Map"===c||"Set"===c)return Array.from(c);if("Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c))return _arrayLikeToArray(a,b)}function _arrayLikeToArray(a,b){if(null==b||b>a.length)b=a.length;for(var c=0,d=Array(b);c<b;c++){d[c]=a[c]}return d}function _iterableToArrayLimit(a,b){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(a)))return;var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function _arrayWithHoles(a){if(Array.isArray(a))return a}define ("core/modal_factory",["jquery","core/modal_events","core/modal_registry","core/modal","core/modal_save_cancel","core/modal_cancel","core/local/modal/alert","core/templates","core/notification","core/custom_interaction_events","core/pending"],function(a,b,c,d,e,f,g,h,i,j,k){var l={DEFAULT:"core/modal",SAVE_CANCEL:"core/modal_save_cancel",CANCEL:"core/modal_cancel",ALERT:"core/local/modal/alert"},m={DEFAULT:"DEFAULT",SAVE_CANCEL:"SAVE_CANCEL",CANCEL:"CANCEL",ALERT:"ALERT"};c.register(m.DEFAULT,d,l.DEFAULT);c.register(m.SAVE_CANCEL,e,l.SAVE_CANCEL);c.register(m.CANCEL,f,l.CANCEL);c.register(m.ALERT,g,l.ALERT);var n=function(c,d,e){var f=null,g="function"==typeof e.preShowCallback,h=function(b,d){var h=new k("core/modal_factory:setUpTrigger:triggeredCallback");f=a(b.currentTarget);c.then(function(a){if(g){e.preShowCallback(f,a)}a.show();return a}).then(h.resolve);d.originalEvent.preventDefault()};if(Array.isArray(d)){var i=d[1];d=d[0];j.define(d,[j.events.activate]);d.on(j.events.activate,i,h)}else{j.define(d,[j.events.activate]);d.on(j.events.activate,h)}c.then(function(a){a.getRoot().on(b.hidden,function(){if(null!==f){f.focus()}});return a})},o=function(b,c){c=a(c);var d=b.module,e=new d(c);return e},p=function(b,c){var d=b.template,e=h.render(d,c).then(function(c){var d=a(c);return o(b,d)}).fail(i.exception);return e};return{create:function create(a,b){var d=a.type||m.DEFAULT,e=a.large?!0:!1,f=null,g={};f=c.get(d);if(!f){i.exception({message:"Unable to find modal of type: "+d})}if("undefined"!=typeof a.templateContext){g=a.templateContext}var h=p(f,g).then(function(b){if("undefined"!=typeof a.title){b.setTitle(a.title)}if("undefined"!=typeof a.body){b.setBody(a.body)}if("undefined"!=typeof a.footer){b.setFooter(a.footer)}if(a.buttons){Object.entries(a.buttons).forEach(function(a){var c=_slicedToArray(a,2),d=c[0],e=c[1];b.setButtonText(d,e)})}if(e){b.setLarge()}if("undefined"!=typeof a.removeOnClose){b.setRemoveOnClose(a.removeOnClose)}return b});if("undefined"!=typeof b){n(h,b,a)}return h},types:m}});
+function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(!a)return;if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);if("Object"===c&&a.constructor)c=a.constructor.name;if("Map"===c||"Set"===c)return Array.from(c);if("Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c))return _arrayLikeToArray(a,b)}function _arrayLikeToArray(a,b){if(null==b||b>a.length)b=a.length;for(var c=0,d=Array(b);c<b;c++){d[c]=a[c]}return d}function _iterableToArrayLimit(a,b){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(a)))return;var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function _arrayWithHoles(a){if(Array.isArray(a))return a}define ("core/modal_factory",["jquery","core/modal_events","core/modal_registry","core/modal","core/modal_save_cancel","core/modal_cancel","core/local/modal/alert","core/templates","core/notification","core/custom_interaction_events","core/pending"],function(a,b,c,d,e,f,g,h,i,j,k){var l={DEFAULT:"core/modal",SAVE_CANCEL:"core/modal_save_cancel",CANCEL:"core/modal_cancel",ALERT:"core/local/modal/alert"},m={DEFAULT:"DEFAULT",SAVE_CANCEL:"SAVE_CANCEL",CANCEL:"CANCEL",ALERT:"ALERT"};c.register(m.DEFAULT,d,l.DEFAULT);c.register(m.SAVE_CANCEL,e,l.SAVE_CANCEL);c.register(m.CANCEL,f,l.CANCEL);c.register(m.ALERT,g,l.ALERT);var n=function(c,d,e){var f=null,g="function"==typeof e.preShowCallback,h=function(b,d){var h=new k("core/modal_factory:setUpTrigger:triggeredCallback");f=a(b.currentTarget);c.then(function(a){if(g){e.preShowCallback(f,a)}a.show();return a}).then(h.resolve);d.originalEvent.preventDefault()};if(Array.isArray(d)){var i=d[1];d=d[0];j.define(d,[j.events.activate]);d.on(j.events.activate,i,h)}else{j.define(d,[j.events.activate]);d.on(j.events.activate,h)}c.then(function(a){a.getRoot().on(b.hidden,function(){if(null!==f){f.focus()}});return a})},o=function(b,c){c=a(c);var d=b.module,e=new d(c);return e},p=function(b,c){var d=b.template,e=h.render(d,c).then(function(c){var d=a(c);return o(b,d)}).fail(i.exception);return e};return{create:function create(a,b){var d=a.type||m.DEFAULT,e=a.large?!0:!1,f=a.hasOwnProperty("scrollable")?a.scrollable:!0,g=null,h={};g=c.get(d);if(!g){i.exception({message:"Unable to find modal of type: "+d})}if("undefined"!=typeof a.templateContext){h=a.templateContext}var j=p(g,h).then(function(b){if("undefined"!=typeof a.title){b.setTitle(a.title)}if("undefined"!=typeof a.body){b.setBody(a.body)}if("undefined"!=typeof a.footer){b.setFooter(a.footer)}if(a.buttons){Object.entries(a.buttons).forEach(function(a){var c=_slicedToArray(a,2),d=c[0],e=c[1];b.setButtonText(d,e)})}if(e){b.setLarge()}if("undefined"!=typeof a.removeOnClose){b.setRemoveOnClose(a.removeOnClose)}b.setScrollable(f);return b});if("undefined"!=typeof b){n(j,b,a)}return j},types:m}});
 //# sourceMappingURL=modal_factory.min.js.map

lib/amd/src/modal.js

@@ -553,6 +553,22 @@ define([
         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.
      *

lib/amd/src/modal_factory.js

@@ -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;
+        // 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 = {};
 
@@ -203,6 +205,8 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
                     modal.setRemoveOnClose(modalConfig.removeOnClose);
                 }
 
+                modal.setScrollable(isScrollable);
+
                 return modal;
             });
 

lib/upgrade.txt

@@ -1,6 +1,12 @@
 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()