Masterkey: pager and sorting should work now.

HTML and CSS needs to be cleaned-up, hacks all over the page.

diff --git a/js/pz2.js b/js/pz2.js
index c2bbb41..c503b7c 100644 (file)
--- a/js/pz2.js
+++ b/js/pz2.js
@@ -49,9 +49,9 @@ var pz2 = function(paramArray) {
     //timers
     __myself.statTime = paramArray.stattime || 2000;
     __myself.statTimer = null;
-    __myself.termTime = paramArray.termtime || 1000;
+    __myself.termTime = paramArray.termtime || 2000;
     __myself.termTimer = null;
-    __myself.showTime = paramArray.showtime || 1000;
+    __myself.showTime = paramArray.showtime || 2000;
     __myself.showTimer = null;
     __myself.bytargetTime = paramArray.bytargettime || 1000;
     __myself.bytargetTimer = null;
@@ -143,7 +143,8 @@ pz2.prototype = {
                     if ( __myself.statCallback )
                         __myself.statTimer = setTimeout("__myself.stat()", __myself.statTime / 2);
                     if ( __myself.termlistCallback )
-                        __myself.termTimer = setTimeout("__myself.termlist()", __myself.termTime / 2);
+                        __myself.termlist();
+                        //__myself.termTimer = setTimeout("__myself.termlist()", __myself.termTime / 2);
                     if ( __myself.bytargetCallback )
                         __myself.bytargetTimer = setTimeout("__myself.bytarget()", __myself.bytargetTime / 2);
                 }
@@ -381,6 +382,11 @@ pz2.prototype = {
         var step = page || 1;
         var newStart = __myself.currentStart - (step * __myself.currentNum );
         __myself.show( newStart > 0 ? newStart : 0 );
+    },
+    showPage: function(pageNum)
+    {
+        //var page = pageNum || 1;
+        __myself.show(pageNum * __myself.currentNum);
     }
 };
 }

diff --git a/www/masterkey/css/styles.css b/www/masterkey/css/styles.css
index 4e302c5..4b5a178 100755 (executable)
--- a/www/masterkey/css/styles.css
+++ b/www/masterkey/css/styles.css
@@ -30,8 +30,8 @@ font-weight: bold;
 h2 {
 font-size: 11px;
 margin: 0px;
-padding: 0px;
-line-height: 13px;
+padding-top: 3px;
+/*line-height: 13px;*/
 }
 
 select {
@@ -147,14 +147,14 @@ padding: 0px;
 width: 100%;
 height: 25px;
 background-color: #c1cbd9;
-font-size: 10px;
-margin-bottom: 3px;
+font-size: 11px;
+/*removed margin-bottom: 3px;*/
 color: #002863;
 }
 
 div.margin {
 padding-left: 13px;
-padding-top: 5px;
+padding-top: 2px;
 padding-right: 13px;
 }
 
@@ -240,6 +240,11 @@ a.close img {
 margin-top: 6px;
 }
 
+/*added*/
+div.records {
+    margin-top: 10px;
+}
+
 div.records a.select {
 float: left;
 width: 651px;
@@ -307,7 +312,12 @@ padding: 0px;
 margin: 0px;
 }
 
+div.sortBox{
+float: right;
+}
+
 div.showing {
+padding-top: 3px; /*added*/
 float: left;
 clear: left;
 }

diff --git a/www/masterkey/index.html b/www/masterkey/index.html
index b3ffb79..875a279 100755 (executable)
--- a/www/masterkey/index.html
+++ b/www/masterkey/index.html
@@ -35,20 +35,28 @@
               <h2>Limit your search by:</h2>
             </div>
           </div>
-          <div class="margin">
+          <div class="margin" style="padding-top: 15px;">
             <div id="termlists"></div>
           </div>
         </div>
         <div class="content" style="display: none">
-          <div class="results">
-            Sort results by:&nbsp;
-            <select name="sort">
-              <option value="relevance">Relevance</option>
-              <option value="title">Title</option>
+          <div class="head"><div class="margin"><div class="sortBox">
+            Sort by&nbsp;
+            <select name="sort" id="sort">
+              <option value="relevance" selected="true">relevance</option>
+              <option value="title">title</option>
             </select>
-            <div class="showing">&nbsp;</div>
-            <div class="pages">&nbsp;</div>
+            &nbsp;and show&nbsp;
+            <select name="perpage" id="perpage">
+              <option value="15">15</option>
+              <option value="20" selected="true">20</option>
+              <option value="30">30</option>
+              <option value="50">50</option>
+            </select>
+            results per page.
           </div>
+            <div class="showing">&nbsp;</div></div></div>
+            <div class="bottom"><div class="pages">&nbsp;</div></div>
             <br />
             <br />
           <div class="records"></div>

