src/mkws-widgets.js

   1 // Factory function for widget objects.
   2 function widget($, team, type, node) {
   3     // Static register of attributes that do not contribute to config
   4     var ignoreAttrs = {
   5         id:1, 'class':1, style:1, name:1, action:1, type:1, size:1,
   6         value:1, width:1, valign:1
   7     };
   8
   9     var that = {
  10         team: team,
  11         type: type,
  12         node: node,
  13         config: mkws.objectInheritingFrom(team.config())
  14     };
  15
  16     function log(s) {
  17         team.log(s);
  18     }
  19     that.log = log;
  20
  21     that.toString = function() {
  22         return '[Widget ' + team.name() + ':' + type + ']';
  23     };
  24
  25     that.value = function() {
  26         return node.value;
  27     }
  28
  29     for (var i = 0; i < node.attributes.length; i++) {
  30         var a = node.attributes[i];
  31         if (a.name === 'data-mkws-config') {
  32             // Treat as a JSON fragment configuring just this widget
  33             log(node + ": parsing config fragment '" + a.value + "'");
  34             var data;
  35             try {
  36                 data = $.parseJSON(a.value);
  37                 for (var key in data) {
  38                     log(node + ": adding config element " + key + "='" + data[key] + "'");
  39                     that.config[key] = data[key];
  40                 }
  41             } catch (err) {
  42                 alert("Can't parse " + node + " data-mkws-config as JSON: " + a.value);
  43             }
  44         } else if (a.name.match (/^data-mkws-/)) {
  45             var name = a.name.replace(/^data-mkws-/, '')
  46             that.config[name] = a.value;
  47             log(node + ": set data-mkws attribute " + name + "='" + a.value + "'");
  48         } else if (!ignoreAttrs[a.name]) {
  49             that.config[a.name] = a.value;
  50             log(node + ": set regular attribute " + a.name + "='" + a.value + "'");
  51         }
  52     }
  53
  54     var fn = mkws.promotionFunction(type);
  55     if (fn) {
  56         fn.call(that);
  57         log("made " + type + " widget(node=" + node + ")");
  58     } else {
  59         log("made UNPROMOTED widget(type=" + type + ", node=" + node + ")");
  60     }
  61
  62     return that;
  63 }
  64
  65
  66 // Utility function for use by all widgets that can invoke autosearch.
  67 widget.autosearch = function(widget) {
  68     widget.team.queue("ready").subscribe(function() {
  69         var query = widget.config.autosearch;
  70         if (query) {
  71             if (query.match(/^!param!/)) {
  72                 var param = query.replace(/^!param!/, '');
  73                 query = mkws.getParameterByName(param);
  74                 widget.log("obtained query '" + query + "' from param '" + param + "'");
  75                 if (!query) {
  76                     alert("This page has a MasterKey widget that needs a query specified by the '" + param + "' parameter");
  77                 }
  78             } else if (query.match(/^!path!/)) {
  79                 var index = query.replace(/^!path!/, '');
  80                 var path = window.location.pathname.split('/');
  81                 query = path[path.length - index];
  82                 widget.log("obtained query '" + query + "' from path-component '" + index + "'");
  83                 if (!query) {
  84                     alert("This page has a MasterKey widget that needs a query specified by the path-component " + index);
  85                 }
  86             } else if (query.match(/^!var!/)) {
  87                 var name = query.replace(/^!var!/, '');
  88                 query = window[name]; // It's ridiculous that this works
  89                 widget.log("obtained query '" + query + "' from variable '" + name + "'");
  90                 if (!query) {
  91                     alert("This page has a MasterKey widget that needs a query specified by the '" + name + "' variable");
  92                 }
  93             }
  94
  95             var sortOrder = widget.config.sort;
  96             var maxrecs = widget.config.maxrecs;
  97             var perpage = widget.config.perpage;
  98             var limit = widget.config.limit;
  99             var targets = widget.config.targets;
 100             var targetfilter = widget.config.targetfilter;
 101             var target = widget.config.target;
 102             if (target) targetfilter = 'udb=="' + target + '"';
 103
 104             var s = "running auto search: '" + query + "'";
 105             if (sortOrder) s += " sorted by '" + sortOrder + "'";
 106             if (maxrecs) s += " restricted to " + maxrecs + " records";
 107             if (perpage) s += " with " + perpage + " per page";
 108             if (limit) s += " limited by '" + limit + "'";
 109             if (targets) s += " in targets '" + targets + "'";
 110             if (targetfilter) s += " constrained by targetfilter '" + targetfilter + "'";
 111             widget.log(s);
 112
 113             widget.team.newSearch(query, sortOrder, maxrecs, perpage, limit, targets, targetfilter);
 114         }
 115     });
 116 };
 117
 118
 119 // Functions follow for promoting the regular widget object into
 120 // widgets of specific types. These could be moved into their own
 121 // source files.
 122
 123
 124 mkws.registerWidgetType('Targets', function() {
 125     var that = this;
 126     var M = mkws.M;
 127
 128     $(this.node).html('\
 129 <div class="mkwsBytarget mkwsTeam_' + this.team.name() + '">\
 130 No information available yet.\
 131 </div>');
 132     $(this.node).css("display", "none");
 133
 134     this.team.queue("targets").subscribe(function(data) {
 135         var table ='<table><thead><tr>' +
 136             '<td>' + M('Target ID') + '</td>' +
 137             '<td>' + M('Hits') + '</td>' +
 138             '<td>' + M('Diags') + '</td>' +
 139             '<td>' + M('Records') + '</td>' +
 140             '<td>' + M('State') + '</td>' +
 141             '</tr></thead><tbody>';
 142
 143         for (var i = 0; i < data.length; i++) {
 144             table += "<tr><td>" + data[i].id +
 145                 "</td><td>" + data[i].hits +
 146                 "</td><td>" + data[i].diagnostic +
 147                 "</td><td>" + data[i].records +
 148                 "</td><td>" + data[i].state + "</td></tr>";
 149         }
 150
 151         table += '</tbody></table>';
 152         var subnode = $(that.node).children('.mkwsBytarget');
 153         subnode.html(table);
 154     });
 155 });
 156
 157
 158 mkws.registerWidgetType('Stat', function() {
 159     var that = this;
 160     var M = mkws.M;
 161
 162     this.team.queue("stat").subscribe(function(data) {
 163         if (that.node.length === 0)  alert("huh?!");
 164
 165         $(that.node).html('<span class="head">' + M('Status info') + '</span>' +
 166             ' -- ' +
 167             '<span class="clients">' + M('Active clients') + ': ' + data.activeclients + '/' + data.clients + '</span>' +
 168             ' -- ' +
 169             '<span class="records">' + M('Retrieved records') + ': ' + data.records + '/' + data.hits + '</span>');
 170     });
 171 });
 172
 173
 174 mkws.registerWidgetType('Pager', function() {
 175     var that = this;
 176     var M = mkws.M;
 177
 178     this.team.queue("pager").subscribe(function(data) {
 179         $(that.node).html(drawPager(data))
 180
 181         function drawPager(data) {
 182             var teamName = that.team.name();
 183             var s = '<div style="float: right">' + M('Displaying') + ': '
 184                 + (data.start + 1) + ' ' + M('to') + ' ' + (data.start + data.num) +
 185                 ' ' + M('of') + ' ' + data.merged + ' (' + M('found') + ': '
 186                 + data.total + ')</div>';
 187
 188             //client indexes pages from 1 but pz2 from 0
 189             var onsides = 6;
 190             var pages = Math.ceil(that.team.totalRecordCount() / that.team.perpage());
 191             var currentPage = that.team.currentPage();
 192
 193             var firstClkbl = (currentPage - onsides > 0)
 194                 ? currentPage - onsides
 195                 : 1;
 196
 197             var lastClkbl = firstClkbl + 2*onsides < pages
 198                 ? firstClkbl + 2*onsides
 199                 : pages;
 200
 201             var prev = '<span class="mkwsPrev">&#60;&#60; ' + M('Prev') + '</span> | ';
 202             if (currentPage > 1)
 203                 prev = '<a href="#" class="mkwsPrev" onclick="mkws.pagerPrev(\'' + teamName + '\');">'
 204                 +'&#60;&#60; ' + M('Prev') + '</a> | ';
 205
 206             var middle = '';
 207             for(var i = firstClkbl; i <= lastClkbl; i++) {
 208                 var numLabel = i;
 209                 if(i == currentPage)
 210                     numLabel = '<span class="mkwsSelected">' + i + '</span>';
 211
 212                 middle += '<a href="#" onclick="mkws.showPage(\'' + teamName + '\', ' + i + ')"> '
 213                     + numLabel + ' </a>';
 214             }
 215
 216             var next = ' | <span class="mkwsNext">' + M('Next') + ' &#62;&#62;</span>';
 217             if (pages - currentPage > 0)
 218                 next = ' | <a href="#" class="mkwsNext" onclick="mkws.pagerNext(\'' + teamName + '\')">'
 219                 + M('Next') + ' &#62;&#62;</a>';
 220
 221             var predots = '';
 222             if (firstClkbl > 1)
 223                 predots = '...';
 224
 225             var postdots = '';
 226             if (lastClkbl < pages)
 227                 postdots = '...';
 228
 229             s += '<div style="float: clear">'
 230                 + prev + predots + middle + postdots + next + '</div>';
 231
 232             return s;
 233         }
 234     });
 235 });
 236
 237
 238 mkws.registerWidgetType('Results', function() {
 239     // Nothing to do apart from act as an autosearch trigger
 240     // Contained elements do all the real work
 241     widget.autosearch(this);
 242 });
 243
 244
 245 mkws.registerWidgetType('Records', function() {
 246     var that = this;
 247     var team = this.team;
 248
 249     this.team.queue("records").subscribe(function(data) {
 250         var html = [];
 251         for (var i = 0; i < data.hits.length; i++) {
 252             var hit = data.hits[i];
 253             that.team.queue("record").publish(hit);
 254             var divId = team.recordElementId(hit.recid[0]);
 255             html.push('<div class="record mkwsTeam_' + team.name() + ' ' + divId + '">', renderSummary(hit), '</div>');
 256             // ### At some point, we may be able to move the
 257             // m_currentRecordId and m_currentRecordData members
 258             // from the team object into this widget.
 259             if (hit.recid == team.currentRecordId()) {
 260                 if (team.currentRecordData())
 261                     html.push(team.renderDetails(team.currentRecordData()));
 262             }
 263         }
 264         $(that.node).html(html.join(''));
 265
 266         function renderSummary(hit) {
 267             var template = team.loadTemplate(that.config.template || "Summary");
 268             hit._id = team.recordElementId(hit.recid[0]);
 269             hit._onclick = "mkws.showDetails('" + team.name() + "', '" + hit.recid[0] + "');return false;"
 270             return template(hit);
 271         }
 272     });
 273
 274     widget.autosearch(that);
 275 });
 276
 277
 278 mkws.registerWidgetType('Navi', function() {
 279     var that = this;
 280     var teamName = this.team.name();
 281     var M = mkws.M;
 282
 283     this.team.queue("navi").subscribe(function() {
 284         var filters = that.team.filters();
 285         var text = "";
 286
 287         filters.visitTargets(function(id, name) {
 288             if (text) text += " | ";
 289             text += M('source') + ': <a class="crossout" href="#" onclick="mkws.delimitTarget(\'' + teamName +
 290                 "', '" + id + "'" + ');return false;">' + name + '</a>';
 291         });
 292
 293         filters.visitFields(function(field, value) {
 294             if (text) text += " | ";
 295             text += M(field) + ': <a class="crossout" href="#" onclick="mkws.delimitQuery(\'' + teamName +
 296                 "', '" + field + "', '" + value + "'" +
 297                 ');return false;">' + value + '</a>';
 298         });
 299
 300         $(that.node).html(text);
 301     });
 302 });
 303
 304
 305 // It seems this and the Perpage widget doen't need to subscribe to
 306 // anything, since they produce events rather than consuming them.
 307 //
 308 mkws.registerWidgetType('Sort', function() {
 309     var that = this;
 310
 311     $(this.node).change(function() {
 312         that.team.set_sortOrder($(that.node).val());
 313         if (that.team.submitted()) {
 314             that.team.reShow();
 315         }
 316         return false;
 317     });
 318 });
 319
 320
 321 mkws.registerWidgetType('Perpage', function() {
 322     var that = this;
 323
 324     $(this.node).change(function() {
 325         that.team.set_perpage($(that.node).val());
 326         if (that.team.submitted()) {
 327             that.team.reShow();
 328         }
 329         return false;
 330     });
 331 });
 332
 333
 334 mkws.registerWidgetType('Done', function() {
 335     var that = this;
 336
 337     this.team.queue("complete").subscribe(function(n) {
 338         $(that.node).html("Search complete: found " + n + " records");
 339     });
 340 });
 341
 342
 343 mkws.registerWidgetType('Switch', function() {
 344     var tname = this.team.name();
 345     $(this.node).html('\
 346 <a href="#" onclick="mkws.switchView(\'' + tname + '\', \'records\')">Records</a><span> \
 347 | \
 348 </span><a href="#" onclick="mkws.switchView(\'' + tname + '\', \'targets\')">Targets</a>');
 349 });
 350
 351
 352 mkws.registerWidgetType('Search', function() {
 353     var tname = this.team.name();
 354     var M = mkws.M;
 355
 356     $(this.node).html('\
 357 <form name="mkwsSearchForm" class="mkwsSearchForm mkwsTeam_' + tname + '" action="" >\
 358   <input class="mkwsQuery mkwsTeam_' + tname + '" type="text" size="' + this.config.query_width + '" />\
 359   <input class="mkwsButton mkwsTeam_' + tname + '" type="submit" value="' + M('Search') + '" />\
 360 </form>');
 361 });
 362
 363
 364 mkws.registerWidgetType('SearchForm', function() {
 365     var team = this.team;
 366     $(this.node).submit(function() {
 367         var val = team.widget('Query').value();
 368         team.newSearch(val);
 369         return false;
 370     });
 371 });
 372
 373
 374 mkws.registerWidgetType('Results', function() {
 375     var tname = this.team.name();
 376
 377     $(this.node).html('\
 378 <table width="100%" border="0" cellpadding="6" cellspacing="0">\
 379   <tr>\
 380     <td class="mkwsTermlistContainer1 mkwsTeam_' + tname + '" width="250" valign="top">\
 381       <div class="mkwsTermlists mkwsTeam_' + tname + '"></div>\
 382     </td>\
 383     <td class="mkwsMOTDContainer mkwsTeam_' + tname + '" valign="top">\
 384       <div class="mkwsRanking mkwsTeam_' + tname + '"></div>\
 385       <div class="mkwsPager mkwsTeam_' + tname + '"></div>\
 386       <div class="mkwsNavi mkwsTeam_' + tname + '"></div>\
 387       <div class="mkwsRecords mkwsTeam_' + tname + '"></div>\
 388     </td>\
 389   </tr>\
 390   <tr>\
 391     <td colspan="2">\
 392       <div class="mkwsTermlistContainer2 mkwsTeam_' + tname + '"></div>\
 393     </td>\
 394   </tr>\
 395 </table>');
 396 });
 397
 398
 399 mkws.registerWidgetType('Ranking', function() {
 400     var tname = this.team.name();
 401     var that = this;
 402     var M = mkws.M;
 403
 404     var s = '<form name="mkwsSelect" class="mkwsSelect mkwsTeam_' + tname + '" action="" >';
 405     if (this.config.show_sort) {
 406         s +=  M('Sort by') + ' ' + mkwsHtmlSort() + ' ';
 407     }
 408     if (this.config.show_perpage) {
 409         s += M('and show') + ' ' + mkwsHtmlPerpage() + ' ' + M('per page') + '.';
 410     }
 411     s += '</form>';
 412
 413     $(this.node).html(s);
 414
 415
 416     function mkwsHtmlSort() {
 417         var order = that.team.sortOrder();
 418
 419         that.log("HTML sort, sortOrder = '" + order + "'");
 420         var sort_html = '<select class="mkwsSort mkwsTeam_' + tname + '">';
 421
 422         for(var i = 0; i < that.config.sort_options.length; i++) {
 423             var opt = that.config.sort_options[i];
 424             var key = opt[0];
 425             var val = opt.length == 1 ? opt[0] : opt[1];
 426
 427             sort_html += '<option value="' + key + '"';
 428             if (order == key || order == val) {
 429                 sort_html += ' selected="selected"';
 430             }
 431             sort_html += '>' + M(val) + '</option>';
 432         }
 433         sort_html += '</select>';
 434
 435         return sort_html;
 436     }
 437
 438     function mkwsHtmlPerpage() {
 439         var perpage = that.team.perpage();
 440
 441         that.log("HTML perpage, perpage = " + perpage);
 442         var perpage_html = '<select class="mkwsPerpage mkwsTeam_' + tname + '">';
 443
 444         for(var i = 0; i < that.config.perpage_options.length; i++) {
 445             var key = that.config.perpage_options[i];
 446
 447             perpage_html += '<option value="' + key + '"';
 448             if (key == perpage) {
 449                 perpage_html += ' selected="selected"';
 450             }
 451             perpage_html += '>' + key + '</option>';
 452         }
 453         perpage_html += '</select>';
 454
 455         return perpage_html;
 456     }
 457 });
 458
 459
 460 mkws.registerWidgetType('Lang', function() {
 461     // dynamic URL or static page? /path/foo?query=test
 462     /* create locale language menu */
 463     if (!this.config.show_lang) return;
 464
 465     var lang_default = "en";
 466     var lang = this.config.lang || lang_default;
 467     var list = [];
 468
 469     /* display a list of configured languages, or all */
 470     var lang_options = this.config.lang_options || [];
 471     var toBeIncluded = {};
 472     for (var i = 0; i < lang_options.length; i++) {
 473         toBeIncluded[lang_options[i]] = true;
 474     }
 475
 476     for (var k in mkws.locale_lang) {
 477         if (toBeIncluded[k] || lang_options.length == 0)
 478             list.push(k);
 479     }
 480
 481     // add english link
 482     if (lang_options.length == 0 || toBeIncluded[lang_default])
 483         list.push(lang_default);
 484
 485     this.log("Language menu for: " + list.join(", "));
 486
 487     /* the HTML part */
 488     var data = "";
 489     for (var i = 0; i < list.length; i++) {
 490         var l = list[i];
 491         if (data)
 492             data += ' | ';
 493
 494         if (lang == l) {
 495             data += ' <span>' + l + '</span> ';
 496         } else {
 497             data += ' <a href="' + lang_url(l) + '">' + l + '</a> '
 498         }
 499     }
 500
 501     $(this.node).html(data);
 502
 503
 504     // set or re-set "lang" URL parameter
 505     function lang_url(lang) {
 506         var query = location.search;
 507         // no query parameters? done
 508         if (!query) {
 509             return "?lang=" + lang;
 510         }
 511
 512         // parameter does not exist
 513         if (!query.match(/[\?&]lang=/)) {
 514             return query + "&lang=" + lang;
 515         }
 516
 517         // replace existing parameter
 518         query = query.replace(/\?lang=([^&#;]*)/, "?lang=" + lang);
 519         query = query.replace(/\&lang=([^&#;]*)/, "&lang=" + lang);
 520         return query;
 521     }
 522 });
 523
 524
 525 mkws.registerWidgetType('MOTD', function() {
 526     var container = this.team.widget('MOTDContainer');
 527     if (container) {
 528         // Move the MOTD from the provided element down into the container
 529         $(this.node).appendTo(container.node);
 530     }
 531 });
 532
 533