examples/htdocs/tester.html

   1 <!doctype html>
   2 <html>
   3
   4 <head>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6 <title>MKWS demo: Reference & Credo, and popup widget, development</title>
   7 <link rel="stylesheet" type="text/css" href="tools/htdocs/mkws.css" />
   8 <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
   9 <link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />
  10 <link rel="stylesheet" type="text/css" href="mkws-widget-credo.css" />
  11
  12 <script type="text/javascript">
  13   var mkws_config = {
  14     sp_auth_credentials: "mkwstest/mkwstest"
  15   };
  16 </script>
  17
  18 <script type="text/javascript" src="tools/htdocs/jquery-1.10.0.min.js"></script>
  19 <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  20
  21 <script type="text/javascript" src="tools/htdocs/pz2.js"></script>
  22 <script type="text/javascript" src="tools/htdocs/handlebars-v2.0.0.js"></script>
  23 <script type="text/javascript" src="tools/htdocs/jquery.json-2.4.js"></script>
  24 <script type="text/javascript" src="tools/htdocs/jsnlog.min.js"></script>
  25
  26 <script type="text/javascript" src="src/mkws-handlebars.js"></script>
  27 <script type="text/javascript" src="src/mkws-core.js"></script>
  28 <script type="text/javascript" src="src/mkws-team.js"></script>
  29 <script type="text/javascript" src="src/mkws-filter.js"></script>
  30 <script type="text/javascript" src="src/mkws-widget.js"></script>
  31 <script type="text/javascript" src="src/mkws-widget-main.js"></script>
  32 <script type="text/javascript" src="src/mkws-widget-facets.js"></script>
  33 <script type="text/javascript" src="src/mkws-widget-authname.js"></script>
  34 <script type="text/javascript" src="src/mkws-widget-categories.js"></script>
  35 <script type="text/javascript" src="src/mkws-widget-log.js"></script>
  36 <script type="text/javascript" src="src/mkws-widget-record.js"></script>
  37 <script type="text/javascript" src="src/mkws-widget-reference.js"></script>
  38 <script type="text/javascript" src="src/mkws-widget-builder.js"></script>
  39 <script type="text/javascript" src="src/mkws-templates.js"></script>
  40 <script type="text/javascript" src="src/mkws-popup.js"></script>
  41
  42 <script type="text/javascript" src="mkws-widget-credo.js"></script>
  43
  44 <style>
  45 .dialog > textarea {
  46   height: 100%;
  47   width: 100%;
  48 }
  49 html {
  50   margin: 0;
  51   height: 100%;
  52 }
  53 body {
  54   background-color: #bbbbbb;
  55   margin: 0;
  56   padding: 0;
  57   display: flex;
  58   flex-direction: column;
  59   height: 100%;
  60 }
  61 header {
  62   font-size: 1.3em;
  63 }
  64 header button, #note > input {
  65   margin-left: 1em;
  66   border-radius: 4px;
  67   background-color: #4368a1;
  68   color: #dbe9ff;
  69   font: inherit;
  70   font-weight: normal;
  71   border: 1px solid #7492c3;
  72   padding: 0.15em 0.25em;
  73 }
  74 header button:hover, header button:active, header button:focus {
  75   background-color: #2f5591;
  76 }
  77 #top-bar, #current-bar, #note {
  78   display: flex;
  79   flex-wrap: wrap;
  80   align-items: center;
  81   justify-content: space-between;
  82 }
  83 #top-bar {
  84   background-color: #002868;
  85   color: white;
  86 }
  87 #current-bar {
  88   background-color: #54d8a8;
  89   color: #002868;
  90 }
  91 #note {
  92   width: 100%;
  93   padding: .5em;
  94 }
  95 #note > input {
  96   flex: 1;
  97   background-color: #7de3be;
  98   border-color: #7ed6b6;
  99   color: #002868;
 100 }
 101 #maybe {
 102   background-color: #F0AD4E;
 103   border-color: #EEA236;
 104   color: #664009;
 105   color: white;
 106 }
 107 #maybe:hover, #maybe:active, #maybe:focus {
 108   background-color: #EC971F;
 109   border-color: #D58512;
 110 }
 111 #yes {
 112   background-color: #5CB85C;
 113   border-color: #4CAE4C;
 114   color: #214d21;
 115   color: white;
 116 }
 117 #yes:hover, #yes:focus, #yes:active {
 118   background-color: #449D44;
 119   border-color: #398439;
 120 }
 121 #no {
 122   background-color: #D9534F;
 123   border-color: #D43F3A;
 124   color: #4f1311;
 125   color: white;
 126 }
 127 #no:hover, #no:focus, #no:active {
 128   background-color: #C9302C;
 129   border-color: #AC2925;
 130 }
 131 #query {
 132   font-weight: bold;
 133   font-size: 110%;
 134 }
 135 #settings, #judiciary {
 136   padding: .5em;
 137   display: flex;
 138   align-items: center;
 139 }
 140 #results, #query-info {
 141   padding: .5em;
 142   display: flex;
 143   text-align: right;
 144   align-items: center;
 145   justify-content: flex-end;
 146 }
 147 #count {
 148   font-size: 120%;
 149 }
 150 #test-area {
 151   flex: 1;
 152   padding: 2em;
 153   display: flex;
 154   justify-content: center;
 155   overflow: auto;
 156 }
 157 #test-subject {
 158   margin: auto;
 159 }
 160 #results-table {
 161   flex: 1;
 162   padding: 1em;
 163   display: flex;
 164   justify-content: center;
 165 }
 166 #results-table table {
 167   border-collapse: collapse;
 168   border-spacing: 0;
 169 }
 170 #results-table td, #results-table th {
 171   padding: .25em 1.25em;
 172   font-size: .9em;
 173 }
 174 #results-table tr:first-child {
 175   border-bottom: 1px solid black;
 176 }
 177 #results-table tr {
 178   border-bottom: 1px dotted black;
 179 }
 180 #results-table tr:last-child {
 181   border-bottom: none;
 182 }
 183
 184 </style>
 185
 186 </head>
 187
 188 <body>
 189 <header>
 190   <div id="top-bar">
 191     <span id="settings">
 192       Settings:
 193       <button id="widget-markup-button">Widget</button>
 194       <button id="mkws-config-button">MKWS config</button>
 195       <button id="queries-button">Queries</button>
 196     </span>
 197     <span id="results">
 198       Results:
 199       <button id="results-table-button">Table</button>
 200       <button id="results-csv-button">| delimited</button>
 201     </span>
 202   </div>
 203 </header>
 204
 205 <header id="current-bar">
 206   <span id="judiciary">
 207     Relevant to query <span id="query"></span>?
 208     <button id="yes" class="judgement">Yes</button>
 209     <button id="no" class="judgement">No</button>
 210     <button id="maybe" class="judgement">Maybe</button>
 211   </span>
 212   <span id="query-info">
 213     <span id="count"></span>
 214   </span>
 215   <span id="note">
 216     Note: <input type="text"></input>
 217   </span>
 218 </header>
 219
 220 <div id="widget-markup" class="dialog" title="Widget markup">
 221   <textarea></textarea>
 222 </div>
 223 <div id="mkws-config" class="dialog" title="MKWS configuration">
 224   <textarea></textarea>
 225 </div>
 226 <div id="queries" class="dialog" title="Queries">
 227   <textarea></textarea>
 228 </div>
 229 <div id="results-csv" class="dialog" title="| delimited results">
 230   <textarea readonly></textarea>
 231 </div>
 232 <div id="results-table" class="dialog" title="Results as table">
 233   <table></table>
 234 </div>
 235
 236 <div id="test-area">
 237   <div id="test-subject"></div>
 238 </div>
 239
 240 <script>
 241 (function () { // wrapper
 242 // Initial data
 243 this.queries = ["sushi", "wurst", "tea", "latte"];
 244 this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
 245 if (localStorage.getItem('mkwstest-queries')) {
 246   this.queries = JSON.parse(localStorage.getItem('mkwstest-queries'));
 247 }
 248 if (localStorage.getItem('mkwstest-widget-markup')) {
 249   this.widgetMarkup = localStorage.getItem('mkwstest-widget-markup');
 250 }
 251 if (localStorage.getItem('mkwstest-mkws-config')) {
 252   mkws_config = JSON.parse(localStorage.getItem('mkwstest-mkws-config'));
 253 }
 254 $("#queries > textarea").html(this.queries.join("\n"));
 255 $("#widget-markup > textarea").html(this.widgetMarkup);
 256 $("#mkws-config > textarea").html(JSON.stringify(mkws_config));
 257 mkws.setMkwsConfig(mkws_config);
 258 mkws.authenticated = false;
 259 mkws.authenticating = false;
 260
 261 this.results = {};
 262 var next = 0;
 263 if (localStorage.getItem('mkwstest-results')) {
 264   this.results = JSON.parse(localStorage.getItem('mkwstest-results'));
 265 }
 266 if (localStorage.getItem('mkwstest-next') !== null) {
 267   next = parseInt(localStorage.getItem('mkwstest-next'));
 268 }
 269
 270 var context = this;
 271
 272 var showNext = function () {
 273   if (next <  this.queries.length) {
 274     $('#note > input').val("");
 275     $('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
 276     $('#query').html('"' + this.queries[next] + '"');
 277     localStorage.setItem("mkwstest-next", next);
 278     next++;
 279     $('#count').html(next + " / " + this.queries.length);
 280     mkws.init('#test-subject');
 281   } else {
 282     $("#results-table").dialog("open");
 283   }
 284 }
 285 var startEval = function () {
 286   $(".dialog").dialog("close");
 287   next = 0;
 288   context.results = {};
 289   showNext();
 290 }
 291 var judge = function (e) {
 292   var query = $('#test-subject > div').attr('autosearch');
 293   context.results[query] = {judgement: $(this).html(), note: $("#note > input").val() || ""};
 294   localStorage.setItem("mkwstest-results", JSON.stringify(context.results));
 295   showNext();
 296 }
 297
 298 // Set up dialogs
 299 $(".dialog").dialog({
 300   autoOpen: false,
 301   height: 600,
 302   width: 600,
 303   modal: true,
 304   open: function(event, ui) {
 305     $(this).parent().css('position', 'fixed');
 306   }
 307 });
 308
 309 // Markup dialog
 310 var updateMarkup = function () {
 311   context.widgetMarkup = $("#widget-markup > textarea").val();
 312   localStorage.setItem("mkwstest-widget-markup", context.widgetMarkup);
 313   startEval();
 314 }
 315 $("#widget-markup-button").click(function () {
 316   $("#widget-markup").dialog("open");
 317 });
 318 $("#widget-markup").dialog("option", "buttons", [
 319   {text: "Start new evaluation", click: updateMarkup},
 320   {text: "Cancel", click: function() { $(this).dialog("close"); }}
 321 ]);
 322
 323 // MKWS config dialog
 324 var updateConfig = function () {
 325   mkws.setMkwsConfig(JSON.parse($("#mkws-config > textarea").val()));
 326   mkws.authenticated = false;
 327   mkws.authenticating = false;
 328   localStorage.setItem("mkwstest-mkws-config", $("#mkws-config > textarea").val());
 329   startEval();
 330 }
 331 $("#mkws-config-button").click(function () {
 332   $("#mkws-config").dialog("open");
 333 });
 334 $("#mkws-config").dialog("option", "buttons", [
 335   {text: "Start new evaluation", click: updateConfig},
 336   {text: "Cancel", click: function() { $(this).dialog("close"); }}
 337 ]);
 338
 339 // Queries dialog
 340 var updateQueries = function () {
 341   context.queries = $("#queries > textarea").val().split("\n");
 342   // ignore empty query values
 343   context.queries = $.grep(context.queries, function (query, index) { return query.match(/^\s*\S+/) } );
 344   localStorage.setItem("mkwstest-queries", JSON.stringify(context.queries));
 345   startEval();
 346 }
 347 $("#queries-button").click(function () {
 348   $("#queries").dialog("open");
 349 });
 350 $("#queries").dialog("option", "buttons", [
 351   {text: "Start new evaluation", click: updateQueries},
 352   {text: "Cancel", click: function() { $(this).dialog("close"); }}
 353 ]);
 354
 355 // Results dialogs
 356 $("#results-table-button").click(function () {
 357   $("#results-table").dialog("open");
 358 });
 359 $("#results-csv-button").click(function () {
 360   $("#results-csv").dialog("open");
 361 });
 362 $("#results-table").dialog("option", "open", function () {
 363   var html = "<tr><th>Query</th><th>Relevant?</th><th>Note</th><tr>";
 364   for (var i = 0; i < context.queries.length; i++) {
 365     var q = context.queries[i];
 366     var r = context.results;
 367     if (r[q]) {
 368       html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td><td>" + r[q].note + "</td></tr>\n";
 369     }
 370   }
 371   $("#results-table > table").html(html);
 372 });
 373 $("#results-csv").dialog("option", "open", function () {
 374   var csv = "Query|Relevant?|Note\n";
 375   for (var i = 0; i < context.queries.length; i++) {
 376     var q = context.queries[i];
 377     var r = context.results;
 378     if (r[q]) {
 379       csv += [q, r[q].judgement, r[q].note].join("|") + "\n";
 380     }
 381   }
 382   $("#results-csv > textarea").html(csv);
 383 });
 384
 385 $('button.judgement').click(judge);
 386 showNext();
 387 })();// wrapper
 388 </script>
 389
 390 </body>
 391 </html>
 392