examples/htdocs/mkws-widget-credo.js

   1 // The Google Images database returns links like:
   2 //      http://images.google.com/url?q=http://eofdreams.com/fish.html&sa=U&ei=RAB-U9XNDo2Dqga1o4L4Bw&ved=0CC4Q9QEwAA&usg=AFQjCNFhRtn6GMevHbpITZ6kfx6rsHV2ow
   3 // This Handlebars helper avoids a pointless redirect by transforming
   4 // this to the URL of the underling page, in this case
   5 //      http://eofdreams.com/fish.html
   6 //
   7 Handlebars.registerHelper('mkws-googleurl', function(obj) {
   8   return mkws.getParameterByName('q', obj[0]);
   9 });
  10
  11
  12 // ### This works inefficiently by having multiple teams all run the
  13 // same search against different sets of targets. A much better
  14 // approach would be run a single search, with all these panels
  15 // members of the same team, but picking out only the results relevant
  16 // to them. That will be more work.
  17
  18 mkws.registerWidgetType('Credo', function() {
  19   var that = this;
  20
  21   this.team.registerTemplate('CredoImage', '\
  22       <div>\
  23        <a href="{{mkws-googleurl md-electronic-url}}" target="_blank">\
  24         {{#mkws-first md-thumburl}}\
  25           <img src="{{this}}" alt="{{../md-title}}"/>\
  26         {{/mkws-first}}\
  27         <br/>\
  28        </a>\
  29        <p>{{md-title}}</p>\
  30       </div>\
  31 ');
  32
  33   var s = []
  34   s.push('<table>');
  35
  36   // Main panel: encylopaedia and images on the left, topics on the right
  37   s.push('<tr class="front">');
  38
  39   s.push('<td class="main">');
  40   s.push(section('encyclopaedia', 'Topic Page: ### title',
  41                  this.subwidget('Reference', { _team: 'ref' })));
  42   // The Images widget needs to be in our team so we can set its template
  43   s.push(section('image', 'Images',
  44                  this.subwidget('GoogleImage', { maxrecs: 4, template: 'CredoImage' })));
  45   s.push('</td>');
  46
  47   s.push('<td class="side">');
  48   s.push(section('mindmap', 'Create a Mind Map for ### title',
  49                  this.subwidget('Mindmap', { _team: 'main', facet: 'subject' })));
  50   s.push(section('topics', 'Related Topics',
  51                  this.subwidget('Facet', { _team: 'main', facet: 'subject' })));
  52   s.push('</td>');
  53
  54   s.push('</tr>');
  55
  56   s.push('<tr><td colspan="2"><hr class="divider"/></td></tr>');
  57
  58   s.push(sectionRow('entries', 'Credo Entries',
  59                     this.subwidget('Records', { _team: 'main' })));
  60   s.push(sectionRow('articles', 'Articles',
  61                     this.subwidget('Records', { _team: 'articles', targetfilter: 'categories=articles' })));
  62   s.push(sectionRow('books', 'Books',
  63                     1 || this.subwidget('Records', { /* ### config */ })));
  64   s.push(sectionRow('news', 'News',
  65                     1 || this.subwidget('Records', { /* ### config */ })));
  66   s.push(sectionRow('resources', 'Suggested Resources',
  67                     1 || this.subwidget('Records', { /* ### config */ })));
  68
  69   s.push('</table>');
  70
  71   this.node.html(s.join(''));
  72
  73
  74   function section(xclass, title, content) {
  75     var s = [];
  76     s.push('<div class="' + xclass + ' section">');
  77     s.push('<div class="title">' + title + '</div>');
  78     s.push('<div class="content">' + content + '</div>');
  79     s.push('</div>');
  80     return s.join('');
  81   }
  82
  83   function sectionRow(xclass, title, content) {
  84     var s = [];
  85     s.push('<tr>');
  86     s.push('<td colspan="2">');
  87     s.push(section(xclass, title, content));
  88     s.push('</td>');
  89     s.push('</tr>');
  90     return s.join('');
  91   }
  92 });
  93
  94
  95 mkws.registerWidgetType('Mindmap', function() {
  96   this.node.html("### We do not yet have a Mindmap widget");
  97 });