From d880aea9b68d8788bdec59cfc46c966f5df7b3a7 Mon Sep 17 00:00:00 2001 From: Wesley Cho Date: Tue, 23 Feb 2016 15:42:34 -0800 Subject: [PATCH] feat(datepicker): move attribute support to options - Move some attribute usage to datepickerOptions Closes #5528 --- src/datepicker/datepicker.js | 24 +++- src/datepicker/docs/readme.md | 3 + src/datepicker/test/datepicker.spec.js | 191 ++++++++++++++++++++++--- 3 files changed, 195 insertions(+), 23 deletions(-) diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js index c4c8b7c3a3..88f9a9a3f0 100644 --- a/src/datepicker/datepicker.js +++ b/src/datepicker/datepicker.js @@ -35,6 +35,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst if (optionsUsed) { [ + 'customClass', + 'dateDisabled', 'datepickerMode', 'formatDay', 'formatDayHeader', @@ -54,6 +56,10 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst 'yearRows' ].forEach(function(key) { switch (key) { + case 'customClass': + case 'dateDisabled': + $scope[key] = $scope.datepickerOptions[key] || angular.noop; + break; case 'datepickerMode': $scope.datepickerMode = angular.isDefined($scope.datepickerOptions.datepickerMode) ? $scope.datepickerOptions.datepickerMode : datepickerConfig.datepickerMode; @@ -156,6 +162,12 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst } }); + angular.forEach(['dateDisabled', 'customClass'], function(key) { + if (angular.isDefined($attrs[key]) && datepickerAttributeWarning) { + $log.warn('uib-datepicker ' + key + ' attribute usage is deprecated, use datepicker-options attribute instead'); + } + }); + if (angular.isDefined($attrs.startingDay)) { if (datepickerAttributeWarning) { $log.warn('uib-datepicker startingDay attribute usage is deprecated, use datepicker-options attribute instead'); @@ -320,7 +332,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst return $scope.disabled || this.minDate && this.compare(date, this.minDate) < 0 || this.maxDate && this.compare(date, this.maxDate) > 0 || - $attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode}); + $scope.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode}); }; this.customClass = function(date) { @@ -865,7 +877,7 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $ angular.forEach(['minMode', 'maxMode', 'datepickerMode', 'shortcutPropagation'], function(key) { if ($attrs[key]) { - if (key !== 'datepickerMode' && datepickerPopupAttributeWarning) { + if (datepickerPopupAttributeWarning) { $log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead'); } @@ -920,6 +932,10 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $ }); if ($attrs.dateDisabled) { + if (datepickerPopupAttributeWarning) { + $log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead'); + } + datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })'); } @@ -934,6 +950,10 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $ }); if ($attrs.customClass) { + if (datepickerPopupAttributeWarning) { + $log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead'); + } + datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })'); } diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md index 3c15f891f1..24e058bb43 100644 --- a/src/datepicker/docs/readme.md +++ b/src/datepicker/docs/readme.md @@ -33,6 +33,9 @@ The datepicker has 3 modes: The supported options are: + - customClass + - dateDisabled + - datepickerMode - formatDay - formatDayHeader - formatDayTitle diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index f59f86e053..e20b02e885 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/src/datepicker/test/datepicker.spec.js @@ -230,6 +230,88 @@ describe('datepicker', function() { expect($log.warn).not.toHaveBeenCalled(); }); + it('should log warning for customClass attribute usage', function() { + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.locals = { + date: new Date(), + customClass: 'none' + }; + + spyOn($log, 'warn'); + element = $compile('')($scope); + $scope.$digest(); + + expect($log.warn).toHaveBeenCalledWith('uib-datepicker customClass attribute usage is deprecated, use datepicker-options attribute instead'); + }); + + it('should suppress warning for customClass 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(), + customClass: 'none' + }; + + spyOn($log, 'warn'); + element = $compile('')($scope); + $scope.$digest(); + + expect($log.warn).not.toHaveBeenCalled(); + }); + + it('should log warning for dateDisabled attribute usage', function() { + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.locals = { + date: new Date(), + dateDisabled: false + }; + + spyOn($log, 'warn'); + element = $compile('')($scope); + $scope.$digest(); + + expect($log.warn).toHaveBeenCalledWith('uib-datepicker dateDisabled attribute usage is deprecated, use datepicker-options attribute instead'); + }); + + it('should suppress warning for dateDisabled 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(), + dateDisabled: false + }; + + spyOn($log, 'warn'); + element = $compile('')($scope); + $scope.$digest(); + + expect($log.warn).not.toHaveBeenCalled(); + }); + it('should log warning for datepickerMode attribute usage', function() { inject(function(_$log_, _$rootScope_, _$compile_) { $log = _$log_; @@ -956,6 +1038,76 @@ describe('datepicker', function() { expect($log.warn).not.toHaveBeenCalled(); }); + it('should log warning for customClass attribute usage', function() { + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.date = new Date(); + + spyOn($log, 'warn'); + element = $compile('
')($scope); + $scope.$digest(); + + expect($log.warn).toHaveBeenCalledWith('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead'); + }); + + it('should suppress warning for customClass attribute usage', function() { + module(function($provide) { + $provide.value('uibDatepickerPopupAttributeWarning', false); + }); + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.date = new Date(); + + spyOn($log, 'warn'); + element = $compile('
')($scope); + $scope.$digest(); + + expect($log.warn).not.toHaveBeenCalled(); + }); + + it('should log warning for dateDisabled attribute usage', function() { + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.date = new Date(); + + spyOn($log, 'warn'); + element = $compile('
')($scope); + $scope.$digest(); + + expect($log.warn).toHaveBeenCalledWith('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead'); + }); + + it('should suppress warning for dateDisabled attribute usage', function() { + module(function($provide) { + $provide.value('uibDatepickerPopupAttributeWarning', false); + }); + inject(function(_$log_, _$rootScope_, _$compile_) { + $log = _$log_; + $scope = _$rootScope_.$new(); + $compile = _$compile_; + }); + + $scope.date = new Date(); + + spyOn($log, 'warn'); + element = $compile('
')($scope); + $scope.$digest(); + + expect($log.warn).not.toHaveBeenCalled(); + }); + it('should log warning for onOpenFocus attribute usage', function() { inject(function(_$log_, _$rootScope_, _$compile_) { $log = _$log_; @@ -2879,51 +3031,55 @@ describe('datepicker', function() { describe('date-disabled expression', function() { beforeEach(function() { - $rootScope.dateDisabledHandler = jasmine.createSpy('dateDisabledHandler'); - element = $compile('')($rootScope); + $rootScope.options = { + dateDisabled: jasmine.createSpy('dateDisabled') + }; + element = $compile('')($rootScope); $rootScope.$digest(); }); it('executes the dateDisabled expression for each visible day plus one for validation', function() { - expect($rootScope.dateDisabledHandler.calls.count()).toEqual(42 + 1); + expect($rootScope.options.dateDisabled.calls.count()).toEqual(42 + 1); }); it('executes the dateDisabled expression for each visible month plus one for validation', function() { - $rootScope.dateDisabledHandler.calls.reset(); + $rootScope.options.dateDisabled.calls.reset(); clickTitleButton(); - expect($rootScope.dateDisabledHandler.calls.count()).toEqual(12 + 1); + expect($rootScope.options.dateDisabled.calls.count()).toEqual(12 + 1); }); it('executes the dateDisabled expression for each visible year plus one for validation', function() { clickTitleButton(); - $rootScope.dateDisabledHandler.calls.reset(); + $rootScope.options.dateDisabled.calls.reset(); clickTitleButton(); - expect($rootScope.dateDisabledHandler.calls.count()).toEqual(20 + 1); + expect($rootScope.options.dateDisabled.calls.count()).toEqual(20 + 1); }); }); describe('custom-class expression', function() { beforeEach(function() { - $rootScope.customClassHandler = jasmine.createSpy('customClassHandler'); - element = $compile('')($rootScope); + $rootScope.options = { + customClass: jasmine.createSpy('customClass') + }; + element = $compile('')($rootScope); $rootScope.$digest(); }); it('executes the customClass expression for each visible day plus one for validation', function() { - expect($rootScope.customClassHandler.calls.count()).toEqual(42); + expect($rootScope.options.customClass.calls.count()).toEqual(42); }); it('executes the customClass expression for each visible month plus one for validation', function() { - $rootScope.customClassHandler.calls.reset(); + $rootScope.options.customClass.calls.reset(); clickTitleButton(); - expect($rootScope.customClassHandler.calls.count()).toEqual(12); + expect($rootScope.options.customClass.calls.count()).toEqual(12); }); it('executes the customClass expression for each visible year plus one for validation', function() { clickTitleButton(); - $rootScope.customClassHandler.calls.reset(); + $rootScope.options.customClass.calls.reset(); clickTitleButton(); - expect($rootScope.customClassHandler.calls.count()).toEqual(20); + expect($rootScope.options.customClass.calls.count()).toEqual(20); }); }); @@ -4654,13 +4810,6 @@ describe('datepicker', function() { ]); }); }); - - it('should set dateDisabled on the inner datepicker', function() { - var wrapElement = $compile('
')($rootScope); - $rootScope.$digest(); - assignElements(wrapElement); - expect(dropdownEl.find('div').attr('date-disabled')).toBe('dateDisabled({ date: date, mode: mode })'); - }); }); describe('gc', function() {