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

Commit

Permalink
feat(timepicker): use uib- prefix
Browse files Browse the repository at this point in the history 
Closes #4505
  • Loading branch information
@wesleycho
wesleycho committed Oct 2, 2015
1 parent 66819c2 commit 504e653
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 37 deletions.
2 changes: 1 addition & 1 deletion src/timepicker/docs/demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div ng-controller="TimepickerDemoCtrl">

<timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
<uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>

<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

Expand Down
98 changes: 67 additions & 31 deletions src/timepicker/test/timepicker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('timepicker directive', function() {
$rootScope.time = newTime(14, 40);
$templateCache = _$templateCache_;

element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -107,7 +107,7 @@ describe('timepicker directive', function() {

it('has `selected` current time when model is initially cleared', function() {
$rootScope.time = null;
element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
$rootScope.$digest();

expect($rootScope.time).toBe(null);
Expand Down Expand Up @@ -272,7 +272,7 @@ describe('timepicker directive', function() {
});

it('changes only the time part when minutes change', function() {
element = $compile('<timepicker ng-model="time" minute-step="15"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" minute-step="15"></uib-timepicker>')($rootScope);
$rootScope.time = newTime(0, 0);
$rootScope.$digest();

Expand Down Expand Up @@ -468,7 +468,7 @@ describe('timepicker directive', function() {
$rootScope.hstep = 2;
$rootScope.mstep = 30;
$rootScope.time = newTime(14, 0);
element = $compile('<timepicker ng-model="time" hour-step="hstep" minute-step="mstep"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" hour-step="hstep" minute-step="mstep"></uib-timepicker>')($rootScope);
$rootScope.$digest();
});

Expand Down Expand Up @@ -631,7 +631,7 @@ describe('timepicker directive', function() {
beforeEach(function() {
$rootScope.meridian = false;
$rootScope.time = newTime(14, 10);
element = $compile('<timepicker ng-model="time" show-meridian="meridian"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" show-meridian="meridian"></uib-timepicker>')($rootScope);
$rootScope.$digest();
});

Expand Down Expand Up @@ -663,7 +663,7 @@ describe('timepicker directive', function() {

it('handles correctly initially empty model on parent element', function() {
$rootScope.time = null;
element = $compile('<span ng-model="time"><timepicker show-meridian="meridian"></timepicker></span>')($rootScope);
element = $compile('<span ng-model="time"><uib-timepicker show-meridian="meridian"></uib-timepicker></span>')($rootScope);
$rootScope.$digest();

expect($rootScope.time).toBe(null);
Expand All @@ -673,7 +673,7 @@ describe('timepicker directive', function() {
describe('`meridians` attribute', function() {
beforeEach(inject(function() {
$rootScope.meridiansArray = ['am', 'pm'];
element = $compile('<timepicker ng-model="time" meridians="meridiansArray"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" meridians="meridiansArray"></uib-timepicker>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -691,7 +691,7 @@ describe('timepicker directive', function() {
describe('`readonly-input` attribute', function() {
beforeEach(inject(function() {
$rootScope.meridiansArray = ['am', 'pm'];
element = $compile('<timepicker ng-model="time" readonly-input="true"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" readonly-input="true"></uib-timepicker>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -704,17 +704,17 @@ describe('timepicker directive', function() {

describe('setting timepickerConfig steps', function() {
var originalConfig = {};
beforeEach(inject(function(_$compile_, _$rootScope_, timepickerConfig) {
angular.extend(originalConfig, timepickerConfig);
timepickerConfig.hourStep = 2;
timepickerConfig.minuteStep = 10;
timepickerConfig.showMeridian = false;
element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
beforeEach(inject(function(_$compile_, _$rootScope_, uibTimepickerConfig) {
angular.extend(originalConfig, uibTimepickerConfig);
uibTimepickerConfig.hourStep = 2;
uibTimepickerConfig.minuteStep = 10;
uibTimepickerConfig.showMeridian = false;
element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
$rootScope.$digest();
}));
afterEach(inject(function(timepickerConfig) {
afterEach(inject(function(uibTimepickerConfig) {
// return it to the original state
angular.extend(timepickerConfig, originalConfig);
angular.extend(uibTimepickerConfig, originalConfig);
}));

it('does not affect the initial value', function() {
Expand Down Expand Up @@ -751,16 +751,16 @@ describe('timepicker directive', function() {

describe('setting timepickerConfig meridian labels', function() {
var originalConfig = {};
beforeEach(inject(function(_$compile_, _$rootScope_, timepickerConfig) {
angular.extend(originalConfig, timepickerConfig);
timepickerConfig.meridians = ['π.μ.', 'μ.μ.'];
timepickerConfig.showMeridian = true;
element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
beforeEach(inject(function(_$compile_, _$rootScope_, uibTimepickerConfig) {
angular.extend(originalConfig, uibTimepickerConfig);
uibTimepickerConfig.meridians = ['π.μ.', 'μ.μ.'];
uibTimepickerConfig.showMeridian = true;
element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
$rootScope.$digest();
}));
afterEach(inject(function(timepickerConfig) {
afterEach(inject(function(uibTimepickerConfig) {
// return it to the original state
angular.extend(timepickerConfig, originalConfig);
angular.extend(uibTimepickerConfig, originalConfig);
}));

it('displays correctly', function() {
Expand Down Expand Up @@ -921,7 +921,7 @@ describe('timepicker directive', function() {

it('handles 12/24H mode change', function() {
$rootScope.meridian = true;
element = $compile('<timepicker ng-model="time" show-meridian="meridian"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" show-meridian="meridian"></uib-timepicker>')($rootScope);
$rootScope.$digest();

var el = getHoursInputEl();
Expand All @@ -941,7 +941,7 @@ describe('timepicker directive', function() {

describe('when model is not a Date', function() {
beforeEach(inject(function() {
element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
}));

it('should not be invalid when the model is null', function() {
Expand Down Expand Up @@ -993,7 +993,7 @@ describe('timepicker directive', function() {
describe('use with `ng-required` directive', function() {
beforeEach(inject(function() {
$rootScope.time = null;
element = $compile('<timepicker ng-model="time" ng-required="true"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" ng-required="true"></uib-timepicker>')($rootScope);
$rootScope.$digest();
}));

Expand All @@ -1012,7 +1012,7 @@ describe('timepicker directive', function() {
beforeEach(inject(function() {
$rootScope.changeHandler = jasmine.createSpy('changeHandler');
$rootScope.time = new Date();
element = $compile('<timepicker ng-model="time" ng-change="changeHandler()"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" ng-change="changeHandler()"></uib-timepicker>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -1040,7 +1040,7 @@ describe('timepicker directive', function() {
describe('when used with min', function() {
var changeInputValueTo;
beforeEach(inject(function($sniffer) {
element = $compile('<timepicker ng-model="time" min="min"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" min="min"></uib-timepicker>')($rootScope);
$rootScope.$digest();
changeInputValueTo = function(inputEl, value) {
inputEl.val(value);
Expand Down Expand Up @@ -1698,7 +1698,7 @@ describe('timepicker directive', function() {
it('should allow custom templates', function() {
$templateCache.put('foo/bar.html', '<div>baz</div>');

element = $compile('<timepicker ng-model="time" template-url="foo/bar.html"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time" template-url="foo/bar.html"></uib-timepicker>')($rootScope);
$rootScope.$digest();
expect(element[0].tagName.toLowerCase()).toBe('div');
expect(element.html()).toBe('baz');
Expand All @@ -1707,10 +1707,10 @@ describe('timepicker directive', function() {
it('should expose the controller on the view', function() {
$templateCache.put('template/timepicker/timepicker.html', '<div><div>{{timepicker.text}}</div></div>');

element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
$rootScope.$digest();

var ctrl = element.controller('timepicker');
var ctrl = element.controller('uibTimepicker');
expect(ctrl).toBeDefined();

ctrl.text = 'foo';
Expand All @@ -1720,3 +1720,39 @@ describe('timepicker directive', function() {
});
});
});

/* Deprecation tests below */

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

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

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

$rootScope.time = new Date().setHours(14, 40, 0, 0);
var element = '<timepicker ng-model="time"></timepicker>';
element = $compile(element)($rootScope);
$rootScope.$digest();
expect($log.warn.calls.count()).toBe(0);
});
});

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

$rootScope.time = new Date().setHours(14, 40, 0, 0);
var element = '<timepicker ng-model="time"></timepicker>';
element = $compile(element)($rootScope);
$rootScope.$digest();

expect($log.warn.calls.count()).toBe(1);
expect($log.warn.calls.argsFor(0)).toEqual(['timepicker is now deprecated. Use uib-timepicker instead.']);
}));
});
40 changes: 35 additions & 5 deletions src/timepicker/timepicker.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
angular.module('ui.bootstrap.timepicker', [])

.constant('timepickerConfig', {
.constant('uibTimepickerConfig', {
hourStep: 1,
minuteStep: 1,
showMeridian: true,
Expand All @@ -11,7 +11,7 @@ angular.module('ui.bootstrap.timepicker', [])
showSpinners: true
})

.controller('TimepickerController', ['$scope', '$attrs', '$parse', '$log', '$locale', 'timepickerConfig', function($scope, $attrs, $parse, $log, $locale, timepickerConfig) {
.controller('UibTimepickerController', ['$scope', '$attrs', '$parse', '$log', '$locale', 'uibTimepickerConfig', function($scope, $attrs, $parse, $log, $locale, timepickerConfig) {
var selected = new Date(),
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
meridians = angular.isDefined($attrs.meridians) ? $scope.$parent.$eval($attrs.meridians) : timepickerConfig.meridians || $locale.DATETIME_FORMATS.AMPMS;
Expand Down Expand Up @@ -359,11 +359,11 @@ angular.module('ui.bootstrap.timepicker', [])
};
}])

.directive('timepicker', function() {
.directive('uibTimepicker', function() {
return {
restrict: 'EA',
require: ['timepicker', '?^ngModel'],
controller:'TimepickerController',
require: ['uibTimepicker', '?^ngModel'],
controller: 'UibTimepickerController',
controllerAs: 'timepicker',
replace: true,
scope: {},
Expand All @@ -379,3 +379,33 @@ angular.module('ui.bootstrap.timepicker', [])
}
};
});

/* Deprecated timepicker below */

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

.value('$timepickerSuppressWarning', false)

.directive('timepicker', ['$log', '$timepickerSuppressWarning', function($log, $timepickerSuppressWarning) {
return {
restrict: 'EA',
require: ['timepicker', '?^ngModel'],
controller: 'UibTimepickerController',
controllerAs: 'timepicker',
replace: true,
scope: {},
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/timepicker/timepicker.html';
},
link: function(scope, element, attrs, ctrls) {
if (!$timepickerSuppressWarning) {
$log.warn('timepicker is now deprecated. Use uib-timepicker instead.');
}
var timepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];

if (ngModelCtrl) {
timepickerCtrl.init(ngModelCtrl, element.find('input'));
}
}
};
}]);

0 comments on commit 504e653

Please sign in to comment.