Merge branch 'master' of git://github.com/angular-ui/bootstrap into upstream/master

Author: Ryan Quackenbush

src/datepicker/datepicker.js

@@ -12,7 +12,7 @@ angular.module('ui.bootstrap.datepicker', [])
   yearRange: 20
 })
 
-.directive( 'datepicker', ['$filter', '$parse', 'datepickerConfig', function ($filter, $parse, datepickerConfig) {
+.directive( 'datepicker', ['dateFilter', '$parse', 'datepickerConfig', function (dateFilter, $parse, datepickerConfig) {
   return {
     restrict: 'EA',
     replace: true,
@@ -101,7 +101,7 @@ angular.module('ui.bootstrap.datepicker', [])
 
           function addDays( dt, n, isCurrentMonth ) {
             for (var i =0; i < n; i ++) {
-              days.push( {date: new Date(dt), isCurrent: isCurrentMonth, isSelected: isSelected(dt), label: $filter('date')(dt, format.day), disabled: isDisabled(dt) } );
+              days.push( {date: new Date(dt), isCurrent: isCurrentMonth, isSelected: isSelected(dt), label: dateFilter(dt, format.day), disabled: isDisabled(dt) } );
               dt.setDate( dt.getDate() + 1 );
             }
             lastDate = dt;
@@ -122,23 +122,23 @@ angular.module('ui.bootstrap.datepicker', [])
 
           // Day labels
           for (i = 0; i < 7; i++) {
-            labels.push(   $filter('date')(days[i].date, format.dayHeader) );
+            labels.push(  dateFilter(days[i].date, format.dayHeader) );
           }
-          updateCalendar( split( days, 7 ), labels, $filter('date')(selected, format.dayTitle) );
+          updateCalendar( split( days, 7 ), labels, dateFilter(selected, format.dayTitle) );
         },
         month: function() {
           var months = [], i = 0, year = selected.getFullYear();
           while ( i < 12 ) {
             var dt = new Date(year, i++, 1);
-            months.push( {date: dt, isCurrent: true, isSelected: isSelected(dt), label: $filter('date')(dt, format.month), disabled: isDisabled(dt)} );
+            months.push( {date: dt, isCurrent: true, isSelected: isSelected(dt), label: dateFilter(dt, format.month), disabled: isDisabled(dt)} );
           }
-          updateCalendar( split( months, 3 ), [], $filter('date')(selected, format.monthTitle) );
+          updateCalendar( split( months, 3 ), [], dateFilter(selected, format.monthTitle) );
         },
         year: function() {
           var years = [], year = parseInt((selected.getFullYear() - 1) / yearRange, 10) * yearRange + 1;
           for ( var i = 0; i < yearRange; i++ ) {
             var dt = new Date(year + i, 0, 1);
-            years.push( {date: dt, isCurrent: true, isSelected: isSelected(dt), label: $filter('date')(dt, format.year), disabled: isDisabled(dt)} );
+            years.push( {date: dt, isCurrent: true, isSelected: isSelected(dt), label: dateFilter(dt, format.year), disabled: isDisabled(dt)} );
           }
           var title = years[0].label + ' - ' + years[years.length - 1].label;
           updateCalendar( split( years, 5 ), [], title );

src/pagination/docs/demo.html

@@ -1,9 +1,17 @@
-<div ng-controller="PaginationDemoCtrl">
+<div ng-controller="PaginationDemoCtrl" class="well well-small">
+    <h4>Default</h4>
+
     <pagination num-pages="noOfPages" current-page="currentPage"></pagination>
-    <pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></pagination>
-    <pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
-    <pagination num-pages="noOfPages" current-page="currentPage"  max-size="maxSize"></pagination>
+    <pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
+    <pagination direction-links="false" boundary-links="true" num-pages="noOfPages" current-page="currentPage"></pagination>
     <pagination direction-links="false" num-pages="noOfPages" current-page="currentPage"></pagination>
+
     <button class="btn" ng-click="setPage(3)">Set current page to: 3</button>
     The selected page no: {{currentPage}}
-</div>
+
+    <hr />
+
+    <h4>Limit the maximimum visible page-buttons</h4>
+    <pagination num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
+    <pagination rotate="false" num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
+</div>

src/pagination/docs/demo.js

@@ -6,4 +6,7 @@ var PaginationDemoCtrl = function ($scope) {
   $scope.setPage = function (pageNo) {
     $scope.currentPage = pageNo;
   };
+
+  $scope.bigNoOfPages = 18;
+  $scope.bigCurrentPage = 1;
 };

src/pagination/docs/readme.md

@@ -1,5 +1,6 @@
+
 A lightweight pagination directive that is focused on ... providing pagination!
 
 It will take care of visualising a pagination bar. Additionally it will make sure that the state (enabled / disabled) of the Previous / Next and First / Last buttons (if exist) is maintained correctly.
 
-It also provides optional attribute max-size to limit the size of pagination bar.
+It also provides optional attribute max-size to limit the size of pagination bar & rotate attribute whether to keep current page in the middle of the visible ones.

src/pagination/pagination.js

@@ -6,7 +6,8 @@ angular.module('ui.bootstrap.pagination', [])
   firstText: 'First',
   previousText: 'Previous',
   nextText: 'Next',
-  lastText: 'Last'
+  lastText: 'Last',
+  rotate: true
 })
 
 .directive('pagination', ['paginationConfig', function(paginationConfig) {
@@ -29,6 +30,7 @@ angular.module('ui.bootstrap.pagination', [])
       var previousText = angular.isDefined(attrs.previousText) ? attrs.previousText : paginationConfig.previousText;
       var nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : paginationConfig.nextText;
       var lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : paginationConfig.lastText;
+      var rotate = angular.isDefined(attrs.rotate) ? scope.$eval(attrs.rotate) : paginationConfig.rotate;
 
       // Create page object used in template
       function makePage(number, text, isActive, isDisabled) {
@@ -45,16 +47,26 @@ angular.module('ui.bootstrap.pagination', [])
 
         // Default page limits
         var startPage = 1, endPage = scope.numPages;
+        var isMaxSized = ( angular.isDefined(scope.maxSize) && scope.maxSize < scope.numPages );
 
         // recompute if maxSize
-        if ( scope.maxSize && scope.maxSize < scope.numPages ) {
-          startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize/2), 1);
-          endPage   = startPage + scope.maxSize - 1;
-
-          // Adjust if limit is exceeded
-          if (endPage > scope.numPages) {
-            endPage   = scope.numPages;
-            startPage = endPage - scope.maxSize + 1;
+        if ( isMaxSized ) {
+          if ( rotate ) {
+            // Current page is displayed in the middle of the visible ones
+            startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize/2), 1);
+            endPage   = startPage + scope.maxSize - 1;
+
+            // Adjust if limit is exceeded
+            if (endPage > scope.numPages) {
+              endPage   = scope.numPages;
+              startPage = endPage - scope.maxSize + 1;
+            }
+          } else {
+            // Visible pages are paginated with maxSize
+            startPage = ((Math.ceil(scope.currentPage / scope.maxSize) - 1) * scope.maxSize) + 1;
+
+            // Adjust last page if limit is exceeded
+            endPage = Math.min(startPage + scope.maxSize - 1, scope.numPages);
           }
         }
 
@@ -64,6 +76,19 @@ angular.module('ui.bootstrap.pagination', [])
           scope.pages.push(page);
         }
 
+        // Add links to move between page sets
+        if ( isMaxSized && ! rotate ) {
+          if ( startPage > 1 ) {
+            var previousPageSet = makePage(startPage - 1, '...', false, false);
+            scope.pages.unshift(previousPageSet);
+          }
+
+          if ( endPage < scope.numPages ) {
+            var nextPageSet = makePage(endPage + 1, '...', false, false);
+            scope.pages.push(nextPageSet);
+          }
+        }
+
         // Add previous & next links
         if (directionLinks) {
           var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
@@ -82,7 +107,6 @@ angular.module('ui.bootstrap.pagination', [])
           scope.pages.push(lastPage);
         }
 
-
         if ( scope.currentPage > scope.numPages ) {
           scope.selectPage(scope.numPages);
         }
@@ -105,4 +129,4 @@ angular.module('ui.bootstrap.pagination', [])
       };
     }
   };
-}]);
+}]);

