feat(dialog): added fullscreen option to dialog

Added `fullscreen` option that if it's set to true `.md-dialog-fullscreen` class is added to `<md-dialog>` that
maximizing the dialog to the whole screen.

fixes #2148. closes #5793.

Author: EladBezalel

src/components/dialog/demoBasicUsage/dialog1.tmpl.html

@@ -10,7 +10,7 @@ <h2>Mango (Fruit)</h2>
       </div>
     </md-toolbar>
 
-    <md-dialog-content style="max-width:800px;max-height:810px; ">
+    <md-dialog-content>
       <div class="md-dialog-content">
         <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
         <p>

src/components/dialog/demoBasicUsage/index.html

@@ -14,11 +14,13 @@
     <md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
       Custom Dialog
     </md-button>
+    <div hide-gt-sm layout="row" layout-align="center center" flex>
+        <md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
+      </div>
     <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
       Tab Dialog
     </md-button>
   </div>
-
   <p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>
 
   <div ng-if="status">

src/components/dialog/demoBasicUsage/script.js

@@ -1,7 +1,8 @@
 angular.module('dialogDemo1', ['ngMaterial'])
 
-.controller('AppCtrl', function($scope, $mdDialog) {
+.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
   $scope.status = '  ';
+  $scope.customFullscreen = $mdMedia('sm');
 
   $scope.showAlert = function(ev) {
     // Appending dialog to document.body to cover sidenav in docs app
@@ -42,13 +43,23 @@ angular.module('dialogDemo1', ['ngMaterial'])
       templateUrl: 'dialog1.tmpl.html',
       parent: angular.element(document.body),
       targetEvent: ev,
-      clickOutsideToClose:true
+      clickOutsideToClose:true,
+      fullscreen: $mdMedia('sm') && $scope.customFullscreen
     })
     .then(function(answer) {
       $scope.status = 'You said the information was "' + answer + '".';
     }, function() {
       $scope.status = 'You cancelled the dialog.';
     });
+
+
+
+    $scope.$watch(function() {
+      return $mdMedia('sm');
+    }, function(sm) {
+      $scope.customFullscreen = (sm === true);
+    });
+
   };
 
   $scope.showTabDialog = function(ev) {

src/components/dialog/dialog.js

@@ -391,7 +391,7 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  *     finished.
  *   - `onRemoving` `{function=}`: Callback function used to announce the close/hide() action is
  *     starting. This allows developers to run custom animations in parallel the close animations.
- *
+ *   - `fullscreen` `{boolean=}`: An option to apply `.md-dialog-fullscreen` class on open.
  * @returns {promise} A promise that can be resolved with `$mdDialog.hide()` or
  * rejected with `$mdDialog.cancel()`.
  */
@@ -424,7 +424,7 @@ function MdDialogProvider($$interimElementProvider) {
 
   return $$interimElementProvider('$mdDialog')
     .setDefaults({
-      methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent', 'closeTo', 'openFrom', 'parent'],
+      methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent', 'closeTo', 'openFrom', 'parent', 'fullscreen'],
       options: dialogDefaultOptions
     })
     .addPreset('alert', {
@@ -490,6 +490,7 @@ function MdDialogProvider($$interimElementProvider) {
       focusOnOpen: true,
       disableParentScroll: true,
       autoWrap: true,
+      fullscreen: false,
       transformTemplate: function(template, options) {
         return '<div class="md-dialog-container">' + validatedTemplate(template) + '</div>';
 
@@ -895,6 +896,10 @@ function MdDialogProvider($$interimElementProvider) {
       var from = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.openFrom || options.origin));
       var to = animator.toTransformCss("");  // defaults to center display (or parent or $rootElement)
 
+      if (options.fullscreen) {
+        dialogEl.addClass('md-dialog-fullscreen');
+      }
+
       return animator
         .translate3d(dialogEl, from, to, translateOptions)
         .then(function(animateReversal) {

src/components/dialog/dialog.scss

@@ -119,3 +119,11 @@ md-dialog {
     border: 1px solid #fff;
   }
 }
+
+@media (max-width: $layout-breakpoint-sm) {
+  md-dialog.md-dialog-fullscreen {
+    min-height: 100%;
+    min-width: 100%;
+    border-radius: 0;
+  }
+}

src/core/util/media.js

@@ -62,7 +62,11 @@ function mdMediaFactory($mdConstant, $rootScope, $window) {
   }
 
   function add(query) {
-    var result = mqls[query] = $window.matchMedia(query);
+    var result = mqls[query];
+    if ( !result ) {
+      result = mqls[query] = $window.matchMedia(query);
+    }
+
     result.addListener(onQueryChange);
     return (results[result.media] = !!result.matches);
   }