From b5c4390bf7cb81809fea0df93c7d01e410b5585a Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Fri, 17 Apr 2015 16:17:02 -0500 Subject: [PATCH] fix(texfield): removed unstable, deprecated textfield component Replaced with md-input-container. --- src/components/textField/textField-theme.scss | 44 --- src/components/textField/textField.js | 134 -------- src/components/textField/textField.scss | 149 --------- src/components/textField/textField.spec.js | 295 ------------------ 4 files changed, 622 deletions(-) delete mode 100644 src/components/textField/textField-theme.scss delete mode 100644 src/components/textField/textField.js delete mode 100644 src/components/textField/textField.scss delete mode 100644 src/components/textField/textField.spec.js diff --git a/src/components/textField/textField-theme.scss b/src/components/textField/textField-theme.scss deleted file mode 100644 index 6b9b2d4e1da..00000000000 --- a/src/components/textField/textField-theme.scss +++ /dev/null @@ -1,44 +0,0 @@ -md-input-group.md-THEME_NAME-theme { - input, textarea { - text-shadow: '{{foreground-shadow}}'; - @include input-placeholder-color('{{foreground-3}}'); - } - - label { - text-shadow: '{{foreground-shadow}}'; - color: '{{foreground-3}}'; - } - - input, textarea { - color: '{{foreground-1}}'; - border-color: '{{foreground-4}}'; - } - - &.md-input-focused { - input, textarea { - border-color: '{{primary-500}}'; - } - label { - color: '{{primary-500}}'; - } - &.md-accent { - input, textarea { - border-color: '{{accent-500}}'; - } - label { - color: '{{accent-500}}'; - } - } - } - - &.md-input-has-value:not(.md-input-focused) { - label { - color: '{{foreground-2}}'; - } - } - - .md-input[disabled] { - border-bottom-color: '{{foreground-4}}'; - color: '{{foreground-3}}'; - } -} diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js deleted file mode 100644 index 719d32c8d76..00000000000 --- a/src/components/textField/textField.js +++ /dev/null @@ -1,134 +0,0 @@ -(function() { -'use strict'; - -/** - * @ngdoc module - * @name material.components.textField - * @description - * Form - */ -angular.module('material.components.textField', [ - 'material.core' -]) - .directive('mdInputGroup', mdInputGroupDirective) - .directive('mdInput', mdInputDirective) - .directive('mdTextFloat', mdTextFloatDirective); - - -function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) { - return { - restrict: 'E', - replace: true, - scope : { - fid : '@?mdFid', - label : '@?', - value : '=ngModel' - }, - compile : function(element, attr) { - - $log.warn(' is deprecated. Please use `` and ``.' + - 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer'); - - if ( angular.isUndefined(attr.mdFid) ) { - attr.mdFid = $mdUtil.nextUid(); - } - - return { - pre : function(scope, element, attrs) { - var disabledParsed = $parse(attrs.ngDisabled); - scope.isDisabled = function() { - return disabledParsed(scope.$parent); - }; - - scope.inputType = attrs.type || "text"; - }, - post: $mdTheming - }; - }, - template: - '' + - ' ' + - ' ' + - '' - }; -} - -function mdInputGroupDirective($log) { - return { - restrict: 'CE', - controller: ['$element', function($element) { - - $log.warn(' is deprecated. Please use `` and ``.' + - 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer'); - this.setFocused = function(isFocused) { - $element.toggleClass('md-input-focused', !!isFocused); - }; - this.setHasValue = function(hasValue) { - $element.toggleClass('md-input-has-value', hasValue ); - }; - }] - }; - -} - -function mdInputDirective($mdUtil, $log) { - return { - restrict: 'E', - replace: true, - template: '', - require: ['^?mdInputGroup', '?ngModel'], - link: function(scope, element, attr, ctrls) { - if ( !ctrls[0] ) return; - - $log.warn(' is deprecated. Please use `` and ``.' + - 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer'); - - var inputGroupCtrl = ctrls[0]; - var ngModelCtrl = ctrls[1]; - - scope.$watch(scope.isDisabled, function(isDisabled) { - element.attr('aria-disabled', !!isDisabled); - element.attr('tabindex', !!isDisabled); - }); - element.attr('type', attr.type || element.parent().attr('type') || "text"); - - // When the input value changes, check if it "has" a value, and - // set the appropriate class on the input group - if (ngModelCtrl) { - //Add a $formatter so we don't use up the render function - ngModelCtrl.$formatters.push(function(value) { - inputGroupCtrl.setHasValue( isNotEmpty(value) ); - return value; - }); - } - - element - .on('input', function() { - inputGroupCtrl.setHasValue( isNotEmpty() ); - }) - .on('focus', function(e) { - // When the input focuses, add the focused class to the group - inputGroupCtrl.setFocused(true); - }) - .on('blur', function(e) { - // When the input blurs, remove the focused class from the group - inputGroupCtrl.setFocused(false); - inputGroupCtrl.setHasValue( isNotEmpty() ); - }); - - scope.$on('$destroy', function() { - inputGroupCtrl.setFocused(false); - inputGroupCtrl.setHasValue(false); - }); - - - function isNotEmpty(value) { - value = angular.isUndefined(value) ? element.val() : value; - return (angular.isDefined(value) && (value!==null) && - (value.toString().trim() !== "")); - } - } - }; -} - -})(); diff --git a/src/components/textField/textField.scss b/src/components/textField/textField.scss deleted file mode 100644 index e7358db093e..00000000000 --- a/src/components/textField/textField.scss +++ /dev/null @@ -1,149 +0,0 @@ -$tff-font-size: 1.2rem !default; -$tff-line-height:26px !default; -$tff-transition: all 0.15s $swift-ease-in-out-timing-function !default; -// - `label` element (aka hint) -$tff-hint-offset-large : 22px !default; -$tff-hint-offset-small : 4px !default; -$ttf-hint-offset-scale : 0.75 !default; -// - `line` element -$tff-line-focused-width: 2px !default; -$tff-line-disabled-width: 0px !default; -$tff-line-dot-width: 1px !default; -$tff-line-dot-size: 3px !default; -$tff-line-dashed: #cfcfcf !default; - -$tff-margin: 10px 0 (10px - $tff-line-focused-width) 0 !default; - -// ****************************** -// Mixins: Text Fields -// ****************************** - -@mixin text-field($transition:false, $borderWidth:1px ) { - input, textarea { - border-bottom-width: $borderWidth; - - @if( $transition != false ) { - transition: $transition; - } - } -} - -@mixin text-hint($size:large, $transition:false ) { - label { - @if $size == "small" { - transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale); - } @else { - transform: translate3d(0, $tff-hint-offset-large, 0); - transition: $tff-transition; - } - - @if( $transition != false ) { - transition: $transition; - } - - @include bidi-style(transform-origin, left center, transform-origin, right center); - } -} - -@mixin text-dashed-line( $dotGap, $dotSize) { - background-size: $dotSize $dotGap; - background-position: 0 bottom; - background-size: (1px + 1px) $dotGap; - background-repeat: repeat-x; -} - -md-input-group, -.md-input-group { - - label { - display: block; - font-size: $tff-font-size; - } - - textarea, - input[type="text"], - input[type="password"], - input[type="datetime"], - input[type="datetime-local"], - input[type="date"], - input[type="month"], - input[type="time"], - input[type="week"], - input[type="number"], - input[type="email"], - input[type="url"], - input[type="search"], - input[type="tel"], - input[type="color"] { - display: block; - border-width: 0 0 1px 0; - padding-top: 2px; - line-height: $tff-line-height; - padding-bottom: 1px; - - &:focus { - outline: 0; - } - } - - input, textarea { - background: none; - } -} - -// Light-Theme -md-input-group, -.md-input-group { - padding-bottom: $tff-line-focused-width; - margin: $tff-margin; - - position: relative; - display: block; - - label { - font-size: 1.6rem; - z-index: 1; - pointer-events: none; - -webkit-font-smoothing: antialiased; - - &:hover { - cursor: text; - } - } - - @include text-hint( large, $tff-transition ); - @include text-field( $tff-transition ); - - - &.md-input-focused { - @include text-hint( small ); - @include text-field( false, $tff-line-focused-width ); - input { - padding-bottom: 0; - } - } - - &.md-input-has-value { - @include text-hint( small ); - - &:not(.md-input-focused) { - @include text-hint( small ); - } - } - - &[disabled] { - - @include text-field( false, $tff-line-disabled-width ); - input, textarea { - @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size); - pointer-events: none; - } - - @include text-hint( small ); - - *:not(.md-input-has-value) { - @include text-hint( large ); - } - - } -} diff --git a/src/components/textField/textField.spec.js b/src/components/textField/textField.spec.js deleted file mode 100644 index 2f3fd14b4e5..00000000000 --- a/src/components/textField/textField.spec.js +++ /dev/null @@ -1,295 +0,0 @@ -describe('Text Field directives', function() { - beforeEach(module('material.components.textField')); - - describe('- mdInputGroup', function() { - var scope; - - beforeEach(function() { - scope = { - user : { - firstName: 'Thomas', - lastName: 'Burleson', - email: 'ThomasBurleson@gmail.com', - password: 'your password is incorrect' - } - }; - }); - - it('should set input class for focus & blur', function() { - var expressions = {label:"Firstname", model:"user.firstName"}, - el = setupInputGroup( expressions, scope), - input = el.find('input'); - - input.triggerHandler('focus'); - expect(el.hasClass('md-input-focused')).toBe(true); - input.triggerHandler('blur'); - expect(el.hasClass('md-input-focused')).toBe(false); - }); - - it('should set input class for input event', function() { - var expressions = {label:"email", model:"user.email", type:"email"}, - el = setupInputGroup( expressions, scope), - input = el.find('input'); - - expect(el.hasClass('md-input-has-value')).toBe(true); - - input.val(''); - input.triggerHandler('input'); - expect(el.hasClass('md-input-has-value')).toBe(false); - - input.val('ThomasBurleson@gmail.com'); - input.triggerHandler('input'); - expect(el.hasClass('md-input-has-value')).toBe(true); - }); - - it('should set input class for ngModel render', function() { - var expressions = {label:"Firstname", model:"user.firstName"}, - el = setupInputGroup( expressions, scope), - input = el.find('input'); - - expect(el.hasClass('md-input-has-value')).toBe(true); - - input.scope().$apply('user.firstName = ""'); - expect(el.hasClass('md-input-has-value')).toBe(false); - - input.scope().$apply('user.firstName = "Thomas"'); - expect(el.hasClass('md-input-has-value')).toBe(true); - }); - - }); - - describe(' - mdTextFloat', function() { - var model; - beforeEach(function() { - model = { - labels : { - firstName: 'FirstName', - lastName: 'LastName', - email: 'eMail', - password: 'Password' - }, - user : { - firstName: 'Andrew', - lastName: 'Joslin', - email: 'AndrewJoslin@drifty.com', - password: 'public' - } - }; - }); - - it('should set input type `password` properly', function() { - var el = setupTextFloat( { type:"password" }, model); - expect( el.find('input').attr('type')).toBe("password"); - expect( el.find('input').val()).toBe(""); - }); - it('should set input type `email` properly', function() { - var el = setupTextFloat( { type:"email" }, model); - expect( el.find('input').attr('type')).toBe("email"); - expect( el.find('input').val()).toBe(""); - }); - - it('should set a static label properly', function() { - var el = setupTextFloat( { label:"motto" }, model); - expect( el.find('label').text() ).toBe("motto"); - - expect( el.find('input').attr('type')).toBe("text"); - expect( el.find('input').val()).toBe(""); - }); - it('should update a label from model changes.', function() { - var markup ='' + - ''; - var el = buildElement( markup, model); - - expect( el.find('input').val() ).toBe("Andrew"); - expect( el.find('label').text() ).toBe("FirstName"); - - // Change model value of the `firstName` [field] label - // then check if the dom is updated - - var val2 = "Corporate Title:"; - el.find('label').scope().$apply(function(){ - model.labels.firstName = val2; - }); - expect( el.find('label').text() ).toBe( val2 ); - - }); - it('should update an input value from model changes.', function() { - var markup ='' + - ''; - var el = buildElement( markup, model); - var input = el.find('input'); - - expect( input.val() ).toBe("Andrew"); - - var name = "AngularJS"; - input.scope().$apply(function(){ - model.user.firstName = name; - }); - expect( input.val() ).toBe( name ); - - }); - - // Breaks on IE - xit('should update a model value from input changes.', function() { - var markup ='' + - ''; - var el = buildElement( markup, model); - var input = el.find('input'); - - expect( input.val() ).toBe( model.user.firstName ); - - input.val( "AngularJS" ); - input.triggerHandler('input'); - expect( model.user.firstName ).toBe( "AngularJS" ); - - }); - - it('should set input class for focus & blur', function() { - var expressions = {label:"Firstname", model:"user.firstName"}, - el = setupTextFloat( expressions, model), - input = el.find('input'); - - input.triggerHandler('focus'); - expect(el.hasClass('md-input-focused')).toBe(true); - input.triggerHandler('blur'); - expect(el.hasClass('md-input-focused')).toBe(false); - }); - it('should set input class for input event', function() { - var expressions = {label:"password", model:"user.password", type:"password"}, - el = setupTextFloat( expressions, model), - input = el.find('input'); - - expect(el.hasClass('md-input-has-value')).toBe(true); - - input.val(''); - input.triggerHandler('input'); - expect(el.hasClass('md-input-has-value')).toBe(false); - - input.val('ThomasBurleson@gmail.com'); - input.triggerHandler('input'); - expect(el.hasClass('md-input-has-value')).toBe(true); - }); - it('should set input class for ngModel changes', function() { - var expressions = {label:"Password", model:"user.password", type:"password"}, - el = setupTextFloat( expressions, model), - input = el.find('input'); - - expect(el.hasClass('md-input-has-value')).toBe(true); - - input.scope().$apply(function(){ model.user.password = ""; }); - expect(el.hasClass('md-input-has-value')).toBe(false); - - input.scope().$apply(function() { model.user.password = "hiddenValley"; }); - expect(el.hasClass('md-input-has-value')).toBe(true); - }); - - it('should pair input and label for accessibility.', function() { - var markup ='' + - ''; - var el = buildElement( markup, model); - var input = el.find('input'); - var label = el.find('label'); - - expect( label.attr('for') ).toBe( "093" ); - expect( input.attr('id') ).toBe( label.attr('for') ); - }); - - it('should auto-pair input and label for accessibility.', function() { - var markup ='' + - ''; - var el = buildElement( markup, model); - var input = el.find('input'); - var label = el.find('label'); - - expect( label.attr('for') === "" ).toBe( false ); - expect( input.attr('id') ).toBe( label.attr('for') ); - }); - - it('should add an ARIA attribute for disabled inputs', function() { - var markup ='' + - ''; - var el = buildElement( markup, model); - var input = el.find('input'); - - expect( input.attr('aria-disabled') ).toBe( 'true' ); - }); - }); - - // **************************************************************** - // Utility `setup` methods - // **************************************************************** - - var templates = { - md_text_float : '' + - '', - - md_input_group: '
' + - ' ' + - ' ' + - '
' - }; - - /** - * Build a text float group using the `` markup template - */ - function setupInputGroup(expressions, values) { - values = angular.extend({},{type:"text", id:''},values||{}); - - return buildElement( templates.md_input_group, values, angular.extend({}, expressions||{})); - } - - /** - * Build a text float group using the `` markup template - */ - function setupTextFloat(expressions, values) { - values = angular.extend({ modelValue:"",type:'text' }, values || {}); - - var defaults = {model:"modelValue", label:""}; - var tokens = angular.extend({}, defaults, expressions||{} ); - - return buildElement( templates.md_text_float, values, tokens ); - } - - /** - * Use the specified template markup, $compile to the DOM build - * and link both the bindings and attribute assignments. - * @returns {*} DOM Element - */ - function buildElement( template, scope, interpolationScope ) { - var el; - - inject(function($compile, $interpolate, $rootScope) { - scope = angular.extend( $rootScope.$new(), scope || {}); - - // First substitute interpolation values into the template... if any - if ( interpolationScope ) { - template = $interpolate( template )( interpolationScope ); - } - - // Compile the template using the scope model(s) - el = $compile( template )( scope ); - $rootScope.$apply(); - - }); - return el; - } - -}); - -