examples/htdocs/mkws-widget-credo-bs.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   if (!obj) {
   9     return "obj undefined";
  10   } else if (!obj[0]) {
  11     return "obj[0] undefined, JSON=" + $.toJSON(obj);
  12   } else {
  13     return mkws.getParameterByName('q', obj[0]);
  14   }
  15 });
  16
  17
  18 // ### This works inefficiently by having multiple teams all run the
  19 // same search against different sets of targets. A much better
  20 // approach would be run a single search, with all these panels
  21 // members of the same team, but picking out only the results relevant
  22 // to them. That will be more work.
  23
  24 mkws.registerWidgetType('Credo', function() {
  25   var that = this;
  26
  27   this.team.registerTemplate('CredoImage', '\
  28       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">\
  29        <a href="{{mkws-googleurl md-electronic-url}}" target="_blank">\
  30         {{#mkws-first md-thumburl}}\
  31           <img src="{{this}}" alt="{{../md-title}}"/>\
  32         {{/mkws-first}}\
  33         <br/>\
  34        </a>\
  35        <p>{{{md-title}}}</p>\
  36       </div>\
  37 ');
  38
  39   var s = []
  40   // Main panel: encylopaedia and images on the left, topics on the right
  41   s.push('<div class="row">');
  42
  43   s.push('<div class="jumbotron panel col-md-8"><div class="panel-body">');
  44   //s.push(section('encyclopaedia', 'Topic Page: <span class="x-mkws-title"/>',
  45   s.push(this.subwidget('Reference', { _team: 'ref', paragraphs: 1 }));
  46   // The Images widget needs to be in our team so we can set its template
  47   s.push('</div></div>');
  48
  49   s.push('<div class="col-md-4">');
  50   s.push(section('topics', 'Related Topics',
  51                  this.subwidget('Facet', { _team: 'main', facet: 'subject' })));
  52   s.push('</div>');
  53
  54   s.push('</div>');
  55
  56   s.push('<div class="row">');
  57   s.push(section('image col-md-12', 'Images', this.subwidget('GoogleImage', { maxrecs: 4, template: 'CredoImage', target: 'google_images_js' })));
  58   s.push('</div>');
  59
  60
  61   s.push('<div class="row clearfix">');
  62   s.push(section('entries clearfix col-md-4 col-sm-6', 'News',
  63                  this.subwidget('Records', { _team: 'news', targetfilter: 'categories=news', perpage: 10 })));
  64   s.push(section('articles clearfix col-md-4 col-sm-6', 'Articles',
  65                     this.subwidget('Records', { _team: 'articles', targetfilter: 'categories=articles', perpage: 10 })));
  66   s.push(section('books clearfix col-md-4 col-sm-6', 'Books',
  67                     this.subwidget('Records', { _team: 'books', targetfilter: 'categories=books', perpage: 10 })));
  68   s.push(section('news col-md-4 col-sm-6', 'Results from all targets',
  69                     this.subwidget('Records', { _team: 'main' })));
  70   s.push('</div>');
  71   this.node.html(s.join(''));
  72
  73   // Fill in the titles from the query once widgets have all been prepared
  74   var that = this;
  75   this.team.queue("ready").subscribe(function() {
  76     var query = toTitleCase(that.config.query);
  77     that.log("got query '" + query + "' from team config");
  78     mkws.$('.x-mkws-title').html(query);
  79     mkws.$('title').html("MKWS: " + query);
  80
  81     mkws.$(".mkwsSummary img").addClass("media-object");
  82     console.log(mkws.$("body").html());
  83
  84     // Derived from http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript
  85     function toTitleCase(str) {
  86       return str.replace(/\w\S*/g, function(txt) {
  87         return txt.charAt(0).toUpperCase() + txt.substr(1);
  88       });
  89     }
  90   });
  91
  92
  93   function section(xclass, title, content) {
  94     var s = [];
  95     s.push('<div class="' + xclass + '"><div class="panel panel-default">');
  96     s.push('<div class="panel-heading title"><h3 class="panel-title">' + title + '</h3></div>');
  97     s.push('<div class="panel-body">' + content + '</div>');
  98     s.push('</div></div>');
  99     return s.join('');
 100   }
 101
 102   function sectionRow(xclass, title, content) {
 103     var s = [];
 104     s.push('<div class="row">');
 105     s.push(section(xclass, title, content));
 106     s.push('</div>');
 107     return s.join('');
 108   }
 109 });