Update to latest component/dom

Readme.md

@@ -1,13 +1,18 @@
-
 # pager
 
   Pager ui component.
 
-  ![](http://f.cl.ly/items/023v0g1I2p2D4313033a/Screen%20Shot%202012-09-17%20at%202.40.06%20PM.png)
+  ![Pager](https://github.com/redbadger/pager/blob/master/pager_demo.gif?raw=true)
+
+## How to use
 
-## Installation
+This is a component component. You can easily plug it into your site or web app. Check the example of usage in test/index.html. To get things working, follow these easy steps (assuming you already have Node.js and npm installed):
 
-    $ component install component/pager
+* `npm install -g component`
+* Clone this repository and navigate into the component folder
+* Run `component install` to fetch dependencies
+* Run `component build`
+* Now you can open test/index.html and if everything is fine you should be able to see the component in action
 
 ## Events
 
@@ -21,7 +26,11 @@
 
 ### Pager#perpage(n)
 
-  Set the number of items per page to `n`. [5]
+  Set the number of items per page to `n`. [5]. Pager will calculate number of page links by dividing total amount of items on perpage value.
+
+### Pager#max_pages(n)
+
+  Specify size of the links window. `n` means amount of page links to the left and right from the current page. `...` will be added to the start and end of the links window.
 
 ### Pager#pages()
 

component.json

@@ -2,11 +2,11 @@
   "name": "pager",
   "repo": "component/pager",
   "description": "Pager ui component",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "keywords": ["pager", "ui", "paginate", "pagination"],
   "dependencies": {
     "component/emitter": "1.0.1",
-    "component/dom": "0.8.0"
+    "component/dom": "*"
   },
   "development": {},
   "scripts": [

index.js

@@ -45,6 +45,8 @@ Pager.prototype.onclick = function(e){
   var el = dom(e.target.parentNode);
   if (el.hasClass('prev')) return this.prev();
   if (el.hasClass('next')) return this.next();
+  if (el.hasClass('first')) return this.first();
+  if (el.hasClass('last')) return this.last();
   this.show(el.text() - 1);
 };
 
@@ -79,6 +81,14 @@ Pager.prototype.next = function(){
   this.show(Math.min(this.pages() - 1, this.current + 1));
 };
 
+Pager.prototype.first = function(){
+  this.show(0);
+};
+
+Pager.prototype.last = function(){
+  this.show(this.pages()-1);
+};
+
 /**
  * Select the page `n`.
  *
@@ -133,6 +143,20 @@ Pager.prototype.total = function(n){
   return this;
 };
 
+/**
+ * Set the max number of pages displayed by pager
+ * at once
+ *
+ * @param {Number} n
+ * @return {Pager}
+ * @api public
+ */
+
+Pager.prototype.max_pages = function(n){
+  this._max_pages = n;
+  return this;
+};
+
 /**
  * Render the pager.
  *
@@ -142,6 +166,7 @@ Pager.prototype.total = function(n){
 Pager.prototype.render = function(){
   var total = this._total;
   var curr = this.current;
+  var max_pages = this._max_pages;
   var per = this._perpage;
   var pages = this.pages();
   var el = this.el;
@@ -152,12 +177,67 @@ Pager.prototype.render = function(){
   // remove old
   el.find('li.page').remove();
 
-  // page links
-  for (var i = 0; i < pages; ++i) {
-    var n = i + 1;
-    links += curr == i
-      ? '<li class="page active"><a href="#">' + n + '</a></li>'
-      : '<li class="page"><a href="#">' + n + '</a></li>';
+  // Ignore all the advanced logic when pages count fits the window
+  // or when max_pages is undefined
+  if(!max_pages || max_pages == 0 || pages <= max_pages * 2) {
+    for (var i = 0; i < pages; ++i) {
+        var n = i + 1;
+        links += curr == i
+          ? '<li class="page active"><a href="#">' + n + '</a></li>'
+          : '<li class="page"><a href="#">' + n + '</a></li>';
+      }
+  } else {
+
+    // start_page: window start position
+    // end_page: window end position
+    //
+    // max_pages: pages window size to left and right from the current page
+    // full window length is essentially max_pages * 2 + 1
+    //
+    // start_delta: extra pages to extend the end of window when current page is
+    // too close to 0
+    //
+    // end_delta: extra pages to extend the start of window when current page is
+    // too close to an end
+    //
+    // Rendering ... spaces only when difference between start window and 1 as well
+    // as end window and pages count is greater than 1
+
+    start_page = curr - max_pages;
+    start_delta = 0;
+    end_delta = 0;
+
+    if(start_page < 0) {
+      start_page = 0;
+      start_delta = Math.abs(curr - max_pages)
+    } else {
+      if(start_page > 0) {
+        links += '<li class="page"><a href="#">1</a></li>';
+        if(start_page > 1) links += '<li class="page">...</li>';
+      }
+    }
+
+    end_page = curr + max_pages + 1;
+
+    if(end_page > pages) {
+      end_page = pages;
+      end_delta = curr + max_pages - pages;
+    }
+
+    start_page -= end_delta;
+    end_page += start_delta - 1;
+
+    for (var i = start_page; i <= end_page; ++i) {
+        var n = i + 1;
+        links += curr == i
+          ? '<li class="page active"><a href="#">' + n + '</a></li>'
+          : '<li class="page"><a href="#">' + n + '</a></li>';
+      }
+
+    if(end_page < pages - 1) {
+      if(end_page < pages - 2) links += '<li class="page">...</li>';
+      links += '<li class="page"><a href="#">' + pages + '</a></li>';
+    }
   }
 
   // insert

test/index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  </head>
+  <body>
+    <link href="../build/build.css" type="style/css" rel="stylesheet" />
+    <script src="../build/build.js" type="text/javascript"></script>
+    <style>
+      body {
+        padding: 50px;
+        font: 16px Helvetica, Arial;
+      }
+
+      li.page, .next, .last, .prev, .first {
+        margin: 5px;
+        padding: 5px;
+        background-color: #eee;
+      }
+
+      a {
+        text-decoration: none;
+        color: black;
+      }
+
+      li.page.active {
+        background-color: blue;
+      }
+
+      li.page.active a {
+        color: white;
+      }
+    </style>
+
+    <div id="pager"></div>
+
+    <script>
+      var Pager = require('pager');
+
+      pgr = new Pager();
+      pgr.total(1000).perpage(10).max_pages(2).render();
+
+      pgr.el.appendTo("#pager");
+      pgr.on('show', function(position){
+        console.log('Page position selected: ' + position);
+      });
+    </script>
+  </body>
+</html>