--- /dev/null
+/*!
+ * Angular Material Design
+ * https://github.com/angular/material
+ * @license MIT
+ * v0.9.8
+ */
+(function( window, angular, undefined ){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.input
+ */
+
+angular.module('material.components.input', [
+ 'material.core'
+])
+ .directive('mdInputContainer', mdInputContainerDirective)
+ .directive('label', labelDirective)
+ .directive('input', inputTextareaDirective)
+ .directive('textarea', inputTextareaDirective)
+ .directive('mdMaxlength', mdMaxlengthDirective)
+ .directive('placeholder', placeholderDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdInputContainer
+ * @module material.components.input
+ *
+ * @restrict E
+ *
+ * @description
+ * `<md-input-container>` is the parent of any input or textarea element.
+ *
+ * Input and textarea elements will not behave properly unless the md-input-container
+ * parent is provided.
+ *
+ * @param md-is-error {expression=} When the given expression evaluates to true, the input container will go into error state. Defaults to erroring if the input has been touched and is invalid.
+ * @param md-no-float {boolean=} When present, placeholders will not be converted to floating labels
+ *
+ * @usage
+ * <hljs lang="html">
+ *
+ * <md-input-container>
+ * <label>Username</label>
+ * <input type="text" ng-model="user.name">
+ * </md-input-container>
+ *
+ * <md-input-container>
+ * <label>Description</label>
+ * <textarea ng-model="user.description"></textarea>
+ * </md-input-container>
+ *
+ * </hljs>
+ */
+function mdInputContainerDirective($mdTheming, $parse) {
+ ContainerCtrl.$inject = ["$scope", "$element", "$attrs"];
+ return {
+ restrict: 'E',
+ link: postLink,
+ controller: ContainerCtrl
+ };
+
+ function postLink(scope, element, attr) {
+ $mdTheming(element);
+ }
+ function ContainerCtrl($scope, $element, $attrs) {
+ var self = this;
+
+ self.isErrorGetter = $attrs.mdIsError && $parse($attrs.mdIsError);
+
+ self.delegateClick = function() {
+ self.input.focus();
+ };
+ self.element = $element;
+ self.setFocused = function(isFocused) {
+ $element.toggleClass('md-input-focused', !!isFocused);
+ };
+ self.setHasValue = function(hasValue) {
+ $element.toggleClass('md-input-has-value', !!hasValue);
+ };
+ self.setInvalid = function(isInvalid) {
+ $element.toggleClass('md-input-invalid', !!isInvalid);
+ };
+ $scope.$watch(function() {
+ return self.label && self.input;
+ }, function(hasLabelAndInput) {
+ if (hasLabelAndInput && !self.label.attr('for')) {
+ self.label.attr('for', self.input.attr('id'));
+ }
+ });
+ }
+}
+mdInputContainerDirective.$inject = ["$mdTheming", "$parse"];
+
+function labelDirective() {
+ return {
+ restrict: 'E',
+ require: '^?mdInputContainer',
+ link: function(scope, element, attr, containerCtrl) {
+ if (!containerCtrl || attr.mdNoFloat) return;
+
+ containerCtrl.label = element;
+ scope.$on('$destroy', function() {
+ containerCtrl.label = null;
+ });
+ }
+ };
+}
+
+/**
+ * @ngdoc directive
+ * @name mdInput
+ * @restrict E
+ * @module material.components.input
+ *
+ * @description
+ * Use the `<input>` or the `<textarea>` as a child of an `<md-input-container>`.
+ *
+ * @param {number=} md-maxlength The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input.<br/><br/>
+ * The purpose of **`md-maxlength`** is exactly to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" `ng-maxlength` or maxlength attributes.
+ * @param {string=} aria-label Aria-label is required when no label is present. A warning message will be logged in the console if not present.
+ * @param {string=} placeholder An alternative approach to using aria-label when the label is not present. The placeholder text is copied to the aria-label attribute.
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-input-container>
+ * <label>Color</label>
+ * <input type="text" ng-model="color" required md-maxlength="10">
+ * </md-input-container>
+ * </hljs>
+ * <h3>With Errors</h3>
+ *
+ * <hljs lang="html">
+ * <form name="userForm">
+ * <md-input-container>
+ * <label>Last Name</label>
+ * <input name="lastName" ng-model="lastName" required md-maxlength="10" minlength="4">
+ * <div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
+ * <div ng-message="required">This is required!</div>
+ * <div ng-message="md-maxlength">That's too long!</div>
+ * <div ng-message="minlength">That's too short!</div>
+ * </div>
+ * </md-input-container>
+ * <md-input-container>
+ * <label>Biography</label>
+ * <textarea name="bio" ng-model="biography" required md-maxlength="150"></textarea>
+ * <div ng-messages="userForm.bio.$error" ng-show="userForm.bio.$dirty">
+ * <div ng-message="required">This is required!</div>
+ * <div ng-message="md-maxlength">That's too long!</div>
+ * </div>
+ * </md-input-container>
+ * <md-input-container>
+ * <input aria-label='title' ng-model='title'>
+ * </md-input-container>
+ * <md-input-container>
+ * <input placeholder='title' ng-model='title'>
+ * </md-input-container>
+ * </form>
+ * </hljs>
+ *
+ * Requires [ngMessages](https://docs.angularjs.org/api/ngMessages).
+ * Behaves like the [AngularJS input directive](https://docs.angularjs.org/api/ng/directive/input).
+ *
+ */
+
+function inputTextareaDirective($mdUtil, $window, $mdAria) {
+ return {
+ restrict: 'E',
+ require: ['^?mdInputContainer', '?ngModel'],
+ link: postLink
+ };
+
+ function postLink(scope, element, attr, ctrls) {
+
+ var containerCtrl = ctrls[0];
+ var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
+ var isReadonly = angular.isDefined(attr.readonly);
+
+ if ( !containerCtrl ) return;
+ if (containerCtrl.input) {
+ throw new Error("<md-input-container> can only have *one* <input> or <textarea> child element!");
+ }
+ containerCtrl.input = element;
+
+ if(!containerCtrl.label) {
+ $mdAria.expect(element, 'aria-label', element.attr('placeholder'));
+ }
+
+ element.addClass('md-input');
+ if (!element.attr('id')) {
+ element.attr('id', 'input_' + $mdUtil.nextUid());
+ }
+
+ if (element[0].tagName.toLowerCase() === 'textarea') {
+ setupTextarea();
+ }
+
+ var isErrorGetter = containerCtrl.isErrorGetter || function() {
+ return ngModelCtrl.$invalid && ngModelCtrl.$touched;
+ };
+ scope.$watch(isErrorGetter, containerCtrl.setInvalid);
+
+ ngModelCtrl.$parsers.push(ngModelPipelineCheckValue);
+ ngModelCtrl.$formatters.push(ngModelPipelineCheckValue);
+
+ element.on('input', inputCheckValue);
+
+ if (!isReadonly) {
+ element
+ .on('focus', function(ev) {
+ containerCtrl.setFocused(true);
+ })
+ .on('blur', function(ev) {
+ containerCtrl.setFocused(false);
+ inputCheckValue();
+ });
+
+ }
+
+ //ngModelCtrl.$setTouched();
+ //if( ngModelCtrl.$invalid ) containerCtrl.setInvalid();
+
+ scope.$on('$destroy', function() {
+ containerCtrl.setFocused(false);
+ containerCtrl.setHasValue(false);
+ containerCtrl.input = null;
+ });
+
+ /**
+ *
+ */
+ function ngModelPipelineCheckValue(arg) {
+ containerCtrl.setHasValue(!ngModelCtrl.$isEmpty(arg));
+ return arg;
+ }
+ function inputCheckValue() {
+ // An input's value counts if its length > 0,
+ // or if the input's validity state says it has bad input (eg string in a number input)
+ containerCtrl.setHasValue(element.val().length > 0 || (element[0].validity||{}).badInput);
+ }
+
+ function setupTextarea() {
+ var node = element[0];
+ var onChangeTextarea = $mdUtil.debounce(growTextarea, 1);
+
+ function pipelineListener(value) {
+ onChangeTextarea();
+ return value;
+ }
+
+ if (ngModelCtrl) {
+ ngModelCtrl.$formatters.push(pipelineListener);
+ ngModelCtrl.$viewChangeListeners.push(pipelineListener);
+ } else {
+ onChangeTextarea();
+ }
+ element.on('keydown input', onChangeTextarea);
+ element.on('scroll', onScroll);
+ angular.element($window).on('resize', onChangeTextarea);
+
+ scope.$on('$destroy', function() {
+ angular.element($window).off('resize', onChangeTextarea);
+ });
+
+ function growTextarea() {
+ node.style.height = "auto";
+ node.scrollTop = 0;
+ var height = getHeight();
+ if (height) node.style.height = height + 'px';
+ }
+
+ function getHeight () {
+ var line = node.scrollHeight - node.offsetHeight;
+ return node.offsetHeight + (line > 0 ? line : 0);
+ }
+
+ function onScroll(e) {
+ node.scrollTop = 0;
+ // for smooth new line adding
+ var line = node.scrollHeight - node.offsetHeight;
+ var height = node.offsetHeight + line;
+ node.style.height = height + 'px';
+ }
+ }
+ }
+}
+inputTextareaDirective.$inject = ["$mdUtil", "$window", "$mdAria"];
+
+function mdMaxlengthDirective($animate) {
+ return {
+ restrict: 'A',
+ require: ['ngModel', '^mdInputContainer'],
+ link: postLink
+ };
+
+ function postLink(scope, element, attr, ctrls) {
+ var maxlength;
+ var ngModelCtrl = ctrls[0];
+ var containerCtrl = ctrls[1];
+ var charCountEl = angular.element('<div class="md-char-counter">');
+
+ // Stop model from trimming. This makes it so whitespace
+ // over the maxlength still counts as invalid.
+ attr.$set('ngTrim', 'false');
+ containerCtrl.element.append(charCountEl);
+
+ ngModelCtrl.$formatters.push(renderCharCount);
+ ngModelCtrl.$viewChangeListeners.push(renderCharCount);
+ element.on('input keydown', function() {
+ renderCharCount(); //make sure it's called with no args
+ });
+
+ scope.$watch(attr.mdMaxlength, function(value) {
+ maxlength = value;
+ if (angular.isNumber(value) && value > 0) {
+ if (!charCountEl.parent().length) {
+ $animate.enter(charCountEl, containerCtrl.element,
+ angular.element(containerCtrl.element[0].lastElementChild));
+ }
+ renderCharCount();
+ } else {
+ $animate.leave(charCountEl);
+ }
+ });
+
+ ngModelCtrl.$validators['md-maxlength'] = function(modelValue, viewValue) {
+ if (!angular.isNumber(maxlength) || maxlength < 0) {
+ return true;
+ }
+ return ( modelValue || element.val() || viewValue || '' ).length <= maxlength;
+ };
+
+ function renderCharCount(value) {
+ charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength );
+ return value;
+ }
+ }
+}
+mdMaxlengthDirective.$inject = ["$animate"];
+
+function placeholderDirective($log) {
+ var blackListElements = ['MD-SELECT'];
+ return {
+ restrict: 'A',
+ require: '^^?mdInputContainer',
+ priority: 200,
+ link: postLink
+ };
+
+ function postLink(scope, element, attr, inputContainer) {
+ if (!inputContainer) return;
+ if (blackListElements.indexOf(element[0].nodeName) != -1) return;
+ if (angular.isDefined(inputContainer.element.attr('md-no-float'))) return;
+
+ var placeholderText = attr.placeholder;
+ element.removeAttr('placeholder');
+
+ if ( inputContainer.element.find('label').length == 0 ) {
+ var placeholder = '<label ng-click="delegateClick()">' + placeholderText + '</label>';
+
+ inputContainer.element.addClass('md-icon-float');
+ inputContainer.element.prepend(placeholder);
+ } else {
+ $log.warn("The placeholder='" + placeholderText + "' will be ignored since this md-input-container has a child label element.");
+ }
+
+ }
+}
+placeholderDirective.$inject = ["$log"];
+
+})(window, window.angular);
\ No newline at end of file
Code Review / portal.git / blobdiff