Example adding bootstrap to the credo widget.

diff --git a/examples/htdocs/mkws-widget-credo-bs.js b/examples/htdocs/mkws-widget-credo-bs.js
new file mode 100644 (file)
index 0000000..7c143c1
--- /dev/null
+++ b/examples/htdocs/mkws-widget-credo-bs.js
@@ -0,0 +1,118 @@
+// 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]);
+  }
+});
+
+
+// ### 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.
+
+mkws.registerWidgetType('Credo', function() {
+  var that = this;
+
+  this.team.registerTemplate('CredoImage', '\
+      <div class="col-md-3 col-sm-4 col-xs-6">\
+       <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>\
+');
+
+  var s = []
+  // Main panel: encylopaedia and images on the left, topics on the right
+  s.push('<div class="row">');
+
+  s.push('<div class="jumbotron panel col-md-8"><div class="panel-body">');
+  //s.push(section('encyclopaedia', 'Topic Page: <span class="x-mkws-title"/>',
+  s.push(this.subwidget('Reference', { _team: 'ref', paragraphs: 1 }));
+  // The Images widget needs to be in our team so we can set its template
+  s.push('</div></div>');
+
+  s.push('<div class="col-md-4">');
+  s.push(section('mindmap', 'Create a Mind Map for <span class="x-mkws-title"/>',
+                 this.subwidget('Mindmap', { _team: 'main', facet: 'subject' })));
+  s.push(section('topics', 'Related Topics',
+                 this.subwidget('Facet', { _team: 'main', facet: 'subject' })));
+  s.push('</div>');
+
+  s.push('</div>');
+  
+  s.push('<div class="row">');
+  s.push(section('image col-md-12', 'Images', this.subwidget('GoogleImage', { maxrecs: 4, template: 'CredoImage' })));
+  s.push('</div>');
+  
+
+  s.push('<div class="row clearfix">');
+  s.push(section('entries clearfix col-md-4 col-sm-6', 'Credo Entries',
+                    this.subwidget('Records', { _team: 'main' })));
+  s.push(section('articles clearfix col-md-4 col-sm-6', 'Articles',
+                    this.subwidget('Records', { _team: 'articles', targetfilter: 'categories=articles' })));
+  s.push(section('books clearfix col-md-4 col-sm-6', 'Books',
+                    this.subwidget('Records', { _team: 'books', targetfilter: 'categories=books' })));
+  s.push(section('news col-md-4 col-sm-6', 'News',
+                    this.subwidget('Records', { _team: 'news', targetfilter: 'categories=news' })));
+  s.push(section('resources col-md-4 col-sm-6', 'Suggested Resources',
+                    "### Not yet implemented"));
+  s.push('</div>');
+  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);
+
+    mkws.$(".mkwsSummary img").addClass("media-object");
+    console.log(mkws.$("body").html());
+
+    // 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 + '"><div class="panel panel-default">');
+    s.push('<div class="panel-heading title"><h3 class="panel-title">' + title + '</h3></div>');
+    s.push('<div class="panel-body">' + content + '</div>');
+    s.push('</div></div>');
+    return s.join('');
+  }
+
+  function sectionRow(xclass, title, content) {
+    var s = [];
+    s.push('<div class="row">');
+    s.push(section(xclass, title, content));
+    s.push('</div>');
+    return s.join('');
+  }
+});
+
+
+mkws.registerWidgetType('Mindmap', function() {
+  this.node.html("### We do not yet have a Mindmap widget");
+});

diff --git a/examples/htdocs/ref-bootstrap.html b/examples/htdocs/ref-bootstrap.html
new file mode 100644 (file)
index 0000000..91430f0
--- /dev/null
+++ b/examples/htdocs/ref-bootstrap.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MKWS demo: Compound reference widget</title>
+    <!-- <link rel="stylesheet" type="text/css" href="mkws&#45;widget&#45;credo.css" /> -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
+    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+    <script type="text/javascript">
+      var mkws_config = { service_proxy_auth: "//mkws.indexdata.com/service-proxy-credoauth" };
+    </script>
+    <script class="mkwsTemplate_FacetBootstrap" type="text/x-handlebars-template">
+      <h3>Results from Reference Universe</h3>
+      {{#each hits}}
+        <div class="refinement">
+          {{#mkws-first md-electronic-url}}
+          <a href="{{this}}">
+          {{/mkws-first}}
+            {{md-title}}
+          </a>
+        {{#if md-title-remainder}}
+          <span>{{md-title-remainder}}</span>
+        {{/if}}
+        {{#if md-title-responsibility}}
+          <span><i>{{md-title-responsibility}}</i></span>
+        {{/if}}
+        </div>
+      {{/each}}
+    </script>
+    <script type="text/javascript" src="//mkws.indexdata.com/mkws-complete.js"></script>
+    <script type="text/javascript" src="mkws-widget-credo-bs.js"></script>
+  </head>
+  <body>
+    <div class='mkwsCredo page-header container' autosearch='!param!q'></div>
+  </body>
+</html>