Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 4d5e0ed

Browse files
ThomasBurlesonThomasBurleson
committed
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.
1 parent b2d5396 commit 4d5e0ed

File tree

8 files changed

+254
-1
lines changed

8 files changed

+254
-1
lines changed

‎src/components/whiteframe/demoBasicUsage/index.html renamed to ‎src/components/whiteframe/demoBasicClassUsage/index.html

File renamed without changes.

‎src/components/whiteframe/demoBasicUsage/script.js renamed to ‎src/components/whiteframe/demoBasicClassUsage/script.js

File renamed without changes.

‎src/components/whiteframe/demoBasicUsage/style.css renamed to ‎src/components/whiteframe/demoBasicClassUsage/style.css

File renamed without changes.

‎src/components/whiteframe/demoDirectiveAttributeUsage/index.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<div layout="row" layout-padding layout-wrap layout-fill style="padding-bottom: 32px;" ng-cloak>
2+
3+
<div class="padded" md-whiteframe="1" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
4+
<span>md-whiteframe="1"</span>
5+
</div>
6+
7+
<div class="padded" md-whiteframe="2" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
8+
<span>md-whiteframe="2"</span>
9+
</div>
10+
11+
<div class="padded" md-whiteframe="3" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
12+
<span>md-whiteframe="3"</span>
13+
</div>
14+
15+
<div class="padded" md-whiteframe="4" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
16+
<span>md-whiteframe="4"</span>
17+
</div>
18+
19+
<div class="padded" md-whiteframe="5" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
20+
<span>md-whiteframe="5"</span>
21+
</div>
22+
23+
<div class="padded" md-whiteframe="6" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
24+
<span>md-whiteframe="6"</span>
25+
</div>
26+
27+
<div class="padded" md-whiteframe="7" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
28+
<span>md-whiteframe="7"</span>
29+
</div>
30+
31+
<div class="padded" md-whiteframe="8" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
32+
<span>md-whiteframe="8"</span>
33+
</div>
34+
35+
<div class="padded" md-whiteframe="9" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
36+
<span>md-whiteframe="9"</span>
37+
</div>
38+
39+
<div class="padded" md-whiteframe="10" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
40+
<span>md-whiteframe="10"</span>
41+
</div>
42+
43+
<div class="padded" md-whiteframe="11" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
44+
<span>md-whiteframe="11"</span>
45+
</div>
46+
47+
<div class="padded" md-whiteframe="12" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
48+
<span>md-whiteframe="12"</span>
49+
</div>
50+
51+
<div class="padded" md-whiteframe="13" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
52+
<span>md-whiteframe="13"</span>
53+
</div>
54+
55+
<div class="padded" md-whiteframe="14" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
56+
<span>md-whiteframe="14"</span>
57+
</div>
58+
59+
<div class="padded" md-whiteframe="15" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
60+
<span>md-whiteframe="15"</span>
61+
</div>
62+
63+
<div class="padded" md-whiteframe="16" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
64+
<span>md-whiteframe="16"</span>
65+
</div>
66+
67+
<div class="padded" md-whiteframe="17" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
68+
<span>md-whiteframe="17"</span>
69+
</div>
70+
71+
<div class="padded" md-whiteframe="18" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
72+
<span>md-whiteframe="18"</span>
73+
</div>
74+
75+
<div class="padded" md-whiteframe="19" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
76+
<span>md-whiteframe="19"</span>
77+
</div>
78+
79+
<div class="padded" md-whiteframe="20" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
80+
<span>md-whiteframe="20"</span>
81+
</div>
82+
83+
<div class="padded" md-whiteframe="21" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
84+
<span>md-whiteframe="21"</span>
85+
</div>
86+
87+
<div class="padded" md-whiteframe="22" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
88+
<span>md-whiteframe="22"</span>
89+
</div>
90+
91+
<div class="padded" md-whiteframe="23" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
92+
<span>md-whiteframe="23"</span>
93+
</div>
94+
95+
<div class="padded" md-whiteframe="24" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
96+
<span>md-whiteframe="24"</span>
97+
</div>
98+
99+
</div>

‎src/components/whiteframe/demoDirectiveAttributeUsage/script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
angular.module('whiteframeDirectiveUsage', ['ngMaterial']);

