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