Masterkey: detailed view working.

TODO: pager still missing.

diff --git a/www/masterkey/css/styles.css b/www/masterkey/css/styles.css
index 10d5a06..4e302c5 100755 (executable)
--- a/www/masterkey/css/styles.css
+++ b/www/masterkey/css/styles.css
@@ -11,7 +11,7 @@ font: 11px verdana, arial, sans-serif;
 div.container {
 position: relative;
 width: 980px;
-background-color: #ffffff;
+background-color: #f0f0f9;/* changed from #ffffff; */
 color: #002863;
 margin-left: auto;
 margin-right: auto;
@@ -46,7 +46,7 @@ position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
-border-bottom: 5px solid #f0f0f9; /*#335382;*/
+border-bottom: 3px solid #5272ab; /*change from #335382*/
 }
 
 #logo {
@@ -83,10 +83,11 @@ top: 14px;
 
 div.search {
 position: relative;
-top: 90px;
+border-top: 3px solid #9bb3e0; /*added*/
+top: 88px; /*change from 90 */
 left: 0px;
 width: 100%;
-height: 73px;
+height: 73px; /*change from 63 */
 background-color: #e1e5ec;
 color: #31568c;
 font-weight: bold;
@@ -116,13 +117,13 @@ margin-top: -1px;
 
 div.main {
 width: 100%;
-background-color: #ffffff;
-background-image: url(../gfx/background.gif);
-background-position: 0px 271px;
-background-repeat: repeat-y;
+background-color:#f0f0f9; /*changed from #ffffff;*/
+/*removed background-image: url(../gfx/background.gif);*/
+/*removed background-position: 0px 271px;*/
+/*removed background-repeat: repeat-y;*/
 color: #002863;
 position: relative;
-top: 108px;
+top: 105px; /*change from 108*/
 left: 0px;
 }
 
@@ -132,25 +133,28 @@ clear: both;
 
 div.leftbar {
 float: left;
+background-color: #e1e5ec; /*added*/
 width: 209px;
 height: 100%;
 margin-bottom: 10px;
 margin-right: 17px;
+padding-bottom: 20px; /*added*/
 color: #000000;
 }
 
 div.head {
 padding: 0px;
 width: 100%;
-height: 55px;
+height: 25px;
 background-color: #c1cbd9;
 font-size: 10px;
-margin-bottom: 8px;
+margin-bottom: 3px;
+color: #002863;
 }
 
 div.margin {
 padding-left: 13px;
-padding-top: 10px;
+padding-top: 5px;
 padding-right: 13px;
 }
 
@@ -177,6 +181,7 @@ line-height: 15px;
 }
 
 a {
+cursor: pointer;
 color: #5d82b7;
 text-decoration: none;
 }
@@ -193,22 +198,33 @@ div.clear {
 clear: both;
 }
 
