Setting the width through a property js (likeastore#460)

* Setting the width through a property js

* update readme, implement other metrics support, and unit tests

* update readme

* refactoring, multi-line conditional

Author: negherbon

README.md

@@ -372,6 +372,30 @@ Specifies the CSS selector for the element to be referenced by the ``aria-descri
 
 If specified, the first matching element is used. See [Accessibility](#Accessibility) for more information.
 
+##### ``width {Number | String}``
+
+This option allows you to control the dialog's width. Default value is `null` (unspecified)
+
+If you provide a Number, 'px' will be appended. To use a custom metric, use a String, e.g. `'40%'`.
+
+For example, the following will add `width: 400px;` to the dialog when opened:
+
+```
+ngDialog.open({
+    template: 'template.html',
+    width: 400
+});
+```
+
+In another example, the following will add `width: 40%;`:
+
+```
+ngDialog.open({
+    template: 'template.html',
+    width: '40%'
+});
+```
+
 #### Returns:
 
 The ``open()`` method returns an object with some useful properties.

example/index.html

@@ -70,6 +70,7 @@
     <a href="" ng-click="openConfirmWithPreCloseCallbackOnScope()">Open confirm modal with pre-close callback on scope</a>
     <a href="" ng-click="openConfirmWithPreCloseCallbackInlinedWithNestedConfirm()">Open confirm modal with pre-close inlined with nested confirm.</a>
     <a href="" ng-click="openWithoutOverlay()">Open without overlay</a>
+    <a href="" ng-click="openWithJSSpecificWidth()" id="js-width">Open with js specific width</a>
 
     <!-- Templates -->
 
@@ -387,6 +388,15 @@ <h3>ngDialog modal example</h3>
                 });
             };
 
+            $scope.openWithJSSpecificWidth = function () {
+                ngDialog.open({
+                    template: '<h2>Notice that style inline set specific width!</h2>',
+                    className: 'ngdialog-theme-default',
+                    width: 650,
+                    plain: true
+                });
+            };
+
             $rootScope.$on('ngDialog.opened', function (e, $dialog) {
                 console.log('ngDialog opened: ' + $dialog.attr('id'));
             });

js/ngDialog.js

@@ -61,7 +61,8 @@
             ariaLabelledBySelector: null,
             ariaDescribedById: null,
             ariaDescribedBySelector: null,
-            bodyClassName: 'ngdialog-open'
+            bodyClassName: 'ngdialog-open',
+            width: null
         };
 
         this.setForceHtmlReload = function (_useIt) {
@@ -542,6 +543,15 @@
                                 $dialog.addClass(options.appendClassName);
                             }
 
+                            if (options.width) {
+                                var $dialogContent = $dialog[0].querySelector('.ngdialog-content');
+                                if (angular.isString(options.width)) {
+                                    $dialogContent.style.width = options.width;
+                                } else {
+                                    $dialogContent.style.width = options.width + 'px';
+                                }
+                            }
+
                             if (options.disableAnimation) {
                                 $dialog.addClass(disabledAnimationClass);
                             }

tests/protractor/open.js

@@ -14,4 +14,9 @@ describe('ngDialog open', function() {
         expect(text).toBe('Data passed through: from a service');
       });
   });
+
+  it('should define specific width through a property js', function() {
+    element(by.css('#js-width')).click();
+    expect(element(by.css('.ngdialog-content')).getCssValue('width')).toBe('650px');
+  });
 });

tests/unit/ngDialog.js

@@ -267,4 +267,27 @@ describe('ngDialog', function () {
       });
   });
 
+  describe('with an width', function () {
+    var elm, open;
+    beforeEach(inject(function (ngDialog, $timeout, $document) {
+      open = function(width) {
+        var id = ngDialog.open({
+          width: width
+        }).id;
+        $timeout.flush();
+        elm = $document[0].getElementById(id).querySelector('.ngdialog-content');
+      }
+    }));
+
+    it('should transform number to px', function () {
+      open(400);
+      expect(elm.style.cssText).toBe('width: 400px; ');
+    });
+
+    it('should set other width metrics', function () {
+      open('40%');
+      expect(elm.style.cssText).toBe('width: 40%; ');
+    });
+  });
+
 });