New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
angular-fontawesome
Advanced tools
angular-fontawesome - npm Package Compare versions
Comparing version 0.3.1 to 0.4.0
| { | ||
| "name": "angular-fontawesome", | ||
| "description": "Angular directive for FontAwesome", | ||
| "version": "0.3.1", | ||
| "version": "0.4.0", | ||
| "main": [ | ||
@@ -22,3 +22,6 @@ "dist/angular-fontawesome.js" | ||
| "Gruntfile.js" | ||
| ] | ||
| ], | ||
| "resolutions": { | ||
| "angular": "1.3.14" | ||
| } | ||
| } |
@@ -8,3 +8,3 @@ angular.module('picardy.fontawesome', []) | ||
| link: function (scope, element, attrs) { | ||
| /*** STRING ATTRS ***/ | ||
@@ -31,2 +31,3 @@ // keep a state of the current attrs so that when they change, | ||
| _observeStringAttr('flip'); | ||
| _observeStringAttr('stack'); | ||
@@ -50,2 +51,19 @@ /** | ||
| /** | ||
| * stack can be passed "large" or an integer | ||
| */ | ||
| attrs.$observe('stack', function () { | ||
| var className; | ||
| element.removeClass(currentClasses.stack); | ||
| if (attrs.stack === 'large') { | ||
| className = 'fa-stack-lg'; | ||
| } else if (!isNaN(parseInt(attrs.stack, 10))) { | ||
| className = 'fa-stack-' + attrs.stack + 'x'; | ||
| } | ||
| element.addClass(className); | ||
| currentClasses.stack = className; | ||
| }); | ||
| /*** BOOLEAN ATTRS ***/ | ||
@@ -67,3 +85,3 @@ // generic function to bind boolean attrs | ||
| /*** CONDITIONAL ATTRS ***/ | ||
| // automatically populate fa-li if DOM structure indicates | ||
| // automatically populate fa-li if DOM structure indicates | ||
| element.toggleClass('fa-li', ( | ||
@@ -79,2 +97,49 @@ element.parent() && | ||
| }; | ||
| }) | ||
| .directive('faStack', function () { | ||
| return { | ||
| restrict: 'E', | ||
| transclude: true, | ||
| template: '<span ng-transclude class="fa-stack fa-lg"></span>', | ||
| replace: true, | ||
| link: function (scope, element, attrs) { | ||
| /*** STRING ATTRS ***/ | ||
| // keep a state of the current attrs so that when they change, | ||
| // we can remove the old attrs before adding the new ones. | ||
| var currentClasses = {}; | ||
| // generic function to bind string attrs | ||
| function _observeStringAttr (attr, baseClass) { | ||
| attrs.$observe(attr, function () { | ||
| baseClass = baseClass || 'fa-' + attr; | ||
| element.removeClass(currentClasses[attr]); | ||
| if (attrs[attr]) { | ||
| var className = [baseClass, attrs[attr]].join('-'); | ||
| element.addClass(className); | ||
| currentClasses[attr] = className; | ||
| } | ||
| }); | ||
| } | ||
| _observeStringAttr('size'); | ||
| /** | ||
| * size can be passed "large" or an integer | ||
| */ | ||
| attrs.$observe('size', function () { | ||
| var className; | ||
| element.removeClass(currentClasses.size); | ||
| if (attrs.size === 'large') { | ||
| className = 'fa-lg'; | ||
| } else if (!isNaN(parseInt(attrs.size, 10))) { | ||
| className = 'fa-' + attrs.size + 'x'; | ||
| } | ||
| element.addClass(className); | ||
| currentClasses.size = className; | ||
| }); | ||
| } | ||
| }; | ||
| }); |
@@ -1,1 +0,1 @@ | ||
| angular.module("picardy.fontawesome",[]).directive("fa",function(){return{restrict:"E",template:'<i class="fa"></i>',replace:!0,link:function(a,b,c){function d(a,d){c.$observe(a,function(){if(d=d||"fa-"+a,b.removeClass(f[a]),c[a]){var e=[d,c[a]].join("-");b.addClass(e),f[a]=e}})}function e(a,d){c.$observe(a,function(){d=d||"fa-"+a;var e=a in c&&"false"!==c[a]&&c[a]!==!1;b.toggleClass(d,e)})}var f={};d("name","fa"),d("rotate"),d("flip"),c.$observe("size",function(){var a;b.removeClass(f.size),"large"===c.size?a="fa-lg":isNaN(parseInt(c.size,10))||(a="fa-"+c.size+"x"),b.addClass(a),f.size=a}),e("border"),e("fw"),e("inverse"),e("spin"),b.toggleClass("fa-li",b.parent()&&b.parent().parent()&&b.parent().parent().hasClass("fa-ul")&&b.parent().children()[0]===b[0]&&"false"!==c.list&&c.list!==!1)}}}); | ||
| angular.module("picardy.fontawesome",[]).directive("fa",function(){return{restrict:"E",template:'<i class="fa"></i>',replace:!0,link:function(a,b,c){function d(a,d){c.$observe(a,function(){if(d=d||"fa-"+a,b.removeClass(f[a]),c[a]){var e=[d,c[a]].join("-");b.addClass(e),f[a]=e}})}function e(a,d){c.$observe(a,function(){d=d||"fa-"+a;var e=a in c&&"false"!==c[a]&&c[a]!==!1;b.toggleClass(d,e)})}var f={};d("name","fa"),d("rotate"),d("flip"),d("stack"),c.$observe("size",function(){var a;b.removeClass(f.size),"large"===c.size?a="fa-lg":isNaN(parseInt(c.size,10))||(a="fa-"+c.size+"x"),b.addClass(a),f.size=a}),c.$observe("stack",function(){var a;b.removeClass(f.stack),"large"===c.stack?a="fa-stack-lg":isNaN(parseInt(c.stack,10))||(a="fa-stack-"+c.stack+"x"),b.addClass(a),f.stack=a}),e("border"),e("fw"),e("inverse"),e("spin"),b.toggleClass("fa-li",b.parent()&&b.parent().parent()&&b.parent().parent().hasClass("fa-ul")&&b.parent().children()[0]===b[0]&&"false"!==c.list&&c.list!==!1)}}}).directive("faStack",function(){return{restrict:"E",transclude:!0,template:'<span ng-transclude class="fa-stack fa-lg"></span>',replace:!0,link:function(a,b,c){function d(a,d){c.$observe(a,function(){if(d=d||"fa-"+a,b.removeClass(e[a]),c[a]){var f=[d,c[a]].join("-");b.addClass(f),e[a]=f}})}var e={};d("size"),c.$observe("size",function(){var a;b.removeClass(e.size),"large"===c.size?a="fa-lg":isNaN(parseInt(c.size,10))||(a="fa-"+c.size+"x"),b.addClass(a),e.size=a})}}}); |
| { | ||
| "name": "angular-fontawesome", | ||
| "version": "0.3.1", | ||
| "version": "0.4.0", | ||
| "author": "Paul Marbach <paul@picardylearning.com>", | ||
@@ -23,8 +23,8 @@ "description": "Angular directive for FontAwesome", | ||
| "devDependencies": { | ||
| "bower": "*", | ||
| "bower": "1.3.12", | ||
| "grunt": "^0.4.4", | ||
| "grunt-contrib-clean": "*", | ||
| "grunt-contrib-copy": "*", | ||
| "grunt-contrib-uglify": "*", | ||
| "grunt-contrib-jshint": "*", | ||
| "grunt-contrib-clean": "0.6.0", | ||
| "grunt-contrib-copy": "0.8.0", | ||
| "grunt-contrib-jshint": "0.11.0", | ||
| "grunt-contrib-uglify": "0.8.0", | ||
| "grunt-karma": "^0.8.2", | ||
@@ -34,10 +34,10 @@ "grunt-bump": "~0.0.15", | ||
| "karma-ng-scenario": "^0.1.0", | ||
| "karma-jasmine": "*", | ||
| "karma-chrome-launcher": "*", | ||
| "karma-firefox-launcher": "*", | ||
| "karma-phantomjs-launcher": "*", | ||
| "karma-safari-launcher": "*", | ||
| "karma-ng-html2js-preprocessor": "^0.1.0" | ||
| "karma-chrome-launcher": "0.1.7", | ||
| "karma-firefox-launcher": "0.1.4", | ||
| "karma-jasmine": "0.3.5", | ||
| "karma-ng-html2js-preprocessor": "^0.1.0", | ||
| "karma-phantomjs-launcher": "0.1.4", | ||
| "karma-safari-launcher": "0.1.1" | ||
| }, | ||
| "license": "MIT" | ||
| } |
| # angular-fontawesome [](https://travis-ci.org/picardy/angular-fontawesome) | ||
| [](https://gitter.im/picardy/angular-fontawesome?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) | ||
| A simple directive for [FontAwesome](http://fontawesome.io/) icons. Avoid writing a massive `ngStyle` declaration for your FontAwesome integration, and use the power of Angular to make interactive icon-based widgets. | ||
@@ -7,20 +9,20 @@ | ||
| 1. Include the module in your own app. | ||
| 1. Include the FontAwesome CSS and fonts in your application by [following their instructions](http://fortawesome.github.io/Font-Awesome/get-started/). | ||
| ```javascript | ||
| angular.module('myApp', ['picardy.fontawesome']) | ||
| ``` | ||
| 2. Include the angular-fontawesome module in your Angular app. | ||
| ```javascript | ||
| angular.module('myApp', ['picardy.fontawesome']) | ||
| ``` | ||
| 3. Use the directive on any page which bootstraps your app. | ||
| ```html | ||
| <fa name="spinner" spin ng-style="{'color': checkColor}"></fa> | ||
| <!-- $scope.checkColor = 'blue' --> | ||
| <!-- rendered --> | ||
| <i class="fa fa-spinner fa-spin" style="color:blue;"></i> | ||
| ``` | ||
| 2. Use the directive on any page which bootstraps your app. | ||
| ```html | ||
| <fa name="loading" spin ng-style="{'color': checkColor}"></fa> | ||
| <!-- $scope.checkColor = 'blue' --> | ||
| <!-- rendered --> | ||
| <i class="fa fa-loading fa-spin" style="color:blue;"></i> | ||
| ``` | ||
| ### Attributes | ||
| The `fa` directive's attributes map to the [classes used by FontAwesome\. | ||
| The `fa` directive's attributes map to the classes used by FontAwesome\. | ||
@@ -39,3 +41,3 @@ ```html | ||
| ##### name | ||
| The icon's [name](http://fontawesome.io/icons/), such as `fa-loading` or `fa-square`. | ||
| The icon's [name](http://fontawesome.io/icons/), such as `fa-spinner` or `fa-square`. | ||
| ```html | ||
@@ -75,11 +77,11 @@ <fa name="github"></fa> | ||
| ```html | ||
| <fa name="loading" spin></fa> | ||
| <fa name="spinner" spin></fa> | ||
| <!-- rendered --> | ||
| <i class="fa fa-loading fa-spin"></i> | ||
| <i class="fa fa-spinner fa-spin"></i> | ||
| ``` | ||
| You can pass in `true` or `false` to the attribute as well, allowing the spin class to be be easily toggleable. | ||
| ```html | ||
| <fa name="{{ isLoading ? 'loading' : 'check' }}" spin="{{ isLoading }}"></fa> | ||
| <fa name="{{ isLoading ? 'spinner' : 'check' }}" spin="{{ isLoading }}"></fa> | ||
| <!-- rendered --> | ||
| <i class="fa fa-loading fa-spin"></i> | ||
| <i class="fa fa-spinner fa-spin"></i> | ||
| ``` | ||
@@ -130,7 +132,16 @@ | ||
| ##### stack | ||
| coming soon | ||
| The `faStack` directive is used as a wrapper for stacked fonts used by FontAwesome\. | ||
| ```html | ||
| <fa-stack size="1-5|large"> | ||
| <fa name="ICON_NAME" stack="1-5|large"></fa> | ||
| <fa name="ICON_NAME" stack="1-5|large"></fa> | ||
| </fa-stack> | ||
| ``` | ||
| When using <fa-stack> as a wrapper, you must also specify the 'stack' attribute on the children, | ||
| as described [here](http://fortawesome.github.io/Font-Awesome/examples/#stacked). | ||
| Failure to do so will render the fonts, just not one on top of another like we want them to. | ||
| ### TODO | ||
| * `fa-stack` support | ||
| * `fa-stack` tests | ||
| * `pull="left"`, `pull="right"` | ||
@@ -137,0 +148,0 @@ * demos on Github pages |
@@ -8,3 +8,3 @@ angular.module('picardy.fontawesome', []) | ||
| link: function (scope, element, attrs) { | ||
| /*** STRING ATTRS ***/ | ||
@@ -31,2 +31,3 @@ // keep a state of the current attrs so that when they change, | ||
| _observeStringAttr('flip'); | ||
| _observeStringAttr('stack'); | ||
@@ -50,2 +51,19 @@ /** | ||
| /** | ||
| * stack can be passed "large" or an integer | ||
| */ | ||
| attrs.$observe('stack', function () { | ||
| var className; | ||
| element.removeClass(currentClasses.stack); | ||
| if (attrs.stack === 'large') { | ||
| className = 'fa-stack-lg'; | ||
| } else if (!isNaN(parseInt(attrs.stack, 10))) { | ||
| className = 'fa-stack-' + attrs.stack + 'x'; | ||
| } | ||
| element.addClass(className); | ||
| currentClasses.stack = className; | ||
| }); | ||
| /*** BOOLEAN ATTRS ***/ | ||
@@ -67,3 +85,3 @@ // generic function to bind boolean attrs | ||
| /*** CONDITIONAL ATTRS ***/ | ||
| // automatically populate fa-li if DOM structure indicates | ||
| // automatically populate fa-li if DOM structure indicates | ||
| element.toggleClass('fa-li', ( | ||
@@ -79,2 +97,49 @@ element.parent() && | ||
| }; | ||
| }) | ||
| .directive('faStack', function () { | ||
| return { | ||
| restrict: 'E', | ||
| transclude: true, | ||
| template: '<span ng-transclude class="fa-stack fa-lg"></span>', | ||
| replace: true, | ||
| link: function (scope, element, attrs) { | ||
| /*** STRING ATTRS ***/ | ||
| // keep a state of the current attrs so that when they change, | ||
| // we can remove the old attrs before adding the new ones. | ||
| var currentClasses = {}; | ||
| // generic function to bind string attrs | ||
| function _observeStringAttr (attr, baseClass) { | ||
| attrs.$observe(attr, function () { | ||
| baseClass = baseClass || 'fa-' + attr; | ||
| element.removeClass(currentClasses[attr]); | ||
| if (attrs[attr]) { | ||
| var className = [baseClass, attrs[attr]].join('-'); | ||
| element.addClass(className); | ||
| currentClasses[attr] = className; | ||
| } | ||
| }); | ||
| } | ||
| _observeStringAttr('size'); | ||
| /** | ||
| * size can be passed "large" or an integer | ||
| */ | ||
| attrs.$observe('size', function () { | ||
| var className; | ||
| element.removeClass(currentClasses.size); | ||
| if (attrs.size === 'large') { | ||
| className = 'fa-lg'; | ||
| } else if (!isNaN(parseInt(attrs.size, 10))) { | ||
| className = 'fa-' + attrs.size + 'x'; | ||
| } | ||
| element.addClass(className); | ||
| currentClasses.size = className; | ||
| }); | ||
| } | ||
| }; | ||
| }); |
@@ -1,252 +0,199 @@ | ||
| describe('angular-fontawesome', function () { | ||
| beforeEach(module('picardy.fontawesome')); | ||
| (function () { | ||
| 'use strict'; | ||
| afterEach(inject(function ($rootScope) { | ||
| delete $rootScope.options; | ||
| })); | ||
| describe('angular-fontawesome', function () { | ||
| describe('constructor', function () { | ||
| var elm, scope; | ||
| beforeEach(module('picardy.fontawesome')); | ||
| beforeEach(inject(function ($rootScope, $compile) { | ||
| elm = angular.element('<fa></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)($rootScope); | ||
| $rootScope.$digest(); | ||
| afterEach(inject(function ($rootScope) { | ||
| delete $rootScope.options; | ||
| })); | ||
| it('should have the fa class all the time', function () { | ||
| expect(elm.hasClass('fa')).toBe(true); | ||
| }); | ||
| }); | ||
| describe('string-based attributes', function () { | ||
| describe('name', function () { | ||
| describe('constructor', function () { | ||
| var elm, scope; | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="{{ options.name }}"></fa>'); | ||
| beforeEach(inject(function ($rootScope, $compile) { | ||
| elm = angular.element('<fa></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $rootScope.options.name = 'square'; | ||
| $compile(elm)($rootScope); | ||
| $rootScope.$digest(); | ||
| })); | ||
| it('should replace the <fa> tag with an <i> tag that contains the proper classes', function () { | ||
| expect(elm.hasClass('fa-square')).toBe(true); | ||
| it('should have the fa class all the time', function () { | ||
| expect(elm.hasClass('fa')).toBe(true); | ||
| }); | ||
| it('should be able to change the used icon during the $digest cycle', function () { | ||
| scope.options.name = 'book'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-square')).not.toBe(true); | ||
| expect(elm.hasClass('fa-book')).toBe(true); | ||
| }); | ||
| }); | ||
| describe('size', function () { | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="book" size="{{ options.size }}"></fa>'); | ||
| scope = $rootScope; | ||
| describe('string-based attributes', function () { | ||
| describe('name', function () { | ||
| var elm, scope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="{{ options.name }}"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| })); | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $rootScope.options.name = 'square'; | ||
| $rootScope.$digest(); | ||
| })); | ||
| it('should handle the "large" string', function () { | ||
| scope.options.size = 'large'; | ||
| scope.$digest(); | ||
| it('should replace the <fa> tag with an <i> tag that contains the proper classes', function () { | ||
| expect(elm.hasClass('fa-square')).toBe(true); | ||
| }); | ||
| expect(elm.hasClass('fa-lg')).toBe(true); | ||
| }); | ||
| it('should be able to change the used icon during the $digest cycle', function () { | ||
| scope.options.name = 'book'; | ||
| scope.$digest(); | ||
| it('should handle integers', function () { | ||
| scope.options.size = 1; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-1x')).toBe(true); | ||
| expect(elm.hasClass('fa-square')).not.toBe(true); | ||
| expect(elm.hasClass('fa-book')).toBe(true); | ||
| }); | ||
| }); | ||
| it('should reject non-conforming input', function () { | ||
| scope.options.size = 'a'; | ||
| scope.$digest(); | ||
| describe('size', function () { | ||
| var elm, scope; | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="book" size="{{ options.size }}"></fa>'); | ||
| scope = $rootScope; | ||
| expect(elm.hasClass('fa-ax')).not.toBe(true); | ||
| }); | ||
| $rootScope.options = $rootScope.options || {}; | ||
| it('should clear existing classes', function () { | ||
| scope.options.size = 'large'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-lg')).toBe(true); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| })); | ||
| scope.options.size = 1; | ||
| scope.$digest(); | ||
| it('should handle the "large" string', function () { | ||
| scope.options.size = 'large'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-1x')).toBe(true); | ||
| expect(elm.hasClass('fa-lg')).not.toBe(true); | ||
| }); | ||
| expect(elm.hasClass('fa-lg')).toBe(true); | ||
| }); | ||
| it('should handle any and all ints, including unsupported ones', function () { | ||
| for(i=0; i<100; i++) { | ||
| scope.options.size = i; | ||
| it('should handle integers', function () { | ||
| scope.options.size = 1; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-' + i + 'x')).toBe(true); | ||
| expect(elm.hasClass('fa-' + (i - 1) + 'x')).not.toBe(true); | ||
| } | ||
| }); | ||
| }); | ||
| expect(elm.hasClass('fa-1x')).toBe(true); | ||
| }); | ||
| describe('flip', function () { | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="book" flip="{{ options.flip }}"></fa>'); | ||
| scope = $rootScope; | ||
| it('should reject non-conforming input', function () { | ||
| scope.options.size = 'a'; | ||
| scope.$digest(); | ||
| $rootScope.options = $rootScope.options || {}; | ||
| expect(elm.hasClass('fa-ax')).not.toBe(true); | ||
| }); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| })); | ||
| it('should clear existing classes', function () { | ||
| scope.options.size = 'large'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-lg')).toBe(true); | ||
| it('should handle any string #futureproofing', function () { | ||
| scope.options.flip = 'horizontal'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-horizontal')).toBe(true); | ||
| scope.options.size = 1; | ||
| scope.$digest(); | ||
| scope.options.flip = 'vertical'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-vertical')).toBe(true); | ||
| expect(elm.hasClass('fa-1x')).toBe(true); | ||
| expect(elm.hasClass('fa-lg')).not.toBe(true); | ||
| }); | ||
| scope.options.flip = 'foobar'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-foobar')).toBe(true); | ||
| }); | ||
| it('should handle any and all ints, including unsupported ones', function () { | ||
| for (var i=0; i<100; i++) { | ||
| scope.options.size = i; | ||
| scope.$digest(); | ||
| it('should clear existing classes', function () { | ||
| scope.options.flip = 'horizontal'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-horizontal')).toBe(true); | ||
| scope.options.flip = 'vertical'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-vertical')).toBe(true); | ||
| expect(elm.hasClass('fa-flip-horizontal')).not.toBe(true); | ||
| expect(elm.hasClass('fa-' + i + 'x')).toBe(true); | ||
| expect(elm.hasClass('fa-' + (i - 1) + 'x')).not.toBe(true); | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
| describe('rotate', function () { | ||
| var elm, scope; | ||
| describe('flip', function () { | ||
| var elm, scope; | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="book" flip="{{ options.flip }}"></fa>'); | ||
| scope = $rootScope; | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="shield" rotate="{{ options.rotate }}"></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| })); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| })); | ||
| it('should handle any int #futureproofing', function () { | ||
| scope.options.rotate = 90; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-90')).toBe(true); | ||
| it('should handle any string #futureproofing', function () { | ||
| scope.options.flip = 'horizontal'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-horizontal')).toBe(true); | ||
| scope.options.rotate = 180; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-180')).toBe(true); | ||
| scope.options.flip = 'vertical'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-vertical')).toBe(true); | ||
| scope.options.rotate = 270; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-270')).toBe(true); | ||
| }); | ||
| scope.options.flip = 'foobar'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-foobar')).toBe(true); | ||
| }); | ||
| it('should handle any string #futureproofing', function () { | ||
| scope.options.rotate = '90'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-90')).toBe(true); | ||
| it('should clear existing classes', function () { | ||
| scope.options.flip = 'horizontal'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-horizontal')).toBe(true); | ||
| scope.options.rotate = '180'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-180')).toBe(true); | ||
| scope.options.rotate = '270'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-270')).toBe(true); | ||
| scope.options.flip = 'vertical'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-flip-vertical')).toBe(true); | ||
| expect(elm.hasClass('fa-flip-horizontal')).not.toBe(true); | ||
| }); | ||
| }); | ||
| it('should clear existing classes', function () { | ||
| scope.options.rotate = 90; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-90')).toBe(true); | ||
| scope.options.rotate = 180; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-180')).toBe(true); | ||
| expect(elm.hasClass('fa-rotate-90')).not.toBe(true); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('boolean attributes', function () { | ||
| describe('spin', function () { | ||
| it('should set the class if the attr is present with no value', function () { | ||
| describe('rotate', function () { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" spin></fa>'); | ||
| beforeEach(inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="shield" rotate="{{ options.rotate }}"></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| }); | ||
| })); | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-spin')).toBe(true); | ||
| }); | ||
| }); | ||
| it('should handle any int #futureproofing', function () { | ||
| scope.options.rotate = 90; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-90')).toBe(true); | ||
| it('should be set to false if it\'s declared', function () { | ||
| var elm, scope; | ||
| scope.options.rotate = 180; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-180')).toBe(true); | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" spin="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.options.rotate = 270; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-270')).toBe(true); | ||
| }); | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-spin')).toBe(false); | ||
| }); | ||
| }); | ||
| it('should handle any string #futureproofing', function () { | ||
| scope.options.rotate = '90'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-90')).toBe(true); | ||
| it('should bind to an expression', function () { | ||
| var elm, scope; | ||
| scope.options.rotate = '180'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-180')).toBe(true); | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" spin="{{ options.loading }}"></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.options.rotate = '270'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-rotate-270')).toBe(true); | ||
| }); | ||
| runs(function () { | ||
| scope.options.loading = true; | ||
| it('should clear existing classes', function () { | ||
| scope.options.rotate = 90; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-spin')).toBe(true); | ||
| expect(elm.hasClass('fa-rotate-90')).toBe(true); | ||
| scope.options.loading = false; | ||
| scope.options.rotate = 180; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-spin')).toBe(false); | ||
| expect(elm.hasClass('fa-rotate-180')).toBe(true); | ||
| expect(elm.hasClass('fa-rotate-90')).not.toBe(true); | ||
| }); | ||
@@ -256,229 +203,290 @@ }); | ||
| describe('border', function () { | ||
| it('should set the class if the attr is present with no value', function () { | ||
| var elm, scope; | ||
| describe('boolean attributes', function () { | ||
| describe('spin', function () { | ||
| it('should set the class if the attr is present with no value', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" border></fa>'); | ||
| scope = $rootScope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" spin></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| }); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-border')).toBe(true); | ||
| expect(elm.hasClass('fa-spin')).toBe(true); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should be set to false if it\'s declared', function () { | ||
| var elm, scope; | ||
| it('should be set to false if it\'s declared', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" border="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| }); | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" spin="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-border')).toBe(false); | ||
| expect(elm.hasClass('fa-spin')).toBe(false); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should bind to an expression', function () { | ||
| var elm, scope; | ||
| it('should bind to an expression', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" border="{{ options.border }}"></fa>'); | ||
| scope = $rootScope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" spin="{{ options.loading }}"></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| }); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| runs(function () { | ||
| scope.options.border = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-border')).toBe(true); | ||
| scope.options.loading = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-spin')).toBe(true); | ||
| scope.options.border = false; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-border')).toBe(false); | ||
| scope.options.loading = false; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-spin')).toBe(false); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('fw', function () { | ||
| it('should set the class if the attr is present with no value', function () { | ||
| var elm, scope; | ||
| describe('border', function () { | ||
| it('should set the class if the attr is present with no value', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="square" fw></fa>'); | ||
| scope = $rootScope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" border></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| }); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-fw')).toBe(true); | ||
| expect(elm.hasClass('fa-border')).toBe(true); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should be set to false if it\'s declared', function () { | ||
| var elm, scope; | ||
| it('should be set to false if it\'s declared', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="square" fw="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" border="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-border')).toBe(false); | ||
| done(); | ||
| }); | ||
| }); | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-fw')).toBe(false); | ||
| it('should bind to an expression', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="loading" border="{{ options.border }}"></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| scope.options.border = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-border')).toBe(true); | ||
| scope.options.border = false; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-border')).toBe(false); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should bind to an expression', function () { | ||
| var elm, scope; | ||
| describe('fw', function () { | ||
| it('should set the class if the attr is present with no value', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="square" fw="{{ options.fw }}"></fa>'); | ||
| scope = $rootScope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="square" fw></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| }); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| runs(function () { | ||
| scope.options.fw = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-fw')).toBe(true); | ||
| expect(elm.hasClass('fa-fw')).toBe(true); | ||
| scope.options.fw = false; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-fw')).toBe(false); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('inverse', function () { | ||
| it('should set the class if the attr is present with no value', function () { | ||
| var elm, scope; | ||
| it('should be set to false if it\'s declared', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="github" inverse></fa>'); | ||
| scope = $rootScope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="square" fw="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| $rootScope.options = $rootScope.options || {}; | ||
| expect(elm.hasClass('fa-fw')).toBe(false); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| done(); | ||
| }); | ||
| }); | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-inverse')).toBe(true); | ||
| it('should bind to an expression', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="square" fw="{{ options.fw }}"></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| scope.options.fw = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-fw')).toBe(true); | ||
| scope.options.fw = false; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-fw')).toBe(false); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should be set to false if it\'s declared', function () { | ||
| var elm, scope; | ||
| describe('inverse', function () { | ||
| it('should set the class if the attr is present with no value', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="github" inverse="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| }); | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="github" inverse></fa>'); | ||
| scope = $rootScope; | ||
| runs(function () { | ||
| expect(elm.hasClass('fa-inverse')).toBe(false); | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-inverse')).toBe(true); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| it('should bind to an expression', function () { | ||
| var elm, scope; | ||
| it('should be set to false if it\'s declared', function (done) { | ||
| var elm, scope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="github" inverse="{{ options.inverse }}"></fa>'); | ||
| scope = $rootScope; | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="github" inverse="false"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| $rootScope.options = $rootScope.options || {}; | ||
| expect(elm.hasClass('fa-inverse')).toBe(false); | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| done(); | ||
| }); | ||
| }); | ||
| runs(function () { | ||
| scope.options.inverse = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-inverse')).toBe(true); | ||
| it('should bind to an expression', function (done) { | ||
| var elm, scope; | ||
| scope.options.inverse = false; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-inverse')).toBe(false); | ||
| inject(function($rootScope, $compile) { | ||
| elm = angular.element('<fa name="github" inverse="{{ options.inverse }}"></fa>'); | ||
| scope = $rootScope; | ||
| $rootScope.options = $rootScope.options || {}; | ||
| $compile(elm)(scope); | ||
| scope.$digest(); | ||
| scope.options.inverse = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-inverse')).toBe(true); | ||
| scope.options.inverse = false; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa-inverse')).toBe(false); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('conditional attributes', function () { | ||
| describe('list', function () {}); | ||
| describe('conditional attributes', function () { | ||
| describe('list', function () {}); | ||
| // describe('stacks', function () {}); | ||
| // describe('stacks', function () {}); | ||
| describe('ratings stars', function () {}); | ||
| }); | ||
| describe('ratings stars', function () {}); | ||
| }); | ||
| describe('demo tests', function () { | ||
| it('should handle normal directives, such as ng-class', function () { | ||
| var elm, scope; | ||
| describe('demo tests', function () { | ||
| it('should handle normal directives, such as ng-class', function (done) { | ||
| var elm, scope; | ||
| inject(function ($rootScope, $compile) { | ||
| elm = angular.element('<fa name="{{ options.name }}" ng-class="{\'boom\': options.booming}" ng-style="{\'color\': options.color}"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)($rootScope); | ||
| $rootScope.$digest(); | ||
| }); | ||
| inject(function ($rootScope, $compile) { | ||
| elm = angular.element('<fa name="{{ options.name }}" ng-class="{\'boom\': options.booming}" ng-style="{\'color\': options.color}"></fa>'); | ||
| scope = $rootScope; | ||
| $compile(elm)($rootScope); | ||
| $rootScope.$digest(); | ||
| runs(function () { | ||
| scope.options = scope.options || {}; | ||
| scope.options.name = 'square'; | ||
| scope.options.color = 'blue'; | ||
| scope.$digest(); | ||
| scope.options = scope.options || {}; | ||
| scope.options.name = 'square'; | ||
| scope.options.color = 'blue'; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa')).toBe(true); | ||
| expect(elm.hasClass('fa-square')).toBe(true); | ||
| expect(elm.hasClass('boom')).toBe(false); | ||
| expect(elm.css('color')).toBe('blue'); | ||
| expect(elm.hasClass('fa')).toBe(true); | ||
| expect(elm.hasClass('fa-square')).toBe(true); | ||
| expect(elm.hasClass('boom')).toBe(false); | ||
| expect(elm.css('color')).toBe('blue'); | ||
| scope.options.name = 'envelope'; | ||
| scope.options.color = 'red'; | ||
| scope.options.booming = true; | ||
| scope.$digest(); | ||
| scope.options.name = 'envelope'; | ||
| scope.options.color = 'red'; | ||
| scope.options.booming = true; | ||
| scope.$digest(); | ||
| expect(elm.hasClass('fa')).toBe(true); | ||
| expect(elm.hasClass('fa-envelope')).toBe(true); | ||
| expect(elm.hasClass('fa-square')).not.toBe(true); | ||
| expect(elm.hasClass('boom')).toBe(true); | ||
| expect(elm.css('color')).toBe('red'); | ||
| expect(elm.hasClass('fa')).toBe(true); | ||
| expect(elm.hasClass('fa-envelope')).toBe(true); | ||
| expect(elm.hasClass('fa-square')).not.toBe(true); | ||
| expect(elm.hasClass('boom')).toBe(true); | ||
| expect(elm.css('color')).toBe('red'); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('list', function () {}); | ||
| describe('list', function () {}); | ||
| // describe('stacks', function () {}); | ||
| // describe('stacks', function () {}); | ||
| describe('ratings stars', function () {}); | ||
| describe('ratings stars', function () {}); | ||
| }); | ||
| }); | ||
| }); | ||
| }()); |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by18.65%
36959
- Lines of code
- increased by16.04%
774
- Number of lines in readme file
- increased by7.97%
149
No dependency changes