feat(whiteframe) Interpolate whiteframe value, and remove whiteframe …

…style when set to -1

Closes #8058

src/components/whiteframe/demoDirectiveInterpolation/index.html

@@ -0,0 +1,19 @@
+<div layout="row" layout-padding layout-wrap layout-margin ng-cloak layout-align="space-around" ng-controller="DemoCtrl as ctrl">
+  <div class="padded" md-whiteframe="{{ctrl.elevation}}" flex="100" flex-gt-sm="50" layout="column" layout-align="center center">
+    <span ng-non-bindable>md-whiteframe="{{ctrl.elevation}}"</span>
+    <span>md-whiteframe="{{ctrl.elevation}}"</span>
+    <span>Increments through the available elevations</span>
+  </div>
+  <div class="padded" md-whiteframe="{{height}}" flex="100" flex-gt-sm="50" layout="column" layout-align="center center"
+      ng-init="height = 3" ng-mouseenter="height = 6" ng-mouseleave="height = 3">
+    <span ng-non-bindable>md-whiteframe="{{height}}"</span>
+    <span>md-whiteframe="{{height}}"</span>
+    <span>Hover to toggle</span>
+  </div>
+  <div class="padded" md-whiteframe="{{ctrl.showFrame}}" flex="100" flex-gt-sm="50" layout="column" layout-align="center center"
+      ng-click="ctrl.toggleFrame()">
+    <span ng-non-bindable>md-whiteframe="{{ctrl.showFrame}}"</span>
+    <span>md-whiteframe="{{ctrl.showFrame}}"</span>
+    <span>Set to -1 to remove elevation shadow, click to toggle</span>
+  </div>
+</div>

src/components/whiteframe/demoDirectiveInterpolation/script.js

@@ -0,0 +1,17 @@
+angular.module('whiteframeDirectiveUsage', ['ngMaterial'])
+    .controller('DemoCtrl', function($interval) {
+      this.elevation = 1;
+      this.showFrame = 3;
+
+      this.nextElevation = function() {
+        if (++this.elevation == 25) {
+          this.elevation = 1;
+        }
+      };
+
+      $interval(this.nextElevation.bind(this), 500);
+
+      this.toggleFrame = function() {
+        this.showFrame = this.showFrame == 3 ? -1 : 3;
+      };
+    });

src/components/whiteframe/demoDirectiveInterpolation/style.css

@@ -0,0 +1,56 @@
+md-whiteframe, div.padded {
+  background: #fff;
+  height: 100px;
+}
+
+md-whiteframe:focus, div.padded:focus {
+  outline: none;
+}
+
+.layout-margin div.padded {
+  margin: 16px 8px;
+}
+
+/* For breakpoint `-xs` */
+@media (max-width: 599px) {
+  md-whiteframe, div.padded {
+    margin: 7px;
+    height: 50px;
+    background-color: #c8e4fa;
+  }
+  md-whiteframe > span, div.padded > span {
+    font-size: 0.4em;
+  }
+}
+
+/* For breakpoint `-sm` */
+@media (min-width: 600px ) and (max-width: 959px) {
+  md-whiteframe, div.padded {
+    height: 75px;
+  }
+  md-whiteframe > span, div.padded > span {
+    font-size: 0.6em;
+  }
+}
+
+/* For breakpoint `-md` */
+@media (min-width: 960px ) and (max-width: 1279px) {
+  md-whiteframe, div.padded {
+    height: 90px;
+    background-color: #fcddde;
+  }
+  md-whiteframe > span, div.padded > span {
+    font-size: 0.9em;
+  }
+}
+
+/* For breakpoint `-gt-md` */
+@media (min-width: 1280px) {
+  md-whiteframe, div.padded {
+    height: 100px;
+    background-color: #F2FCE2;
+  }
+  md-whiteframe > span, div.padded > span {
+    font-size: 1.0em;
+  }
+}

src/components/whiteframe/whiteframe.js

@@ -14,7 +14,8 @@ angular
  * @description
  * The md-whiteframe directive allows you to apply an elevation shadow to an element.
  *
