examples/htdocs/topic-bootstrap.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8">
   5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6   <meta name="viewport" content="width=device-width, initial-scale=1">
   7   <title>MKWS demo: Compound reference widget, Bootstrap edition</title>
   8   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   9   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  10   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  11   <!-- http://www.bootstrapcdn.com/#bootswatch_tab has some themes that look mediumly okay -->
  12   <!-- <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/cyborg/bootstrap.min.css" rel="stylesheet"> -->
  13   <!-- <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet"> -->
  14   <!-- <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/united/bootstrap.min.css" rel="stylesheet"> -->
  15   <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  16   <script type="text/javascript">
  17     var mkws_config = { service_proxy_auth: "//mkws.indexdata.com/service-proxy-credoauth" }
  18   </script>
  19   <script type="text/javascript" src="//mkws.indexdata.com/mkws-complete.js"></script>
  20   <!-- <script type="text/javascript" src="//mkws.local/mkws&#45;complete.js"></script> -->
  21   <link rel="stylesheet" type="text/css" href="topic-bootstrap.css">
  22   <script>
  23     // The Google Images database returns links like:
  24     //      http://images.google.com/url?q=http://eofdreams.com/fish.html&sa=U&ei=RAB-U9XNDo2Dqga1o4L4Bw&ved=0CC4Q9QEwAA&usg=AFQjCNFhRtn6GMevHbpITZ6kfx6rsHV2ow
  25     // This Handlebars helper avoids a pointless redirect by transforming
  26     // this to the URL of the underling page, in this case
  27     //      http://eofdreams.com/fish.html
  28     Handlebars.registerHelper('mkws-googleurl', function(obj) {
  29       if (!obj) {
  30         return "obj undefined";
  31       } else if (!obj[0]) {
  32         return "obj[0] undefined, JSON=" + $.toJSON(obj);
  33       } else {
  34         return mkws.getParameterByName('q', obj[0]);
  35       }
  36     });
  37   </script>
  38   <script class="mkwsTemplate_TopicImage" type="text/x-handlebars-template">
  39     {{#each hits}}
  40       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  41        <a href="{{mkws-googleurl md-electronic-url}}" target="_blank">
  42         {{#mkws-first md-thumburl}}
  43           <img src="{{this}}" alt="{{../md-title}}"/>
  44         {{/mkws-first}}
  45         <br/>
  46        </a>
  47        <p>{{{md-title}}}</p>
  48       </div>
  49     {{/each}}
  50   </script>
  51   <script class="mkwsTemplate_TopicFacet" type="text/x-handlebars-template">
  52     {{#each terms}}
  53       <li class="list-group-item mkwsTerm">
  54         <span class="badge">{{count}}</span>
  55         <a href="#" {{linkdata}}>{{term}}</a>
  56       </li>
  57     {{/each}}
  58   </script>
  59 </head>
  60 <body>
  61   <div class='page-header container' autosearch='!param!q'>
  62     <div class="row">
  63       <!-- reference entry -->
  64       <div class="jumbotron panel col-md-8">
  65         <div class="panel-body mkwsReference mkwsTeam_ref" autosearch="!param!q"
  66              data-mkws-config='{"paragraphs":1}'></div>
  67       </div>
  68       <!-- related topics -->
  69       <div class="col-md-offset-1 col-md-3"><div class="panel panel-default">
  70         <div class="panel-heading title">
  71           <h3 class="panel-title">Related Topics</h3>
  72         </div>
  73         <ul class="panel-body list-group mkwsFacet mkwsTeam_main"
  74             autosearch="!param!q"
  75             data-mkws-facet="subject"
  76             data-mkws-config='{ "template": "TopicFacet" }'></ul>
  77       </div></div>
  78     </div>
  79     <!-- images -->
  80     <div class="row">
  81       <div class="col-md-12"><div class="panel panel-default">
  82         <div class="panel-heading title">
  83           <h3 class="panel-title">Images</h3>
  84         </div>
  85         <div class="panel-body mkwsGoogleImage" autosearch="!param!q"
  86              data-mkws-config='{ "maxrecs": 4, "template": "TopicImage", "target": "google_images_js" }'></div>
  87       </div></div>
  88     </div>
  89
  90     <!-- sources -->
  91     <div class="row">
  92         <div class="col-md-4 col-sm-6"><div class="panel panel-default">
  93           <div class="panel-heading title">
  94             <h3 class="panel-title">News</h3>
  95           </div>
  96           <div class="panel-body mkwsRecords mkwsTeam_news" autosearch="!param!q"
  97                data-mkws-config='{"targetfilter":"categories=news",
  98                                   "perpage":7}'></div>
  99         </div></div>
 100         <div class="col-md-4 col-sm-6"><div class="panel panel-default">
 101           <div class="panel-heading title">
 102             <h3 class="panel-title">Articles</h3>
 103           </div>
 104           <div class="panel-body mkwsRecords mkwsTeam_articles" autosearch="!param!q"
 105                data-mkws-config='{"targetfilter":"categories=articles",
 106                                   "perpage":7}'></div>
 107         </div></div>
 108         <div class="col-md-4 col-sm-6"><div class="panel panel-default">
 109           <div class="panel-heading title">
 110             <h3 class="panel-title">Books</h3>
 111           </div>
 112           <div class="panel-body mkwsRecords mkwsTeam_books" autosearch="!param!q"
 113                data-mkws-config='{"targetfilter":"categories=books",
 114                                   "perpage":7}'></div>
 115         </div></div>
 116     </div>
 117     <div class="row">
 118         <div class="col-md-12"><div class="panel panel-default">
 119           <div class="panel-heading title">
 120             <h3 class="panel-title">Results from all targets</h3>
 121           </div>
 122           <div class="panel-body multicol mkwsRecords mkwsTeam_main"></div>
 123         </div></div>
 124     </div>
 125   </div>
 126 </body>
 127 </html>