Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 5a1c2c9

Browse files
FoxandxssFoxandxss
committed
feat(buttons): use uib- prefix
Closes #4445
1 parent 4031e29 commit 5a1c2c9

File tree

3 files changed

+200
-55
lines changed

3 files changed

+200
-55
lines changed

‎src/buttons/buttons.js

+114-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
angular.module('ui.bootstrap.buttons', [])
22

3-
.constant('buttonConfig', {
3+
.constant('uibButtonConfig', {
44
activeClass: 'active',
55
toggleEvent: 'click'
66
})
77

8-
.controller('ButtonsController', ['buttonConfig', function(buttonConfig) {
8+
.controller('UibButtonsController', ['uibButtonConfig', function(buttonConfig) {
99
this.activeClass = buttonConfig.activeClass || 'active';
1010
this.toggleEvent = buttonConfig.toggleEvent || 'click';
1111
}])
1212

13-
.directive('btnRadio', function() {
13+
.directive('uibBtnRadio', function() {
1414
return {
15-
require: ['btnRadio', 'ngModel'],
16-
controller: 'ButtonsController',
15+
require: ['uibBtnRadio', 'ngModel'],
16+
controller: 'UibButtonsController',
1717
controllerAs: 'buttons',
1818
link: function(scope, element, attrs, ctrls) {
1919
var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
@@ -22,7 +22,7 @@ angular.module('ui.bootstrap.buttons', [])
2222

2323
//model -> UI
2424
ngModelCtrl.$render = function() {
25-
element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.btnRadio)));
25+
element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.uibBtnRadio)));
2626
};
2727

2828
//ui->model
@@ -35,7 +35,7 @@ angular.module('ui.bootstrap.buttons', [])
3535

3636
if (!isActive || angular.isDefined(attrs.uncheckable)) {
3737
scope.$apply(function() {
38-
ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.btnRadio));
38+
ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.uibBtnRadio));
3939
ngModelCtrl.$render();
4040
});
4141
}
@@ -44,10 +44,10 @@ angular.module('ui.bootstrap.buttons', [])
4444
};
4545
})
4646

47-
.directive('btnCheckbox', ['$document', function($document) {
47+
.directive('uibBtnCheckbox', ['$document', function($document) {
4848
return {
49-
require: ['btnCheckbox', 'ngModel'],
50-
controller: 'ButtonsController',
49+
require: ['uibBtnCheckbox', 'ngModel'],
50+
controller: 'UibButtonsController',
5151
controllerAs: 'button',
5252
link: function(scope, element, attrs, ctrls) {
5353
var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
@@ -98,3 +98,107 @@ angular.module('ui.bootstrap.buttons', [])
9898
}
9999
};
100100
}]);
101+
102+
/* Deprecated buttons below */
103+
104+
angular.module('ui.bootstrap.buttons')
105+
106+
.value('$buttonsSuppressWarning', false)
107+
108+
.directive('btnRadio', ['$log', '$buttonsSuppressWarning', function($log, $buttonsSuppressWarning) {
109+
return {
110+
require: ['btnRadio', 'ngModel'],
111+
controller: 'UibButtonsController',
112+
controllerAs: 'buttons',
113+
link: function(scope, element, attrs, ctrls) {
114+
if (!$buttonsSuppressWarning) {
115+
$log.warn('btn-radio is now deprecated. Use uib-btn-radio instead.');
116+
}
117+
118+
var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
119+
120+
element.find('input').css({display: 'none'});
121+
122+
//model -> UI
123+
ngModelCtrl.$render = function() {
124+
element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.btnRadio)));
125+
};
126+
127+
//ui->model
128+
element.bind(buttonsCtrl.toggleEvent, function() {
129+
if (attrs.disabled) {
130+
return;
131+
}
132+
133+
var isActive = element.hasClass(buttonsCtrl.activeClass);
134+
135+
if (!isActive || angular.isDefined(attrs.uncheckable)) {
136+
scope.$apply(function() {
137+
ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.btnRadio));
138+
ngModelCtrl.$render();
139+
});
140+
}
141+
});
142+
}
143+
};
144+
}])
145+
146+
.directive('btnCheckbox', ['$document', '$log', '$buttonsSuppressWarning', function($document, $log, $buttonsSuppressWarning) {
147+
return {
148+
require: ['btnCheckbox', 'ngModel'],
149+
controller: 'UibButtonsController',
150+
controllerAs: 'button',
151+
link: function(scope, element, attrs, ctrls) {
152+
if (!$buttonsSuppressWarning) {
153+
$log.warn('btn-checkbox is now deprecated. Use uib-btn-checkbox instead.');
154+
}
155+
156+
var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
157+
158+
element.find('input').css({display: 'none'});
159+
160+
function getTrueValue() {
161+
return getCheckboxValue(attrs.btnCheckboxTrue, true);
162+
}
163+
164+
function getFalseValue() {
165+
return getCheckboxValue(attrs.btnCheckboxFalse, false);
166+
}
167+
168+
function getCheckboxValue(attributeValue, defaultValue) {
169+
var val = scope.$eval(attributeValue);
170+
return angular.isDefined(val) ? val : defaultValue;
171+
}
172+
173+
//model -> UI
174+
ngModelCtrl.$render = function() {
175+
element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, getTrueValue()));
176+
};
177+
178+
//ui->model
179+
element.bind(buttonsCtrl.toggleEvent, function() {
180+
if (attrs.disabled) {
181+
return;
182+
}
183+
184+
scope.$apply(function() {
185+
ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
186+
ngModelCtrl.$render();
187+
});
188+
});
189+
190+
//accessibility
191+
element.on('keypress', function(e) {
192+
if (attrs.disabled || e.which !== 32 || $document[0].activeElement !== element[0]) {
193+
return;
194+
}
195+
196+
scope.$apply(function() {
197+
ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
198+
ngModelCtrl.$render();
199+
});
200+
});
201+
}
202+
};
203+
}]);
204+

‎src/buttons/docs/demo.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<div ng-controller="ButtonsCtrl">
22
<h4>Single toggle</h4>
33
<pre>{{singleModel}}</pre>
4-
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
4+
<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
55
Single Toggle
66
</button>
77
<h4>Checkbox</h4>
88
<pre>Model: {{checkModel}}</pre>
99
<pre>Results: {{checkResults}}</pre>
1010
<div class="btn-group">
11-
<label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
12-
<label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
13-
<label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
11+
<label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
12+
<label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
13+
<label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
1414
</div>
1515
<h4>Radio &amp; Uncheckable Radio</h4>
1616
<pre>{{radioModel || 'null'}}</pre>
1717
<div class="btn-group">
18-
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
19-
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
20-
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
18+
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
19+
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
20+
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
2121
</div>
2222
<div class="btn-group">
23-
<label class="btn btn-success" ng-model="radioModel" btn-radio="'Left'" uncheckable>Left</label>
24-
<label class="btn btn-success" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Middle</label>
25-
<label class="btn btn-success" ng-model="radioModel" btn-radio="'Right'" uncheckable>Right</label>
23+
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
24+
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
25+
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uncheckable>Right</label>
2626
</div>
27-
</div>
27+
</div>

0 commit comments

Comments
 (0)