src/pagination/test/pagination.spec.js

@@ -190,6 +190,85 @@ describe('pagination directive with max size option', function () {
     expect($rootScope.maxSize).toBe(15);
   });
 
+  it('should not display page numbers, if max-size is zero', function() {
+    $rootScope.maxSize = 0;
+    $rootScope.$digest();
+    expect(element.find('li').length).toBe(2);
+    expect(element.find('li').eq(0).text()).toBe('Previous');
+    expect(element.find('li').eq(-1).text()).toBe('Next');
+  });
+
+});
+
+describe('pagination directive with max size option & no rotate', function () {
+  var $rootScope, element;
+  beforeEach(module('ui.bootstrap.pagination'));
+  beforeEach(module('template/pagination/pagination.html'));
+  beforeEach(inject(function(_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+    $rootScope.numPages = 12;
+    $rootScope.currentPage = 7;
+    $rootScope.maxSize = 5;
+    element = $compile('<pagination num-pages="numPages" current-page="currentPage" max-size="maxSize" rotate="false"></pagination>')($rootScope);
+    $rootScope.$digest();
+  }));
+
+  it('contains one ul and maxsize + 4 elements', function() {
+    expect(element.find('ul').length).toBe(1);
+    expect(element.find('li').length).toBe($rootScope.maxSize + 4);
+    expect(element.find('li').eq(0).text()).toBe('Previous');
+    expect(element.find('li').eq(1).text()).toBe('...');
+    expect(element.find('li').eq(2).text()).toBe('6');
+    expect(element.find('li').eq(-3).text()).toBe('10');
+    expect(element.find('li').eq(-2).text()).toBe('...');
+    expect(element.find('li').eq(-1).text()).toBe('Next');
+  });
+
+  it('shows only the next ellipsis element on first page set', function() {
+    $rootScope.currentPage = 3;
+    $rootScope.$digest();
+    expect(element.find('li').eq(1).text()).toBe('1');
+    expect(element.find('li').eq(-3).text()).toBe('5');
+    expect(element.find('li').eq(-2).text()).toBe('...');
+  });
+
+  it('shows only the previous ellipsis element on last page set', function() {
+    $rootScope.currentPage = 12;
+    $rootScope.$digest();
+    expect(element.find('li').length).toBe(5);
+    expect(element.find('li').eq(1).text()).toBe('...');
+    expect(element.find('li').eq(2).text()).toBe('11');
+    expect(element.find('li').eq(-2).text()).toBe('12');
+  });
+
+  it('moves to the previous set when first ellipsis is clicked', function() {
+    var prev = element.find('li').eq(1).find('a').eq(0);
+    expect(prev.text()).toBe('...');
+
+    prev.click();
+    expect($rootScope.currentPage).toBe(5);
+    var currentPageItem = element.find('li').eq(-3);
+    expect(currentPageItem.hasClass('active')).toBe(true);
+  });
+
+  it('moves to the next set when last ellipsis is clicked', function() {
+    var next = element.find('li').eq(-2).find('a').eq(0);
+    expect(next.text()).toBe('...');
+
+    next.click();
+    expect($rootScope.currentPage).toBe(11);
+    var currentPageItem = element.find('li').eq(2);
+    expect(currentPageItem.hasClass('active')).toBe(true);
+  });
+
+  it('should not display page numbers, if max-size is zero', function() {
+    $rootScope.maxSize = 0;
+    $rootScope.$digest();
+    expect(element.find('li').length).toBe(2);
+    expect(element.find('li').eq(0).text()).toBe('Previous');
+    expect(element.find('li').eq(-1).text()).toBe('Next');
+  });
 });
 
 describe('pagination directive with added first & last links', function () {

src/tabs/docs/demo.html

@@ -1,16 +1,14 @@
 <div ng-controller="TabsDemoCtrl">
   Select a tab by setting active binding to true:
   <br />
-  <button class="btn" ng-click="tabs[0].active = true">
-    Select second tab
-  </button>
-  <button class="btn" ng-click="tabs[1].active = true">
-    Select third tab
-  </button>
-  <br /><br />
+  <button class="btn btn-small" ng-click="tabs[0].active = true">Select second tab</button>
+  <button class="btn btn-small" ng-click="tabs[1].active = true">Select third tab</button>
+  <button class="btn btn-small" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
+  <hr />
+
   <tabset>
     <tab heading="Static title">Static content</tab>
-    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
+    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
       {{tab.content}}
     </tab>
     <tab select="alertMe()">

src/tabs/docs/demo.js

@@ -1,7 +1,7 @@
 var TabsDemoCtrl = function ($scope) {
   $scope.tabs = [
     { title:"Dynamic Title 1", content:"Dynamic content 1" },
-    { title:"Dynamic Title 2", content:"Dynamic content 2" }
+    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
   ];
 
   $scope.alertMe = function() {

src/tabs/docs/readme.md

@@ -1,5 +1,5 @@
 AngularJS version of the tabs directive.
 
-Allows a `select` callback attribute, and `active` binding attribute.
+Allows a `select` callback attribute, `active` binding attribute and `disabled` binding attribute.
 
 Allows either `heading` text-heading as an attribute, or a `<tab-heading>` element inside as the heading.

src/tabs/tabs.js

@@ -71,7 +71,11 @@ function($parse, $http, $templateCache, $compile) {
           getActive = $parse(attrs.active);
           setActive = getActive.assign;
           scope.$parent.$watch(getActive, function updateActive(value) {
-            scope.active = !!value;
+            if ( !!value && scope.disabled ) {
+              setActive(scope.$parent, false); // Prevent active assignment
+            } else {
+              scope.active = !!value;
+            }
           });
         } else {
           setActive = getActive = angular.noop;
@@ -85,8 +89,17 @@ function($parse, $http, $templateCache, $compile) {
           }
         });
 
+        scope.disabled = false;
+        if ( attrs.disabled ) {
+          scope.$parent.$watch($parse(attrs.disabled), function(value) {
+            scope.disabled = !! value;
+          });
+        }
+
         scope.select = function() {
-          scope.active = true;
+          if ( ! scope.disabled ) {
+            scope.active = true;
+          }
         };
 
         tabsetCtrl.addTab(scope);