-a.result {
+div.resultNum {
 width: 44px;
 float: left;
 line-height: 20px;
-margin-bottom: 5px;
+margin-bottom: 10px;
 text-indent: 10px;
+font-size: 10px;
+font-weight: bold;
 clear: both;
 }
 
 div.record {
+font-size: 12px;
 float: left;
 width: 675px;
-margin-bottom: 5px;
+margin-bottom: 10px;
 line-height: 20px;
 }
 
+div.record a.recTitle{
+font-weight: bold;    
+}
+
+div.record a.recAuthor{
+font-style: italic;
+}
+
 a.close {
 float: left;
 padding: 5px;
@@ -235,19 +251,22 @@ border: 1px solid #aec0db;
 }
 
 div.detail {
+border-top: 1px solid #aec0db;
+border-bottom: 1px solid #aec0db;
 padding: 5px 5px 5px 10px;
-border: 1px solid #aec0db;
-border-top: 0px;
-margin-left: 44px;
-margin-bottom: 5px;
-width: 675px;
+background-color: #e1e5ec;
+/*removed border: 1px solid #aec0db;*/
+/*removed border-top: 0px;*/
+/*removed margin-left: 44px;*/
+/*removed margin-bottom: 5px;*/
+width: 475px;
 float: left;
 clear: left;
 }
 
 div.results {
 float: left;
-color: #000000;
+color: #002863;
 background-color: #e1e5ec;
 padding-left: 10px;
 padding-right: 20px;
@@ -382,7 +401,7 @@ color: #63b05d;
 font-weight: bold;
 }
 
-div.leftbar hr {
+hr { /*removed div.leftbar*/
 border: 0px;
 border-bottom: 1px solid #c5cedc;
 height: 1px;
@@ -390,9 +409,11 @@ line-height: 8px;
 }
 
 div.trailer {
-background-color: #ffffff;
+border-top: 1px solid #e1e5ec;
+border-bottom: 2px solid #f4f4f9;
+background-color: #f6f6f9; /* #ffffff;*/
 width: 100%;
-height: 37px;
-padding-top: 3px;
+height: 24px; /*change from 37*/
+padding-top: 4px;
 text-indent: 227px;
 }

diff --git a/www/masterkey/index.html b/www/masterkey/index.html
index d04da05..b3ffb79 100755 (executable)
--- a/www/masterkey/index.html
+++ b/www/masterkey/index.html
@@ -13,19 +13,18 @@
       <div class="topbar">
         <a href="/"><img id="logo" src="gfx/logo.gif" width="206" height="37" alt="MasterKey Power Search" /></a>
         <div class="topmenu">
-          <a href="index.html" class="topselect">FRONT PAGE</a>
+          <a href="index.html" class="topselect">CONTACT</a>
           <a href="about.html" class="topmenu">ABOUT</a>
           <a href="help.html" class="topmenu">HELP</a>
         </div>
-      <div class="bluebox"></div>
+      <!--<div class="bluebox"></div>-->
       </div>
       <div class="search">  
-        <span>ENTER SEARCH TERM:</span>
       <form method="post" action="index.html" name="search">
         <div>
           <input type="text" name="query" class="search" tabindex="1" maxlength="255" value="" />
           <input type="image" src="gfx/button.gif" class="button" />
-          <a href="#">Advanced search</a>
+          <a >Advanced search</a>
         </div>
       </form>
       </div>
@@ -33,8 +32,7 @@
         <div class="leftbar" style="display: none">
           <div class="head">
             <div class="margin">
-              <h2>Limit search results</h2>
-              Narrow your search by using the keywords below:<br />
+              <h2>Limit your search by:</h2>
             </div>
           </div>
           <div class="margin">
@@ -48,14 +46,14 @@
               <option value="relevance">Relevance</option>
               <option value="title">Title</option>
             </select>
-            <div class="showing"></div>
-            <div class="pages"></div>
+            <div class="showing">&nbsp;</div>
+            <div class="pages">&nbsp;</div>
           </div>
             <br />
             <br />
           <div class="records"></div>
           <div class="bottom">
-            <div class="pages"></div>
+            <div class="pages">&nbsp;</div>
           </div>
         </div>
         <div class="clear"></div>

diff --git a/www/masterkey/js/client.js b/www/masterkey/js/client.js
index 4ed2e30..ea589da 100644 (file)
--- a/www/masterkey/js/client.js
+++ b/www/masterkey/js/client.js
@@ -14,7 +14,9 @@ var my_paz = new pz2( { "onshow": my_onshow,
 var currentSort = 'relevance';
 var currentResultsPerPage = 20;
 var currentQuery = null;
-var currentDetailed = null;
+
+var currentDetailedId = null;
+var currentDetailedData = null;
 
 var termStartup = true;    //some things should be done only once
 
@@ -44,14 +46,31 @@ function my_onshow(data)
         var id = data.hits[i].recid;
         var count = data.hits[i].count || 1;
         
-        recsBody.append('<a href="#" class="result">'+(i+1)+'.</a>\n');
+        recsBody.append('<div class="resultNum">'+(i+1)+'.</a>');
         
         var recBody = $('<div class="record" id="rec_'+id+'></div>').appendTo(recsBody);
-        recBody.append('<a href="#">'+title+'</a>\n');
-
+        var aTitle = $('<a class="recTitle">'+title+'</a>').appendTo(recBody);
+        aTitle.click(function(){
+                        var clickedId = this.parentNode.id.split('_')[1];
+                        if(currentDetailedId == clickedId){
+                            $(this.parentNode.lastChild).remove();
+                            currentDetailedId = null;
+                            return;
+                        } else if (currentDetailedId != null) {
+                            $('#rec_'+currentDetailedId).children('.detail').remove();
+                        }
+                        currentDetailedId = clickedId;
+                        my_paz.record(currentDetailedId);
+                        });
+        
         if( author )
             recBody.append('<i> by </i>');
-            $('<a href="#" name="author">'+author+'</a>\n').click(function(){ refine(this.name, this.firstChild.nodeValue) }).appendTo(recBody);
+            $('<a name="author" class="recAuthor">'+author+'</a>\n').click(function(){ refine(this.name, this.firstChild.nodeValue) }).appendTo(recBody);
+
+        if( currentDetailedId == id ){
+            var detailBox = $('<div class="detail"></div>').appendTo(recBody);
+            drawDetailedRec(detailBox);
+        }
     }
 }
 
@@ -87,9 +106,7 @@ function my_onstat(data)
 
 function my_onterm(data)
 {
-    global = data;
     var termLists = $("#termlists");
-    //termLists.empty()
 
     if(termStartup)
     {
@@ -101,7 +118,7 @@ function my_onterm(data)
                 listName = "institution";
 
             var termList = $('<div class="termlist" id="term_'+key+'"/>').appendTo(termLists);
-            var termTitle = $('<div class="termTitle"><a href="#" class="unselected">'+listName+'</a></div>').appendTo(termList);
+            var termTitle = $('<div class="termTitle"><a class="unselected">'+listName+'</a></div>').appendTo(termList);
             termTitle.click(function(){
                                 if( this.firstChild.className == "selected" ){
                                     this.firstChild.className = "unselected";
@@ -119,12 +136,12 @@ function my_onterm(data)
             for(var i = 0; i < data[key].length; i++)
             {
                 if (key == "xtargets"){
-                    var listItem = $('<a href="#" class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name+
+                    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) });
                 } else {
-                    var listItem = $('<a href="#" class="sub" name="'+key+'">'+data[key][i].name+
+                    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) });
                 }
@@ -143,12 +160,12 @@ function my_onterm(data)
 
             for(var i = 0; i < data[key].length; i++){
                 if (key == "xtargets"){
-                    var listItem = $('<a href="#" class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name+
+                    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) });
                 } else {
-                    var listItem = $('<a href="#" class="sub" name="'+key+'">'+data[key][i].name+
+                    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) });
                 }
@@ -157,22 +174,10 @@ function my_onterm(data)
     }
 }
 
