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.

145 lines
4.4 KiB

  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.9.0-rc1-master-3c0ce9b
  6. */
  7. goog.provide('ng.material.components.textField');
  8. goog.require('ng.material.core');
  9. (function() {
  10. 'use strict';
  11. /**
  12. * @ngdoc module
  13. * @name material.components.textField
  14. * @description
  15. * Form
  16. */
  17. ng.material.components.textField = angular.module('material.components.textField', [
  18. 'material.core'
  19. ])
  20. .directive('mdInputGroup', mdInputGroupDirective)
  21. .directive('mdInput', mdInputDirective)
  22. .directive('mdTextFloat', mdTextFloatDirective);
  23. function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) {
  24. return {
  25. restrict: 'E',
  26. replace: true,
  27. scope : {
  28. fid : '@?mdFid',
  29. label : '@?',
  30. value : '=ngModel'
  31. },
  32. compile : function(element, attr) {
  33. $log.warn('<md-text-float> is deprecated. Please use `<md-input-container>` and `<input>`.' +
  34. 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
  35. if ( angular.isUndefined(attr.mdFid) ) {
  36. attr.mdFid = $mdUtil.nextUid();
  37. }
  38. return {
  39. pre : function(scope, element, attrs) {
  40. var disabledParsed = $parse(attrs.ngDisabled);
  41. scope.isDisabled = function() {
  42. return disabledParsed(scope.$parent);
  43. };
  44. scope.inputType = attrs.type || "text";
  45. },
  46. post: $mdTheming
  47. };
  48. },
  49. template:
  50. '<md-input-group tabindex="-1">' +
  51. ' <label for="{{fid}}" >{{label}}</label>' +
  52. ' <md-input id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
  53. '</md-input-group>'
  54. };
  55. }
  56. mdTextFloatDirective.$inject = ["$mdTheming", "$mdUtil", "$parse", "$log"];
  57. function mdInputGroupDirective($log) {
  58. return {
  59. restrict: 'CE',
  60. controller: ['$element', function($element) {
  61. $log.warn('<md-input-group> is deprecated. Please use `<md-input-container>` and `<input>`.' +
  62. 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
  63. this.setFocused = function(isFocused) {
  64. $element.toggleClass('md-input-focused', !!isFocused);
  65. };
  66. this.setHasValue = function(hasValue) {
  67. $element.toggleClass('md-input-has-value', hasValue );
  68. };
  69. }]
  70. };
  71. }
  72. mdInputGroupDirective.$inject = ["$log"];
  73. function mdInputDirective($mdUtil, $log) {
  74. return {
  75. restrict: 'E',
  76. replace: true,
  77. template: '<input >',
  78. require: ['^?mdInputGroup', '?ngModel'],
  79. link: function(scope, element, attr, ctrls) {
  80. if ( !ctrls[0] ) return;
  81. $log.warn('<md-input> is deprecated. Please use `<md-input-container>` and `<input>`.' +
  82. 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
  83. var inputGroupCtrl = ctrls[0];
  84. var ngModelCtrl = ctrls[1];
  85. scope.$watch(scope.isDisabled, function(isDisabled) {
  86. element.attr('aria-disabled', !!isDisabled);
  87. element.attr('tabindex', !!isDisabled);
  88. });
  89. element.attr('type', attr.type || element.parent().attr('type') || "text");
  90. // When the input value changes, check if it "has" a value, and
  91. // set the appropriate class on the input group
  92. if (ngModelCtrl) {
  93. //Add a $formatter so we don't use up the render function
  94. ngModelCtrl.$formatters.push(function(value) {
  95. inputGroupCtrl.setHasValue( isNotEmpty(value) );
  96. return value;
  97. });
  98. }
  99. element
  100. .on('input', function() {
  101. inputGroupCtrl.setHasValue( isNotEmpty() );
  102. })
  103. .on('focus', function(e) {
  104. // When the input focuses, add the focused class to the group
  105. inputGroupCtrl.setFocused(true);
  106. })
  107. .on('blur', function(e) {
  108. // When the input blurs, remove the focused class from the group
  109. inputGroupCtrl.setFocused(false);
  110. inputGroupCtrl.setHasValue( isNotEmpty() );
  111. });
  112. scope.$on('$destroy', function() {
  113. inputGroupCtrl.setFocused(false);
  114. inputGroupCtrl.setHasValue(false);
  115. });
  116. function isNotEmpty(value) {
  117. value = angular.isUndefined(value) ? element.val() : value;
  118. return (angular.isDefined(value) && (value!==null) &&
  119. (value.toString().trim() !== ""));
  120. }
  121. }
  122. };
  123. }
  124. mdInputDirective.$inject = ["$mdUtil", "$log"];
  125. })();