merging component

pinguxx · May 28, 2015 · 4018d5f · 4018d5f
1 parent 54a4694
commit 4018d5f
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -30,34 +30,88 @@ Pagination file can be used with any common.js it is expect for [mithril](https:
 
 ```JavaScript
 
+function list(data) {
+    return m('.ui.segment.sixteen.wide.column', [
+        m('ul.ui.bulleted.list', data.map(function (item) {
+            return m('li', {
+                key: item.id
+            }, item.name);
+        }))
+    ]);
+}
+
+function table(data) {
+    return m('.ui.sixteen.wide.column', [
+        m('table.ui.table', [
+            m('tbody', data.map(function (item) {
+                return m('tr', {
+                    key: item.id
+                }, [
+                    m('td', item.id),
+                    m('td', item.name)
+                ]);
+            }))
+        ])
+    ]);
+}
+
 module.controller = function () {
-    pagination = new Pagination();
     module.vm.init();
+    this.pagination = m.component(Pagination, {
+        data: module.vm.data,
+        rowsperpage: module.vm.rowsperpage,
+        pagerender: list,
+        wrapperclass: 'column'
+    });
+    this.paginationCtrl = new this.pagination.controller();
 };
 
 module.vm = {};
 module.vm.init = function () {
     this.data = array;
     this.rowsperpage = 10;
+    this.page = m.prop(3);
 };
-function list(data) {
-    pagination.calculatePagination(data, module.vm.rowsperpage);
-    var cdata = data.slice(pagination.latest, pagination.rowsperpage * pagination.currentpage);
-    return cdata.map(function (item) {
-        return m('li', item.name);
-    });
-}
-module.view = function (/*ctrl*/) {
-    return m('.ui.grid.page', [
+
+
+module.view = function (ctrl) {
+    return m('.ui.grid.page.one.column', [
         m('h1', 'Pagination'),
-        m('.ui.segment.sixteen.wide.column', [
-            m('ul.ui.bulleted.list', list(array))
+        m.component(Pagination, {
+            data: module.vm.data,
+            rowsperpage: module.vm.rowsperpage,
+            pagerender: list,
+            wrapperclass: 'column',
+            page: module.vm.page
+        }),
+        m.component(Pagination, {
+            data: module.vm.data,
+            rowsperpage: module.vm.rowsperpage,
+            pagerender: table,
+            wrapperclass: 'column'
+        }),
+        m('.row', [
+            m('.column', [
+                m('br')
+            ])
         ]),
-        pagination.buildPagination()
+        ctrl.pagination.view(ctrl.paginationCtrl),
+        m('.row', [
+            m('.column', [
+                m('button.ui.button', {
+                    onclick: function () {
+                        module.vm.data.splice(30, 10);
+                        ctrl.paginationCtrl.goToPage(4);
+                        module.vm.page(4);
+                    }
+                }, 'go to page 3')
+            ])
+        ])
     ]);
 };
 
-m.module(window.document.body, module);
+m.mount(window.document.body, module);
+
 ```
 
 ## Attributes
@@ -66,6 +120,9 @@ It accepts the following properties
 
  * data, array of data to paginate
  * rowsperpage, # of rows to show each page
+ * pagerender, page render function
+ * wrapperclass, class to add to parent div
+ * page, m.prop value of the current page
  * class object map with:
     * **activeClass**, applied to the active icons, defaults `active`
     * **itemClass**, applied to non icon items, defaults `icon`

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "sm-pagination",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "homepage": "https://github.com/pinguxx/sm-pagination",
   "authors": [
     "Ivan Torres <[email protected]>"

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.10.3/semantic.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.33/mithril.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
     <script src="Pagination.js"></script>
 </head>
 <body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sm-pagination",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "mithril semantic-ui pagination widget",
   "main": "Pagination.js",
   "scripts": {

diff --git a/test.js b/test.js
@@ -13,8 +13,6 @@
     }
 
     function list(data) {
-        //pagination.controller.calculatePagination(data, module.vm.rowsperpage);
-        //var cdata = data.slice(pagination.latest, pagination.rowsperpage * pagination.currentpage);
         return m('.ui.segment.sixteen.wide.column', [
             m('ul.ui.bulleted.list', data.map(function (item) {
                 return m('li', {
@@ -25,8 +23,6 @@
     }
 
     function table(data) {
-        //pagination2.calculatePagination(data, module.vm.rowsperpage);
-        //var cdata = data.slice(pagination2.latest, pagination2.rowsperpage * pagination2.currentpage);
         return m('.ui.sixteen.wide.column', [
             m('table.ui.table', [
                 m('tbody', data.map(function (item) {