‎src/components/whiteframe/demoDirectiveAttributeUsage/style.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
md-whiteframe, div.padded {
2+
background: #fff;
3+
margin: 30px;
4+
height: 100px;
5+
}
6+
7+
/* For breakpoint `-xs` */
8+
@media screen and (max-width: 599px) {
9+
md-whiteframe, div.padded {
10+
margin: 7px;
11+
height: 50px;
12+
background-color: #c8e4fa;
13+
}
14+
md-whiteframe > span, div.padded > span {
15+
font-size: 0.4em;
16+
}
17+
}
18+
19+
/* For breakpoint `-sm` */
20+
@media screen and (min-width: 600px ) and (max-width: 959px) {
21+
md-whiteframe, div.padded {
22+
margin: 20px;
23+
height: 75px;
24+
}
25+
md-whiteframe > span, div.padded > span {
26+
font-size: 0.6em;
27+
}
28+
}
29+
30+
/* For breakpoint `-md` */
31+
@media screen and (min-width: 960px ) and (max-width: 1279px) {
32+
md-whiteframe, div.padded {
33+
margin: 20px;
34+
height: 90px;
35+
background-color: #fcddde;
36+
}
37+
md-whiteframe > span, div.padded > span {
38+
font-size: 0.9em;
39+
}
40+
}
41+
42+
/* For breakpoint `-gt-md` */
43+
@media screen and (min-width: 1280px) {
44+
md-whiteframe, div.padded {
45+
margin: 25px;
46+
height: 100px;
47+
background-color: #F2FCE2;
48+
}
49+
md-whiteframe > span, div.padded > span {
50+
font-size: 1.0em;
51+
}
52+
}

‎src/components/whiteframe/whiteframe.js

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,52 @@
22
* @ngdoc module
33
* @name material.components.whiteframe
44
*/
5-
angular.module('material.components.whiteframe', []);
5+
angular
6+
.module('material.components.whiteframe', ['material.core'])
7+
.directive('mdWhiteframe', MdWhiteframeDirective);
8+
9+
/**
10+
* @private
11+
* @ngdoc directive
12+
* @module material.components.whiteframe
13+
* @name mdWhiteframe
14+
* @restrict A
15+
*
16+
* @description
17+
* The md-whiteframe directive allows you to apply an elevation shadow to an element.
18+
*
19+
* The attribute values needs to be a number between 1 and 24.
20+
*
21+
* ### Notes
22+
* - If there is no value specified it defaults to 4dp.
23+
* - If the value is not valid it defaults to 4dp.
24+
25+
* @usage
26+
* <hljs lang="html">
27+
* <div md-whiteframe="3">
28+
* <span>Elevation of 3dp</span>
29+
* </div>
30+
* </hljs>
31+
*/
32+
function MdWhiteframeDirective($log) {
33+
var MIN_DP = 1;
34+
var MAX_DP = 24;
35+
var DEFAULT_DP = 4;
36+
37+
return {
38+
restrict: 'A',
39+
link: postLink
40+
};
41+
42+
function postLink(scope, element, attr) {
43+
var elevation = parseInt(attr.mdWhiteframe, 10) || DEFAULT_DP;
44+
45+
if (elevation > MAX_DP || elevation < MIN_DP) {
46+
$log.warn('md-whiteframe attribute value is invalid. It should be a number between ' + MIN_DP + ' and ' + MAX_DP, element[0]);
47+
elevation = DEFAULT_DP;
48+
}
49+
50+
element.addClass('md-whiteframe-' + elevation + 'dp');
51+
}
52+
}
53+

‎src/components/whiteframe/whiteframe.spec.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
describe('mdWhiteframe directive', function() {
2+
3+
beforeEach(module('material.components.whiteframe'));
4+
5+
function buildWhiteframe(elevation) {
6+
var element;
7+
inject(function($compile, $rootScope) {
8+
element = $compile('<div md-whiteframe="' + (elevation || '') + '">')($rootScope);
9+
});
10+
return element;
11+
}
12+
13+
it('should default to 4dp if no attribute value is specified', function() {
14+
var element = buildWhiteframe();
15+
16+
expect(element).toHaveClass('md-whiteframe-4dp');
17+
});
18+
19+
it('should default to 4dp if the attribute value is invalid', inject(function($log) {
20+
spyOn($log, 'warn');
21+
var element = buildWhiteframe('999');
22+
23+
expect($log.warn).toHaveBeenCalled();
24+
expect(element).toHaveClass('md-whiteframe-4dp');
25+
}));
26+
27+
it('should use the default dp and warn if the attribute value is to low', inject(function($log) {
28+
spyOn($log, 'warn');
29+
var element = buildWhiteframe('-1');
30+
31+
expect($log.warn).toHaveBeenCalled();
32+
expect(element).toHaveClass('md-whiteframe-4dp');
33+
}));
34+
35+
it('should apply the correct whiteframe if attribute value is valid', function() {
36+
var element = buildWhiteframe('9');
37+
38+
expect(element).toHaveClass('md-whiteframe-9dp');
39+
});
40+
41+
it('should default to 4dp if the attribute value is a text', function() {
42+
var element = buildWhiteframe('invalid text');
43+
44+
expect(element).toHaveClass('md-whiteframe-4dp');
45+
});
46+
47+
it('should not round a decimal number', function() {
48+
var element = buildWhiteframe('1.8');
49+
50+
expect(element).toHaveClass('md-whiteframe-1dp');
51+
});
52+
53+
});

0 commit comments

Comments
 (0)