initial commit

NZME · May 20, 2016 · 089b70e · 089b70e
commit 089b70e
Show file tree

Hide file tree

Showing 5 changed files with 677 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+.idea/
+dist/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,35 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+.idea/
diff --git a/README.md b/README.md
@@ -0,0 +1,204 @@
+Pagination class
+================
+An ES6 class for pagination functionality and rendering.
+
+Example
+-------
+This example shows how to create a pagination instance.
+To integrate pagination with application logic, simply bind functionality to instance events.
+
+### JavaScript
+```javascript
+import Pagination from 'pagination-class'
+
+let pagination = new Pagination('#pagination-container', 50, 1)
+
+pagination.on('goto:post', () => {
+    // Application logic for navigation
+})
+```
+
+### HTML
+```html
+<html>
+  <head>
+    <title>Pagination class example</title>
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <h1>Pagination class example</h1>
+
+    <div id="pagination-container"></div>
+  </body>
+</html>
+```
+
+Parameters
+----------
+### `container`
+Container to insert pagination elements into - can provide either an HTML node or a string to be used in `document.querySelector()`.
+
+### `pages`
+Total number of pages to render.
+
+### `current`
+Current page.
+
+### `options`
+Pagination instance options.
+
+  - `listClass`: Class added to `<ul>` element
+  - `summaryClass`: Class added to pagination summary container element
+  - `summaryCurrentClass`: Class added to the `<span>` element containing the current page
+  - `summaryOfClass`: Class added to the `<span>` element containing the 'of' text, defined in the `summaryOfText` option
+  - `summaryTotalClass`: Class added to the `<span>` element containing the total number of pages
+  - `itemClass`: Class added to page number elements
+  - `separatorClass`: Class added to separator elements, between truncated points in the list
+  - `prevClass`: Class added to previous element
+  - `nextClass`: Class added to next element
+  - `activeClass`: Class added to active page element
+  - `disabledClass`: Class added to disabled elements
+  - `showSummary`: Enable summary display
+  - `showPages`: Enable pages display
+  - `showPrevNext`: Enable previous and next display
+  - `truncateList`: Enable truncated page list - if `false`, list will contain every page
+  - `adjacentNumbers`: Number of pages to appear on either side of the current page
+  - `outerNumbers`: Number of pages to appear on the outside of the truncated list - lists the first x pages and last x pages, depending where truncated
+  - `summaryOfText`: Text to display in the summary, between the current page and total pages
+  - `prevText`: Text to display in the previous element
+  - `nextText`: Text to display in the next element
+  - `separatorText`: Text to display in the page separator element
+
+#### Defaults
+```javascript
+{
+    listClass:           'pagination-list',
+    summaryClass:        'pagination-summary',
+    summaryCurrentClass: 'pagination-summary-current',
+    summaryOfClass:      'pagination-summary-text',
+    summaryTotalClass:   'pagination-summary-total',
+    itemClass:           'pagination-item',
+    separatorClass:      'pagination-separator',
+    prevClass:           'pagination-prev',
+    nextClass:           'pagination-next',
+    activeClass:         'active',
+    disabledClass:       'disabled',
+
+    showSummary:     true,
+    showPages:       true,
+    showPrevNext:    true,
+    truncateList:    true,
+    adjacentNumbers: 6,
+    outerNumbers:    2,
+    summaryOfText:   'of',
+    prevText:        'Previous',
+    nextText:        'Next',
+    separatorText:   '&hellip;'
+}
+```
+
+Controls
+--------
+Public control methods to be accessed on an instance are as follows:
+
+### goTo
+Go to page specified by `page` parameter.
+Optionally, you can pass a `direction` parameter to determine if it is moving forwards or backwards - useful for integration with sliding animations.
+
+### prev
+Go to previous page - calls `goTo`.
+
+### next
+Go to next page - calls `goTo`.
+
+Events
+------
+The class triggers the following events:
+
+### pageclick:pre
+Triggered before a page element is clicked.
+#### Receives
+```javascript
+{
+    page: page // New page to set
+}
+```
+
+### pageclick:post
+Triggered after a page element is clicked.
+#### Receives
+```javascript
+{
+    page: page // New page set
+}
+```
+
+### prevclick:pre
+Triggered before previous element is clicked.
+#### Receives
+```javascript
+{
+    page: page // Current page before being set
+}
+```
+
+### prevclick:post
+Triggered after previous element is clicked.
+#### Receives
+```javascript
+{
+    page: page // Current page after being set
+}
+```
+
+### nextclick:pre
+Triggered before next element is clicked.
+#### Receives
+```javascript
+{
+    page: page // Current page before being set
+}
+```
+
+### nextclick:post
+Triggered after next element is clicked.
+#### Receives
+```javascript
+{
+    page: page // Current page after being set
+}
+```
+
+### goto:pre
+Triggered before new page is set.
+#### Receives
+```javascript
+{
+    newPage:   newPage,  // New page to set
+    direction: direction // Navigation direction
+}
+```
+
+### goto:post
+Triggered after new page is set.
+#### Receives
+```javascript
+{
+    newPage:      newPage,      // New page just set
+    previousPage: previousPage, // Previous page before being set
+    direction:    direction     // Navigation direction
+}
+```
+
+### prev:pre
+Triggered before navigating to previous page.
+
+### prev:post
+Triggered after navigating to previous page.
+
+### next:pre
+Triggered before navigating to next page.
+
+### next:post
+Triggered after navigating to next page.
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "pagination-class",
+  "version": "1.0.0",
+  "description": "An ES6 class for pagination functionality and rendering.",
+  "main": "dist/pagination-class.js",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/NZME/pagination-class"
+  },
+  "scripts": {
+    "compile": "node node_modules/babel-cli/bin/babel.js --presets es2015,stage-0 -d dist/ src/",
+    "prepublish": "npm run compile",
+    "test": "echo 'ok'"
+  },
+  "keywords": [
+    "js",
+    "es6",
+    "pagination",
+    "html",
+    "class"
+  ],
+  "contributors": [
+    "Raice Hannay <raicehannay@gmail.com> (http://github.com/voodoocreation)"
+  ],
+  "bugs": {
+    "url": "https://github.com/NZME/pagination-class/issues"
+  },
+  "dependencies": {
+    "event-abstract-class": "^1.0.6"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.8.0",
+    "babel-core": "^6.8.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "browserify": "^13.0.1"
+  }
+}