Upgrade demos to use new-style class-names, MKWS-306
[mkws-moved-to-github.git] / examples / htdocs / topic.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 = { sp_auth_credentials: "credo/emu" };
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.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     Handlebars.registerHelper('mkws-topicurl', function(topic) {
38       return window.location.pathname + "?q=" + encodeURIComponent(topic);
39     });
40   </script>
41   <script class="mkws-template_topicimage" type="text/x-handlebars-template">
42     {{#each hits}}
43       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
44        <a href="{{mkws-googleurl md-electronic-url}}" target="_blank">
45         {{#mkws-first md-thumburl}}
46           <img src="{{this}}" alt="{{../md-title}}"/>
47         {{/mkws-first}}
48         <br/>
49        </a>
50        <p>{{{md-title}}}</p>
51       </div>
52     {{/each}}
53   </script>
54   <script class="mkws-template_topicfacet" type="text/x-handlebars-template">
55     {{#each terms}}
56       <li class="list-group-item mkws-term">
57         <span class="badge">{{count}}</span>
58         <a href="{{mkws-topicurl term}}">{{term}}</a>
59       </li>
60     {{/each}}
61   </script>
62 </head>
63 <body>
64   <div class='page-header container' autosearch='!param!q'>
65     <div class="row">
66       <!-- reference entry -->
67       <div class="jumbotron panel col-md-8">
68         <div class="panel-body mkws-reference mkws-team-ref" autosearch="!param!q"
69              data-mkws-config='{"paragraphs":1}'></div>
70       </div>
71       <!-- related topics -->
72       <div class="col-md-offset-1 col-md-3"><div class="panel panel-default">
73         <div class="panel-heading title">
74           <h3 class="panel-title">Related Topics</h3>
75         </div>
76         <ul class="panel-body list-group mkws-facet mkws-team-main"
77             autosearch="!param!q"
78             data-mkws-facet="subject"
79             data-mkws-config='{ "template": "TopicFacet" }'></ul>
80       </div></div>
81     </div>
82     <!-- images -->
83     <div class="row">
84       <div class="col-md-12"><div class="panel panel-default">
85         <div class="panel-heading title">
86           <h3 class="panel-title">Images</h3>
87         </div>
88         <div class="panel-body mkws-googleimage" autosearch="!param!q"
89              data-mkws-config='{ "maxrecs": 4, "template": "TopicImage", "target": "google_images_js" }'></div>
90       </div></div>
91     </div>
92
93     <!-- sources -->
94     <div class="row">
95         <div class="col-md-4 col-sm-6"><div class="panel panel-default">
96           <div class="panel-heading title">
97             <h3 class="panel-title">News</h3>
98           </div>
99           <div class="panel-body mkws-records mkws-team-news" autosearch="!param!q"
100                data-mkws-config='{"targetfilter":"categories=news",
101                                   "perpage":7}'></div>
102         </div></div>
103         <div class="col-md-4 col-sm-6"><div class="panel panel-default">
104           <div class="panel-heading title">
105             <h3 class="panel-title">Articles</h3>
106           </div>
107           <div class="panel-body mkws-records mkws-team-articles" autosearch="!param!q"
108                data-mkws-config='{"targetfilter":"categories=articles",
109                                   "perpage":7}'></div>
110         </div></div>
111         <div class="col-md-4 col-sm-6"><div class="panel panel-default">
112           <div class="panel-heading title">
113             <h3 class="panel-title">Books</h3>
114           </div>
115           <div class="panel-body mkws-records mkws-team-books" autosearch="!param!q"
116                data-mkws-config='{"targetfilter":"categories=books",
117                                   "perpage":7}'></div>
118         </div></div>
119     </div>
120     <div class="row">
121         <div class="col-md-12"><div class="panel panel-default">
122           <div class="panel-heading title">
123             <h3 class="panel-title">Results from all targets</h3>
124           </div>
125           <div class="panel-body multicol mkws-records mkws-team-main"></div>
126         </div></div>
127     </div>
128   </div>
129 </body>
130 </html>