This repository has been archived by the owner on Nov 22, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 541
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(tagsInput): Change input width accordingly to its content
Create a new directive to dynamically change the input width so its content is always visible. For that directive to work, most CSS type selectors must be changed into class selectors so it's possible to easily "borrow" the input style and calculate the width of its content. BREAKING CHANGE: Since CSS selectors must be changed, custom stylesheets based on the old selectors will conflict with this fix. They'll have to be updated to use class selectors. Closes #6.
- Loading branch information
Showing
10 changed files
with
168 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| 'use strict'; | ||
|
|
||
| /** | ||
| * @ngDoc directive | ||
| * @name tagsInput.directive:tiAutosize | ||
| * | ||
| * @description | ||
| * Automatically sets the input's width so its content is always visible. Used internally by tagsInput directive. | ||
| */ | ||
| tagsInput.directive('tiAutosize', function() { | ||
| return { | ||
| restrict: 'A', | ||
| require: 'ngModel', | ||
| link: function(scope, element, attrs, ctrl) { | ||
| var span, resize; | ||
|
|
||
| span = angular.element('<span class="tag-input"></span>'); | ||
| span.css('display', 'none') | ||
| .css('visibility', 'hidden') | ||
| .css('width', 'auto'); | ||
|
|
||
| element.parent().append(span); | ||
|
|
||
| resize = function(value) { | ||
| var originalValue = value; | ||
|
|
||
| if (angular.isString(value) && value.length === 0) { | ||
| value = element.attr('placeholder') || ''; | ||
| } | ||
| span.text(value); | ||
| span.css('display', ''); | ||
| try { | ||
| element.css('width', span.prop('offsetWidth') + 'px'); | ||
| } | ||
| finally { | ||
| span.css('display', 'none'); | ||
| } | ||
|
|
||
| return originalValue; | ||
| }; | ||
|
|
||
| ctrl.$parsers.unshift(resize); | ||
| ctrl.$formatters.unshift(resize); | ||
| } | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| <div class="ngTagsInput" tabindex="-1" ng-class="options.customClass" transclude-append> | ||
| <div class="ngTagsInput" tabindex="-1" ng-class="options.customClass" transclude-append> | ||
| <div class="tags" ng-class="{focused: hasFocus}"> | ||
| <ul> | ||
| <li ng-repeat="tag in tags" ng-class="getCssClass($index)"> | ||
| <ul class="tag-list"> | ||
| <li class="tag-item" ng-repeat="tag in tags" ng-class="getCssClass($index)"> | ||
| <span>{{tag}}</span> | ||
| <button type="button" ng-click="remove($index)">{{options.removeTagSymbol}}</button> | ||
| </li> | ||
| </ul> | ||
| <input type="text" | ||
| <input type="text" class="tag-input" | ||
| placeholder="{{options.placeholder}}" | ||
| size="{{options.placeholder.length}}" | ||
| maxlength="{{options.maxLength}}" | ||
| tabindex="{{options.tabindex}}" | ||
| ng-model="newTag" | ||
| ng-change="newTagChange()"> | ||
| ng-change="newTagChange()" | ||
| ti-autosize> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| 'use strict'; | ||
|
|
||
| describe('autosize directive', function() { | ||
| var $scope, $document, $compile, | ||
| element; | ||
|
|
||
| // The style tag should be created once, so we can't do it within a beforeEach() callback | ||
| $('<style> .tag-input { box-sizing: border-box; border: 1px; padding: 2px; font: Arial 18px; }</style>').appendTo('head'); | ||
|
|
||
| beforeEach(function() { | ||
| module('ngTagsInput'); | ||
|
|
||
| inject(function($rootScope, _$document_, _$compile_) { | ||
| $scope = $rootScope; | ||
| $document = _$document_; | ||
| $compile = _$compile_; | ||
| }); | ||
| }); | ||
|
|
||
| function compile() { | ||
| var attributes = $.makeArray(arguments).join(' '); | ||
|
|
||
| element = angular.element('<input class="tag-input" ng-model="model" ti-autosize ' + attributes + '>'); | ||
| $document.find('body').append(element); | ||
|
|
||
| $compile(element)($scope); | ||
| $scope.$digest(); | ||
| } | ||
|
|
||
| function getTextWidth(text) { | ||
| var width, span = angular.element('<span class="tag-input"></span>'); | ||
|
|
||
| span.text(text); | ||
| $document.find('body').append(span); | ||
| width = span.prop('offsetWidth') + 'px'; | ||
|
|
||
| span.remove(); | ||
|
|
||
| return width; | ||
| } | ||
|
|
||
| it('re-sizes the input width when its view content changes', function() { | ||
| // Arrange | ||
| var text = 'AAAAAAAAAA'; | ||
| compile(); | ||
|
|
||
| // Act | ||
| element.val(text); | ||
| element.trigger('input'); | ||
|
|
||
| // Arrange | ||
| expect(element.css('width')).toBe(getTextWidth(text)); | ||
| }); | ||
|
|
||
| it('re-sizes the input width when its model value changes', function() { | ||
| // Arrange | ||
| var text = 'AAAAAAAAAAAAAAAAAAAA'; | ||
| compile(); | ||
|
|
||
| // Act | ||
| $scope.model = text; | ||
| $scope.$digest(); | ||
|
|
||
| // Arrange | ||
| expect(element.css('width')).toBe(getTextWidth(text)); | ||
| }); | ||
|
|
||
| it('sets the input width as the placeholder width when the input is empty', function() { | ||
| // Arrange | ||
| compile('placeholder="Some placeholder"'); | ||
|
|
||
| // Act | ||
| $scope.model = ''; | ||
| $scope.$digest(); | ||
|
|
||
| // Assert | ||
| expect(element.css('width')).toBe(getTextWidth('Some placeholder')); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters