Initial commit

component · Sep 17, 2012 · c3f562e · c3f562e
commit c3f562e
Show file tree

Hide file tree

Showing 9 changed files with 284 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+components
+build
diff --git a/Makefile b/Makefile
@@ -0,0 +1,14 @@
+
+build: components index.js pager.css template.js
+	@component build --dev
+
+template.js: template.html
+	@component convert $<
+
+components:
+	@component install --dev
+
+clean:
+	rm -fr build components template.js
+
+.PHONY: clean
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,36 @@
+
+# pager
+
+  Pager ui component.
+
+  ![](http://f.cl.ly/items/023v0g1I2p2D4313033a/Screen%20Shot%202012-09-17%20at%202.40.06%20PM.png)
+
+## Installation
+
+    $ component install component/pager
+
+## API
+
+### Pager#total(n)
+
+  Set the total number of items to `n`.
+
+### Pager#perpage(n)
+
+  Set the number of items per page to `n`. [5]
+
+### Pager#pages()
+
+  Return the total number of pages.
+
+### Pager#select(n)
+
+  Select the `n`th page and `.render()`.
+
+### Pager#render()
+
+  Re-render the pager.
+
+# License
+
+  MIT
diff --git a/component.json b/component.json
@@ -0,0 +1,19 @@
+{
+  "name": "pager",
+  "repo": "component/pager",
+  "description": "Pager ui component",
+  "version": "0.0.1",
+  "keywords": ["pager", "ui", "paginate", "pagination"],
+  "dependencies": {
+    "component/emitter": "*",
+    "component/jquery": "*"
+  },
+  "development": {},
+  "scripts": [
+    "index.js",
+    "template.js"
+  ],
+  "styles": [
+    "pager.css"
+  ]
+}
diff --git a/example.html b/example.html
@@ -0,0 +1,34 @@
+<html>
+  <body>
+    <script src="build/build.js"></script>
+    <link rel="stylesheet" href="build/build.css" />
+
+    <style>
+      body {
+        padding: 50px;
+      }
+      .pager li.active a {
+        font-weight: bold;
+        border-color: #ddd;
+      }
+      .pager li a {
+        text-decoration: none;
+        border-radius: 3px;
+        border: 1px solid #eee;
+        padding: 3px 8px;
+        margin: 0 2px;
+        color: #2a2a2a;
+      }
+    </style>
+
+    <script>
+      var Pager = require('pager');
+      var pager = new Pager;
+      pager.el.appendTo('body');
+      pager.total(50).perpage(10).render();
+      pager.on('select', function(n){
+        console.log('selected page %d', n);
+      });
+    </script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,161 @@
+
+/**
+ * Module dependencies.
+ */
+
+var Emitter = require('emitter')
+  , html = require('./template')
+  , o = require('jquery');
+
+/**
+ * Expose `Pager`.
+ */
+
+module.exports = Pager;
+
+/**
+ * Initialize a new `Pager`.
+ *
+ * @api public
+ */
+
+function Pager() {
+  Emitter.call(this);
+  this.el = o(html);
+  this.el.on('click', 'li > a', this.onclick.bind(this));
+  this.perpage(5);
+  this.total(0);
+  this.select(1);
+}
+
+/**
+ * Mixin emitter.
+ */
+
+Emitter(Pager.prototype);
+
+/**
+ * Handle delegated clicks.
+ *
+ * @api private
+ */
+
+Pager.prototype.onclick = function(e){
+  e.preventDefault();
+  var el = o(e.target).parent();
+  if (el.hasClass('prev')) return this.prev();
+  if (el.hasClass('next')) return this.next();
+  this.select(parseInt(el.text(), 10));
+};
+
+/**
+ * Return the total number of pages.
+ *
+ * @return {Number}
+ * @api public
+ */
+
+Pager.prototype.pages = function(){
+  return Math.ceil(this._total / this._perpage);
+};
+
+/**
+ * Select the previous page.
+ *
+ * @api public
+ */
+
+Pager.prototype.prev = function(){
+  this.select(Math.max(0, this.current - 1));
+};
+
+/**
+ * Select the next page.
+ *
+ * @api public
+ */
+
+Pager.prototype.next = function(){
+  this.select(Math.min(this.pages(), this.current + 1));
+};
+
+/**
+ * Select the `n`th page.
+ *
+ * @param {Number} n
+ * @return {Pager}
+ * @api public
+ */
+
+Pager.prototype.select = function(n){
+  this.current = n;
+  this.render();
+  this.emit('select', n)
+  return this;
+};
+
+/**
+ * Set the number of items perpage to `n`.
+ *
+ * @param {Number} n
+ * @return {Pager}
+ * @api public
+ */
+
+Pager.prototype.perpage = function(n){
+  this._perpage = n;
+  return this;
+};
+
+/**
+ * Set the total number of items to `n`.
+ *
+ * @param {Number} n
+ * @return {Pager}
+ * @api public
+ */
+
+Pager.prototype.total = function(n){
+  this._total = n;
+  return this;
+};
+
+/**
+ * Render the pager.
+ *
+ * @api public
+ */
+
+Pager.prototype.render = function(){
+  var total = this._total;
+  var curr = this.current;
+  var per = this._perpage;
+  var pages = this.pages();
+  var el = this.el;
+  var prev = el.find('.prev');
+  var next = el.find('.next');
+  var links = '';
+
+  // remove old
+  el.find('li.page').remove();
+
+  // page links
+  for (var i = 0; i < pages; ++i) {
+    var n = i + 1;
+    links += curr == n
+      ? '<li class="page active"><a href="#">' + n + '</a></li>'
+      : '<li class="page"><a href="#">' + n + '</a></li>';
+  }
+
+  // insert
+  o(links).insertAfter(prev);
+
+  // prev
+  if (curr > 1) prev.removeClass('pager-hide')
+  else prev.addClass('pager-hide');
+
+  // next
+  if (curr < pages) next.removeClass('pager-hide')
+  else next.addClass('pager-hide');
+};
+
diff --git a/pager.css b/pager.css
@@ -0,0 +1,13 @@
+
+.pager {
+  margin: 0;
+  padding: 0;
+}
+
+.pager li {
+  display: inline-block;
+}
+
+.pager-hide {
+  opacity: .2;
+}
diff --git a/template.html b/template.html
@@ -0,0 +1,4 @@
+<ul class="pager">
+  <li class="prev"><a href="#">prev</a></li>
+  <li class="next"><a href="#">next</a></li>
+</ul>
diff --git a/template.js b/template.js