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

Commit

Permalink
feat(rating): user uib- prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
@wesleycho
wesleycho committed Oct 1, 2015
1 parent fdf53e6 commit 8b88703
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 38 deletions.
6 changes: 3 additions & 3 deletions src/rating/docs/demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div ng-controller="RatingDemoCtrl">
<h4>Default</h4>
<rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></rating>
<uib-rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
Expand All @@ -10,6 +10,6 @@ <h4>Default</h4>
<hr />

<h4>Custom icons</h4>
<div ng-init="x = 5"><rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
<div ng-init="y = 2"><rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></rating> <b>(<i>Rate:</i> {{y}})</b></div>
<div ng-init="x = 5"><uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></uib-rating> <b>(<i>Rate:</i> {{x}})</b></div>
<div ng-init="y = 2"><uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></uib-rating> <b>(<i>Rate:</i> {{y}})</b></div>
</div>
40 changes: 33 additions & 7 deletions src/rating/rating.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
angular.module('ui.bootstrap.rating', [])

.constant('ratingConfig', {
.constant('uibRatingConfig', {
max: 5,
stateOn: null,
stateOff: null,
titles : ['one', 'two', 'three', 'four', 'five']
})

.controller('RatingController', ['$scope', '$attrs', 'ratingConfig', function($scope, $attrs, ratingConfig) {
.controller('UibRatingController', ['$scope', '$attrs', 'uibRatingConfig', function($scope, $attrs, ratingConfig) {
var ngModelCtrl = { $setViewValue: angular.noop };

this.init = function(ngModelCtrl_) {
Expand Down Expand Up @@ -80,21 +80,47 @@ angular.module('ui.bootstrap.rating', [])
};
}])

.directive('rating', function() {
.directive('uibRating', function() {
return {
restrict: 'EA',
require: ['rating', 'ngModel'],
require: ['uibRating', 'ngModel'],
scope: {
readonly: '=?',
onHover: '&',
onLeave: '&'
},
controller: 'RatingController',
controller: 'UibRatingController',
templateUrl: 'template/rating/rating.html',
replace: true,
link: function(scope, element, attrs, ctrls) {
var ratingCtrl = ctrls[0], ngModelCtrl = ctrls[1];
ratingCtrl.init( ngModelCtrl );
ratingCtrl.init(ngModelCtrl);
}
};
});

/* Deprecated rating below */

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

.value('$ratingSuppressWarning', false)

.directive('rating', ['$log', '$ratingSuppressWarning', function($log, $ratingSuppressWarning) {
return {
require: ['rating', 'ngModel'],
scope: {
readonly: '=?',
onHover: '&',
onLeave: '&'
},
controller: 'UibRatingController',
templateUrl: 'template/rating/rating.html',
replace: true,
link: function(scope, element, attrs, ctrls) {
if (!$ratingSuppressWarning) {
$log.warn('rating is now deprecated. Use uib-rating instead.');
}
var ratingCtrl = ctrls[0], ngModelCtrl = ctrls[1];
ratingCtrl.init(ngModelCtrl);
}
};
}]);
88 changes: 60 additions & 28 deletions src/rating/test/rating.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('rating directive', function() {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootScope.rate = 3;
element = $compile('<rating ng-model="rate"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -15,14 +15,14 @@ describe('rating directive', function() {
}

function getStar(number) {
return getStars().eq( number - 1 );
return getStars().eq(number - 1);
}

function getState(classOn, classOff) {
var stars = getStars();
var state = [];
for (var i = 0, n = stars.length; i < n; i++) {
state.push( (stars.eq(i).hasClass(classOn || 'glyphicon-star') && ! stars.eq(i).hasClass(classOff || 'glyphicon-star-empty')) );
state.push((stars.eq(i).hasClass(classOn || 'glyphicon-star') && ! stars.eq(i).hasClass(classOff || 'glyphicon-star-empty')));
}
return state;
}
Expand Down Expand Up @@ -109,7 +109,7 @@ describe('rating directive', function() {
});

it('shows different number of icons when `max` attribute is set', function() {
element = $compile('<rating ng-model="rate" max="7"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" max="7"></uib-rating>')($rootScope);
$rootScope.$digest();

expect(getStars().length).toBe(7);
Expand All @@ -118,15 +118,15 @@ describe('rating directive', function() {

it('shows different number of icons when `max` attribute is from scope variable', function() {
$rootScope.max = 15;
element = $compile('<rating ng-model="rate" max="max"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" max="max"></uib-rating>')($rootScope);
$rootScope.$digest();
expect(getStars().length).toBe(15);
expect(element.attr('aria-valuemax')).toBe('15');
});

it('handles readonly attribute', function() {
$rootScope.isReadonly = true;
element = $compile('<rating ng-model="rate" readonly="isReadonly"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" readonly="isReadonly"></uib-rating>')($rootScope);
$rootScope.$digest();

expect(getState()).toEqual([true, true, true, false, false]);
Expand All @@ -146,7 +146,7 @@ describe('rating directive', function() {

it('should fire onHover', function() {
$rootScope.hoveringOver = jasmine.createSpy('hoveringOver');
element = $compile('<rating ng-model="rate" on-hover="hoveringOver(value)"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" on-hover="hoveringOver(value)"></uib-rating>')($rootScope);
$rootScope.$digest();

getStar(3).trigger('mouseover');
Expand All @@ -156,7 +156,7 @@ describe('rating directive', function() {

it('should fire onLeave', function() {
$rootScope.leaving = jasmine.createSpy('leaving');
element = $compile('<rating ng-model="rate" on-leave="leaving()"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" on-leave="leaving()"></uib-rating>')($rootScope);
$rootScope.$digest();

element.trigger('mouseleave');
Expand Down Expand Up @@ -216,7 +216,7 @@ describe('rating directive', function() {
beforeEach(inject(function() {
$rootScope.classOn = 'icon-ok-sign';
$rootScope.classOff = 'icon-ok-circle';
element = $compile('<rating ng-model="rate" state-on="classOn" state-off="classOff"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" state-on="classOn" state-off="classOff"></uib-rating>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -233,7 +233,7 @@ describe('rating directive', function() {
{stateOn: 'heart'},
{stateOff: 'off'}
];
element = $compile('<rating ng-model="rate" rating-states="states"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" rating-states="states"></uib-rating>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -256,20 +256,20 @@ describe('rating directive', function() {
});
});

describe('setting ratingConfig', function() {
describe('setting uibRatingConfig', function() {
var originalConfig = {};
beforeEach(inject(function(ratingConfig) {
beforeEach(inject(function(uibRatingConfig) {
$rootScope.rate = 5;
angular.extend(originalConfig, ratingConfig);
ratingConfig.max = 10;
ratingConfig.stateOn = 'on';
ratingConfig.stateOff = 'off';
element = $compile('<rating ng-model="rate"></rating>')($rootScope);
angular.extend(originalConfig, uibRatingConfig);
uibRatingConfig.max = 10;
uibRatingConfig.stateOn = 'on';
uibRatingConfig.stateOff = 'off';
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
$rootScope.$digest();
}));
afterEach(inject(function(ratingConfig) {
afterEach(inject(function(uibRatingConfig) {
// return it to the original state
angular.extend(ratingConfig, originalConfig);
angular.extend(uibRatingConfig, originalConfig);
}));

it('should change number of icon elements', function() {
Expand All @@ -289,16 +289,16 @@ describe('rating directive', function() {

describe('shows different title when `max` attribute is greater than the titles array ', function() {
var originalConfig = {};
beforeEach(inject(function(ratingConfig) {
beforeEach(inject(function(uibRatingConfig) {
$rootScope.rate = 5;
angular.extend(originalConfig, ratingConfig);
ratingConfig.max = 10;
element = $compile('<rating ng-model="rate"></rating>')($rootScope);
angular.extend(originalConfig, uibRatingConfig);
uibRatingConfig.max = 10;
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
$rootScope.$digest();
}));
afterEach(inject(function(ratingConfig) {
afterEach(inject(function(uibRatingConfig) {
// return it to the original state
angular.extend(ratingConfig, originalConfig);
angular.extend(uibRatingConfig, originalConfig);
}));

it('should return the default title for each star', function() {
Expand All @@ -309,20 +309,52 @@ describe('rating directive', function() {
describe('shows custom titles ', function() {
it('should return the custom title for each star', function() {
$rootScope.titles = [44,45,46];
element = $compile('<rating ng-model="rate" titles="titles"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
$rootScope.$digest();
expect(getTitles()).toEqual(['44', '45', '46', '4', '5']);
});
it('should return the default title if the custom title is empty', function() {
$rootScope.titles = [];
element = $compile('<rating ng-model="rate" titles="titles"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
$rootScope.$digest();
expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
});
it('should return the default title if the custom title is not an array', function() {
element = $compile('<rating ng-model="rate" titles="test"></rating>')($rootScope);
element = $compile('<uib-rating ng-model="rate" titles="test"></uib-rating>')($rootScope);
$rootScope.$digest();
expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
});
});
});

/* Deprecation tests below */

describe('rating deprecation', function() {
beforeEach(module('ui.bootstrap.rating'));
beforeEach(module('template/rating/rating.html'));

it('should suppress warning', function() {
module(function($provide) {
$provide.value('$ratingSuppressWarning', true);
});

inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');

var element = $compile('<rating ng-model="rate"></rating>')($rootScope);
$rootScope.$digest();

expect($log.warn.calls.count()).toBe(0);
});
});

it('should give warning by default', inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');

var element = $compile('<rating ng-model="rate"></rating>')($rootScope);
$rootScope.$digest();

expect($log.warn.calls.count()).toBe(1);
expect($log.warn.calls.argsFor(0)).toEqual(['rating is now deprecated. Use uib-rating instead.']);
}));
});

0 comments on commit 8b88703

Please sign in to comment.