Docs and prettier for custom page item

javve · Nov 21, 2020 · 4ba063a · 4ba063a
1 parent df7ca82
commit 4ba063a
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 99 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 - **[Feature]** #634 Add item template function
+- **[Feature]** #591 Support adding custom pagination item
 - **[Bugfix]** #667 Fix `getAttribute` fallback method
 
 ### 2.0.0 - 2020-11-21 - Winter cleanup 🧹

diff --git a/__test__/pagination.test.js b/__test__/pagination.test.js
@@ -266,106 +266,108 @@ describe('Pagination', function () {
       expect($(pagination.find('li').get(3)).hasClass('active')).toEqual(false)
       expect($(pagination.find('li').get(4)).hasClass('active')).toEqual(true)
     })
-  });
+  })
 
-  describe('Custom settings, pagination: { item: "<button><span class=page></span></button>" }', function() {
-    var list,
-      itemHTML,
-      pagination;
+  describe('Custom settings, pagination: { item: "<button><span class=page></span></button>" }', function () {
+    var list, itemHTML, pagination
 
-    beforeAll(function() {
+    beforeAll(function () {
       itemHTML = fixturePagination.list(['name'])
-      list = new List('list-pagination', {
-        valueNames: ['name'],
-        item: itemHTML,
-        page: 2,
+      list = new List(
+        'list-pagination',
+        {
+          valueNames: ['name'],
+          item: itemHTML,
+          page: 2,
           pagination: {
-              item: "<button><span class=page></span></button>",
+            item: '<button><span class=page></span></button>',
           },
-      }, fixturePagination.all);
-
-      pagination = $('.pagination');
-    });
-
-    afterAll(function() {
-      fixturePagination.removeList();
-    });
-
-    it('should have default settings', function() {
-      expect(pagination.find('span').length).toEqual(4);
-      expect(pagination.find('span').get(0).innerHTML).toEqual("1");
-      expect(pagination.find('span').get(1).innerHTML).toEqual("2");
-      expect(pagination.find('span').get(2).innerHTML).toEqual("3");
-      expect(pagination.find('span').get(3).innerHTML).toEqual("...");
-      expect(pagination.find('span').get(4)).toEqual(undefined);
-    });
-
-    it('should show same pages for show(7,2) and show(8,2)', function() {
-      list.show(7, 2);
-      expect(pagination.find('span').length).toEqual(7);
-      expect(pagination.find('span').get(0).innerHTML).toEqual("...");
-      expect(pagination.find('span').get(1).innerHTML).toEqual("2");
-      expect(pagination.find('span').get(2).innerHTML).toEqual("3");
-      expect(pagination.find('span').get(3).innerHTML).toEqual("4");
-      expect(pagination.find('span').get(4).innerHTML).toEqual("5");
-      expect(pagination.find('span').get(5).innerHTML).toEqual("6");
-      expect(pagination.find('span').get(6).innerHTML).toEqual("...");
-      expect(pagination.find('span').get(7)).toEqual(undefined);
-      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false);
-      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true);
-      expect($(pagination.find('button').get(4)).hasClass('active')).toEqual(false);
-    });
-
-    it('should show same pages for show(7,2) and show(8,2)', function() {
-      list.show(8, 2);
-      expect(pagination.find('span').length).toEqual(7);
-      expect(pagination.find('span').get(0).innerHTML).toEqual("...");
-      expect(pagination.find('span').get(1).innerHTML).toEqual("2");
-      expect(pagination.find('span').get(2).innerHTML).toEqual("3");
-      expect(pagination.find('span').get(3).innerHTML).toEqual("4");
-      expect(pagination.find('span').get(4).innerHTML).toEqual("5");
-      expect(pagination.find('span').get(5).innerHTML).toEqual("6");
-      expect(pagination.find('span').get(6).innerHTML).toEqual("...");
-      expect(pagination.find('span').get(7)).toEqual(undefined);
-      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false);
-      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true);
-      expect($(pagination.find('button').get(4)).hasClass('active')).toEqual(false);
-    });
-
-    it('should test show(14,2)', function() {
-      list.show(14, 2);
-      expect(pagination.find('span').length).toEqual(6);
-      expect(pagination.find('span').get(0).innerHTML).toEqual("...");
-      expect(pagination.find('span').get(1).innerHTML).toEqual("5");
-      expect(pagination.find('span').get(2).innerHTML).toEqual("6");
-      expect(pagination.find('span').get(3).innerHTML).toEqual("7");
-      expect(pagination.find('span').get(4).innerHTML).toEqual("8");
-      expect(pagination.find('span').get(5).innerHTML).toEqual("9");
-      expect(pagination.find('span').get(6)).toEqual(undefined);
-      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false);
-      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true);
-      expect($(pagination.find('button').get(4)).hasClass('active')).toEqual(false);
-    });
-
-    it('should show last page with show(17,2)', function() {
-      list.show(17, 2);
-      expect(pagination.find('span').length).toEqual(4);
-      expect(pagination.find('span').get(0).innerHTML).toEqual("...");
-      expect(pagination.find('span').get(1).innerHTML).toEqual("7");
-      expect(pagination.find('span').get(2).innerHTML).toEqual("8");
-      expect(pagination.find('span').get(3).innerHTML).toEqual("9");
-      expect(pagination.find('span').get(4)).toEqual(undefined);
-      expect($(pagination.find('button').get(1)).hasClass('active')).toEqual(false);
-      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false);
-      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true);
-    });
-
-    it('should handle page = 0', function() {
-      expect(list.listContainer.style.display).toBe('');
-      list.show(0, 0);
-      expect(list.listContainer.style.display).toBe('none');
-      list.show(1, 1);
-      expect(list.listContainer.style.display).toBe('block');
-    });
-  });
-});
+        },
+        fixturePagination.all
+      )
+
+      pagination = $('.pagination')
+    })
+
+    afterAll(function () {
+      fixturePagination.removeList()
+    })
+
+    it('should have default settings', function () {
+      expect(pagination.find('span').length).toEqual(4)
+      expect(pagination.find('span').get(0).innerHTML).toEqual('1')
+      expect(pagination.find('span').get(1).innerHTML).toEqual('2')
+      expect(pagination.find('span').get(2).innerHTML).toEqual('3')
+      expect(pagination.find('span').get(3).innerHTML).toEqual('...')
+      expect(pagination.find('span').get(4)).toEqual(undefined)
+    })
+
+    it('should show same pages for show(7,2) and show(8,2)', function () {
+      list.show(7, 2)
+      expect(pagination.find('span').length).toEqual(7)
+      expect(pagination.find('span').get(0).innerHTML).toEqual('...')
+      expect(pagination.find('span').get(1).innerHTML).toEqual('2')
+      expect(pagination.find('span').get(2).innerHTML).toEqual('3')
+      expect(pagination.find('span').get(3).innerHTML).toEqual('4')
+      expect(pagination.find('span').get(4).innerHTML).toEqual('5')
+      expect(pagination.find('span').get(5).innerHTML).toEqual('6')
+      expect(pagination.find('span').get(6).innerHTML).toEqual('...')
+      expect(pagination.find('span').get(7)).toEqual(undefined)
+      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false)
+      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true)
+      expect($(pagination.find('button').get(4)).hasClass('active')).toEqual(false)
+    })
+
+    it('should show same pages for show(7,2) and show(8,2)', function () {
+      list.show(8, 2)
+      expect(pagination.find('span').length).toEqual(7)
+      expect(pagination.find('span').get(0).innerHTML).toEqual('...')
+      expect(pagination.find('span').get(1).innerHTML).toEqual('2')
+      expect(pagination.find('span').get(2).innerHTML).toEqual('3')
+      expect(pagination.find('span').get(3).innerHTML).toEqual('4')
+      expect(pagination.find('span').get(4).innerHTML).toEqual('5')
+      expect(pagination.find('span').get(5).innerHTML).toEqual('6')
+      expect(pagination.find('span').get(6).innerHTML).toEqual('...')
+      expect(pagination.find('span').get(7)).toEqual(undefined)
+      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false)
+      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true)
+      expect($(pagination.find('button').get(4)).hasClass('active')).toEqual(false)
+    })
+
+    it('should test show(14,2)', function () {
+      list.show(14, 2)
+      expect(pagination.find('span').length).toEqual(6)
+      expect(pagination.find('span').get(0).innerHTML).toEqual('...')
+      expect(pagination.find('span').get(1).innerHTML).toEqual('5')
+      expect(pagination.find('span').get(2).innerHTML).toEqual('6')
+      expect(pagination.find('span').get(3).innerHTML).toEqual('7')
+      expect(pagination.find('span').get(4).innerHTML).toEqual('8')
+      expect(pagination.find('span').get(5).innerHTML).toEqual('9')
+      expect(pagination.find('span').get(6)).toEqual(undefined)
+      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false)
+      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true)
+      expect($(pagination.find('button').get(4)).hasClass('active')).toEqual(false)
+    })
+
+    it('should show last page with show(17,2)', function () {
+      list.show(17, 2)
+      expect(pagination.find('span').length).toEqual(4)
+      expect(pagination.find('span').get(0).innerHTML).toEqual('...')
+      expect(pagination.find('span').get(1).innerHTML).toEqual('7')
+      expect(pagination.find('span').get(2).innerHTML).toEqual('8')
+      expect(pagination.find('span').get(3).innerHTML).toEqual('9')
+      expect(pagination.find('span').get(4)).toEqual(undefined)
+      expect($(pagination.find('button').get(1)).hasClass('active')).toEqual(false)
+      expect($(pagination.find('button').get(2)).hasClass('active')).toEqual(false)
+      expect($(pagination.find('button').get(3)).hasClass('active')).toEqual(true)
+    })
+
+    it('should handle page = 0', function () {
+      expect(list.listContainer.style.display).toBe('')
+      list.show(0, 0)
+      expect(list.listContainer.style.display).toBe('none')
+      list.show(1, 1)
+      expect(list.listContainer.style.display).toBe('block')
+    })
+  })
+})
diff --git a/docs/docs/pagination.html b/docs/docs/pagination.html
@@ -59,6 +59,10 @@ <h3>Options</h3>
     <strong>right</strong> <em class="docs-parameter-description">Int, default: 0</em><br/>
     Same as <code>left</code> but from right.
   </li>
+  <li>
+    <strong>item</strong> <em class="docs-parameter-description">String, default <code>&lt;li>&lt;a class='page' href='#'>&lt;/a>&lt;/li></code></em><br>
+    Template for the pagination items.
+  </li>
 </ul>
 
 <h4>Notice</h4>

diff --git a/src/pagination.js b/src/pagination.js
@@ -85,7 +85,7 @@ module.exports = function (list) {
   return function (options) {
     var pagingList = new List(list.listContainer.id, {
       listClass: options.paginationClass || 'pagination',
-      item: options.item ||  "<li><a class='page' href='#'></a></li>",
+      item: options.item || "<li><a class='page' href='#'></a></li>",
       valueNames: ['page', 'dotted'],
       searchClass: 'pagination-search-that-is-not-supposed-to-exist',
       sortClass: 'pagination-sort-that-is-not-supposed-to-exist',