feat(whiteframe): support attribute directive to apply md-whiteframe …

…classes

`md-whiteframe` can now be used as a class or a directive attribute.

Fixes #6772, closes #6831.

src/components/whiteframe/demoDirectiveAttributeUsage/index.html

@@ -0,0 +1,99 @@
+<div layout="row" layout-padding layout-wrap layout-fill style="padding-bottom: 32px;" ng-cloak>
+
+  <div class="padded" md-whiteframe="1"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="1"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="2"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="2"</span>  
+  </div>  
+
+  <div class="padded" md-whiteframe="3"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="3"</span>  
+  </div>  
+
+  <div class="padded" md-whiteframe="4"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="4"</span>  
+  </div>  
+
+  <div class="padded" md-whiteframe="5"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="5"</span>  
+  </div>  
+
+  <div class="padded" md-whiteframe="6"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="6"</span>  
+  </div>  
+
+  <div class="padded" md-whiteframe="7"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="7"</span>  
+  </div>  
+
+  <div class="padded" md-whiteframe="8"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="8"</span>  
+  </div>  
+
+  <div class="padded" md-whiteframe="9"   flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="9"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="10"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="10"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="11"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="11"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="12"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="12"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="13"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="13"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="14"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="14"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="15"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="15"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="16"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="16"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="17"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="17"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="18"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="18"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="19"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="19"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="20" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="20"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="21"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="21"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="22"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="22"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="23"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="23"</span>
+  </div>
+
+  <div class="padded" md-whiteframe="24"  flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
+    <span>md-whiteframe="24"</span>
+  </div>
+
+</div>

src/components/whiteframe/demoDirectiveAttributeUsage/script.js

@@ -0,0 +1 @@
+angular.module('whiteframeDirectiveUsage', ['ngMaterial']);

src/components/whiteframe/demoDirectiveAttributeUsage/style.css

@@ -0,0 +1,52 @@
+md-whiteframe, div.padded {
+  background: #fff;
+  margin: 30px;
+  height: 100px;
+}
+
+/* For breakpoint `-xs` */
+@media screen and (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 screen and (min-width: 600px ) and (max-width: 959px) {
+  md-whiteframe, div.padded {
+    margin: 20px;
+    height: 75px;
+  }
+  md-whiteframe > span, div.padded > span {
+    font-size: 0.6em;
+  }
+}
+
+/* For breakpoint `-md` */
+@media screen and (min-width: 960px ) and (max-width: 1279px) {
+  md-whiteframe, div.padded {
+    margin: 20px;
+    height: 90px;
+    background-color: #fcddde;
+  }
+  md-whiteframe > span, div.padded > span {
+    font-size: 0.9em;
+  }
+}
+
+/* For breakpoint `-gt-md` */
+@media screen and (min-width: 1280px) {
+  md-whiteframe, div.padded {
+    margin: 25px;
+    height: 100px;
+    background-color: #F2FCE2;
+  }
+  md-whiteframe > span, div.padded > span {
+    font-size: 1.0em;
+  }
+}

src/components/whiteframe/whiteframe.js

@@ -2,4 +2,52 @@
  * @ngdoc module
  * @name material.components.whiteframe
  */
-angular.module('material.components.whiteframe', []);
+angular
+  .module('material.components.whiteframe', ['material.core'])
+  .directive('mdWhiteframe', MdWhiteframeDirective);
+
+/**
+ * @private
+ * @ngdoc directive
+ * @module material.components.whiteframe
+ * @name mdWhiteframe
+ * @restrict A
+ *
+ * @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.
+ *
+ * ### Notes
+ * - If there is no value specified it defaults to 4dp.
+ * - If the value is not valid it defaults to 4dp.
+
+ * @usage
+ * <hljs lang="html">
+ * <div md-whiteframe="3">
+ *   <span>Elevation of 3dp</span>
+ * </div>
+ * </hljs>
+ */
+function MdWhiteframeDirective($log) {
+  var MIN_DP = 1;
+  var MAX_DP = 24;
+  var DEFAULT_DP = 4;
+
+  return {
+    restrict: 'A',
+    link: postLink
+  };
+
+  function postLink(scope, element, attr) {
+    var elevation = parseInt(attr.mdWhiteframe, 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;
+    }
+
+    element.addClass('md-whiteframe-' + elevation + 'dp');
+  }
+}
+

src/components/whiteframe/whiteframe.spec.js

@@ -0,0 +1,53 @@
+describe('mdWhiteframe directive', function() {
+
+  beforeEach(module('material.components.whiteframe'));
+
+  function buildWhiteframe(elevation) {
+    var element;
+    inject(function($compile, $rootScope) {
+      element = $compile('<div md-whiteframe="' + (elevation || '') + '">')($rootScope);
+    });
+    return element;
+  }
+
+  it('should default to 4dp if no attribute value is specified', function() {
+    var element = buildWhiteframe();
+
+    expect(element).toHaveClass('md-whiteframe-4dp');
+  });
+
+  it('should default to 4dp if the attribute value is invalid', inject(function($log) {
+    spyOn($log, 'warn');
+    var element = buildWhiteframe('999');
+
+    expect($log.warn).toHaveBeenCalled();
+    expect(element).toHaveClass('md-whiteframe-4dp');
+  }));
+
+  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');
+
+    expect($log.warn).toHaveBeenCalled();
+    expect(element).toHaveClass('md-whiteframe-4dp');
+  }));
+
+  it('should apply the correct whiteframe if attribute value is valid', function() {
+    var element = buildWhiteframe('9');
+
+    expect(element).toHaveClass('md-whiteframe-9dp');
+  });
+
+  it('should default to 4dp if the attribute value is a text', function() {
+    var element = buildWhiteframe('invalid text');
+
+    expect(element).toHaveClass('md-whiteframe-4dp');
+  });
+
+  it('should not round a decimal number', function() {
+    var element = buildWhiteframe('1.8');
+
+    expect(element).toHaveClass('md-whiteframe-1dp');
+  });
+
+});