From 504e653f6b30b9a4672de4fbc6e81b6961de58ad Mon Sep 17 00:00:00 2001 From: Wesley Cho Date: Thu, 1 Oct 2015 23:10:37 -0700 Subject: [PATCH] feat(timepicker): use uib- prefix Closes #4505 --- src/timepicker/docs/demo.html | 2 +- src/timepicker/test/timepicker.spec.js | 98 ++++++++++++++++++-------- src/timepicker/timepicker.js | 40 +++++++++-- 3 files changed, 103 insertions(+), 37 deletions(-) diff --git a/src/timepicker/docs/demo.html b/src/timepicker/docs/demo.html index 5b8685cbe7..8bf9e9f64c 100644 --- a/src/timepicker/docs/demo.html +++ b/src/timepicker/docs/demo.html @@ -1,6 +1,6 @@
- +
Time is: {{mytime | date:'shortTime' }}
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js index ed3c2998eb..ab22a26b3a 100644 --- a/src/timepicker/test/timepicker.spec.js +++ b/src/timepicker/test/timepicker.spec.js @@ -9,7 +9,7 @@ describe('timepicker directive', function() { $rootScope.time = newTime(14, 40); $templateCache = _$templateCache_; - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); })); @@ -107,7 +107,7 @@ describe('timepicker directive', function() { it('has `selected` current time when model is initially cleared', function() { $rootScope.time = null; - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); expect($rootScope.time).toBe(null); @@ -272,7 +272,7 @@ describe('timepicker directive', function() { }); it('changes only the time part when minutes change', function() { - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.time = newTime(0, 0); $rootScope.$digest(); @@ -468,7 +468,7 @@ describe('timepicker directive', function() { $rootScope.hstep = 2; $rootScope.mstep = 30; $rootScope.time = newTime(14, 0); - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); }); @@ -631,7 +631,7 @@ describe('timepicker directive', function() { beforeEach(function() { $rootScope.meridian = false; $rootScope.time = newTime(14, 10); - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); }); @@ -663,7 +663,7 @@ describe('timepicker directive', function() { it('handles correctly initially empty model on parent element', function() { $rootScope.time = null; - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); expect($rootScope.time).toBe(null); @@ -673,7 +673,7 @@ describe('timepicker directive', function() { describe('`meridians` attribute', function() { beforeEach(inject(function() { $rootScope.meridiansArray = ['am', 'pm']; - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); })); @@ -691,7 +691,7 @@ describe('timepicker directive', function() { describe('`readonly-input` attribute', function() { beforeEach(inject(function() { $rootScope.meridiansArray = ['am', 'pm']; - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); })); @@ -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('')($rootScope); + beforeEach(inject(function(_$compile_, _$rootScope_, uibTimepickerConfig) { + angular.extend(originalConfig, uibTimepickerConfig); + uibTimepickerConfig.hourStep = 2; + uibTimepickerConfig.minuteStep = 10; + uibTimepickerConfig.showMeridian = false; + element = $compile('')($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() { @@ -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('')($rootScope); + beforeEach(inject(function(_$compile_, _$rootScope_, uibTimepickerConfig) { + angular.extend(originalConfig, uibTimepickerConfig); + uibTimepickerConfig.meridians = ['π.μ.', 'μ.μ.']; + uibTimepickerConfig.showMeridian = true; + element = $compile('')($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() { @@ -921,7 +921,7 @@ describe('timepicker directive', function() { it('handles 12/24H mode change', function() { $rootScope.meridian = true; - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); var el = getHoursInputEl(); @@ -941,7 +941,7 @@ describe('timepicker directive', function() { describe('when model is not a Date', function() { beforeEach(inject(function() { - element = $compile('')($rootScope); + element = $compile('')($rootScope); })); it('should not be invalid when the model is null', function() { @@ -993,7 +993,7 @@ describe('timepicker directive', function() { describe('use with `ng-required` directive', function() { beforeEach(inject(function() { $rootScope.time = null; - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); })); @@ -1012,7 +1012,7 @@ describe('timepicker directive', function() { beforeEach(inject(function() { $rootScope.changeHandler = jasmine.createSpy('changeHandler'); $rootScope.time = new Date(); - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); })); @@ -1040,7 +1040,7 @@ describe('timepicker directive', function() { describe('when used with min', function() { var changeInputValueTo; beforeEach(inject(function($sniffer) { - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); changeInputValueTo = function(inputEl, value) { inputEl.val(value); @@ -1698,7 +1698,7 @@ describe('timepicker directive', function() { it('should allow custom templates', function() { $templateCache.put('foo/bar.html', '
baz
'); - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); expect(element[0].tagName.toLowerCase()).toBe('div'); expect(element.html()).toBe('baz'); @@ -1707,10 +1707,10 @@ describe('timepicker directive', function() { it('should expose the controller on the view', function() { $templateCache.put('template/timepicker/timepicker.html', '
{{timepicker.text}}
'); - element = $compile('')($rootScope); + element = $compile('')($rootScope); $rootScope.$digest(); - var ctrl = element.controller('timepicker'); + var ctrl = element.controller('uibTimepicker'); expect(ctrl).toBeDefined(); ctrl.text = 'foo'; @@ -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 = ''; + 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 = ''; + 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.']); + })); +}); diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js index 42def45fcd..5d9e076f6b 100644 --- a/src/timepicker/timepicker.js +++ b/src/timepicker/timepicker.js @@ -1,6 +1,6 @@ angular.module('ui.bootstrap.timepicker', []) -.constant('timepickerConfig', { +.constant('uibTimepickerConfig', { hourStep: 1, minuteStep: 1, showMeridian: true, @@ -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; @@ -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: {}, @@ -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')); + } + } + }; +}]);