- * The attribute values needs to be a number between 1 and 24.
+ * The attribute values needs to be a number between 1 and 24 or -1.
+ * When set to -1 no style is applied.
  *
  * ### Notes
  * - If there is no value specified it defaults to 4dp.
@@ -26,8 +27,21 @@ angular
  *   <span>Elevation of 3dp</span>
  * </div>
  * </hljs>
+ *
+ * <hljs lang="html">
+ * <div md-whiteframe="-1">
+ *   <span>No elevation shadow applied</span>
+ * </div>
+ * </hljs>
+ *
+ * <hljs lang="html">
+ * <div ng-init="elevation = 5" md-whiteframe="{{elevation}}">
+ *   <span>Elevation of 5dp with an interpolated value</span>
+ * </div>
+ * </hljs>
  */
 function MdWhiteframeDirective($log) {
+  var DISABLE_DP = -1;
   var MIN_DP = 1;
   var MAX_DP = 24;
   var DEFAULT_DP = 4;
@@ -37,14 +51,20 @@ function MdWhiteframeDirective($log) {
   };
 
   function postLink(scope, element, attr) {
-    var elevation = parseInt(attr.mdWhiteframe, 10) || DEFAULT_DP;
+    var oldClass = '';
+
+    attr.$observe('mdWhiteframe', function(elevation) {
+      elevation = parseInt(elevation, 10) || DEFAULT_DP;
 
-    if (elevation > MAX_DP || elevation < MIN_DP) {
-      $log.warn('md-whiteframe attribute value is invalid. It should be a number between ' + MIN_DP + ' and ' + MAX_DP, element[0]);
-      elevation = DEFAULT_DP;
-    }
+      if (elevation != DISABLE_DP && (elevation > MAX_DP || elevation < MIN_DP)) {
+        $log.warn('md-whiteframe attribute value is invalid. It should be a number between ' + MIN_DP + ' and ' + MAX_DP, element[0]);
+        elevation = DEFAULT_DP;
+      }
 
-    element.addClass('md-whiteframe-' + elevation + 'dp');
+      var newClass = elevation == DISABLE_DP ? '' : 'md-whiteframe-' + elevation + 'dp';
+      attr.$updateClass(newClass, oldClass);
+      oldClass = newClass;
+    });
   }
 }
 

src/components/whiteframe/whiteframe.spec.js

@@ -6,6 +6,7 @@ describe('mdWhiteframe directive', function() {
     var element;
     inject(function($compile, $rootScope) {
       element = $compile('<div md-whiteframe="' + (elevation || '') + '">')($rootScope);
+      $rootScope.$digest();
     });
     return element;
   }
@@ -26,12 +27,20 @@ describe('mdWhiteframe directive', function() {
 
   it('should use the default dp and warn if the attribute value is to low', inject(function($log) {
     spyOn($log, 'warn');
-    var element = buildWhiteframe('-1');
+    var element = buildWhiteframe('-2');
 
     expect($log.warn).toHaveBeenCalled();
     expect(element).toHaveClass('md-whiteframe-4dp');
   }));
 
+  it('should not apply a whiteframe if the attribute value is -1', inject(function($log) {
+    spyOn($log, 'warn');
+    var element = buildWhiteframe('-1');
+
+    expect($log.warn).not.toHaveBeenCalled();
+    expect(element).not.toHaveClass('md-whiteframe-4dp');
+  }));
+
   it('should apply the correct whiteframe if attribute value is valid', function() {
     var element = buildWhiteframe('9');
 
@@ -50,4 +59,22 @@ describe('mdWhiteframe directive', function() {
     expect(element).toHaveClass('md-whiteframe-1dp');
   });
 
+  it('should interpolate the elevation value', inject(function($rootScope) {
+    $rootScope.elevation = 6;
+
+    var element = buildWhiteframe('{{elevation}}');
+
+    expect(element).toHaveClass('md-whiteframe-6dp');
+
+    $rootScope.elevation = -1;
+    $rootScope.$digest();
+
+    expect(element).not.toHaveClass('md-whiteframe-6dp');
+    expect(element).not.toHaveClass('md-whiteframe-4dp');
+
+    $rootScope.elevation = 0;
+    $rootScope.$digest();
+
+    expect(element).toHaveClass('md-whiteframe-4dp');
+  }));
 });