diff options
Diffstat (limited to 'js/vendor/angular-ui/modules/directives/currency')
4 files changed, 200 insertions, 0 deletions
diff --git a/js/vendor/angular-ui/modules/directives/currency/README.md b/js/vendor/angular-ui/modules/directives/currency/README.md new file mode 100644 index 000000000..7959201a5 --- /dev/null +++ b/js/vendor/angular-ui/modules/directives/currency/README.md @@ -0,0 +1,46 @@ +# ui-currency directive + +This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. +In angular, you are only able to specify what the currency symbol is (however, you might not want to change it for localization). + +## Usage + +Apply the directive to your html elements: + + myAppModule.controller('MyController', function($scope) { + $scope.SomeNumber = 123; + }); + + <span ui-currency ng-model="SomeNumber"></span> + +Default styles are in angular-ui.css and are pretty boring, you could just override these in your +stylesheet and make things most excellent (e.g. increasing size for negatives, doing a hover sorta thingy ) + + .ui-currency-pos { + color: green; + } + .ui-currency-neg { + color: red; + } + .ui-currency-zero { + color: blue; + } + .ui-currency-pos.ui-bignum, .ui-currency-neg.ui-smallnum { + font-size: 110%; + } + +### Options + +All the options can be controlled by ui.config (see Global Defaults) or passed in the ui-currency attribute on the declaration. +The symbol attribute defaults to null and is then controlled by the default locale settings. + + <span ui-currency="{ pos='pstyle' neg='nstyle' zero='zstyle' symbol='USD$' bignum='1000' smallnum='-1000'}" ng-model="SomeNumber" ></span> + +If the model is greater than or equal to 1000 add ui-bignum to css class, if less than or equal to -1000 add ui-small num. If attr is-total attribute +is set the bignum/smallnum is not applied. This is useful if the options are global and you don't want totals to necessarily have these classes. + +### Notes + +This directive wraps angular's currency filter. If that changes, you are on your own. + +
\ No newline at end of file diff --git a/js/vendor/angular-ui/modules/directives/currency/currency.js b/js/vendor/angular-ui/modules/directives/currency/currency.js new file mode 100644 index 000000000..97ad384e6 --- /dev/null +++ b/js/vendor/angular-ui/modules/directives/currency/currency.js @@ -0,0 +1,45 @@ +/* + Gives the ability to style currency based on its sign. + */ +angular.module('ui.directives').directive('uiCurrency', ['ui.config', 'currencyFilter' , function (uiConfig, currencyFilter) { + var options = { + pos: 'ui-currency-pos', + neg: 'ui-currency-neg', + zero: 'ui-currency-zero' + }; + if (uiConfig.currency) { + angular.extend(options, uiConfig.currency); + } + return { + restrict: 'EAC', + require: 'ngModel', + link: function (scope, element, attrs, controller) { + var opts, // instance-specific options + renderview, + value; + + opts = angular.extend({}, options, scope.$eval(attrs.uiCurrency)); + + renderview = function (viewvalue) { + var num; + num = viewvalue * 1; + element.toggleClass(opts.pos, (num > 0) ); + element.toggleClass(opts.neg, (num < 0) ); + element.toggleClass(opts.zero, (num === 0) ); + if (viewvalue === '') { + element.text(''); + } else { + element.text(currencyFilter(num, opts.symbol)); + } + return true; + }; + + controller.$render = function () { + value = controller.$viewValue; + element.val(value); + renderview(value); + }; + + } + }; +}]); diff --git a/js/vendor/angular-ui/modules/directives/currency/stylesheets/currency.less b/js/vendor/angular-ui/modules/directives/currency/stylesheets/currency.less new file mode 100644 index 000000000..e1ab0afd2 --- /dev/null +++ b/js/vendor/angular-ui/modules/directives/currency/stylesheets/currency.less @@ -0,0 +1,14 @@ + +/* ui-currency */ +.ui-currency-pos { + color: green; +} +.ui-currency-neg { + color: red; +} +.ui-currency-zero { + color: blue; +} +.ui-currency-pos.ui-bignum, .ui-currency-neg.ui-smallnum { + font-size: 110%; +} diff --git a/js/vendor/angular-ui/modules/directives/currency/test/currencySpec.js b/js/vendor/angular-ui/modules/directives/currency/test/currencySpec.js new file mode 100644 index 000000000..bbbc71fd9 --- /dev/null +++ b/js/vendor/angular-ui/modules/directives/currency/test/currencySpec.js @@ -0,0 +1,95 @@ +describe('uiCurrency', function () { + var scope; + beforeEach(module('ui')); + beforeEach(inject(function ($rootScope) { + scope = $rootScope.$new(); + })); + describe('use on a div element with two-way binding', function () { + it('should have ui-currency-pos style non-zero positive model number ', function () { + inject(function ($compile) { + var element; + element = $compile("<div ui-currency ng-model='aNum'></div>")(scope); + scope.$apply(function () { + scope.aNum = 0.5123; + }); + expect(element.text()).toEqual('$0.51'); + expect(element.hasClass('ui-currency-pos')).toBeTruthy(); + expect(element.hasClass('ui-currency-neg')).toBeFalsy(); + expect(element.hasClass('ui-currency-zero')).toBeFalsy(); + }); + }); + it('should have ui-currency-neg style when negative model number', function () { + inject(function ($compile) { + var element; + element = $compile("<div ui-currency ng-model='aNum'></div>")(scope); + scope.$apply(function () { + scope.aNum = -123; + }); + expect(element.text()).toEqual('($123.00)'); + expect(element.hasClass('ui-currency-pos')).toBeFalsy(); + expect(element.hasClass('ui-currency-neg')).toBeTruthy(); + }); + }); + it('should have ui-currency-zero style when zero model number', function () { + inject(function ($compile) { + var element; + element = $compile("<div ui-currency ng-model='aNum'></div>")(scope); + scope.$apply(function () { + scope.aNum = 0; + }); + expect(element.text()).toEqual('$0.00'); + expect(element.hasClass('ui-currency-pos')).toBeFalsy(); + expect(element.hasClass('ui-currency-neg')).toBeFalsy(); + expect(element.hasClass('ui-currency-zero')).toBeTruthy(); + }); + }); + it('should not have any ui-currency styles or a value at all when missing scope model value', function () { + inject(function ($compile) { + var element; + element = $compile("<div ui-currency ng-model='aMissingNum'></div>")(scope); + expect(element.text()).toEqual(''); + expect(element.hasClass('ui-currency-pos')).toBeFalsy(); + expect(element.hasClass('ui-currency-neg')).toBeFalsy(); + expect(element.hasClass('ui-currency-zero')).toBeFalsy(); + }); + }); + it('should not have any ui-currency styles or a value at all when provided a non-numeric model value', function () { + inject(function ($compile) { + var element; + element = $compile("<div ui-currency ng-model='aBadNum'></div>")(scope); + scope.$apply(function () { + scope.aBadNum = 'bad'; + }); + expect(element.text()).toEqual(''); + expect(element.hasClass('ui-currency-pos')).toBeFalsy(); + expect(element.hasClass('ui-currency-neg')).toBeFalsy(); + expect(element.hasClass('ui-currency-zero')).toBeFalsy(); + }); + }); + + it('should have user-defined positive style when provided in uiCurrency attr', function () { + inject(function ($compile) { + var element; + element = $compile("<div ui-currency=\"{ pos:'pstyle' }\" ng-model='aNum'></div>")(scope); + scope.$apply(function () { + scope.aNum = 1; + }); + expect(element.hasClass('pstyle')).toBeTruthy(); + }); + }); + // Presumption is if above works then no need to test other cases, given the coverage in previous describe + }); + describe('use on a tag element', function () { + it('should have a defined element', function () { + inject(function ($compile) { + var element; + element = $compile("<ui-currency ng-model='aNum'></ui-currency>")(scope); + scope.$apply(function () { + scope.aNum = 1; + }); + expect(element).toBeDefined(); + expect(element.text()).toEqual('$1.00'); + }); + }); + }); +});
\ No newline at end of file |