Merge pull request #11 from gilbitron/range-support

Add range support

Author: gilbitron

README.md

@@ -77,7 +77,9 @@ Vue.component('example-component', {
 | Name | Type | Description |
 | --- | --- | --- |
 | `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/5.4/pagination) response. See below for default value. |
-| `limit` | Number | (optional) Limit of pages to be rendered. Default `0` (unlimited links) `-1` will hide numeric pages and leave only arrow navigation. `3` will show 3 previous and 3 next numeric pages from current page. |
+| `limit` | Number | (optional) Limit of pages to be rendered. Default `0` (unlimited pages) `-1` will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. `2`) will define how many pages should be shown on either side of the current page when only a range of pages are shown (see below for example output). |
+
+**Default `data`**
 
 ```javascript
 {
@@ -93,6 +95,10 @@ Vue.component('example-component', {
 }
 ```
 
+**Example `limit`**
+
+![screen shot 2018-01-12 at 4 47 50 pm](https://user-images.githubusercontent.com/203882/34885624-8001513e-f7b8-11e7-9922-236e2b07caa0.png)
+
 ### Events
 
 | Name | Description |

src/laravel-vue-pagination.js

@@ -34,6 +34,10 @@ module.exports = {
 
 	methods: {
 		selectPage: function(page) {
+			if (page === '...') {
+				return;
+			}
+
 			this.$emit('pagination-change-page', page);
 		},
 		getPages: function() {
@@ -45,16 +49,31 @@ module.exports = {
 				return this.data.last_page;
 			}
 
-			var start = this.data.current_page - this.limit,
-				end   = this.data.current_page + this.limit + 1,
+			var current = this.data.current_page,
+				last = this.data.last_page,
+				delta = this.limit,
+				left = current - delta,
+				right = current + delta + 1,
+				range = [],
 				pages = [],
-				index;
+				l;
 
-			start = start < 1 ? 1 : start;
-			end   = end >= this.data.last_page ? this.data.last_page + 1 : end;
+			for (var i = 1; i <= last; i++) {
+				if (i == 1 || i == last || (i >= left && i < right)) {
+					range.push(i);
+				}
+			}
 
-			for (index = start; index < end; index++) {
-				pages.push(index);
+			for (var i of range) {
+				if (l) {
+					if (i - l === 2) {
+						pages.push(l + 1);
+					} else if (i - l !== 1) {
+						pages.push('...');
+					}
+				}
+				pages.push(i);
+				l = i;
 			}
 
 			return pages;

tests/laravel-vue-pagination.js

@@ -41,23 +41,41 @@ describe('LaravelVuePagination', function() {
 		expect(vm.$el.getElementsByTagName('li')[0].classList).toContain('active');
 	});
 
-	it('has correct DOM structure with 1 link limit on page 3', function() {
-		exampleData.current_page = 3;
-		exampleData.next_page_url = 'http://example.com/page/4';
-		exampleData.prev_page_url = 'http://example.com/page/2';
+	it('has correct DOM structure with -1 limit on page 2', function() {
+		exampleData.current_page = 2;
+		exampleData.next_page_url = 'http://example.com/page/3';
+		exampleData.prev_page_url = 'http://example.com/page/1';
+
+		const vm = getComponent(LaravelVuePagination, {
+			data: exampleData,
+			limit: -1
+		});
+
+		expect(vm.$el.nodeName).toBe('UL');
+		expect(vm.$el.getElementsByTagName('li').length).toBe(2);
+	});
+
+	it('has correct DOM structure with 1 link limit on page 5', function() {
+		exampleData.current_page = 5;
+		exampleData.last_page = 11;
+		exampleData.per_page = 1;
+		exampleData.next_page_url = 'http://example.com/page/6';
+		exampleData.prev_page_url = 'http://example.com/page/4';
 
 		const vm = getComponent(LaravelVuePagination, {
 			data: exampleData,
 			limit: 1
 		});
 
 		expect(vm.$el.nodeName).toBe('UL');
-		expect(vm.$el.getElementsByTagName('li').length).toBe(5);
-		expect(vm.$el.getElementsByTagName('li')[2].classList).toContain('active');
+		expect(vm.$el.getElementsByTagName('li').length).toBe(9);
+		expect(vm.$el.getElementsByTagName('li')[4].classList).toContain('active');
 	});
 
 	it('has correct DOM structure when on page 2', function() {
 		exampleData.current_page = 2;
+		exampleData.last_page = 6;
+		exampleData.per_page = 2;
 		exampleData.next_page_url = 'http://example.com/page/3';
 		exampleData.prev_page_url = 'http://example.com/page/1';