www/js/blerg.js

   1 /* Blerg is (C) 2011 The Dominion of Awesome, and is distributed under a
   2  * BSD-style license.  Please see the COPYING file for details.
   3  */
   4
   5 // Config
   6 var baseURL = '';
   7 var recordTemplate = new Template(
   8     '<div class="record">#{data}<div class="info">Posted #{date}</div></div>'
   9 );
  10 var tagRecordTemplate = new Template(
  11     '<div class="record">#{data}<div class="info">Posted by <a href="/\##{author}">@#{author}</a> on #{date}</div></div>'
  12 );
  13
  14 // Page elements
  15 var items;
  16
  17 // Other globals
  18 var currentPager;
  19 var loginStatus;
  20
  21 // Object to keep track of login status
  22 function LoginStatus() {
  23     var cookies = {};
  24     document.cookie.split(/;\s+/).each(function(v) {
  25         kv = v.split('=');
  26         cookies[kv[0]] = kv[1];
  27     });
  28     if (cookies.auth && cookies.username) {
  29         this.loggedIn = true;
  30         this.username = cookies.username;
  31     } else {
  32         this.loggedIn = false;
  33         this.username = null;
  34     }
  35     this.update();
  36 }
  37
  38 LoginStatus.prototype.login = function(username, password) {
  39     new Ajax.Request(baseURL + '/login', {
  40         parameters: {
  41             username: username,
  42             password: password
  43         },
  44         onSuccess: function(r) {
  45             var j = r.responseText.evalJSON();
  46             if (j && j.status == 'success') {
  47                 this.loggedIn = true;
  48                 this.username = username;
  49                 document.cookie = "username=" + username;
  50                 $('login.password').value = '';
  51                 this.update();
  52             } else {
  53                 alert("Could not log in");
  54                 $('login.username').focus();
  55             }
  56         }.bind(this),
  57         onFailure: function(r) {
  58             alert("Could not log in");
  59             $('login.username').focus();
  60         }
  61     });
  62 }
  63
  64 LoginStatus.prototype.logout = function() {
  65     new Ajax.Request(baseURL + '/logout', {
  66         parameters: {
  67             username: this.username
  68         },
  69         onSuccess: function(r) {
  70             this.loggedIn = false;
  71             document.cookie = "auth=; expires=1-Jan-1970 00:00:00 GMT";
  72             this.update();
  73         }.bind(this)
  74     });
  75     document.cookie = "username=; expires=1-Jan-1970 00:00:00 GMT";
  76 }
  77
  78 LoginStatus.prototype.update = function() {
  79     if (this.loggedIn) {
  80         $('userlink').href = '/#' + this.username;
  81         $('userlink').update('@' + this.username);
  82         $('reflink').href = '/#ref/' + this.username;
  83         $('login').hide();
  84         $('logout').show();
  85     } else {
  86         $('post').hide();
  87         $('login').show();
  88         $('logout').hide();
  89     }
  90 }
  91
  92 LoginStatus.prototype.post = function(msg) {
  93     if (!this.loggedIn) {
  94         alert("You are not logged in!");
  95         return;
  96     }
  97
  98     new Ajax.Request(baseURL + '/put', {
  99         parameters: {
 100             username: this.username,
 101             data: msg
 102         },
 103         onSuccess: function(r) {
 104             var j = r.responseText.evalJSON();
 105             if (j && j.status == 'success') {
 106                 $('post.content').value = '';
 107                 if (location.hash != '#' + this.username) {
 108                     location.href = '/#' + this.username;
 109                     hashSwitch();
 110                 } else {
 111                     currentPager.itemCount++;
 112                     currentPager.pageStart = null;
 113                     currentPager.loadItems();
 114                 }
 115             } else {
 116                 alert('Post failed!');
 117             }
 118         }.bind(this),
 119         onFailure: function(r) {
 120             alert('Post failed!');
 121         }
 122     });
 123 }
 124
 125
 126 // Base object for paged data
 127 function Pager() {
 128     this.itemsPerPage = 10;
 129 }
 130
 131 Pager.prototype.initPager = function() {
 132     this.itemCache = new Hash();
 133     this.pageStart = null;
 134 }
 135
 136 Pager.prototype.olderPage = function() {
 137     if (this.pageStart >= this.itemsPerPage) {
 138         this.pageStart -= this.itemsPerPage;
 139         this.displayItems();
 140     }
 141 }
 142
 143 Pager.prototype.newerPage = function() {
 144     if (this.pageStart + this.itemsPerPage < this.itemCount) {
 145         this.pageStart += this.itemsPerPage;
 146         this.displayItems();
 147     }
 148 }
 149
 150 Pager.prototype.addItems = function(items) {
 151     items.each(function(v) {
 152         if (!this.itemCache[v.id])
 153             this.itemCache[v.id] = v;
 154     }.bind(this));
 155 }
 156
 157 Pager.prototype.displayItems = function() {
 158     if (this.pageStart == undefined)
 159         this.pageStart == this.itemCount - 1;
 160     items.update();
 161
 162     if (this.pageStart != undefined && this.itemCache[this.pageStart]) {
 163         var end = (this.pageStart >= this.itemsPerPage ? this.pageStart - this.itemsPerPage + 1 : 0);
 164         for (var i = this.pageStart; i >= end; i--) {
 165             items.insert(this.itemCache[i].html);
 166         }
 167     } else {
 168         items.insert("There doesn't seem to be anything here!");
 169     }
 170
 171     if (this.pageStart < this.itemCount - 1)
 172         $('newer_link').show();
 173     else
 174         $('newer_link').hide();
 175
 176     if (this.pageStart >= 10)
 177         $('older_link').show();
 178     else
 179         $('older_link').hide();
 180 }
 181
 182
 183 // Object to render user pages
 184 function User(username) {
 185     this.initPager();
 186     this.username = username;
 187
 188     new Ajax.Request(baseURL + '/info/' + username, {
 189         method: 'get',
 190         onSuccess: function(r) {
 191             var j = r.responseText.evalJSON();
 192             if (j) {
 193                 this.itemCount = parseInt(j.record_count);
 194                 this.displayItems();
 195             }
 196         }.bind(this)
 197     });
 198 }
 199 User.prototype = new Pager();
 200 User.prototype.constructor = User;
 201
 202 User.prototype.show = function() {
 203     $$('[name=section]').each(function(v) { v.update(' @' + this.username) }.bind(this));
 204     $('welcome').hide();
 205     items.show();
 206     $('rss').show();
 207     $('rsslink').href = '/rss/' + this.username;
 208 }
 209
 210 User.prototype.loadItems = function(from, to) {
 211     var url;
 212     if (from != undefined && to != undefined) {
 213         url = baseURL + '/get/' + this.username + '/' + from + '-' + to;
 214         this.pageStart = to;
 215     } else {
 216         url = baseURL + '/get/' + this.username;
 217     }
 218
 219     new Ajax.Request(url, {
 220         method: 'get',
 221         onSuccess: function(r) {
 222             var records = r.responseText.evalJSON();
 223             if (records && records.length > 0) {
 224                 records.each(function(v) {
 225                     v.id = v.record;
 226                     mangleRecord(v, recordTemplate);
 227                 });
 228                 this.addItems(records);
 229                 if (!this.pageStart)
 230                     this.pageStart = records[0].recInt;
 231             }
 232             this.displayItems();
 233         }.bind(this),
 234         onFailure: function(r) {
 235             this.displayItems();
 236         }.bind(this),
 237         on404: function(r) {
 238             displayError('User not found');
 239         }
 240     });
 241 }
 242
 243 function mangleRecord(record, template) {
 244     record.recInt = parseInt(record.record);
 245
 246     // Sanitize HTML input
 247     record.data = record.data.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 248
 249     // Turn HTTP URLs into links
 250     record.data = record.data.replace(/(\s|^)(https?:\/\/[a-zA-Z0-9.-]*[a-zA-Z0-9](\/([^\s"]*[^.!,;?()\s])?)?)/g, '$1<a href="$2">$2</a>');
 251
 252     // Turn markdown links into links
 253     record.data = record.data.replace(/(\s|^)\[([^\]]+)\]\((https?:\/\/[a-zA-Z0-9.-]*[a-zA-Z0-9](\/[^)"]*?)?)\)/g, '$1<a href="$3">$2</a>');
 254
 255     // Turn *foo* into italics and **foo** into bold
 256     record.data = record.data.replace(/(\s)\*\*([^*]+)\*\*(\s)/g, '$1<b>$2</b>$3');
 257     record.data = record.data.replace(/(\s)\*([^*]+)\*(\s)/g, '$1<i>$2</i>$3');
 258
 259     // Turn refs and tags into links
 260     record.data = record.data.replace(/(\s|^)#([A-Za-z0-9_-]+)/g, '$1<a href="#tag/$2">#$2</a>');
 261     record.data = record.data.replace(/(\s|^)@([A-Za-z0-9_-]+)/g, '$1<a href="#$2">@$2</a>');
 262
 263     // Turn newlines into linebreaks and paragraphs
 264     record.data = record.data.replace(/\r?\n\r?\n/g, "<p>").replace(/\r?\n/g, "<br>");
 265
 266     record.date = (new Date(record.timestamp * 1000)).toString();
 267     record.html = template.evaluate(record);
 268 }
 269
 270 function displayError(msg) {
 271     items.innerText = msg;
 272 }
 273
 274
 275 // Object for browsing tags
 276 function Tag(type, tag) {
 277     this.initPager();
 278     this.type = type;
 279     this.tag = tag;
 280
 281     var url = baseURL + "/tag/";
 282     switch(type) {
 283     case 'tag':
 284         //url += '%23';
 285         url += 'H';  // apache is eating the hash, even encoded.  Probably a security feature.
 286         break;
 287     case 'ref':
 288         url += '%40';
 289         break;
 290     default:
 291         alert('Invalid tag type: ' + type);
 292         return;
 293     }
 294     url += tag;
 295
 296     new Ajax.Request(url, {
 297         method: 'get',
 298         onSuccess: function(r) {
 299             var j = r.responseText.evalJSON();
 300             if (j) {
 301                 var maxid = j.length - 1;
 302                 j.each(function(v, i) {
 303                     v.id = maxid - i;
 304                     mangleRecord(v, tagRecordTemplate)
 305                 });
 306                 this.addItems(j);
 307                 this.pageStart = j.length - 1;
 308             }
 309             this.displayItems();
 310         }.bind(this),
 311         onFailure: function(r) {
 312             this.displayItems();
 313         }.bind(this)
 314     });
 315
 316 }
 317 Tag.prototype = new Pager();
 318 Tag.prototype.constructor = Tag;
 319
 320 Tag.prototype.show = function() {
 321     var ctype = {ref: '@', tag: '#'}[this.type];
 322
 323     $$('[name=section]').each(function(v) {
 324         v.update(' about ' + ctype + this.tag);
 325     }.bind(this));
 326     $('welcome').hide();
 327     $('post').hide();
 328     $('older_link').hide();
 329     $('newer_link').hide();
 330     $('rss').hide();
 331     items.show();
 332 }
 333
 334 function postPopup() {
 335     if (loginStatus.loggedIn) {
 336         var post = $('post');
 337         if (post.visible()) {
 338             post.hide();
 339         } else {
 340             post.show();
 341             if (currentPager.username && currentPager.username != loginStatus.username && !$('post.content').value) {
 342                 $('post.content').value = '@' + currentPager.username + ': ';
 343             }
 344             $('post.content').focus();
 345         }
 346     }
 347 }
 348
 349 function signup() {
 350     var username = $('signup.username').value;
 351     var password = $('signup.password').value;
 352
 353     new Ajax.Request(baseURL + '/create', {
 354         parameters: {
 355             username: username,
 356             password: password
 357         },
 358         onSuccess: function(r) {
 359             $('signup').hide();
 360             location.href = '/#' + username;
 361             hashSwitch();
 362
 363             loginStatus.login(username, password);
 364         },
 365         onFailure: function(r) {
 366             alert("Failed to create user");
 367         }
 368     });
 369 }
 370
 371 function signup_cancel() {
 372     $('signup').hide();
 373     hashSwitch();
 374 }
 375
 376 function newer_page() {
 377     if (currentPager)
 378         currentPager.newerPage();
 379 }
 380
 381 function older_page() {
 382     if (currentPager)
 383         currentPager.olderPage();
 384 }
 385
 386 var resizePostContentTimeout = null;
 387 function resizePostContent() {
 388     if (resizePostContentTimeout)
 389         clearTimeout(resizePostContentTimeout);
 390     resizePostContentTimeout = setTimeout(function() {
 391         var c = $('post.content');
 392         var lines = Math.floor(c.value.length / (100 * (c.clientWidth / 1000))) + 1;
 393         var m = c.value.match(/\r?\n/g);
 394         if (m)
 395             lines += m.length;
 396         if (lines <= 3) {
 397             c.style.height = "";
 398         } else {
 399             c.style.height = (lines * 17) + "pt";
 400         }
 401         resizePostContentTimeout = null;
 402     }, 150);
 403 }
 404
 405 function loadNewThings() {
 406     new Ajax.Request(baseURL + '/newtags.json', {
 407         onSuccess: function(r) {
 408             $('newtags').update();
 409             r.responseText.evalJSON().each(function(v) {
 410                 var a = new Element('a', {href: '/#tag/' + v});
 411                 a.insert('#' + v);
 412                 $('newtags').insert(a);
 413                 $('newtags').insert(new Element('br'));
 414             });
 415         }
 416     });
 417
 418     new Ajax.Request(baseURL + '/newusers.json', {
 419         onSuccess: function(r) {
 420             $('newusers').update();
 421             r.responseText.evalJSON().each(function(v) {
 422                 var a = new Element('a', {href: '/#' + v});
 423                 a.insert('@' + v);
 424                 $('newusers').insert(a);
 425                 $('newusers').insert(new Element('br'));
 426             });
 427         }
 428     });
 429 }
 430
 431 function hashSwitch() {
 432     var m;
 433     if (m = location.search.match(/^\?post\/([^/]+)\/(.+)/)) {
 434         $('post').show();
 435         $('post.content').value = '[' + decodeURIComponent(m[1]).replace(']','').replace('[','') + '](' + decodeURIComponent(m[2]) + ')';
 436     } else if (m = location.hash.match(/^#(ref|tag)\/(\w+)$/)) {
 437         currentPager = new Tag(m[1], m[2]);
 438         currentPager.show();
 439     } else if (m = location.hash.match(/^#([A-Za-z0-9_-]+)(:(\d+))?$/)) {
 440         if (!currentPager || currentPager.username != m[1])
 441             currentPager = new User(m[1]);
 442         currentPager.show();
 443         loginStatus.update();
 444
 445         if (m[3]) {
 446             var r = parseInt(m[3]);
 447             currentPager.showRecord = r;
 448             if (currentPager.recordCache[r]) {
 449                 currentPager.displayItems();
 450             } else {
 451                 currentPager.loadItems((r >= 49 ? r - 49 : 0), r);
 452             }
 453         } else {
 454             currentPager.pageStart = currentPager.itemCount - 1;
 455             currentPager.loadItems();
 456         }
 457     } else {
 458         $$('[name=section]').each(function(v) { v.update('Welcome') });
 459         $('signup').hide();
 460         items.update();
 461         items.hide();
 462         $('newer_link').hide();
 463         $('older_link').hide();
 464         $('welcome').show();
 465         $('rss').hide();
 466         loadNewThings();
 467     }
 468 }
 469
 470 var lastHash;
 471 function hashCheck() {
 472     if (location.hash != lastHash) {
 473         lastHash = location.hash;
 474         hashSwitch();
 475     }
 476 }
 477
 478 function init() {
 479     items = $('items');
 480     loginStatus = new LoginStatus();
 481
 482     lastHash = location.hash;
 483     hashSwitch();
 484
 485     setInterval(hashCheck, 250);
 486
 487     document.body.observe('keyup', function(event) {
 488         if (event.shiftKey && event.keyCode == '32') {
 489             postPopup();
 490             event.stop();
 491         }
 492     });
 493     $('post.content').addEventListener('keyup', function(event) {
 494         event.stopPropagation();
 495     }, true);
 496 }