Skip to content

Commit 9056a31

Browse files
sagrawal31sagrawal31
committed
More configuration options for validation classes. #8 Moved the tooltip template to $templateCache #9 
1 parent f1db42d commit 9056a31

File tree

4 files changed

+67
-37
lines changed

4 files changed

+67
-37
lines changed

‎src/app.provider.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ angular.module('bootstrap.angular.validation').provider('bsValidationConfig', fu
2020
var _this = this;
2121
this.global = {};
2222
this.global.addSuccessClass = true;
23+
this.global.errorClass = 'has-error';
24+
this.global.successClass = 'has-success';
2325
this.global.errorMessagePrefix = '';
26+
this.global.tooltipPlacement = 'bottom-left';
2427

2528
this.global.setValidateFieldsOn = function(event) {
2629
if (!event) {
@@ -44,6 +47,9 @@ angular.module('bootstrap.angular.validation').provider('bsValidationConfig', fu
4447

4548
this.$get = [function() {
4649
return {
50+
errorClass: _this.global.errorClass,
51+
successClass: _this.global.successClass,
52+
4753
getDisplayErrorsAs: function() {
4854
return displayErrorsAs;
4955
},
@@ -52,6 +58,10 @@ angular.module('bootstrap.angular.validation').provider('bsValidationConfig', fu
5258
return _this.global.errorMessagePrefix || '';
5359
},
5460

61+
getTooltipPlacement: function() {
62+
return _this.global.tooltipPlacement;
63+
},
64+
5565
shouldAddSuccessClass: function() {
5666
return _this.global.addSuccessClass;
5767
},

‎src/services/simple.message.service.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
'use strict';
22

3-
angular.module('bootstrap.angular.validation').factory('simpleMessageService', ['BsValidationService', 'bsValidationConfig',
4-
function(validationService, validationConfig) {
3+
angular.module('bootstrap.angular.validation').factory('simpleMessageService', ['BsValidationService', function(validationService) {
54

65
var errorElementClass = '.bs-invalid-msg';
76

8-
function errorContainer($element, $formGroupElement) {
7+
function getErrorContainer($element, $formGroupElement) {
98
var $errorElement = $formGroupElement.findOne(errorElementClass);
109
if ($errorElement && $errorElement.length) {
1110
return $errorElement;
@@ -31,15 +30,10 @@ function(validationService, validationConfig) {
3130
$formGroupElement.findAll(errorElementClass).addClass('ng-hide');
3231
},
3332

34-
resolveMessage: function($element, $attr, key) {
35-
return validationService.resolveMessage($element, $attr, key);
36-
},
37-
3833
showErrorMessage: function($element, $attr, ngModelController, $formGroupElement) {
39-
var firstErrorKey = Object.keys(ngModelController.$error)[0];
40-
var message = validationConfig.getErrorMessagePrefix() + this.resolveMessage($element, $attr, firstErrorKey);
34+
var message = validationService.getErrorMessage($element, $attr, ngModelController);
4135

42-
var $errorElement = errorContainer($element, $formGroupElement);
36+
var $errorElement = getErrorContainer($element, $formGroupElement);
4337
$errorElement.html(message).removeClass('ng-hide');
4438
}
4539
};

‎src/services/tooltip.message.service.js‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
'use strict';
44

55
angular.module('bootstrap.angular.validation').factory('tooltipMessageService', ['$injector', 'BsValidationService',
6-
'bsValidationConfig', function($injector, validationService, validationConfig) {
6+
'$interpolate', '$templateCache', 'bsValidationConfig',
7+
function($injector, validationService, $interpolate, $templateCache, validationConfig) {
78

89
function getElementID($element) {
910
var id = $element.attr('id');
10-
1111
if (id) {
1212
return id;
1313
}
@@ -17,43 +17,64 @@ angular.module('bootstrap.angular.validation').factory('tooltipMessageService',
1717
return id;
1818
}
1919

20-
function getErrorTooltipID($element) {
21-
return 'bs-error-' + getElementID($element);
22-
}
23-
2420
function getErrorTooltip($element) {
25-
var tooltipID = getErrorTooltipID($element);
21+
var tooltipID = 'bs-error-' + getElementID($element);
22+
var tooltipElement = document.getElementById(tooltipID);
23+
24+
if (tooltipElement) {
25+
return angular.element(tooltipElement);
26+
}
27+
28+
var data = {errorClass: validationConfig.errorClass, tooltipID: tooltipID};
29+
var html = $templateCache.get('bav/template/tooltip.html');
30+
angular.element('body').append($interpolate(html)(data));
31+
2632
return angular.element(document.getElementById(tooltipID));
2733
}
2834

35+
function getTooltipPlacement($element) {
36+
var attributeName = 'bs-tooltip-placement';
37+
if ($element.attr(attributeName)) {
38+
return $element.attr(attributeName);
39+
}
40+
41+
var parentForm = $element.parents('form');
42+
if (parentForm && parentForm.attr(attributeName)) {
43+
return parentForm.attr(attributeName);
44+
}
45+
46+
// Use the global config
47+
return validationConfig.getTooltipPlacement();
48+
}
49+
2950
return {
3051
hideErrorMessage: function($element, $formGroupElement) {
3152
validationService.removeErrorClass($formGroupElement);
3253
getErrorTooltip($element).removeClass('in');
3354
},
3455

35-
resolveMessage: function($element, $attr, key) {
36-
return validationService.resolveMessage($element, $attr, key);
37-
},
38-
3956
showErrorMessage: function($element, $attr, ngModelController) {
40-
var firstErrorKey = Object.keys(ngModelController.$error)[0];
41-
var message = validationConfig.getErrorMessagePrefix() + this.resolveMessage($element, $attr, firstErrorKey);
42-
43-
var tooltipID = getErrorTooltipID($element);
57+
var message = validationService.getErrorMessage($element, $attr, ngModelController);
4458
var $errorTooltip = getErrorTooltip($element);
59+
var placement = getTooltipPlacement($element);
4560

46-
if (!$errorTooltip || !$errorTooltip.length) {
47-
angular.element('body').append('<div class="tooltip has-error" id="' + tooltipID + '" role="tooltip"' +
48-
'><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>');
61+
$errorTooltip.findOne('.tooltip-inner').html(message);
4962

50-
$errorTooltip = getErrorTooltip($element);
63+
var $position = $injector.get('$uibPosition');
64+
var ttPosition = $position.positionElements($element, $errorTooltip, placement, true);
65+
$errorTooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px' });
66+
$errorTooltip.addClass('in');
67+
68+
if (!$errorTooltip.hasClass(ttPosition.placement.split('-')[0])) {
69+
$errorTooltip.addClass(ttPosition.placement.split('-')[0]);
5170
}
5271

53-
var ttPosition = $injector.get('$uibPosition').positionElements($element, $errorTooltip, 'bottom-left', true);
54-
$errorTooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px' });
55-
$errorTooltip.findOne('.tooltip-inner').html(message);
56-
$errorTooltip.addClass('in').addClass(ttPosition.placement);
72+
$position.positionArrow($errorTooltip, ttPosition.placement);
5773
}
5874
};
5975
}]);
76+
77+
angular.module('bootstrap.angular.validation').run(['$templateCache', function($templateCache) {
78+
$templateCache.put('bav/template/tooltip.html', '<div class="tooltip {{errorClass}}" id="{{tooltipID}}"' +
79+
' role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>');
80+
}]);

‎src/services/validation.service.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,14 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
9898

9999
addErrorClass: function($formGroupElement) {
100100
this.removeErrorClass($formGroupElement);
101-
$formGroupElement.addClass('has-error');
101+
$formGroupElement.addClass(validationConfig.errorClass);
102102
},
103103

104104
addSuccessClass: function($formGroupElement) {
105105
this.removeErrorClass($formGroupElement);
106106

107107
if (validationConfig.shouldAddSuccessClass()) {
108-
$formGroupElement.addClass('has-success');
108+
$formGroupElement.addClass(validationConfig.successClass);
109109
}
110110
},
111111

@@ -157,6 +157,11 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
157157
return messages[key];
158158
},
159159

160+
getErrorMessage: function($element, $attr, ngModelController) {
161+
var firstErrorKey = Object.keys(ngModelController.$error)[0];
162+
return validationConfig.getErrorMessagePrefix() + this.resolveMessage($element, $attr, firstErrorKey);
163+
},
164+
160165
getFormGroupElement: function($element) {
161166
// Search parent element with class form-group to operate on.
162167
var formGroupElement = $element.parents(formGroupClass);
@@ -190,11 +195,11 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
190195
},
191196

192197
removeErrorClass: function($formGroupElement) {
193-
$formGroupElement.removeClass('has-error');
198+
$formGroupElement.removeClass(validationConfig.errorClass);
194199
},
195200

196201
removeSuccessClass: function($formGroupElement) {
197-
$formGroupElement.removeClass('has-success');
202+
$formGroupElement.removeClass(validationConfig.successClass);
198203
},
199204

200205
resolveMessage: function ($element, $attr, key) {

0 commit comments

Comments
 (0)