1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | goog.provide('ngmaterial.components.whiteframe');
|
---|
8 | goog.require('ngmaterial.core');
|
---|
9 | /**
|
---|
10 | * @ngdoc module
|
---|
11 | * @name material.components.whiteframe
|
---|
12 | */
|
---|
13 | MdWhiteframeDirective['$inject'] = ["$log"];
|
---|
14 | angular
|
---|
15 | .module('material.components.whiteframe', ['material.core'])
|
---|
16 | .directive('mdWhiteframe', MdWhiteframeDirective);
|
---|
17 |
|
---|
18 | /**
|
---|
19 | * @ngdoc directive
|
---|
20 | * @module material.components.whiteframe
|
---|
21 | * @name mdWhiteframe
|
---|
22 | *
|
---|
23 | * @description
|
---|
24 | * The md-whiteframe directive allows you to apply an elevation shadow to an element.
|
---|
25 | *
|
---|
26 | * The attribute values needs to be a number between 1 and 24 or -1.
|
---|
27 | * When set to -1 no style is applied.
|
---|
28 | *
|
---|
29 | * ### Notes
|
---|
30 | * - If there is no value specified it defaults to 4dp.
|
---|
31 | * - If the value is not valid it defaults to 4dp.
|
---|
32 |
|
---|
33 | * @usage
|
---|
34 | * <hljs lang="html">
|
---|
35 | * <div md-whiteframe="3">
|
---|
36 | * <span>Elevation of 3dp</span>
|
---|
37 | * </div>
|
---|
38 | * </hljs>
|
---|
39 | *
|
---|
40 | * <hljs lang="html">
|
---|
41 | * <div md-whiteframe="-1">
|
---|
42 | * <span>No elevation shadow applied</span>
|
---|
43 | * </div>
|
---|
44 | * </hljs>
|
---|
45 | *
|
---|
46 | * <hljs lang="html">
|
---|
47 | * <div ng-init="elevation = 5" md-whiteframe="{{elevation}}">
|
---|
48 | * <span>Elevation of 5dp with an interpolated value</span>
|
---|
49 | * </div>
|
---|
50 | * </hljs>
|
---|
51 | */
|
---|
52 | function MdWhiteframeDirective($log) {
|
---|
53 | var DISABLE_DP = -1;
|
---|
54 | var MIN_DP = 1;
|
---|
55 | var MAX_DP = 24;
|
---|
56 | var DEFAULT_DP = 4;
|
---|
57 |
|
---|
58 | return {
|
---|
59 | link: postLink
|
---|
60 | };
|
---|
61 |
|
---|
62 | function postLink(scope, element, attr) {
|
---|
63 | var oldClass = '';
|
---|
64 |
|
---|
65 | attr.$observe('mdWhiteframe', function(elevation) {
|
---|
66 | elevation = parseInt(elevation, 10) || DEFAULT_DP;
|
---|
67 |
|
---|
68 | if (elevation != DISABLE_DP && (elevation > MAX_DP || elevation < MIN_DP)) {
|
---|
69 | $log.warn('md-whiteframe attribute value is invalid. It should be a number between ' + MIN_DP + ' and ' + MAX_DP, element[0]);
|
---|
70 | elevation = DEFAULT_DP;
|
---|
71 | }
|
---|
72 |
|
---|
73 | var newClass = elevation == DISABLE_DP ? '' : 'md-whiteframe-' + elevation + 'dp';
|
---|
74 | attr.$updateClass(newClass, oldClass);
|
---|
75 | oldClass = newClass;
|
---|
76 | });
|
---|
77 | }
|
---|
78 | }
|
---|
79 |
|
---|
80 |
|
---|
81 | ngmaterial.components.whiteframe = angular.module("material.components.whiteframe"); |
---|