Creating paginationArea component on ohif:core package

Packages/ohif-core/client/components/index.js

@@ -1,5 +1,6 @@
 import './base';
 import './bootstrap';
+import './paginationArea';
 import './playground/playground.html';
 import './playground/playground.styl';
 import './playground/playground.js';

Packages/ohif-core/client/components/paginationArea/index.js

@@ -0,0 +1,3 @@
+import './paginationArea.html';
+import './paginationArea.js';
+import './paginationArea.styl';

Packages/ohif-core/client/components/paginationArea/paginationArea.html

@@ -1,10 +1,10 @@
-<template name="studylistPagination">
-    {{#form class='studylistPagination' schema=instance.schema}}
+<template name="paginationArea">
+    {{#form class=(concat 'pagination-area ' this.class) schema=instance.schema}}
         <div class="row">
             <div class="col-xs-4 col-sm-3 col-md-3">
                  <div class="form-inline form-group rows-per-page">
                     <span>Show</span>
-                    {{>inputSelect class='select-small js-select-rows-per-page' key='rowsPerPage' hideSearch=true}}
+                    {{>inputSelect class='select-small' key='rowsPerPage' hideSearch=true}}
                     <span>rows per page</span>
                 </div>
             </div>

Packages/ohif-core/client/components/paginationArea/paginationArea.js

@@ -1,14 +1,13 @@
 import { Template } from 'meteor/templating';
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
-
-import './studylistPagination.html';
+import 'twbs-pagination';
 
 const visiblePages = 10;
 
-Template.studylistPagination.onCreated(function() {
+Template.paginationArea.onCreated(function() {
     const instance = Template.instance();
-    // replace parentVariable with the name of the instance variable
-    instance.parent = this.parent(1);
+
+    // Create the rowsPerPage schema
     instance.schema = new SimpleSchema({
         rowsPerPage: {
             type: Number,
@@ -18,55 +17,60 @@ Template.studylistPagination.onCreated(function() {
     });
 });
 
-Template.studylistPagination.onRendered(() => {
+Template.paginationArea.onRendered(() => {
     const instance = Template.instance();
-    const $paginationControl = instance.$('.pagination-control');
+    instance.$paginationControl = instance.$('.pagination-control');
 
     // Track changes on recordCount and rowsPerPage
     instance.autorun(() => {
-        const recordCount = instance.parent.recordCount.get();
-        const rowsPerPage = instance.parent.rowsPerPage.get();
+        const recordCount = instance.data.recordCount.get();
+        const rowsPerPage = instance.data.rowsPerPage.get();
 
         // Destroy plugin if exists
-        if ($paginationControl.data().twbsPagination) {
-            $paginationControl.twbsPagination('destroy');
+        if (instance.$paginationControl.data().twbsPagination) {
+            instance.$paginationControl.twbsPagination('destroy');
         }
 
         if (recordCount && rowsPerPage) {
             const totalPages = Math.ceil(recordCount / rowsPerPage);
 
             // Initialize plugin
-            $paginationControl.twbsPagination({
+            instance.$paginationControl.twbsPagination({
                 totalPages,
                 visiblePages,
                 onPageClick: (event, page) => {
                     // Update currentPage
                     // Decrease page by 1 to set currentPage
                     // Since reactive table current page index starts by 0
-                    instance.parent.currentPage.set(page - 1);
+                    instance.data.currentPage.set(page - 1);
                 }
             });
         }
     });
 });
 
-Template.studylistPagination.helpers({
+Template.paginationArea.onDestroyed(() => {
+    const instance = Template.instance();
+    instance.$paginationControl.twbsPagination('destroy');
+});
+
+Template.paginationArea.helpers({
     recordCount() {
         const instance = Template.instance();
-        return instance.parent.recordCount.get();
+        return instance.data.recordCount.get();
     },
 
     isRowsPerPageSelected(rowsPerPage) {
         const instance = Template.instance();
-        return rowsPerPage === instance.parent.rowsPerPage.get();
+        return rowsPerPage === instance.data.rowsPerPage.get();
     }
 });
 
-Template.studylistPagination.events({
-    'change .js-select-rows-per-page'(event, instance) {
-        const rowsPerPage = $(event.currentTarget).val();
+Template.paginationArea.events({
+    'change [data-key=rowsPerPage]'(event, instance) {
+        const rowsPerPage = $(event.currentTarget).data('component').value();
 
-        // Update rowsPerPage of parent
-        instance.parent.rowsPerPage.set(parseInt(rowsPerPage, 10));
+        // Update rowsPerPage
+        instance.data.rowsPerPage.set(parseInt(rowsPerPage, 10));
     }
 });

Packages/ohif-core/client/components/paginationArea/paginationArea.styl

@@ -1,6 +1,6 @@
-@import "{ohif:design}/app"
+@require '{ohif:design}/app'
 
-.studylistPagination
+.pagination-area
     font-size: 13px
     font-weight: normal !important
 
@@ -59,7 +59,3 @@
           &.active a
             theme('background-color', '$uiGrayDark')
             theme('color', '$activeColor')
-
-@media only screen and (max-width: 1069px)
-  .studylistPagination > .row
-    margin-right: 0;

Packages/ohif-core/package.js

@@ -1,3 +1,7 @@
+Npm.depends({
+    'twbs-pagination': '1.4.1'
+});
+
 Package.describe({
     name: 'ohif:core',
     summary: 'OHIF core components, helpers and UI functions',

Packages/ohif-study-list/client/components/studylist/index.js

@@ -12,7 +12,3 @@ import './studylistResult/studylistResult.styl';
 import './studylistToolbar/studylistToolbar.html';
 import './studylistToolbar/studylistToolbar.js';
 import './studylistToolbar/studylistToolbar.styl';
-
-import './studylistPagination/studylistPagination.html';
-import './studylistPagination/studylistPagination.styl';
-import './studylistPagination/studylistPagination.js';

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.html

@@ -75,7 +75,7 @@
         </table>
 
         <!-- Pagination -->
-        {{>studylistPagination}}
+        {{>paginationArea instance.paginationData}}
 
         {{#if session "showLoadingText"}}
             {{>loadingText}}

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.js

@@ -27,8 +27,8 @@ Template.studylistResult.helpers({
         }
 
         // Pagination parameters
-        const rowsPerPage = instance.rowsPerPage.get();
-        const currentPage = instance.currentPage.get();
+        const rowsPerPage = instance.paginationData.rowsPerPage.get();
+        const currentPage = instance.paginationData.currentPage.get();
         const offset = rowsPerPage * currentPage;
         const limit = offset + rowsPerPage;
 
@@ -41,7 +41,7 @@ Template.studylistResult.helpers({
         }
 
         // Update record count
-        instance.recordCount.set(studies.length);
+        instance.paginationData.recordCount.set(studies.length);
 
         // Limit studies
         return studies.slice(offset, limit);
@@ -225,11 +225,12 @@ Template.studylistResult.onCreated(() => {
     }
 
     const rowsPerPage = getRowsPerPage();
-    instance.rowsPerPage = new ReactiveVar(parseInt(rowsPerPage, 10), setRowsPerPage);
-
-    // Set currentPage indexed 0
-    instance.currentPage = new ReactiveVar(0);
-    instance.recordCount = new ReactiveVar();
+    instance.paginationData = {
+        class: 'studylist-pagination',
+        currentPage: new ReactiveVar(0),
+        rowsPerPage: new ReactiveVar(parseInt(rowsPerPage, 10), setRowsPerPage),
+        recordCount: new ReactiveVar(0)
+    };
 
     // Set sortOption
     const sortOptionSession = Session.get('sortOption');

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl

@@ -250,3 +250,7 @@ $bodyCellHeight = 40px
       .row
         margin-left: 0
         margin-right: 0
+
+@media only screen and (max-width: 1069px)
+  .studylist-pagination > .row
+    margin-right: 0;

Packages/ohif-study-list/client/lib/index.js

@@ -1,5 +1,3 @@
-import './third-party/jquery.twbsPagination.min.js';
-
 import './exportSelectedStudies.js';
 import './exportStudies.js';
 import './getSelectedStudies.js';

Packages/ohif-study-list/client/lib/third-party/jquery.twbsPagination.min.js

@@ -1,9 +0,0 @@
-/*
- * jQuery Bootstrap Pagination v1.3.1
- * https://github.com/esimakin/twbs-pagination
- *
- * Copyright 2014-2015 Eugene Simakin <eugenesimakin@mail.ru>
- * Released under Apache 2.0 license
- * http://apache.org/licenses/LICENSE-2.0.html
- */
-!function(a,b,c,d){"use strict";var e=a.fn.twbsPagination,f=function(c,d){if(this.$element=a(c),this.options=a.extend({},a.fn.twbsPagination.defaults,d),this.options.startPage<1||this.options.startPage>this.options.totalPages)throw new Error("Start page option is incorrect");if(this.options.totalPages=parseInt(this.options.totalPages),isNaN(this.options.totalPages))throw new Error("Total pages option is not correct!");if(this.options.visiblePages=parseInt(this.options.visiblePages),isNaN(this.options.visiblePages))throw new Error("Visible pages option is not correct!");if(this.options.totalPages<this.options.visiblePages&&(this.options.visiblePages=this.options.totalPages),this.options.onPageClick instanceof Function&&this.$element.first().on("page",this.options.onPageClick),this.options.href){var e,f=this.options.href.replace(/[-\/\\^$*+?.|[\]]/g,"\\$&");f=f.replace(this.options.hrefVariable,"(\\d+)"),null!=(e=new RegExp(f,"i").exec(b.location.href))&&(this.options.startPage=parseInt(e[1],10))}var g="function"==typeof this.$element.prop?this.$element.prop("tagName"):this.$element.attr("tagName");return"UL"===g?this.$listContainer=this.$element:this.$listContainer=a("<ul></ul>"),this.$listContainer.addClass(this.options.paginationClass),"UL"!==g&&this.$element.append(this.$listContainer),this.render(this.getPages(this.options.startPage)),this.setupEvents(),this.options.initiateStartPageClick&&this.$element.trigger("page",this.options.startPage),this};f.prototype={constructor:f,destroy:function(){return this.$element.empty(),this.$element.removeData("twbs-pagination"),this.$element.off("page"),this},show:function(a){if(1>a||a>this.options.totalPages)throw new Error("Page is incorrect.");return this.render(this.getPages(a)),this.setupEvents(),this.$element.trigger("page",a),this},buildListItems:function(a){var b=[];if(this.options.first&&b.push(this.buildItem("first",1)),this.options.prev){var c=a.currentPage>1?a.currentPage-1:this.options.loop?this.options.totalPages:1;b.push(this.buildItem("prev",c))}for(var d=0;d<a.numeric.length;d++)b.push(this.buildItem("page",a.numeric[d]));if(this.options.next){var e=a.currentPage<this.options.totalPages?a.currentPage+1:this.options.loop?1:this.options.totalPages;b.push(this.buildItem("next",e))}return this.options.last&&b.push(this.buildItem("last",this.options.totalPages)),b},buildItem:function(b,c){var d=a("<li></li>"),e=a("<a></a>"),f=null;switch(b){case"page":f=c,d.addClass(this.options.pageClass);break;case"first":f=this.options.first,d.addClass(this.options.firstClass);break;case"prev":f=this.options.prev,d.addClass(this.options.prevClass);break;case"next":f=this.options.next,d.addClass(this.options.nextClass);break;case"last":f=this.options.last,d.addClass(this.options.lastClass)}return d.data("page",c),d.data("page-type",b),d.append(e.attr("href",this.makeHref(c)).html(f)),d},getPages:function(a){var b=[],c=Math.floor(this.options.visiblePages/2),d=a-c+1-this.options.visiblePages%2,e=a+c;0>=d&&(d=1,e=this.options.visiblePages),e>this.options.totalPages&&(d=this.options.totalPages-this.options.visiblePages+1,e=this.options.totalPages);for(var f=d;e>=f;)b.push(f),f++;return{currentPage:a,numeric:b}},render:function(b){var c=this;this.$listContainer.children().remove(),this.$listContainer.append(this.buildListItems(b)),this.$listContainer.children().each(function(){var d=a(this),e=d.data("page-type");switch(e){case"page":d.data("page")===b.currentPage&&d.addClass(c.options.activeClass);break;case"first":d.toggleClass(c.options.disabledClass,1===b.currentPage);break;case"last":d.toggleClass(c.options.disabledClass,b.currentPage===c.options.totalPages);break;case"prev":d.toggleClass(c.options.disabledClass,!c.options.loop&&1===b.currentPage);break;case"next":d.toggleClass(c.options.disabledClass,!c.options.loop&&b.currentPage===c.options.totalPages)}})},setupEvents:function(){var b=this;this.$listContainer.find("li").each(function(){var c=a(this);return c.off(),c.hasClass(b.options.disabledClass)||c.hasClass(b.options.activeClass)?void c.on("click",!1):void c.click(function(a){!b.options.href&&a.preventDefault(),b.show(parseInt(c.data("page")))})})},makeHref:function(a){return this.options.href?this.options.href.replace(this.options.hrefVariable,a):"#"}},a.fn.twbsPagination=function(b){var c,e=Array.prototype.slice.call(arguments,1),g=a(this),h=g.data("twbs-pagination"),i="object"==typeof b&&b;return h||g.data("twbs-pagination",h=new f(this,i)),"string"==typeof b&&(c=h[b].apply(h,e)),c===d?g:c},a.fn.twbsPagination.defaults={totalPages:0,startPage:1,visiblePages:5,initiateStartPageClick:!0,href:!1,hrefVariable:"{{number}}",first:"First",prev:"Previous",next:"Next",last:"Last",loop:!1,onPageClick:null,paginationClass:"pagination",nextClass:"next",prevClass:"prev",lastClass:"last",firstClass:"first",pageClass:"page",activeClass:"active",disabledClass:"disabled"},a.fn.twbsPagination.Constructor=f,a.fn.twbsPagination.noConflict=function(){return a.fn.twbsPagination=e,tLine truncated