diff --git a/www/masterkey/js/client.js b/www/masterkey/js/client.js
index ea589da..e00defc 100644 (file)
--- a/www/masterkey/js/client.js
+++ b/www/masterkey/js/client.js
@@ -14,6 +14,7 @@ var my_paz = new pz2( { "onshow": my_onshow,
 var currentSort = 'relevance';
 var currentResultsPerPage = 20;
 var currentQuery = null;
+var currentPage = 0;
 
 var currentDetailedId = null;
 var currentDetailedData = null;
@@ -27,6 +28,16 @@ $(document).ready( function() {
 
 function onFormSubmitEventHandler() {
     currentQuery = document.search.query.value;
+    $('#sort').change(function(){ 
+                    currentSort = this.value;
+                    currentPage = 0;
+                    my_paz.show(0, currentResultsPerPage, currentSort);
+                    });
+    $('#perpage').change(function(){ 
+                    currentResultsPerPage = this.value;
+                    currentPage = 0;
+                    my_paz.show(0, currentResultsPerPage, currentSort);
+                    });
     my_paz.search(document.search.query.value, 20, 'relevance');
     $('div.content').show();
     $("div.leftbar").show();    
@@ -37,6 +48,7 @@ function onFormSubmitEventHandler() {
 //
 function my_onshow(data)
 {
+    global = data;
     var recsBody = $('div.records');
     recsBody.empty();
     
@@ -46,9 +58,7 @@ function my_onshow(data)
         var id = data.hits[i].recid;
         var count = data.hits[i].count || 1;
         
-        recsBody.append('<div class="resultNum">'+(i+1)+'.</a>');
-        
-        var recBody = $('<div class="record" id="rec_'+id+'></div>').appendTo(recsBody);
+        var recBody = $('<div class="record" id="rec_'+id+'></div>');
         var aTitle = $('<a class="recTitle">'+title+'</a>').appendTo(recBody);
         aTitle.click(function(){
                         var clickedId = this.parentNode.id.split('_')[1];
@@ -71,7 +81,13 @@ function my_onshow(data)
             var detailBox = $('<div class="detail"></div>').appendTo(recBody);
             drawDetailedRec(detailBox);
         }
+
+        recsBody.append('<div class="resultNum">'+(currentPage*currentResultsPerPage+i+1)+'.</a>');
+        recsBody.append(recBody);
+
     }
+
+    drawPager(data.merged, data.total);    
 }
 
 /*
@@ -161,13 +177,14 @@ function my_onterm(data)
             for(var i = 0; i < data[key].length; i++){
                 if (key == "xtargets"){
                     var listItem = $('<a class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name+
-                                '<span> ('+data[key][i].freq+')</span></a>').appendTo(listEntries);
-                    listItem.click(function(){ 
-                        refine(this.name, this.attributes[0].nodeValue) });
+                                '<span> ('+data[key][i].freq+')</span></a>').click(function(){ 
+                                                                        refine(this.name, this.attributes[0].nodeValue) });
+                    listItem.appendTo(listEntries);
                 } else {
                     var listItem = $('<a class="sub" name="'+key+'">'+data[key][i].name+
-                                    '<span> ('+data[key][i].freq+')</span></a>').appendTo(listEntries);
-                    listItem.click(function(){ refine(this.name, this.firstChild.nodeValue) });
+                                    '<span> ('+data[key][i].freq+')</span></a>').click(function(){ 
+                                                                        refine(this.name, this.firstChild.nodeValue) });
+                    listItem.appendTo(listEntries);
                 }
             }         
         }
@@ -244,6 +261,60 @@ function refine(field, value)
         case "subject": query = ' and su="'+value+'"'; break;
         case "xtarget": filter = 'id='+value; break;
     }
-
+    
+    currentPage = 0;
     my_paz.search(currentQuery + query, currentResultsPerPage, currentSort, filter);    
 }
+
+function drawPager(max, hits)
+{
+    var firstOnPage = currentPage * currentResultsPerPage + 1;
+    var lastOnPage = (firstOnPage + currentResultsPerPage - 1) < max ? (firstOnPage + currentResultsPerPage - 1) : max;
+
+    var results = $('div.showing');
+    results.empty();
+    results.append('Displaying: <b>'+firstOnPage+'</b> to <b>'+lastOnPage+
+                            '</b> of <b>'+max+'</b>'); //(total hits: '+hits+')');
+    var pager = $('div.pages');
+    pager.empty();
+    
+    if ( currentPage > 0 ){
+        $('<a class="previous_active">Previous</a>').click(function() { my_paz.showPrev(1); currentPage--; }).appendTo(pager.eq(0));
+        $('<a class="previous_active">Previous</a>').click(function() { my_paz.showPrev(1); currentPage--; }).appendTo(pager.eq(1));
+    }
+    else
+        pager.append('<a class="previous_inactive">Previous</a>');
+
+    var numPages = Math.ceil(max / currentResultsPerPage);
+    
+    for(var i = 1; i <= numPages; i++)
+    {
+        if( i == (currentPage + 1) ){
+           $('<a class="select">'+i+'</a>').appendTo(pager);
+           continue;
+        }
+        var pageLink = $('<a class="page">'+i+'</a>');
+        var plClone = pageLink.clone();
+
+        pageLink.click(function() { 
+            my_paz.showPage(this.firstChild.nodeValue - 1);
+            currentPage = (this.firstChild.nodeValue - 1);
+            });
+
+        plClone.click(function() { 
+            my_paz.showPage(this.firstChild.nodeValue - 1);
+            currentPage = (this.firstChild.nodeValue - 1);
+            });
+
+        //nasty hack
+        pager.eq(0).append(pageLink);
+        pager.eq(1).append(plClone);
+    }
+
+    if ( currentPage < (numPages-1) ){
+        $('<a class="next_active">Next</a>').click(function() { my_paz.showNext(1); currentPage++; }).appendTo(pager.eq(0));
+        $('<a class="next_active">Next</a>').click(function() { my_paz.showNext(1); currentPage++; }).appendTo(pager.eq(1));
+    }
+    else
+        pager.append('<a class="next_inactive">Next</a>');
+}