X-Git-Url: http://git.indexdata.com/?p=mkws-moved-to-github.git;a=blobdiff_plain;f=examples%2Fhtdocs%2Fmkws-widget-credo.js;h=0d8c3e68b85ef37c06acec3cc2e12d2183f8c82b;hp=7ea016989edd292c454d8fe45268f2bcdba62610;hb=3d35befefa145afe2f3fd5a43c9771278ed94b0a;hpb=5c595265e53d5c4c2b48ae7ff2ed5124c665a7ce

diff --git a/examples/htdocs/mkws-widget-credo.js b/examples/htdocs/mkws-widget-credo.js
index 7ea0169..0d8c3e6 100644
--- a/examples/htdocs/mkws-widget-credo.js
+++ b/examples/htdocs/mkws-widget-credo.js
@@ -1,51 +1,113 @@
-mkws.registerWidgetType('Credo', function() {
-  s = []
-  s.push('<table>');
+// The Google Images database returns links like:
+//      http://images.google.com/url?q=http://eofdreams.com/fish.html&sa=U&ei=RAB-U9XNDo2Dqga1o4L4Bw&ved=0CC4Q9QEwAA&usg=AFQjCNFhRtn6GMevHbpITZ6kfx6rsHV2ow
+// This Handlebars helper avoids a pointless redirect by transforming
+// this to the URL of the underling page, in this case
+//      http://eofdreams.com/fish.html
+//
+Handlebars.registerHelper('mkws-googleurl', function(obj) {
+  if (!obj) {
+    return "obj undefined";
+  } else if (!obj[0]) {
+    return "obj[0] undefined, JSON=" + $.toJSON(obj);
+  } else {
+    return mkws.getParameterByName('q', obj[0]);
+  }
+});
 
-  // Main panel: encylopaedia and images on the left, topics on the right
-  s.push('<tr>');
 
-  s.push('<td class="main">');
+// ### This works inefficiently by having multiple teams all run the
+// same search against different sets of targets. A much better
+// approach would be run a single search, with all these panels
+// members of the same team, but picking out only the results relevant
+// to them. That will be more work.
 
-  s.push('<div class="encyclopaedia">');
-  s.push('<div class="title">Topic Page: ### title</div>');
-  s.push(this.subwidget('Reference'));
-  s.push('</div>');
+mkws.registerWidgetType('Credo', function() {
+  var that = this;
 
-  s.push('<div class="images">');
-  s.push('<div class="title">Images</div>');
-  s.push(this.subwidget('Images', { /* ### config */ } ));
-  s.push('</div>');
+  this.team.registerTemplate('CredoImage', '\
+      <div>\
+       <a href="{{mkws-googleurl md-electronic-url}}" target="_blank">\
+        {{#mkws-first md-thumburl}}\
+	  <img src="{{this}}" alt="{{../md-title}}"/>\
+        {{/mkws-first}}\
+	<br/>\
+       </a>\
+       <p>{{{md-title}}}</p>\
+      </div>\
+');
 
-  s.push('</td>');
+  // Inhibit the display of the sole facet's title.
+  this.team.registerTemplate('facetTitle-Subject', 'doo');
 
-  s.push('<td class="side">');
+  var s = []
+  s.push('<table>');
 
-  s.push('<div class="mindmap">');
-  s.push('<div class="title">Create a Mind Map for ### title</div>');
-  // ### Is there a way to make a mind-map?
-  s.push('</div>');
+  // Main panel: encylopaedia and images on the left, topics on the right
+  s.push('<tr class="front">');
 
-  s.push('<div class="topics">');
-  s.push('<div class="title">Related Topics</div>');
-  s.push(this.subwidget('Facet', { facet: 'subject' }));
-  s.push('</div>');
+  s.push('<td class="main">');
+  s.push(section('encyclopaedia', 'Topic Page: <span class="x-mkws-title"/>',
+                 this.subwidget('Reference', { _team: 'ref', paragraphs: 1 })));
+  // The Images widget needs to be in our team so we can set its template
+  s.push(section('image', 'Images',
+                 this.subwidget('GoogleImage', { maxrecs: 3, template: 'CredoImage', target: 'google_images_js' })));
+  s.push('</td>');
 
+  s.push('<td class="side">');
+  s.push(section('topics', 'Related Topics',
+                 this.subwidget('Facet', { _team: 'main', facet: 'subject', template: 'CredoFacet' })));
   s.push('</td>');
 
   s.push('</tr>');
 
-  s.push('<tr>');
-  s.push('</td>');
-  s.push('<div class="entries">');
-  s.push('<div class="title">Credo Entries</div>');
-  s.push(this.subwidget('Records', { /* ### config */ }));
-  s.push('</div>');
-  s.push('</td>');
-  s.push('</tr>');
+  s.push('<tr><td colspan="2"><hr class="divider"/></td></tr>');
+
+  s.push(sectionRow('entries', 'News',
+                    this.subwidget('Records', { _team: 'news', targetfilter: 'categories=news', perpage: 10 })));
+  s.push(sectionRow('articles', 'Articles',
+                    this.subwidget('Records', { _team: 'articles', targetfilter: 'categories=articles', perpage: 10 })));
+  s.push(sectionRow('books', 'Books',
+                    this.subwidget('Records', { _team: 'books', targetfilter: 'categories=books', perpage: 10 })));
+  s.push(sectionRow('news', 'Results from all targets',
+                    this.subwidget('Records', { _team: 'main' })));
 
-  // More TRs for Articles, Books, News, Suggested Resources
   s.push('</table>');
 
   this.node.html(s.join(''));
+
+  // Fill in the titles from the query once widgets have all been prepared
+  var that = this;
+  this.team.queue("ready").subscribe(function() {
+    var query = toTitleCase(that.config.query);
+    that.log("got query '" + query + "' from team config");
+    mkws.$('.x-mkws-title').html(query);
+    mkws.$('title').html("MKWS: " + query);
+
+    // Derived from http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript
+    function toTitleCase(str) {
+      return str.replace(/\w\S*/g, function(txt) {
+        return txt.charAt(0).toUpperCase() + txt.substr(1);
+      });
+    }
+  });
+
+
+  function section(xclass, title, content) {
+    var s = [];
+    s.push('<div class="' + xclass + ' section">');
+    s.push('<div class="title">' + title + '</div>');
+    s.push('<div class="content">' + content + '</div>');
+    s.push('</div>');
+    return s.join('');
+  }
+
+  function sectionRow(xclass, title, content) {
+    var s = [];
+    s.push('<tr>');
+    s.push('<td colspan="2">');
+    s.push(section(xclass, title, content));
+    s.push('</td>');
+    s.push('</tr>');
+    return s.join('');
+  }
 });