code.ivysaur.me/nmdc-webfrontend
1
0
Fork 0
Code Issues 2 Pull Requests Releases 13 Activity

ts: add minifier helpers, add a ton of function comments

Browse Source
This commit is contained in:
mappu 2017-11-12 12:52:51 +13:00
parent 48d58f4cc2
commit d2dd96dcd3
1 changed files with 165 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
client/dcwebui.ts
View File

@ -5,11 +5,34 @@ import * as io from 'socket.io-client'
"use strict"; "use strict";
/**
* Display value when loading a saved password
*/
var SENTINEL_PASSWORD = "************"; var SENTINEL_PASSWORD = "************";
var CHAT_SCROLLBACK_LIMIT = 200; // Once over 2x $limit, the first $limit will be trimmed off the list
/**
* Number of lines of chat to keep in the scroll area.
* Once there are over 2x $limit lines, the first $limit lines will be trimmed off the list
*/
var CHAT_SCROLLBACK_LIMIT = 200;
/**
* Our externally-accessible URL
*/
var EXTERN_ROOT = window.location.protocol + "//" + window.location.host + "/"; var EXTERN_ROOT = window.location.protocol + "//" + window.location.host + "/";
var nmdc_escape = function(str) { // Help out the braindead minifier, use these functions instead
var document_getElementById = document.getElementById;
var document_getElementsByClassName = document.getElementsByClassName;
var document_createElement = document.createElement;
var document_addEventListener = document.addEventListener;
/**
* Encode a string for NMDC
*
* @param str
*/
var nmdc_escape = function(str: string): string {
return ( return (
(''+str).length (''+str).length
? (''+str).replace(/&/g,'&').replace(/\|/g,'|').replace(/\$/g,'$') ? (''+str).replace(/&/g,'&').replace(/\|/g,'|').replace(/\$/g,'$')
@ -17,14 +40,24 @@ var nmdc_escape = function(str) {
); );
}; };
var hesc = function(s) { /**
* Encode a string for HTML
*
* @param s
*/
var hesc = function(s: string): string {
var filter = { var filter = {
'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&#34;', '\'': '&#39;' '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&#34;', '\'': '&#39;'
}; };
return s.toString().replace(/[&<>'"]/g, function(s) { return filter[s]; }); return s.toString().replace(/[&<>'"]/g, function(s) { return filter[s]; });
}; };
var fmtBytes = function(b) { /**
* Format a number of bytes as a human-readable string
*
* @param b
*/
var fmtBytes = function(b: number): string {
if (b == 0) { if (b == 0) {
return '(nothing)'; return '(nothing)';
} }
@ -35,12 +68,21 @@ var fmtBytes = function(b) {
return parseFloat((b / Math.pow(k, i)).toFixed(3)) + sizes[i]; return parseFloat((b / Math.pow(k, i)).toFixed(3)) + sizes[i];
}; };
/**
var urldesc = function(s) { * Decode a string that was previously encoded in raw-url format.
*
* @param s
*/
var urldesc = function(s: string):string {
return decodeURIComponent(s.replace(/\+/g, " ")); return decodeURIComponent(s.replace(/\+/g, " "));
} }
var linkify = function(str) { /**
* Enhance an HTML string by automatically making links clickable, etc.
*
* @param str An HTML-safe string
*/
var linkify = function(str : string):string {
// n.b. str is already hesced // n.b. str is already hesced
return (str return (str
.replace( .replace(
@ -54,17 +96,39 @@ var linkify = function(str) {
); );
}; };
var sanitise = function(s) { /**
* Convert a plain-text string into an enhanced, HTML-safe string.
*
* @param s
*/
var sanitise = function(s:string): string {
return linkify(hesc(s)); return linkify(hesc(s));
}; };
var textContent = function($el) { /**
if ($el.textContent) return $el.textContent; * Retrieve the plain-text content from an HTML element in a browser-compatible way.
if ($el.innerText) return $el.innerText; *
* @param $el
*/
var textContent = function($el : HTMLElement) : string {
if ($el.textContent) {
return $el.textContent;
}
if ($el.innerText) {
return $el.innerText;
}
return ""; return "";
}; };
var negmod = function(l, r) { /**
* Calculate the positive modulo of (l % r).
*
* @param l
* @param r
*/
var negmod = function(l:number, r:number):number {
var ret = l % r; var ret = l % r;
if (l < 0) { if (l < 0) {
return ret + r; return ret + r;
@ -73,16 +137,27 @@ var negmod = function(l, r) {
} }
}; };
// @ref https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /**
var b64 = function(str) { * Encode a string to base64 in a UTF8-safe way.
*
* @ref https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
* @param str
*/
var b64 = function(str : string):string {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode(parseInt('0x' + p1)); return String.fromCharCode(parseInt('0x' + p1));
})).replace(/=/g, ''); })).replace(/=/g, '');
} }
// @ref https://gist.github.com/eligrey/1276030 /**
var appendInnerHTML = function($el, html) { * Append content to an HTML element in a browser-compatible way.
var child = document.createElement("span"); *
* @ref https://gist.github.com/eligrey/1276030
* @param $el
* @param html
*/
var appendInnerHTML = function($el: HTMLElement, html:string) {
var child = document_createElement("span");
child.innerHTML = html; child.innerHTML = html;
var node; var node;
@ -91,30 +166,48 @@ var appendInnerHTML = function($el, html) {
} }
}; };
// @ref http://stackoverflow.com/a/5598797 /**
function getOffsetLeft( elem ) { * Retrieve the left offset of a DOM element relative to the document.
*
* @ref http://stackoverflow.com/a/5598797
* @param elem
*/
function getOffsetLeft( elem: HTMLElement ):number {
var offsetLeft = 0; var offsetLeft = 0;
do { do {
if (!isNaN(elem.offsetLeft)) { if (!isNaN(elem.offsetLeft)) {
offsetLeft += elem.offsetLeft; offsetLeft += elem.offsetLeft;
} }
} while (elem = elem.offsetParent); } while (elem = <HTMLElement>elem.offsetParent);
return offsetLeft; return offsetLeft;
} }
function getOffsetTop( elem ) { /**
* Retrieve the top offset for a DOM element relative to the document.
*
* @ref http://stackoverflow.com/a/5598797
* @param elem
*/
function getOffsetTop( elem: HTMLElement ):number {
var offsetTop = 0; var offsetTop = 0;
do { do {
if (!isNaN(elem.offsetTop)) { if (!isNaN(elem.offsetTop)) {
offsetTop += elem.offsetTop; offsetTop += elem.offsetTop;
} }
} while (elem = elem.offsetParent); } while (elem = <HTMLElement>elem.offsetParent);
return offsetTop; return offsetTop;
} }
/* */ /* */
var date_format = function(d, format) { /**
* Format a string in a date format, analgous to strftime().
*
* @param d
* @param format Formatting string, supporting HisYmd character specifiers
* @return Plain text string
*/
var date_format = function(d:Date, format:string):string {
var pad = function(s) { var pad = function(s) {
return (s < 10) ? '0'+s : ''+s ; return (s < 10) ? '0'+s : ''+s ;
}; };
@ -123,15 +216,20 @@ var date_format = function(d, format) {
ret = ret.replace(/H/g, pad(d.getHours())); ret = ret.replace(/H/g, pad(d.getHours()));
ret = ret.replace(/i/g, pad(d.getMinutes())); ret = ret.replace(/i/g, pad(d.getMinutes()));
ret = ret.replace(/s/g, pad(d.getSeconds())); ret = ret.replace(/s/g, pad(d.getSeconds()));
ret = ret.replace(/Y/g, d.getFullYear()); ret = ret.replace(/Y/g, "" + d.getFullYear());
ret = ret.replace(/m/g, pad(d.getMonth() + 1)); ret = ret.replace(/m/g, pad(d.getMonth() + 1));
ret = ret.replace(/d/g, pad(d.getDate())); ret = ret.replace(/d/g, pad(d.getDate()));
return ret; return ret;
}; };
/* */ /**
* Emit an HTML5 notification.
var notify = function(title, body, tab) { *
* @param title
* @param body
* @param tab
*/
var notify = function(title:string, body:string, tab:string) {
if (!("Notification" in window)) { if (!("Notification" in window)) {
return; // not supported by browser return; // not supported by browser
} }
@ -164,7 +262,7 @@ var notify = function(title, body, tab) {
/* Tab writers */ /* Tab writers */
var write = function(tab) { var write = function(tab) {
var $tab = document.getElementById("inner-"+tab); var $tab = document_getElementById("inner-"+tab);
return { return {
'cls': function() { 'cls': function() {
$tab.innerHTML = ''; $tab.innerHTML = '';
@ -240,11 +338,11 @@ var userlist = {
'add': function(u) { 'add': function(u) {
if (this.has(u)) return; if (this.has(u)) return;
var userlists = document.getElementsByClassName("userlist"); var userlists = document_getElementsByClassName("userlist");
for (var l = 0, e = userlists.length; l !== e; ++l) { for (var l = 0, e = userlists.length; l !== e; ++l) {
var userlist = userlists[l]; var userlist = userlists[l];
var to_add = document.createElement('li'); var to_add = document_createElement('li');
to_add.className = "user-" + b64(u); to_add.className = "user-" + b64(u);
to_add.innerHTML = hesc(u); to_add.innerHTML = hesc(u);
@ -269,7 +367,7 @@ var userlist = {
return this; return this;
}, },
'del': function(u) { 'del': function(u) {
var userlists = document.getElementsByClassName("userlist"); var userlists = document_getElementsByClassName("userlist");
for (var l = 0, e = userlists.length; l !== e; ++l) { for (var l = 0, e = userlists.length; l !== e; ++l) {
if (! userlists[l].children) continue; if (! userlists[l].children) continue;
var userlist = userlists[l]; var userlist = userlists[l];
@ -286,7 +384,7 @@ var userlist = {
return this; return this;
}, },
'clear': function() { 'clear': function() {
var userlists = document.getElementsByClassName("userlist"); var userlists = document_getElementsByClassName("userlist");
for (var i in userlists) { for (var i in userlists) {
if (! userlists[i].children) continue; if (! userlists[i].children) continue;
var userlist = userlists[i]; var userlist = userlists[i];
@ -299,22 +397,22 @@ var userlist = {
return this; return this;
}, },
'names': function() { 'names': function() {
var userlist = document.getElementsByClassName("userlist")[0].children; var userlist = document_getElementsByClassName("userlist")[0].children;
var ret = []; var ret = [];
for (var i = 0, e = userlist.length; i < e; ++i) { for (var i = 0, e = userlist.length; i < e; ++i) {
ret.push( textContent(userlist[i]) ); ret.push( textContent((<HTMLElement>userlist[i])) );
} }
return ret; return ret;
}, },
'has': function(u) { 'has': function(u) {
return document.getElementsByClassName("user-" + b64(u)).length !== 0; /* there are two - large and non-large */ return document_getElementsByClassName("user-" + b64(u)).length !== 0; /* there are two - large and non-large */
}, },
'count': function() { 'count': function() {
return document.getElementsByClassName("userlist")[0].children.length; return document_getElementsByClassName("userlist")[0].children.length;
}, },
'setInfo': function(nick, props) { 'setInfo': function(nick, props) {
var baseClass = "user-" + b64(nick); var baseClass = "user-" + b64(nick);
var $el = document.getElementsByClassName("" + baseClass); var $el = document_getElementsByClassName("" + baseClass);
var prop_str = []; var prop_str = [];
if (props.Description.length > 0) { if (props.Description.length > 0) {
prop_str.push(props.Description); prop_str.push(props.Description);
@ -343,7 +441,7 @@ var userlist = {
}; };
var submit = function() { var submit = function() {
var str = (<HTMLInputElement>document.getElementById("chatbox")).value; var str = (<HTMLInputElement>document_getElementById("chatbox")).value;
if (! str.length) return; if (! str.length) return;
if (hub_state === STATE_READY_FOR_LOGIN) { if (hub_state === STATE_READY_FOR_LOGIN) {
@ -386,7 +484,7 @@ var submit = function() {
write("tab-main").system("Invalid internal state."); write("tab-main").system("Invalid internal state.");
} }
(<HTMLInputElement>document.getElementById("chatbox")).value = ''; (<HTMLInputElement>document_getElementById("chatbox")).value = '';
}; };
/* page visibility */ /* page visibility */
@ -412,7 +510,7 @@ var pagevis_setup = function(fnActive, fnInactive) {
pagevis_currently_visible = true pagevis_currently_visible = true
} else { } else {
document.addEventListener(vc, function() { document_addEventListener(vc, function() {
if (document[h]) { if (document[h]) {
pagevis_currently_visible = false; pagevis_currently_visible = false;
fnInactive(); fnInactive();
@ -433,13 +531,13 @@ var pagevis_setup = function(fnActive, fnInactive) {
*/ */
var tab_set = function(tab) { var tab_set = function(tab) {
var tabs = document.getElementsByClassName("tabpane"); var tabs = document_getElementsByClassName("tabpane");
for (var i in tabs) { for (var i in tabs) {
try { try {
(<HTMLElement> tabs[i]).style.display = (tabs[i].id === tab ? 'block' : 'none'); (<HTMLElement> tabs[i]).style.display = (tabs[i].id === tab ? 'block' : 'none');
} catch (e) {}; } catch (e) {};
} }
var tabitems = document.getElementsByClassName("tabitem"); var tabitems = document_getElementsByClassName("tabitem");
for (var i in tabitems) { for (var i in tabitems) {
try { try {
// Update UNREAD/SELECTED flags for the target // Update UNREAD/SELECTED flags for the target
@ -467,13 +565,13 @@ var tab_set = function(tab) {
updateTitle(); updateTitle();
write(tab).scroll(); write(tab).scroll();
document.getElementById("chatbox").focus(); document_getElementById("chatbox").focus();
last_tab = tab; last_tab = tab;
}; };
var tab_new = function(id, name) { var tab_new = function(id, name) {
appendInnerHTML(document.getElementById("bar"), appendInnerHTML(document_getElementById("bar"),
' <div class="tabitem" data-tab="tab-ext-'+id+'" id="tabitem-tab-ext-'+id+'">'+ ' <div class="tabitem" data-tab="tab-ext-'+id+'" id="tabitem-tab-ext-'+id+'">'+
'<span class="tab-label">'+ '<span class="tab-label">'+
hesc(name)+ hesc(name)+
@ -481,7 +579,7 @@ var tab_new = function(id, name) {
'<a class="tab-closer" data-tab="tab-ext-'+id+'">&times;</a>'+ '<a class="tab-closer" data-tab="tab-ext-'+id+'">&times;</a>'+
'</div> ' '</div> '
); );
appendInnerHTML(document.getElementById("extratabs"), appendInnerHTML(document_getElementById("extratabs"),
' <div class="tabpane content placement-mid" id="tab-ext-'+id+'" style="display:none;">'+ ' <div class="tabpane content placement-mid" id="tab-ext-'+id+'" style="display:none;">'+
'<div class="content-inner" id="inner-tab-ext-'+id+'"></div>'+ '<div class="content-inner" id="inner-tab-ext-'+id+'"></div>'+
'</div>' '</div>'
@ -494,10 +592,10 @@ var tab_free = function(id) {
if (id === "tab-main") return; if (id === "tab-main") return;
// remove tab item and body // remove tab item and body
var $el = document.getElementById("tabitem-"+id); var $el = document_getElementById("tabitem-"+id);
$el.parentNode.removeChild($el); $el.parentNode.removeChild($el);
$el = document.getElementById(""+id); $el = document_getElementById(""+id);
$el.parentNode.removeChild($el); $el.parentNode.removeChild($el);
// clear from PM tabs // clear from PM tabs
@ -532,7 +630,7 @@ var noprop = function(ev) {
} }
var tab_addHandlers = function() { var tab_addHandlers = function() {
var tabitems = document.getElementsByClassName("tabitem"); var tabitems = document_getElementsByClassName("tabitem");
for (var i = 0; i < tabitems.length; i++) { for (var i = 0; i < tabitems.length; i++) {
if (! tabitems[i]) { if (! tabitems[i]) {
continue; continue;
@ -545,7 +643,7 @@ var tab_addHandlers = function() {
}; };
} }
var tabclosers = document.getElementsByClassName("tab-closer"); var tabclosers = document_getElementsByClassName("tab-closer");
for (var i = 0; i < tabclosers.length; i++) { for (var i = 0; i < tabclosers.length; i++) {
if (! tabclosers[i]) { if (! tabclosers[i]) {
continue; continue;
@ -587,7 +685,7 @@ var tabcomplete_state = '';
var tabcompletion_start = function(direction) { var tabcompletion_start = function(direction) {
var cursor = (<HTMLInputElement>document.getElementById("chatbox")).value.replace(/^.*\s([^\s]+)$/, '$1'); var cursor = (<HTMLInputElement>document_getElementById("chatbox")).value.replace(/^.*\s([^\s]+)$/, '$1');
if (tabcomplete_state === '') { if (tabcomplete_state === '') {
// new tab completion // new tab completion
@ -623,7 +721,7 @@ var tabcompletion_start = function(direction) {
// Replace in textbox // Replace in textbox
var $chatbox = (<HTMLInputElement>document.getElementById("chatbox")); var $chatbox = (<HTMLInputElement>document_getElementById("chatbox"));
var chatprefix = $chatbox.value.substr(0, $chatbox.value.length - cursor.length); var chatprefix = $chatbox.value.substr(0, $chatbox.value.length - cursor.length);
$chatbox.value = chatprefix + targetName; $chatbox.value = chatprefix + targetName;
@ -639,11 +737,11 @@ var tabcompletion_inactive = function() {
var MenuList = function(el) { var MenuList = function(el) {
this.el = el; this.el = el;
this.div = document.createElement("div"); this.div = document_createElement("div");
this.div.classList.add("menu"); this.div.classList.add("menu");
this.div.style.position = "absolute"; this.div.style.position = "absolute";
this.ul = document.createElement("ul"); this.ul = document_createElement("ul");
this.div.appendChild(this.ul); this.div.appendChild(this.ul);
document.body.appendChild(this.div); document.body.appendChild(this.div);
@ -655,7 +753,7 @@ MenuList.prototype.clear = function() {
} }
}; };
MenuList.prototype.add = function(txt, cb) { MenuList.prototype.add = function(txt, cb) {
var li = document.createElement("li"); var li = document_createElement("li");
li.innerHTML = txt; li.innerHTML = txt;
li.onclick = cb; li.onclick = cb;
this.ul.appendChild(li); this.ul.appendChild(li);
@ -676,7 +774,7 @@ MenuList.prototype.toggle = function() {
/* */ /* */
var menu = new MenuList(document.getElementById("menubutton")); var menu = new MenuList(document_getElementById("menubutton"));
menu.reset = function() { menu.reset = function() {
this.clear(); this.clear();
@ -779,7 +877,7 @@ var toggle_joinparts = function(ev) {
var updateTitle = function() { var updateTitle = function() {
var prefix = ""; var prefix = "";
var unrTabs = document.getElementsByClassName("unread"); var unrTabs = document_getElementsByClassName("unread");
if (unrTabs.length === 1 && unrTabs[0].getAttribute('data-tab') == "tab-main") { if (unrTabs.length === 1 && unrTabs[0].getAttribute('data-tab') == "tab-main") {
prefix = "[" + mainchat_unread_count + " NEW] " prefix = "[" + mainchat_unread_count + " NEW] "
} else if (unrTabs.length > 0) { } else if (unrTabs.length > 0) {
@ -885,7 +983,7 @@ var scrollback_move = function(delta) {
} }
} }
(<HTMLInputElement>document.getElementById("chatbox")).value = chat_scrollback[chat_scrollback_index]; (<HTMLInputElement>document_getElementById("chatbox")).value = chat_scrollback[chat_scrollback_index];
}; };
/* */ /* */
@ -906,7 +1004,7 @@ var persistence_get = function(key, fallback) {
var transition = function(new_state) { var transition = function(new_state) {
hub_state = new_state; hub_state = new_state;
var $chatbox = (<HTMLInputElement>document.getElementById("chatbox")); var $chatbox = (<HTMLInputElement>document_getElementById("chatbox"));
switch(new_state) { switch(new_state) {
case STATE_DISCONNECTED: { case STATE_DISCONNECTED: {
@ -939,8 +1037,8 @@ var tab_is_visible = function(tabref) {
} }
var tab_mark_unread = function(tabref) { var tab_mark_unread = function(tabref) {
if (document.getElementById("tabitem-"+tabref).className.indexOf('unread') === -1) { if (document_getElementById("tabitem-"+tabref).className.indexOf('unread') === -1) {
document.getElementById("tabitem-"+tabref).className += " unread"; document_getElementById("tabitem-"+tabref).className += " unread";
updateTitle(); updateTitle();
} }
} }
@ -957,21 +1055,21 @@ var contented_load = function() {
var onceSDKLoaded = function() { var onceSDKLoaded = function() {
contented.init("#inner-tab-main", function(items) { contented.init("#inner-tab-main", function(items) {
var val = (<HTMLInputElement> document.getElementById("chatbox")).value; var val = (<HTMLInputElement> document_getElementById("chatbox")).value;
for (var i = 0; i < items.length; ++i) { for (var i = 0; i < items.length; ++i) {
if (val.length > 0) { if (val.length > 0) {
val += " "; val += " ";
} }
val += contented.getPreviewURL(items[i]); val += contented.getPreviewURL(items[i]);
} }
(<HTMLInputElement> document.getElementById("chatbox")).value = val; (<HTMLInputElement> document_getElementById("chatbox")).value = val;
}); });
}; };
if (contented_loaded_sdk) { if (contented_loaded_sdk) {
onceSDKLoaded(); onceSDKLoaded();
} else { } else {
var scriptElement = document.createElement('script'); var scriptElement = document_createElement('script');
scriptElement.onload = function() { scriptElement.onload = function() {
contented_loaded_sdk = true; contented_loaded_sdk = true;
onceSDKLoaded(); onceSDKLoaded();
@ -992,13 +1090,13 @@ window.onload = function() {
// HTML event handlers // HTML event handlers
document.getElementById("form-none").onsubmit = function(ev) { document_getElementById("form-none").onsubmit = function(ev) {
submit(); submit();
return noprop(ev); // don't submit form return noprop(ev); // don't submit form
}; };
document.getElementById("chatbox").onkeydown = function(ev) { document_getElementById("chatbox").onkeydown = function(ev) {
if (ev.keyCode === 9 /* Tab */) { if (ev.keyCode === 9 /* Tab */) {
tabcompletion_start( ev.shiftKey ? -1 : 1 ); tabcompletion_start( ev.shiftKey ? -1 : 1 );
return noprop(ev); return noprop(ev);
@ -1026,7 +1124,7 @@ window.onload = function() {
usermenu.hide(); usermenu.hide();
}; };
document.getElementById("menubutton").onclick = function(ev) { document_getElementById("menubutton").onclick = function(ev) {
menu.toggle(); menu.toggle();
return noprop(ev); return noprop(ev);
}; };
@ -1084,7 +1182,7 @@ window.onload = function() {
if (pre_login.indexOf(":") !== -1) { if (pre_login.indexOf(":") !== -1) {
pre_login = pre_login.substr(0, pre_login.indexOf(":")) + ":" + SENTINEL_PASSWORD; pre_login = pre_login.substr(0, pre_login.indexOf(":")) + ":" + SENTINEL_PASSWORD;
} }
(<HTMLInputElement>document.getElementById("chatbox")).value = pre_login; (<HTMLInputElement>document_getElementById("chatbox")).value = pre_login;
if (have_cleared_once) { if (have_cleared_once) {
// re-log-in automatically // re-log-in automatically