Permalink
Browse files

initial import

  • Loading branch information...
0 parents commit e44b04376de60030783287cec0a6b0b90cb98d77 andris9 committed Jun 15, 2011
Showing with 272 additions and 0 deletions.
  1. +16 −0 LICENSE
  2. +20 −0 README.md
  3. +77 −0 example.html
  4. +159 −0 jshtmlpagination.js
16 LICENSE
@@ -0,0 +1,16 @@
+Copyright (c) 2011 Andris Reinman, andris.reinman@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,20 @@
+# JSHTMLPagination
+
+**JSHTMLPagination** is a small library to achieve pagination in modern browsers (currently supported Chrome and Safari).
+
+## Usage
+
+To paginate you need a container which is going to be the pagination *window* and some text to paginate.
+
+ var pager = new JSHTMLPagination(container_elm, html_to_paginate);
+
+To control the behavior you can use the following methods
+
+ pager.next(); // to show next page
+
+and
+
+ pager.previous(); // to show previous page
+
+
+See example.html for a better example or [this demo](http://tahvel.info/pagination/example.html).
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>test</title>
+ <meta charset="utf-8" />
+ <style type="text/css">
+ #pager{
+ width: 250px;
+ height: 320px;
+ border: 1px dotted #333;
+ padding:5px;
+ margin: 5px;
+ }
+
+ #pager p{
+ margin:0;
+ padding: 3px 0;
+ }
+
+ #pager h1{
+ margin:0;
+ padding: 3px 0;
+ }
+ </style>
+
+ <script type="text/javascript" src="jshtmlpagination.js"></script>
+
+ <script type="text/javascript">
+
+ // run after page load
+ document.addEventListener("DOMContentLoaded", function(){
+
+ var pager_elm = document.getElementById("pager"),
+ data_elm = document.getElementById("data").cloneNode(true);
+
+ data_elm.style.display = "block";
+
+ // create new pager
+ var pager = new JSHTMLPagination(pager_elm, data_elm);
+
+ // button next
+ document.getElementById("next").addEventListener("click", function(){
+ pager.next();
+ }, false);
+
+ // button previous
+ document.getElementById("previous").addEventListener("click", function(){
+ pager.previous();
+ }, false);
+
+ }, false);
+
+ </script>
+ </head>
+ <body>
+
+ <!-- paging container -->
+ <div id="pager"></div>
+
+ <!-- button previous -->
+ <input type="button" name="previous" id="previous" value="Previous" />
+
+ <!-- button next -->
+ <input type="button" name="next" id="next" value="Next" />
+
+ <!-- this is the source text for paging. -->
+ <div id="data" style="display:none">
+ <div>
+ <h1>Tri-tip jowl tongue</h1>
+ <p>Ball tip beef short ribs ground round pastrami rump strip steak meatball ribeye flank. Hamburger shank pork chop tongue. Pork chop beef tenderloin pork, shank corned beef ground round shankle tri-tip. Short ribs tenderloin pig shoulder cow bresaola, jowl corned beef flank turkey boudin ribeye meatball pastrami pancetta. Ground round strip steak tri-tip chicken, pastrami boudin tongue. Brisket short ribs shoulder swine boudin jerky beef, bacon pork chop pork loin strip steak pork andouille. Sirloin hamburger rump, ham hock bresaola meatball meatloaf tri-tip pork chop beef ribs chuck salami spare ribs fatback.</p><p>Strip steak jerky t-bone headcheese, fatback pork meatball beef boudin ribeye pork chop flank jowl hamburger tenderloin. Rump cow tail brisket tongue sausage. Ham pancetta boudin rump corned beef, ribeye beef ribs drumstick flank sausage swine andouille. Meatloaf beef ribs short ribs boudin, sausage drumstick short loin turkey swine pancetta ribeye shankle headcheese fatback. Venison ham hamburger, brisket meatball andouille ribeye. Ground round drumstick tongue short ribs, corned beef turkey pork tri-tip pork chop chuck chicken brisket pork loin salami shoulder. Turkey meatloaf ham, shankle sausage cow pig jowl pork loin shank boudin bacon corned beef.</p><p>Tenderloin ham bresaola, boudin short loin drumstick tail pork belly pork chop chicken flank fatback hamburger. Shank headcheese pork loin salami, shankle spare ribs ribeye sausage tongue strip steak. Shank salami brisket fatback pork chop tenderloin, t-bone ground round chuck tail cow corned beef drumstick pastrami flank. Bacon strip steak ribeye ham hock turkey brisket flank short ribs ball tip jowl, tongue meatloaf salami. Salami pork chop headcheese, venison beef ribs boudin hamburger sirloin meatball chicken pastrami tenderloin. Ham hock ribeye bresaola salami, hamburger beef ribs tenderloin. Spare ribs sausage jerky jowl.</p><p>Beef bacon shankle swine ham hock chicken, tenderloin biltong ball tip sirloin pastrami. Tongue pig bacon, shankle strip steak pork chop pastrami beef sausage spare ribs pork loin sirloin turkey ground round. Pastrami tenderloin short loin, bresaola shoulder ball tip fatback strip steak tongue pork ham hock pork chop chuck boudin pancetta. Rump spare ribs venison, t-bone meatball ham short ribs beef ribs hamburger corned beef. Sirloin pancetta biltong spare ribs, ham hock jowl beef cow pork chop andouille. Bresaola bacon beef, ground round beef ribs rump venison pancetta ribeye corned beef sausage chuck jerky. Strip steak pancetta andouille flank, tri-tip swine ball tip shankle t-bone corned beef pork loin.</p><p>Corned beef flank tri-tip strip steak. Cow strip steak swine, salami corned beef pork loin fatback shank ground round ham hock hamburger ribeye shoulder pancetta. Ham pastrami shoulder strip steak beef jerky. Shoulder salami meatball, tenderloin short loin pork belly spare ribs. Pork loin salami ham hock shank drumstick, chicken shankle jerky ham flank corned beef. Turkey pork loin shank brisket. Pork chop shank corned beef, sausage ribeye chuck short ribs tongue ground round pork belly jowl bresaola tri-tip.</p>
+ </div>
+ </div>
+
+ <p><b>NB!</b> This example currently works only in Chrome and Safari</p>
+
+ </body>
+</html>
@@ -0,0 +1,159 @@
+/*
+ * ----------------------------- JSHTMLPagination -------------------------------------
+ * Simple paging wrapper to generate pagination inside a web page
+ *
+ * Copyright (c) 2011 Andris Reinman, andris.reinman@gmail.com
+ *
+ * Licensed under MIT-style license:
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * new JSHTMLPagination(container, data)
+ * - container (Element): DOM object that is going to host the pagination
+ * - data (String | Element): HTML contents to be paginated
+ *
+ * Creates a pagination element.
+ *
+ * var pager = new JSHTMLPagination($("pager"), "<p>.....</p>");
+ * pager.next(); // show next page
+ * pager.previous(); // show previous page
+ *
+ **/
+function JSHTMLPagination(container, data){
+
+ this.container = container;
+ this.data = data;
+
+ this.position = 0;
+
+ this.column_count = 1;
+ this.curcolumn = 0;
+
+ this.column_gap = 20;
+ this.getDimensions();
+ this.generate();
+
+ if(typeof data == "string"){
+ this.column_container.innerHTML = data;
+ }else{
+ this.column_container.appendChild(data);
+ }
+
+ this.container.appendChild(this.inner_container);
+
+ this.calculateColumnCount();
+}
+
+/**
+ * JSHTMLPagination#getDimensions() -> undefined
+ *
+ * Calculates available dimensions (width, height) to be used
+ **/
+JSHTMLPagination.prototype.getDimensions = function(){
+
+ this.styles = window.getComputedStyle(this.container,null);
+ this.width = Number(this.styles.getPropertyValue("width").replace(/\D/g,'')) || 0;
+ this.height = Number(this.styles.getPropertyValue("height").replace(/\D/g,'')) || 0;
+
+ this.column_width = this.width;
+
+}
+
+/**
+ * JSHTMLPagination#generate() -> undefined
+ *
+ * Generates DOM structure to hold the pagination
+ **/
+JSHTMLPagination.prototype.generate = function(){
+
+ // inner container
+ this.inner_container = document.createElement("div");
+ this.inner_container.style.overflow = "hidden";
+ this.inner_container.style.padding = 0;
+ this.inner_container.style.margin = 0;
+ this.inner_container.width = this.width+"px";
+ this.inner_container.height = this.height+"px";
+
+ // lenghty spacer
+ this.space_container = document.createElement("div");
+ this.space_container.style.width = "99999999px";
+ this.space_container.style.height = this.height+"px";
+ this.space_container.style.padding = 0;
+ this.space_container.style.margin = 0;
+
+ // columns
+ this.columns_container = document.createElement("div");
+ this.columns_container.style.height = this.height+"px";
+ this.columns_container.style.padding = 0;
+ this.columns_container.style.margin = 0;
+
+ this.columns_container.style.mozColumnWidth = this.column_width + "px";
+ this.columns_container.style.webkitColumnWidth = this.column_width + "px";
+ this.columns_container.style.msColumnWidth = this.column_width + "px";
+ this.columns_container.style.columnWidth = this.column_width + "px";
+
+ this.columns_container.style.mozColumnGap = this.column_gap +"px";
+ this.columns_container.style.webkitColumnGap = this.column_gap + "px";
+ this.columns_container.style.msColumnGap = this.column_gap + "px";
+ this.columns_container.style.columnGap = this.column_gap +"px";
+
+ // column
+ this.column_container = document.createElement("div");
+ this.column_container.style.padding = 0;
+ this.column_container.style.margin = 0;
+
+ this.inner_container.appendChild(this.space_container);
+ this.space_container.appendChild(this.columns_container);
+ this.columns_container.appendChild(this.column_container);
+}
+
+/**
+ * JSHTMLPagination#calculateColumnCount() -> undefined
+ *
+ * Calculates column count for paging
+ **/
+JSHTMLPagination.prototype.calculateColumnCount = function(){
+ var total_height = Number(window.getComputedStyle(this.column_container,null).getPropertyValue("height").replace(/\D/g,''));
+ this.column_count = Math.ceil(total_height / this.height) || 1;
+}
+
+/**
+ * JSHTMLPagination#next() -> undefined
+ *
+ * Displays next page
+ **/
+JSHTMLPagination.prototype.next = function(){
+ if(this.curcolumn>=this.column_count-1)return;
+ this.curcolumn++;
+ this.position += this.column_width + this.column_gap;
+ this.space_container.style.marginLeft = -this.position + "px";
+ this.space_container.style.webkitTransition = "1s ease-out";
+}
+
+/**
+ * JSHTMLPagination#previous() -> undefined
+ *
+ * Displays previous page
+ **/
+JSHTMLPagination.prototype.previous = function(){
+ if(this.curcolumn<=0)return;
+ this.curcolumn--;
+ this.position -= this.column_width + this.column_gap;
+ this.space_container.style.marginLeft = -this.position + "px";
+ this.space_container.style.webkitTransition = "1s ease-out";
+}

0 comments on commit e44b043

Please sign in to comment.