feat: allow the removal of spaces after currency symbol or before % s…

…ymbol
assisrafael · Jul 14, 2016 · f476dee · f476dee
1 parent 8204c83
commit f476dee
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -117,6 +117,8 @@ Some masks are internationalized, so you need to include the proper angular-loca
 
 - The $modelValue is the $viewValue / 100, so $viewValue - 100% = $modelValue - 1
 
+- You can add ```ui-hide-space``` attribute to hide space between [NUMBER] and %
+
 ### ui-money-mask ###
 
  - Example:
@@ -135,6 +137,8 @@ Some masks are internationalized, so you need to include the proper angular-loca
 
 - Internationalized: Used the currency symbol, decimal separator and thousands separator defined in the client browser configuration.
 
+- You can add ```ui-hide-space``` attribute to hide space between [Currency symbol] and [NUMBER]
+
 ### ui-br-phone-number ###
 ```html
 <input type="text" name="field" ng-model="phoneNumber" ui-br-phone-number>

diff --git a/demo/index.html b/demo/index.html
@@ -76,6 +76,8 @@ <h2>ui-percentage-mask</h2>
 		<h4>ui-percentage-value</h4>
 		$viewValue - <input type="text" name="field6" ng-model="percentageValue" ui-percentage-mask="4" ui-percentage-value min="percentageWithDefaultDecimals" max="115"> <br>
 		$modelValue - <span ng-bind="percentageValue"></span>
+		<h4>ui-percentage-mask without space before %</h4>
+		$viewValue - <input type="text" name="field29" ng-model="percentageValueNoSpace" ng-model-options="{allowInvalid:true}" ui-percentage-mask="2" ui-percentage-value ui-hide-space min="percentageWithDefaultDecimals" max="115"> <br>
 		<br />
 
 		<h2>ui-br-cpf-mask</h2>
@@ -119,6 +121,8 @@ <h2>ui-money-mask</h2>
 		Decimals: <input type="text" name="field28" ng-model="mdecimals" ui-number-mask=0><br>
 		<span ng-bind="moneyWithDynamicDecimals"></span> - {{form.field27.$error}}
 		<br>
+		<h4>ui-money-mask without space after currency symbol</h4>
+		Money: <input type="text" name="field30" ng-model="moneyWithDynamicDecimals" ui-hide-space ui-money-mask="mdecimals">
 
 		<h2>ui-br-phone-number</h2>
 		<input type="text" name="phoneNumber" ng-model="phoneNumber" ui-br-phone-number><br>

diff --git a/src/global/money/money.html b/src/global/money/money.html
@@ -33,6 +33,8 @@ <h2>ui-money-mask</h2>
 		Money: <input type="text" name="field27" ng-model="moneyWithDynamicDecimals" ui-money-mask="mdecimals">
 		Decimals: <input type="text" name="field28" ng-model="mdecimals" ui-number-mask=0><br>
 		<span ng-bind="moneyWithDynamicDecimals"></span> - {{form.field27.$error}}
+		<h4>ui-money-mask without space after currency symbol</h4>
+		Money: <input type="text" name="field30" ng-model="moneyWithoutSpace" ui-hide-space ui-money-mask="mdecimals">
 	</form>
 </body>
 </html>
diff --git a/src/global/money/money.js b/src/global/money/money.js
@@ -10,19 +10,23 @@ function MoneyMaskDirective($locale, $parse, PreFormatters) {
 		link: function(scope, element, attrs, ctrl) {
 			var decimalDelimiter = $locale.NUMBER_FORMATS.DECIMAL_SEP,
 				thousandsDelimiter = $locale.NUMBER_FORMATS.GROUP_SEP,
-				currencySym = $locale.NUMBER_FORMATS.CURRENCY_SYM,
+				currencySym = $locale.NUMBER_FORMATS.CURRENCY_SYM + ' ',
 				decimals = $parse(attrs.uiMoneyMask)(scope);
 
 			function maskFactory(decimals) {
 				var decimalsPattern = decimals > 0 ? decimalDelimiter + new Array(decimals + 1).join('0') : '';
-				var maskPattern = currencySym + ' #' + thousandsDelimiter + '##0' + decimalsPattern;
+				var maskPattern = '#' + thousandsDelimiter + '##0' + decimalsPattern;
 				return new StringMask(maskPattern, {reverse: true});
 			}
 
 			if (angular.isDefined(attrs.uiHideGroupSep)) {
 				thousandsDelimiter = '';
 			}
 
+			if (angular.isDefined(attrs.uiHideSpace)) {
+				currencySym = $locale.NUMBER_FORMATS.CURRENCY_SYM;
+			}
+
 			if (isNaN(decimals)) {
 				decimals = 2;
 			}
@@ -35,7 +39,7 @@ function MoneyMaskDirective($locale, $parse, PreFormatters) {
 				}
 				var prefix = (angular.isDefined(attrs.uiNegativeNumber) && value < 0) ? '-' : '';
 				var valueToFormat = PreFormatters.prepareNumberToFormatter(value, decimals);
-				return prefix + moneyMask.apply(valueToFormat);
+				return prefix + currencySym + moneyMask.apply(valueToFormat);
 			}
 
 			function parser(value) {
@@ -46,7 +50,7 @@ function MoneyMaskDirective($locale, $parse, PreFormatters) {
 				var actualNumber = value.replace(/[^\d]+/g,'');
 				actualNumber = actualNumber.replace(/^[0]+([1-9])/,'$1');
 				actualNumber = actualNumber || '0';
-				var formatedValue = moneyMask.apply(actualNumber);
+				var formatedValue = currencySym + moneyMask.apply(actualNumber);
 
 				if (angular.isDefined(attrs.uiNegativeNumber)) {
 					var isNegative = (value[0] === '-'),

diff --git a/src/global/money/money.test.js b/src/global/money/money.test.js
@@ -180,4 +180,13 @@ describe('ui-money-mask', function() {
 		expect(model.$viewValue).toBe('$ 0.00');
 		expect(model.$modelValue).toBe(0);
 	});
+
+	it('should hide space after currency symbol if ui-hide-space is present', function() {
+		var input = TestUtil.compile('<input ng-model="model" ui-money-mask ui-hide-space>', {
+			model: 345.00
+		});
+
+		var model = input.controller('ngModel');
+		expect(model.$viewValue).toBe('$345.00');
+	});
 });
diff --git a/src/global/percentage/percentage.html b/src/global/percentage/percentage.html
@@ -33,6 +33,8 @@ <h2>ui-percentage-mask</h2>
 		<h4>ui-percentage-value</h4>
 		$viewValue - <input type="text" name="field6" ng-model="percentageValue" ng-model-options="{allowInvalid:true}" ui-percentage-mask="4" ui-percentage-value min="percentageWithDefaultDecimals" max="115"> <br>
 		$modelValue - <span ng-bind="percentageValue"></span>
+		<h4>ui-percentage-mask without space before %</h4>
+		$viewValue - <input type="text" name="field29" ng-model="percentageValue" ng-model-options="{allowInvalid:true}" ui-percentage-mask="4" ui-percentage-value ui-hide-space min="percentageWithDefaultDecimals" max="115"> <br>
 	</form>
 </body>
 </html>
diff --git a/src/global/percentage/percentage.js b/src/global/percentage/percentage.js
@@ -14,6 +14,7 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks) {
 			var decimalDelimiter = $locale.NUMBER_FORMATS.DECIMAL_SEP,
 				thousandsDelimiter = $locale.NUMBER_FORMATS.GROUP_SEP,
 				decimals = parseInt(attrs.uiPercentageMask),
+				hideSpace = false,
 				backspacePressed = false;
 
 			element.bind('keydown keypress', function(event) {
@@ -29,6 +30,10 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks) {
 				thousandsDelimiter = '';
 			}
 
+			if (angular.isDefined(attrs.uiHideSpace)) {
+				hideSpace = true;
+			}
+
 			if (angular.isDefined(attrs.uiPercentageValue)) {
 				modelValue.multiplier  = 1;
 				modelValue.decimalMask = 0;
@@ -63,7 +68,8 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks) {
 				if (backspacePressed && value.length === 1 && value !== '%') {
 					valueToFormat = '0';
 				}
-				var formatedValue = viewMask.apply(valueToFormat) + ' %';
+				var percentSign = hideSpace ? '%' : ' %';
+				var formatedValue = viewMask.apply(valueToFormat) + percentSign;
 				var actualNumber = parseFloat(modelMask.apply(valueToFormat));
 
 				if (ctrl.$viewValue !== formatedValue) {

diff --git a/src/global/percentage/percentage.test.js b/src/global/percentage/percentage.test.js
@@ -54,6 +54,16 @@ describe('ui-percentage-mask', function() {
 		expect(model.$viewValue).toBe('1234.50 %');
 	});
 
+	it('should hide space before "%" if ui-hide-space is present', function() {
+		var input = TestUtil.compile('<input ng-model="model" ui-percentage-mask="decimals" ui-percentage-value ui-hide-space>', {
+			model: 1,
+			decimals: 0
+		});
+
+		var model = input.controller('ngModel');
+		expect(model.$viewValue).toBe('100%');
+	});
+
 	it('should allow changing the number of decimals', angular.mock.inject(function($rootScope) {
 		var input = TestUtil.compile('<input ng-model="model" ui-percentage-mask="decimals">', {
 			model: '12.345',