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

Commit

Permalink
feat(buttons): use uib- prefix
Browse files Browse the repository at this point in the history 
Closes #4445
  • Loading branch information
@Foxandxss
Foxandxss committed Sep 23, 2015
1 parent 4031e29 commit 5a1c2c9
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 55 deletions.
124 changes: 114 additions & 10 deletions src/buttons/buttons.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
angular.module('ui.bootstrap.buttons', [])

.constant('buttonConfig', {
.constant('uibButtonConfig', {
activeClass: 'active',
toggleEvent: 'click'
})

.controller('ButtonsController', ['buttonConfig', function(buttonConfig) {
.controller('UibButtonsController', ['uibButtonConfig', function(buttonConfig) {
this.activeClass = buttonConfig.activeClass || 'active';
this.toggleEvent = buttonConfig.toggleEvent || 'click';
}])

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

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

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

if (!isActive || angular.isDefined(attrs.uncheckable)) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.btnRadio));
ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.uibBtnRadio));
ngModelCtrl.$render();
});
}
Expand All @@ -44,10 +44,10 @@ angular.module('ui.bootstrap.buttons', [])
};
})

.directive('btnCheckbox', ['$document', function($document) {
.directive('uibBtnCheckbox', ['$document', function($document) {
return {
require: ['btnCheckbox', 'ngModel'],
controller: 'ButtonsController',
require: ['uibBtnCheckbox', 'ngModel'],
controller: 'UibButtonsController',
controllerAs: 'button',
link: function(scope, element, attrs, ctrls) {
var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
Expand Down Expand Up @@ -98,3 +98,107 @@ angular.module('ui.bootstrap.buttons', [])
}
};
}]);

/* Deprecated buttons below */

angular.module('ui.bootstrap.buttons')

.value('$buttonsSuppressWarning', false)

.directive('btnRadio', ['$log', '$buttonsSuppressWarning', function($log, $buttonsSuppressWarning) {
return {
require: ['btnRadio', 'ngModel'],
controller: 'UibButtonsController',
controllerAs: 'buttons',
link: function(scope, element, attrs, ctrls) {
if (!$buttonsSuppressWarning) {
$log.warn('btn-radio is now deprecated. Use uib-btn-radio instead.');
}

var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];

element.find('input').css({display: 'none'});

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

//ui->model
element.bind(buttonsCtrl.toggleEvent, function() {
if (attrs.disabled) {
return;
}

var isActive = element.hasClass(buttonsCtrl.activeClass);

if (!isActive || angular.isDefined(attrs.uncheckable)) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.btnRadio));
ngModelCtrl.$render();
});
}
});
}
};
}])

.directive('btnCheckbox', ['$document', '$log', '$buttonsSuppressWarning', function($document, $log, $buttonsSuppressWarning) {
return {
require: ['btnCheckbox', 'ngModel'],
controller: 'UibButtonsController',
controllerAs: 'button',
link: function(scope, element, attrs, ctrls) {
if (!$buttonsSuppressWarning) {
$log.warn('btn-checkbox is now deprecated. Use uib-btn-checkbox instead.');
}

var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];

element.find('input').css({display: 'none'});

function getTrueValue() {
return getCheckboxValue(attrs.btnCheckboxTrue, true);
}

function getFalseValue() {
return getCheckboxValue(attrs.btnCheckboxFalse, false);
}

function getCheckboxValue(attributeValue, defaultValue) {
var val = scope.$eval(attributeValue);
return angular.isDefined(val) ? val : defaultValue;
}

//model -> UI
ngModelCtrl.$render = function() {
element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, getTrueValue()));
};

//ui->model
element.bind(buttonsCtrl.toggleEvent, function() {
if (attrs.disabled) {
return;
}

scope.$apply(function() {
ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
ngModelCtrl.$render();
});
});

//accessibility
element.on('keypress', function(e) {
if (attrs.disabled || e.which !== 32 || $document[0].activeElement !== element[0]) {
return;
}

scope.$apply(function() {
ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
ngModelCtrl.$render();
});
});
}
};
}]);

22 changes: 11 additions & 11 deletions src/buttons/docs/demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>Model: {{checkModel}}</pre>
<pre>Results: {{checkResults}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
<label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
</div>
<h4>Radio &amp; Uncheckable Radio</h4>
<pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
</div>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" btn-radio="'Left'" uncheckable>Left</label>
<label class="btn btn-success" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Middle</label>
<label class="btn btn-success" ng-model="radioModel" btn-radio="'Right'" uncheckable>Right</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uncheckable>Right</label>
</div>
</div>
</div>
Loading

4 comments on commit 5a1c2c9

@pkozlowski-opensource
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we have a BREAKING CHANGES section in this commit so we can properly generate CHANGELOG?

@Foxandxss
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. The breaking change comes when we remove the deprecated version.

The library still works perfectly, no breaking change. People will only get warnings on their console about deprecation.

For 1.0, we will remove all the deprecated versions so then, we will make clear all the breaking changes.

@icfantv
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, on that note, we should revisit the breaking changes template because we missed some stuff on 0.13.4 - or rather, it didn't transfer over from the commit messages and I had to fix manually.

@Foxandxss
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that was a bad usage from our part.

Please sign in to comment.