From 773f4e14ac669452dae28bb411384fce2c18e06a Mon Sep 17 00:00:00 2001
From: Jakub Skoczen <jakub@indexdata.dk>
Date: Fri, 30 Mar 2007 16:22:41 +0000
Subject: [PATCH] Breadcrumb like navigation added.

---
 www/masterkey/css/styles.css |   22 ++++++++-
 www/masterkey/index.html     |    3 +-
 www/masterkey/js/client.js   |  105 +++++++++++++++++++++++++++++-------------
 3 files changed, 94 insertions(+), 36 deletions(-)

diff --git a/www/masterkey/css/styles.css b/www/masterkey/css/styles.css
index 2dad81a..19391db 100755
--- a/www/masterkey/css/styles.css
+++ b/www/masterkey/css/styles.css
@@ -24,7 +24,7 @@ border: none;
 
 strong {
 color: #31568c;
-font-weight: bold;
+font-weight: 600;
 }
 
 h2 {
@@ -309,6 +309,24 @@ height: 28px;
 line-height: 28px;
 }
 
+div#breadcrumb {
+border-bottom: 1px solid #e1e5ec;
+float: left;
+background-color: #f6f6f9;
+padding-left: 0px;
+padding-right: 0px;
+margin-bottom: 10px;
+height: 28px;
+width: inherit;
+line-height: 28px;
+}
+
+div#breadcrumb span{
+margin-right: 2px;
+margin-left: 5px;
+}
+
+
 table {
 padding: 0px;
 margin: 0px;
@@ -419,7 +437,7 @@ line-height: 13px;
 }
 
 a.sub {
-text-indent: 15px;
+text-indent: -10px;
 font-size: 10px;
 line-height: 13px;
 }
diff --git a/www/masterkey/index.html b/www/masterkey/index.html
index 80eeec6..9258862 100755
--- a/www/masterkey/index.html
+++ b/www/masterkey/index.html
@@ -59,7 +59,7 @@
             Sort by&nbsp;
             <select name="sort" id="sort">
               <option value="relevance" selected="true">relevance</option>
-              <option value="title">title</option>
+              <option value="title:1">title</option>
             </select>
             &nbsp;and show&nbsp;
             <select name="perpage" id="perpage">
@@ -72,6 +72,7 @@
           </div>
             <div class="showing">&nbsp;</div></div></div>
             <div class="bottom"><div class="pages">&nbsp;</div></div>
+            <div id="breadcrumb"></div>
             <br />
             <br />
           <div class="records"></div>
diff --git a/www/masterkey/js/client.js b/www/masterkey/js/client.js
index 39a687f..daf99cc 100644
--- a/www/masterkey/js/client.js
+++ b/www/masterkey/js/client.js
@@ -1,5 +1,5 @@
 /*
-** $Id: client.js,v 1.6 2007-03-29 09:11:01 jakub Exp $
+** $Id: client.js,v 1.7 2007-03-30 16:22:41 jakub Exp $
 ** MasterKey - pazpar2's javascript client .
 */
 
@@ -8,7 +8,7 @@ var my_paz = new pz2( { "onshow": my_onshow,
                     //"showtime": 1000,
                     //"onstat": my_onstat,
                     "onterm": my_onterm,
-                    "termlist": "subject,author,xtargets,date",
+                    "termlist": "xtargets,subject,author,date",
                     //"onbytarget": my_onbytarget,
                     "onrecord": my_onrecord } );
 
