You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

80 lines
2.1 KiB

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