-/*
-    var termlist = document.getElementById("termlist");
-    termlist.innerHTML = "";
-    termlist.innerHTML  += "<div><b> --Author-- </b></div>";
-    for ( i = 0; i < data.author.length; i++ ) {
-        termlist.innerHTML += '<div><span>' + data.author[i].name + ' </span><span> (' + data.author[i].freq + ')</span></div>';
-    }
-    termlist.innerHTML += "<hr/>";
-    termlist.innerHTML += "<div><b> --Subject-- </b></div>";
-    for ( i = 0; i < data.subject.length; i++ ) {
-        termlist.innerHTML += '<div><span>' + data.subject[i].name + ' </span><span> (' + data.subject[i].freq + ')</span></div>';
-    }
-*/
-
 function my_onrecord(data)
 {
+    currentDetailedData = data;
+    drawDetailedRec();
     /*
     details = data;
     recordDiv = document.getElementById(data.recid);
@@ -185,6 +190,32 @@ function my_onrecord(data)
 
 }
 
+function drawDetailedRec(detailBox)
+{
+    if( detailBox == undefined )
+        detailBox = $('<div class="detail"></div>').appendTo($('#rec_'+currentDetailedId));
+    
+    detailBox.append('Details:<hr/>');
+    var detailTable = $('<table></table>');
+    var recDate = currentDetailedData["md-date"];
+    var recSubject = currentDetailedData["md-subject"];
+    var recLocation = currentDetailedData["location"];
+
+    if( recDate )
+        detailTable.append('<tr><td class="item">Published:</td><td>'+recDate+'</td></tr>');
+    if( recSubject )
+        detailTable.append('<tr><td class="item">Subject:</td><td>'+recSubject+'</td></tr>');
+    if( recLocation )
+        detailTable.append('<tr><td class="item">Available at:</td><td>&nbsp;</td></tr>');
+
+    for(var i=0; i < recLocation.length; i++)
+    {
+        detailTable.append('<tr><td class="item">&nbsp;</td><td>'+recLocation[i].name+'</td></tr>');
+    }
+
+    detailTable.appendTo(detailBox);
+}
+
 function my_onbytarget(data)
 {
     /*