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