feat(modal): support modal window sizes

Allows use of the size modifier classes shipped with Bootstrap 3.1
onwards. Specify either 'sm' or 'lg' to get a small/large modal dialog.
Defaults to normal size dialog if not specified.

Closes #2084

Gruntfile.js

@@ -17,7 +17,7 @@ module.exports = function(grunt) {
 
   grunt.initConfig({
     ngversion: '1.2.10',
-    bsversion: '3.0.3',
+    bsversion: '3.1.1',
     modules: [],//to be filled in by build task
     pkg: grunt.file.readJSON('package.json'),
     dist: 'dist',

src/modal/docs/demo.html

@@ -1,7 +1,7 @@
 <div ng-controller="ModalDemoCtrl">
     <script type="text/ng-template" id="myModalContent.html">
         <div class="modal-header">
-            <h3>I'm a modal!</h3>
+            <h3 class="modal-title">I'm a modal!</h3>
         </div>
         <div class="modal-body">
             <ul>
@@ -18,5 +18,7 @@ <h3>I'm a modal!</h3>
     </script>
 
     <button class="btn btn-default" ng-click="open()">Open me!</button>
+    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
+    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
     <div ng-show="selected">Selection from a modal: {{ selected }}</div>
 </div>

src/modal/docs/demo.js

@@ -2,11 +2,12 @@ var ModalDemoCtrl = function ($scope, $modal, $log) {
 
   $scope.items = ['item1', 'item2', 'item3'];
 
-  $scope.open = function () {
+  $scope.open = function (size) {
 
     var modalInstance = $modal.open({
       templateUrl: 'myModalContent.html',
       controller: ModalInstanceCtrl,
+      size: size,
       resolve: {
         items: function () {
           return $scope.items;

src/modal/docs/readme.md

@@ -12,6 +12,7 @@ The `$modal` service has only one method: `open(options)` where available option
 * `keyboard` - indicates whether the dialog should be closable by hitting the ESC key, defaults to true
 * `windowClass` - additional CSS class(es) to be added to a modal window template
 * `windowTemplateUrl` - a path to a template overriding modal's window template
+* `size` - optional size of modal window. Allowed values: `'sm'` (small) or  `'lg'` (large). Requires Bootstrap 3.1.0 or later
 
 The `open` method returns a modal instance, an object with the following properties:
 

src/modal/modal.js

@@ -88,6 +88,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
       },
       link: function (scope, element, attrs) {
         element.addClass(attrs.windowClass || '');
+        scope.size = attrs.size;
 
         $timeout(function () {
           // trigger CSS transitions
@@ -232,6 +233,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
         angularDomEl.attr({
           'template-url': modal.windowTemplateUrl,
           'window-class': modal.windowClass,
+          'size': modal.size,
           'index': openedWindows.length() - 1,
           'animate': 'animate'
         }).html(modal.content);
@@ -359,7 +361,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
                 backdrop: modalOptions.backdrop,
                 keyboard: modalOptions.keyboard,
                 windowClass: modalOptions.windowClass,
-                windowTemplateUrl: modalOptions.windowTemplateUrl
+                windowTemplateUrl: modalOptions.windowTemplateUrl,
+                size: modalOptions.size
               });
 
             }, function resolveError(reason) {

src/modal/test/modal.spec.js

@@ -431,6 +431,27 @@ describe('$modal', function () {
         expect($document.find('div.modal')).toHaveClass('additional');
       });
     });
+
+    describe('size', function () {
+
+      it('should support creating small modal dialogs', function () {
+        open({
+          template: '<div>Small modal dialog</div>',
+          size: 'sm'
+        });
+
+        expect($document.find('div.modal-dialog')).toHaveClass('modal-sm');
+      });
+
+      it('should support creating large modal dialogs', function () {
+        open({
+          template: '<div>Large modal dialog</div>',
+          size: 'lg'
+        });
+
+        expect($document.find('div.modal-dialog')).toHaveClass('modal-lg');
+      });
+    });
   });
 
   describe('multiple modals', function () {

template/modal/window.html

@@ -1,3 +1,3 @@
 <div tabindex="-1" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">
-    <div class="modal-dialog"><div class="modal-content" ng-transclude></div></div>
+    <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" ng-transclude></div></div>
 </div>