From: Jason Skomorowski <jason@indexdata.com>
Date: Sun, 28 Nov 2010 05:03:22 +0000 (+0100)
Subject: Fix dropdowns, start improving markup.
X-Git-Url: http://jsfdemo.indexdata.com/cgi-bin?a=commitdiff_plain;h=368440f16fce179517479e3eed656aa5f5520dcb;p=mkdru-moved-to-drupal.org.git

Fix dropdowns, start improving markup.
---

diff --git a/mkdru-page.css b/mkdru-page.css
new file mode 100644
index 0000000..17ac6db
--- /dev/null
+++ b/mkdru-page.css
@@ -0,0 +1,29 @@
+.mkdru-results ul {
+  margin: 0;
+  padding: 0;
+}
+
+.mkdru-results ul li {
+  list-style-type: none;
+  list-style-image: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mkdru-above-below {
+  border-style: solid none;
+  border-width: 1px;
+}
+
+.mkdru-post-search { 
+  display: none;
+}
+
+.mkdru-search {
+  text-align:center;
+}
+
+.mkdru-search input[type='text'] {
+  width: 80%;
+}
diff --git a/mkdru-page.tpl.php b/mkdru-page.tpl.php
index 23e0630..34d836b 100644
--- a/mkdru-page.tpl.php
+++ b/mkdru-page.tpl.php
@@ -1,45 +1,31 @@
-  <div id="mkdru">
-   <table width="100%" border="0" cellpadding="6" cellspacing="0">
-    <tr>
-     <td width="250" height="100" align="center"><b>PAZPAR2</b></td>
-     <td>
-      <form class="mkdru-search">
-       <input type="text" size="50"/>
-       <input type="submit" value="Search"/>
-      </form>
-     </td>
-     <td>
-      <a href="http://www.indexdata.com"><img border="0" title="IndexData home page" src="id.gif" align="right" alt="" /></a>
-     </td>
-    </tr>
-   </table>
-
+<div class="mkdru">
+  <form class="mkdru-search">
+    <input type="text" size="50"/>
+    <input type="submit" value="Search"/>
+  </form>
+  <div class="mkdru-dropdowns">
+    <form>
+      Sort by
+      <select id="mkdru-sort">
+        <option value="relevance" selected="selected">relevance</option>
+        <option value="title:1">title</option>
+        <option value="date:0">newest</option>
+        <option value="date:1">oldest</option>
+      </select>
+      and show 
+      <select id="mkdru-perpage">
+        <option value="10">10</option>
+        <option value="20" selected="selected">20</option>
+        <option value="30">30</option>
+        <option value="50">50</option>
+      </select>
+      per page.
+    </form>
   </div>
-
-  <div id="recordview">
-
-      <div id="ranking">
-
-       <form>
-        Sort by
-        <select id="mkdru-sort">
-         <option value="relevance" selected="selected">relevance</option>
-         <option value="title:1">title</option>
-         <option value="date:0">newest</option>
-         <option value="date:1">oldest</option>
-
-        </select>
-        and show 
-        <select id="mkdru-perpage">
-         <option value="10">10</option>
-         <option value="20" selected="selected">20</option>
-         <option value="30">30</option>
-         <option value="50">50</option>
-        </select>
-        per page.
-       </form>
-      </div>
-      <div id="mkdru-pager"></div>
-      <div id="mkdru-navi"></div>
-      <div id="mkdru-results"></div>
+  <div class="mkdru-post-search">
+    <div class="mkdru-above mkdru-above-below"><span class="mkdru-pager"></span><span class="mkdru-counts"></span></div>
+    <div id="mkdru-navi"></div>
+    <ul id="mkdru-results"></ul>
+    <div class="mkdru-below mkdru-above-below"><span class="mkdru-pager"></span></div>
   </div>
+</div>
diff --git a/mkdru.client.js b/mkdru.client.js
index 2cf70cb..6ee3163 100644
--- a/mkdru.client.js
+++ b/mkdru.client.js
@@ -27,11 +27,17 @@ mkdru.pz2Init = function () {
 
 mkdru.pz2Show = function (data) {
   mkdru.totalRec = data.merged;
-  $('#mkdru-pager').html(Drupal.theme('mkdruPager', data, mkdru.curPage,
-                                      Math.ceil(mkdru.totalRec / mkdru.recPerPage)));
+
+  var pagerHtml = Drupal.theme('mkdruPager', data, mkdru.curPage,
+                                      Math.ceil(mkdru.totalRec / mkdru.recPerPage));
+  $('.mkdru-pager').html(pagerHtml);
   $('.mkdru-next').bind('click', mkdru.nextPage);
   $('.mkdru-prev').bind('click', mkdru.prevPage);
 
+  var countsHtml = 'Displaying: ' + (data.start + 1) + ' to '
+    + (data.start + data.num) + ' of ' + data.merged + ' (found: ' + data.total + ')';
+  $('.mkdru-counts').html(countsHtml);
+
   var html = "";
   for (var i = 0; i < data.hits.length; i++) {
     html += Drupal.theme('mkdruResult', data.hits[i], 
@@ -90,10 +96,11 @@ mkdru.pz2ByTarget = function (data) {
 
 // UI functions:
 mkdru.submitQuery = function () {
-  mkdru.submitted = true;
   mkdru.resetPage();
-//   mkdru.pollDropDowns();
+  mkdru.pollDropDowns();
   mkdru.search();
+  mkdru.submitted = true;
+  $('.mkdru-post-search').show();
   return false;
 };
 
@@ -103,11 +110,12 @@ mkdru.search = function () {
 };
 
 mkdru.pollDropDowns = function () {
-  mkdru.recPerPage = $('#mkdru-perpage').value;
-  mkdru.curSort = $('#mkdru-sort').value;
+  mkdru.recPerPage = $('#mkdru-perpage').attr('value');
+  mkdru.curSort = $('#mkdru-sort').attr('value');
   if (!mkdru.submitted) return false;
-//   mkdru.resetPage();
-//   mkdru.pz2.show(0, mkdru.recPerPage, mkdru.curSort);
+  mkdru.resetPage();
+  mkdru.pz2.show(0, mkdru.recPerPage, mkdru.curSort);
+  return false;
 };
 
 mkdru.limitQuery = function (field, value) {
@@ -125,7 +133,7 @@ mkdru.limitTarget = function (id, name) {
   navi.innerHTML += '<hr/>';
   mkdru.curFilter = 'pz:id=' + id;
   mkdru.resetPage();
-//   mkdru.pollDropDowns();
+  mkdru.pollDropDowns();
   mkdru.search();
   return false;
 };
diff --git a/mkdru.module b/mkdru.module
index 8158bb0..1644223 100644
--- a/mkdru.module
+++ b/mkdru.module
@@ -63,6 +63,17 @@ function mkdru_menu() {
   return $items;
 }
 
+/**
+* Implementation of hook_init()
+*/
+function mkdru_init(){
+  // Applies our module specific CSS to all pages. This works best because
+  // all CSS is aggregated and cached so we reduce the number of HTTP 
+  // requests and the size is negligible.
+  drupal_add_css(drupal_get_path('module', 'mkdru') .'/mkdru-page.css');
+}
+
+
 
 // Node config
 /**
diff --git a/mkdru.theme.js b/mkdru.theme.js
index 2183e1c..df09df4 100644
--- a/mkdru.theme.js
+++ b/mkdru.theme.js
@@ -1,6 +1,6 @@
 Drupal.theme.prototype.mkdruResult = function(hit, num) {
   var html = [];
-  html.push('<div class="record" id="recdiv_' + hit.recid + '" >'
+  html.push('<li class="record" id="recdiv_' + hit.recid + '" >'
       + '<span>' + num + '. </span>'
       + '<a href="#" id="rec_' + hit.recid
       + '"><b>' 
@@ -11,16 +11,11 @@ Drupal.theme.prototype.mkdruResult = function(hit, num) {
   if (hit["md-title-responsibility"] !== undefined) {
     html.push('<span><i>'+hit["md-title-responsibility"]+'</i></span>');
   }
-  html.push('</div>');
+  html.push('</li>');
   return (html.join(''));
 };
 
 Drupal.theme.prototype.mkdruPager = function (data, curPage, pages) {
-    var caption = '<hr/><div style="float: right">Displaying: ' 
-                    + (data.start + 1) + ' to ' + (data.start + data.num) +
-                     ' of ' + data.merged + ' (found: ' 
-                     + data.total + ')</div>';
-
     var onsides = 6;
 
     var firstClkbl = ( curPage - onsides > 0 ) 
@@ -46,9 +41,9 @@ Drupal.theme.prototype.mkdruPager = function (data, curPage, pages) {
             + numLabel + ' </a>';
     }
 
-    var next = '<b> | </b><span id="next">Next &#62;&#62;</span>';
+    var next = ' | <span id="next">Next &#62;&#62;</span>';
     if (pages - curPage > 0)
-    var next = '<b> | </b><a href="#" class="mkdru-next">'
+    var next = ' | <a href="#" class="mkdru-next">'
         +'Next &#62;&#62;</a>';
 
     predots = '';
@@ -59,8 +54,7 @@ Drupal.theme.prototype.mkdruPager = function (data, curPage, pages) {
     if (lastClkbl < pages)
         postdots = '...';
 
-    return ('<div style="float: clear">' +
-        caption + prev + predots + middle + postdots + next + '</div><hr/>');
+    return (prev + predots + middle + postdots + next);
 };
 
 Drupal.theme.prototype.mkdruTerm = function (term, freq, linkClass, id) {