From 645413b3f59f1d67b50c97396462a8d1a09148c3 Mon Sep 17 00:00:00 2001 From: Dale Cameron Date: Wed, 7 Oct 2020 14:47:54 -0500 Subject: [PATCH 1/3] feat - add scollable property to modal Adds optional property scrollable to modal. Fixes issue #61 --- docs/index.html | 4 ++++ src/modal/modal.js | 3 +++ template/modal/window.html | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 1bb94eb..d8efc84 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2845,6 +2845,10 @@ Optional suffix of modal window class. The value used is appended to the m (Note: Since this is directly injected into the class for the modal, you can leverage additional Bootstrap modal classes, such as modal-dialog-centered. Ex: md modal-dialog-centered.)

+

  • scrollable + (Type: boolean, Default: false) - + Indicates whether the dialog will allow its content to scroll. If set to true, this will add the class 'modal-dialog-scrollable' to the rendered modal.

    +

  • template (Type: string) - Inline template representing the modal's content.

    diff --git a/src/modal/modal.js b/src/modal/modal.js index 1612998..ceb576b 100644 --- a/src/modal/modal.js +++ b/src/modal/modal.js @@ -102,6 +102,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta link: function(scope, element, attrs) { element.addClass(attrs.windowTopClass || ''); scope.size = attrs.size; + scope.scrollable = attrs.scrollable; scope.close = function(evt) { var modal = $modalStack.getTop(); @@ -484,6 +485,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta 'aria-labelledby': modal.ariaLabelledBy, 'aria-describedby': modal.ariaDescribedBy, 'size': modal.size, + 'scrollable': modal.scrollable, 'index': topModalIndex, 'animate': 'animate', 'ng-style': '{\'z-index\': 1050 + $$topModalIndex*10, display: \'block\'}', @@ -763,6 +765,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta ariaLabelledBy: modalOptions.ariaLabelledBy, ariaDescribedBy: modalOptions.ariaDescribedBy, size: modalOptions.size, + scrollable: modalOptions.scrollable, openedClass: modalOptions.openedClass, appendTo: modalOptions.appendTo }; diff --git a/template/modal/window.html b/template/modal/window.html index 9850c1b..d90fbbd 100644 --- a/template/modal/window.html +++ b/template/modal/window.html @@ -1 +1 @@ -
    +
    From 01907c07fb05c5597371c1de51d193ecf2a13dec Mon Sep 17 00:00:00 2001 From: Dale Cameron Date: Wed, 7 Oct 2020 14:52:18 -0500 Subject: [PATCH 2/3] set scollable property to default to false --- src/modal/modal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/modal/modal.js b/src/modal/modal.js index ceb576b..31eb352 100644 --- a/src/modal/modal.js +++ b/src/modal/modal.js @@ -667,7 +667,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta options: { animation: true, backdrop: true, //can also be false or 'static' - keyboard: true + keyboard: true, + scrollable: false }, $get: ['$rootScope', '$q', '$document', '$templateRequest', '$controller', '$uibResolve', '$uibModalStack', function ($rootScope, $q, $document, $templateRequest, $controller, $uibResolve, $modalStack) { From 58230722908bed0aef866c640490f8822f837652 Mon Sep 17 00:00:00 2001 From: Dale Cameron Date: Wed, 7 Oct 2020 23:53:33 -0500 Subject: [PATCH 3/3] Added Unit Tests and fixed attribute bug --- src/modal/modal.js | 5 +++-- src/modal/test/modal.spec.js | 23 +++++++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/modal/modal.js b/src/modal/modal.js index 31eb352..c68ae52 100644 --- a/src/modal/modal.js +++ b/src/modal/modal.js @@ -102,7 +102,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta link: function(scope, element, attrs) { element.addClass(attrs.windowTopClass || ''); scope.size = attrs.size; - scope.scrollable = attrs.scrollable; + scope.scrollable = attrs.scrollable === 'true'; scope.close = function(evt) { var modal = $modalStack.getTop(); @@ -426,7 +426,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta openedClass: modal.openedClass, windowTopClass: modal.windowTopClass, animation: modal.animation, - appendTo: modal.appendTo + appendTo: modal.appendTo, + scrollable: modal.scrollable }); openedClasses.put(modalBodyClass, modalInstance); diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js index 95cee91..597926c 100644 --- a/src/modal/test/modal.spec.js +++ b/src/modal/test/modal.spec.js @@ -1389,6 +1389,29 @@ describe('$uibModal', function() { }); }); + describe('scrollable', function() { + it('should default to false', function() { + open({ + template: '
    Non scollable modal dialog
    ' + }); + + expect($document.find('div.modal-dialog')).not.toHaveClass('modal-dialog-scrollable'); + }); + it('should add the scrollable class if scrollable set to true', function() { + open({ + template: '
    Large modal dialog
    ', + scrollable: true + }); + + expect($document.find('div.modal-dialog')).toHaveClass('modal-dialog-scrollable'); + }); + it('should allow overriding default options in a provider', function() { + $uibModalProvider.options.scrollable = true; + open({template: '
    Content
    '}); + expect($document.find('div.modal-dialog')).toHaveClass('modal-dialog-scrollable'); + }); + }); + describe('animation', function() { it('should have animation fade classes by default', function() { open({