From f47e55477891f4b102785bc144a63206d485a658 Mon Sep 17 00:00:00 2001 From: Wesley Cho Date: Tue, 23 Feb 2016 11:41:31 -0800 Subject: [PATCH] feat(datepicker): move datepicker mode to options - Fully move datepickerMode support to datepickerOptions, deprecate attribute usage --- src/datepicker/datepicker.js | 49 ++++++++++++++++++-------- src/datepicker/test/datepicker.spec.js | 41 +++++++++++++++++++++ 2 files changed, 75 insertions(+), 15 deletions(-) diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js index f810996bb8..6cfbda34d2 100644 --- a/src/datepicker/datepicker.js +++ b/src/datepicker/datepicker.js @@ -27,13 +27,15 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst var self = this, ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl; ngModelOptions = {}, - watchListeners = []; + watchListeners = [], + optionsUsed = !!$attrs.datepickerOptions; // Modes chain this.modes = ['day', 'month', 'year']; - if ($attrs.datepickerOptions) { - angular.forEach([ + if (optionsUsed) { + [ + 'datepickerMode', 'formatDay', 'formatDayHeader', 'formatDayTitle', @@ -50,15 +52,21 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst 'startingDay', 'yearColumns', 'yearRows' - ], function(key) { + ].forEach(function(key) { switch (key) { + case 'datepickerMode': + $scope.datepickerMode = angular.isDefined($scope.datepickerOptions.datepickerMode) ? + $scope.datepickerOptions.datepickerMode : datepickerConfig.datepickerMode; + break; case 'formatDay': case 'formatDayHeader': case 'formatDayTitle': case 'formatMonth': case 'formatMonthTitle': case 'formatYear': - self[key] = angular.isDefined($scope.datepickerOptions[key]) ? $interpolate($scope.datepickerOptions[key])($scope.$parent) : datepickerConfig[key]; + self[key] = angular.isDefined($scope.datepickerOptions[key]) ? + $interpolate($scope.datepickerOptions[key])($scope.$parent) : + datepickerConfig[key]; break; case 'showWeeks': case 'shortcutPropagation': @@ -103,9 +111,10 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst if ($scope.datepickerOptions[key]) { $scope.$watch(function() { return $scope.datepickerOptions[key]; }, function(value) { self[key] = $scope[key] = angular.isDefined(value) ? value : datepickerOptions[key]; - if (key === 'minMode' && self.modes.indexOf($scope.datepickerMode) < self.modes.indexOf(self[key]) || - key === 'maxMode' && self.modes.indexOf($scope.datepickerMode) > self.modes.indexOf(self[key])) { + if (key === 'minMode' && self.modes.indexOf($scope.datepickerOptions.datepickerMode) < self.modes.indexOf(self[key]) || + key === 'maxMode' && self.modes.indexOf($scope.datepickerOptions.datepickerMode) > self.modes.indexOf(self[key])) { $scope.datepickerMode = self[key]; + $scope.datepickerOptions.datepickerMode = self[key]; } }); } else { @@ -217,10 +226,15 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst } else { this.activeDate = new Date(); } + + if ($attrs.datepickerMode && datepickerAttributeWarning) { + $log.warn('uib-datepicker datepickerMode attribute usage is deprecated, use datepicker-options attribute instead'); + } + + $scope.datepickerMode = $scope.datepickerMode || + datepickerConfig.datepickerMode; } - $scope.datepickerMode = $scope.datepickerMode || - datepickerConfig.datepickerMode; $scope.uniqueId = 'datepicker-' + $scope.$id + '-' + Math.floor(Math.random() * 10000); $scope.disabled = angular.isDefined($attrs.disabled) || false; @@ -331,7 +345,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst ngModelCtrl.$render(); } else { self.activeDate = date; - $scope.datepickerMode = self.modes[self.modes.indexOf($scope.datepickerMode) - 1]; + setMode(self.modes[self.modes.indexOf($scope.datepickerMode) - 1]); + $scope.$emit('uib:datepicker.mode'); } }; @@ -351,7 +366,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst return; } - $scope.datepickerMode = self.modes[self.modes.indexOf($scope.datepickerMode) + direction]; + setMode(self.modes[self.modes.indexOf($scope.datepickerMode) + direction]); + $scope.$emit('uib:datepicker.mode'); }; @@ -396,6 +412,13 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst watchListeners.shift()(); } }); + + function setMode(mode) { + $scope.datepickerMode = mode; + if (optionsUsed) { + $scope.datepickerOptions.datepickerMode = mode; + } + } }]) .controller('UibDaypickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) { @@ -833,10 +856,6 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $ if ($scope.datepickerOptions) { datepickerEl.attr('datepicker-options', 'datepickerOptions'); - - if (angular.isDefined($scope.datepickerOptions.datepickerMode)) { - datepickerEl.attr('datepicker-mode', 'datepickerOptions.datepickerMode'); - } } angular.forEach(['minMode', 'maxMode', 'datepickerMode', 'shortcutPropagation'], function(key) { diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index 4c2df98106..67169628f9 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/src/datepicker/test/datepicker.spec.js @@ -230,6 +230,47 @@ describe('datepicker', function() { expect($log.warn).not.toHaveBeenCalled(); }); + it('should log warning for datepickerMode attribute usage', function() { + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.locals = { + date: new Date(), + mode: 'day' + }; + + spyOn($log, 'warn'); + element = $compile('')($scope); + $scope.$digest(); + + expect($log.warn).toHaveBeenCalledWith('uib-datepicker datepickerMode attribute usage is deprecated, use datepicker-options attribute instead'); + }); + + it('should suppress warning for datepickerMode attribute usage', function() { + module(function($provide) { + $provide.value('uibDatepickerAttributeWarning', false); + }); + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.locals = { + date: new Date(), + mode: 'day' + }; + + spyOn($log, 'warn'); + element = $compile('')($scope); + $scope.$digest(); + + expect($log.warn).not.toHaveBeenCalled(); + }); + it('should log warning for formatDay attribute usage', function() { inject(function(_$log_, _$rootScope_, _$compile_) { $log = _$log_;