@@ -16,7 +16,9 @@ var my_paz = new pz2( { "onshow": my_onshow,
 var currentSort = 'relevance';
 var currentResultsPerPage = 20;
 var currentQuery = null;
+var currentQueryArr = new Array();
 var currentPage = 0;
+var currentFilter = undefined;
 
 var currentDetailedId = null;
 var currentDetailedData = null;
@@ -53,7 +55,8 @@ $(document).ready( function() {
 function onFormSubmitEventHandler() {
     if(!loadQueryFromForm())
         return false;
-    my_paz.search(currentQuery, currentResultsPerPage, currentSort);
+    fireSearch();
+    drawBreadcrumb();
     $('div.content').show();
     $("div.leftbar").show();
     return false;
@@ -133,11 +136,15 @@ function my_onterm(data)
             if (key == "activeclients")
                 continue;
             var listName = key;
-            if (key == "xtargets")
+            var listClass = "unselected";
+
+            if (key == "xtargets"){
                 listName = "resource";
+                listClass = "selected";
+            }
 
             var termList = $('<div class="termlist" id="term_'+key+'"/>').appendTo(termLists);
-            var termTitle = $('<div class="termTitle"><a class="unselected">'+listName+'</a></div>').appendTo(termList);
+            var termTitle = $('<div class="termTitle"><a class="'+listClass+'">'+listName+'</a></div>').appendTo(termList);
             termTitle.click(function(){
                                 if( this.firstChild.className == "selected" ){
                                     this.firstChild.className = "unselected";
@@ -149,20 +156,22 @@ function my_onterm(data)
                             });
 
             listEntries = $('<div class="termEntries"></div>');
-            listEntries.hide();
+            if (key != "xtargets") listEntries.hide();
             listEntries.appendTo(termList);
 
             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);
+                    var listItem = $('<a class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name
+                            /*+'<span> ('+data[key][i].freq+')</span>'*/+'</a>');
                     listItem.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);
+                    var listItem = $('<a class="sub" name="'+key+'">'+data[key][i].name
+                            /*+'<span> ('+data[key][i].freq+')</span>'*/+'</a>');
                     listItem.click(function(){ refine(this.name, this.firstChild.nodeValue) });
+                    listItem.appendTo(listEntries);
                 }
             }        
             $('<hr/>').appendTo(termLists);
@@ -179,13 +188,13 @@ 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>').click(function(){ 
+                    var listItem = $('<a class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name
+                                /*+'<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>').click(function(){ 
+                    var listItem = $('<a class="sub" name="'+key+'">'+data[key][i].name
+                                /*+'<span> ('+data[key][i].freq+')</span>'*/+'</a>').click(function(){ 
                                                                         refine(this.name, this.firstChild.nodeValue) });
                     listItem.appendTo(listEntries);
                 }
@@ -213,6 +222,14 @@ function my_onbytarget(data){}
 ** HELPER FUNCTIONS *************************************************************
 *********************************************************************************
 */
+function fireSearch()
+{
+    my_paz.search(currentQuery, currentResultsPerPage, currentSort, currentFilter);    
+    $('div.records').empty();
+    // hack for the time being
+    currentFilter = undefined;
+}
+
 function toggleAdvanced()
 {
     if(advancedOn){
@@ -257,48 +274,51 @@ function drawDetailedRec(detailBox)
 function refine(field, value)
 {
     // for the time being
-    if(!advancedOn)
-        toggleAdvanced();
+    //if(!advancedOn)
+    //    toggleAdvanced();
 
-    var query = '';
-    var filter = undefined;
-    
     switch(field) {
-        case "author":  query = ' and au="'+value+'"';
+        case "author":  currentQueryArr.push('au="'+value+'"');
                         if(document.search.author.value != '') document.search.author.value+='; ';
                         document.search.author.value += value; break;
 
-        case "title":   query = ' and ti="'+value+'"';
+        case "title":   currentQueryArr.push('ti="'+value+'"');
                         //if(document.search.tile.value != '') document.search.title.value+='; ';
                         //document.search.title.value += value; break;
         
-        case "date":    query = ' and date="'+value+'"';
+        case "date":    currentQueryArr.push('date="'+value+'"');
                         if(document.search.date.value != '') document.search.date.value+='; ';
                         document.search.date.value += value; break;
         
-        case "subject": query = ' and su="'+value+'"';
+        case "subject": currentQueryArr.push('su="'+value+'"');
                         if(document.search.subject.value != '') document.search.subject.value+='; ';
                         document.search.subject.value += value; break;
         
-        case "xtarget": filter = 'id='+value; break;
+        case "xtarget": currentFilter = 'id='+value; break;
     }
 
     currentPage = 0;
-    currentQuery = currentQuery + query;
-    my_paz.search(currentQuery, currentResultsPerPage, currentSort, filter);    
+    currentQuery = currentQueryArr.join(' and ');
+    drawBreadcrumb();
+    fireSearch();
 }
 
 function loadQueryFromForm()
 {
-    var query = new Array();
+    query = new Array();
+    if( document.search.query.value !== '' ) query.push(document.search.query.value);
 
-    if( document.search.query.value !== '' ) query.push(document.search.query.value);    
-    if( document.search.author.value !== '' ) query.push(parseField(document.search.author.value, 'au'));
-    if( document.search.title.value !== '' ) query.push(parseField(document.search.title.value, 'ti'));
-    if( document.search.date.value !== '' ) query.push(parseField(document.search.date.value, 'date'));
-    if( document.search.subject.value !== '' ) query.push(parseField(document.search.subject.value, 'su'));
+    if( advancedOn )
+    {
+        var input;
+        if( (input = parseField(document.search.author.value, 'au')).length ) query = query.concat(input);
+        if( (input = parseField(document.search.title.value, 'ti')).length ) query = query.concat(input);
+        if( (input = parseField(document.search.date.value, 'date')).length ) query = query.concat(input);
+        if( (input = parseField(document.search.subject.value, 'su')).length ) query = query.concat(input);
+    }
 
     if( query.length ) {
+        currentQueryArr = query;
         currentQuery = query.join(" and ");
         return true;
     } else {
@@ -316,7 +336,11 @@ function parseField(inputString, field)
         }
         outputArr.push(field+'="'+inputArr[i]+'"');
     }
-    return outputArr.join(" and ");
+    //if( outputArr.length ){
+        return outputArr;//.join(" and ");
+    //}else {
+    //    return false;
+    //}
 }
 
 function drawPager(max, hits)
@@ -371,3 +395,18 @@ function drawPager(max, hits)
     else
         pager.append('<a class="next_inactive">Next</a>');
 }
+
+function drawBreadcrumb()
+{
+    var bc = $("#breadcrumb");
+    bc.empty();
+    bc.append('<span>'+currentQueryArr[0]+'</span>');
+
+    for(var i = 1; i < currentQueryArr.length; i++){
+        bc.append('<strong>/</strong>');
+        var bcLink = $('<a id="pos_'+i+'">'+
+                currentQueryArr[i].substring(currentQueryArr[i].indexOf('"') + 1, currentQueryArr[i].lastIndexOf('"'))
+                +'</a>').click(function() { currentQueryArr.splice(this.id.split('_')[1], 1);refine(); });
+        bc.append(bcLink);
+    }
+}
-- 
1.7.10.4