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

typescript: initial package conversion

Browse Source
This commit is contained in:
mappu 2017-11-12 12:21:52 +13:00
parent d5f6a5f2cb
commit 19a665d61d
4 changed files with 131 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
client/dcwebui.js → client/dcwebui.ts
View File

@ -1,8 +1,7 @@
/* dcwebui.js */
require("./dcwebui.less");
import io from 'socket.io-client'
import "./dcwebui.less"; // for webpack
import * as io from 'socket.io-client'
"use strict";
@ -10,23 +9,6 @@ var SENTINEL_PASSWORD = "************";
var CHAT_SCROLLBACK_LIMIT = 200; // Once over 2x $limit, the first $limit will be trimmed off the list
var EXTERN_ROOT = window.location.protocol + "//" + window.location.host + "/";
var el = function(s) {
// There used to be a querySelectorAll implementation, but, better that we don't have
// potentially-incompatible implementations if this one does actually work.
// i'm not writing a selector engine...
if (! s.length) {
return [];
}
if (s[0] === '#') {
return document.getElementById(s.slice(1)); // single element
} else if (s[0] === '.') {
return document.getElementsByClassName(s.slice(1)); // multiple elements
} else {
return document.getElementsByTagName(s); // multiple elements
}
};
var nmdc_escape = function(str) {
return (
(''+str).length
@ -94,7 +76,7 @@ var negmod = function(l, r) {
// @ref https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
var b64 = function(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
return String.fromCharCode(parseInt('0x' + p1));
})).replace(/=/g, '');
}
@ -154,7 +136,7 @@ var notify = function(title, body, tab) {
return; // not supported by browser
}
switch (window.Notification.permission) {
switch ( (window as any).Notification.permission) {
case "granted": {
var n = new Notification(title, {
body: body,
@ -173,7 +155,7 @@ var notify = function(title, body, tab) {
default: {
// Clarify permission and retry
Notification.requestPermission(function(permission) {
notify(title, body);
notify(title, body, "tab-main");
});
} break;
}
@ -182,7 +164,7 @@ var notify = function(title, body, tab) {
/* Tab writers */
var write = function(tab) {
var $tab = el('#inner-'+tab);
var $tab = document.getElementById("#inner-"+tab);
return {
'cls': function() {
$tab.innerHTML = '';
@ -258,7 +240,7 @@ var userlist = {
'add': function(u) {
if (this.has(u)) return;
var userlists = el(".userlist");
var userlists = document.getElementsByClassName("userlist");
for (var l = 0, e = userlists.length; l !== e; ++l) {
var userlist = userlists[l];
@ -287,7 +269,7 @@ var userlist = {
return this;
},
'del': function(u) {
var userlists = el(".userlist");
var userlists = document.getElementsByClassName("userlist");
for (var l = 0, e = userlists.length; l !== e; ++l) {
if (! userlists[l].children) continue;
var userlist = userlists[l];
@ -304,7 +286,7 @@ var userlist = {
return this;
},
'clear': function() {
var userlists = el(".userlist");
var userlists = document.getElementsByClassName("userlist");
for (var i in userlists) {
if (! userlists[i].children) continue;
var userlist = userlists[i];
@ -317,7 +299,7 @@ var userlist = {
return this;
},
'names': function() {
var userlist = el(".userlist")[0].children;
var userlist = document.getElementsByClassName("userlist")[0].children;
var ret = [];
for (var i = 0, e = userlist.length; i < e; ++i) {
ret.push( textContent(userlist[i]) );
@ -325,14 +307,14 @@ var userlist = {
return ret;
},
'has': function(u) {
return el(".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() {
return el(".userlist")[0].children.length;
return document.getElementsByClassName("userlist")[0].children.length;
},
'setInfo': function(nick, props) {
var baseClass = "user-" + b64(nick);
var $el = el("." + baseClass);
var $el = document.getElementsByClassName("" + baseClass);
var prop_str = [];
if (props.Description.length > 0) {
prop_str.push(props.Description);
@ -349,7 +331,7 @@ var userlist = {
prop_str.push("Sharing " + fmtBytes(props.ShareSize));
for (var i = 0; i < $el.length; ++i) {
$el[i].title = prop_str.join("\n");
(<HTMLElement> $el[i]).title = prop_str.join("\n");
if (props.IsOperator) {
$el[i].className = baseClass + " user-is-operator";
@ -361,7 +343,7 @@ var userlist = {
};
var submit = function() {
var str = el("#chatbox").value;
var str = (<HTMLInputElement>document.getElementById("chatbox")).value;
if (! str.length) return;
if (hub_state === STATE_READY_FOR_LOGIN) {
@ -387,7 +369,7 @@ var submit = function() {
write("tab-main").system("Connecting...");
} else if (hub_state === STATE_ACTIVE) {
if (pm_target !== false) {
if (pm_target !== PM_TARGET_NONE) {
sock.emit('priv', {'user': pm_target, 'message': str});
writerFor(pm_target).pub(hub_last_nick, str );
} else {
@ -404,7 +386,7 @@ var submit = function() {
write("tab-main").system("Invalid internal state.");
}
el("#chatbox").value = '';
(<HTMLInputElement>document.getElementById("chatbox")).value = '';
};
/* page visibility */
@ -417,10 +399,10 @@ var pagevis_setup = function(fnActive, fnInactive) {
if (typeof document.hidden !== "undefined") {
h = "hidden";
vc = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
} else if (typeof (document as any).msHidden !== "undefined") {
h = "msHidden";
vc = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
} else if (typeof (document as any).webkitHidden !== "undefined") {
h = "webkitHidden";
vc = "webkitvisibilitychange";
}
@ -451,13 +433,13 @@ var pagevis_setup = function(fnActive, fnInactive) {
*/
var tab_set = function(tab) {
var tabs = el(".tabpane");
var tabs = document.getElementsByClassName("tabpane");
for (var i in tabs) {
try {
tabs[i].style.display = (tabs[i].id === tab ? 'block' : 'none');
(<HTMLElement> tabs[i]).style.display = (tabs[i].id === tab ? 'block' : 'none');
} catch (e) {};
}
var tabitems = el(".tabitem");
var tabitems = document.getElementsByClassName("tabitem");
for (var i in tabitems) {
try {
// Update UNREAD/SELECTED flags for the target
@ -470,7 +452,7 @@ var tab_set = function(tab) {
} catch (e) {};
}
pm_target = false;
pm_target = PM_TARGET_NONE;
for (var i in pm_tabs) {
if (pm_tabs[i] === tab) {
pm_target = i;
@ -485,13 +467,13 @@ var tab_set = function(tab) {
updateTitle();
write(tab).scroll();
el("#chatbox").focus();
document.getElementById("chatbox").focus();
last_tab = tab;
};
var tab_new = function(id, name) {
appendInnerHTML(el("#bar"),
appendInnerHTML(document.getElementById("bar"),
' <div class="tabitem" data-tab="tab-ext-'+id+'" id="tabitem-tab-ext-'+id+'">'+
'<span class="tab-label">'+
hesc(name)+
@ -499,7 +481,7 @@ var tab_new = function(id, name) {
'<a class="tab-closer" data-tab="tab-ext-'+id+'">&times;</a>'+
'</div> '
);
appendInnerHTML(el("#extratabs"),
appendInnerHTML(document.getElementById("extratabs"),
' <div class="tabpane content placement-mid" id="tab-ext-'+id+'" style="display:none;">'+
'<div class="content-inner" id="inner-tab-ext-'+id+'"></div>'+
'</div>'
@ -512,10 +494,10 @@ var tab_free = function(id) {
if (id === "tab-main") return;
// remove tab item and body
var $el = el("#tabitem-"+id);
var $el = document.getElementById("tabitem-"+id);
$el.parentNode.removeChild($el);
$el = el("#"+id);
$el = document.getElementById(""+id);
$el.parentNode.removeChild($el);
// clear from PM tabs
@ -550,22 +532,26 @@ var noprop = function(ev) {
}
var tab_addHandlers = function() {
var tabitems = el(".tabitem");
var tabitems = document.getElementsByClassName("tabitem");
for (var i = 0; i < tabitems.length; i++) {
if (! tabitems[i]) continue;
if (! tabitems[i]) {
continue;
}
tabitems[i].onclick = function(ev) {
(<HTMLElement> tabitems[i]).onclick = function(ev) {
tab_set( this.getAttribute('data-tab') );
return noprop(ev);
};
}
var tabclosers = el(".tab-closer");
var tabclosers = document.getElementsByClassName("tab-closer");
for (var i = 0; i < tabclosers.length; i++) {
if (! tabclosers[i]) continue;
if (! tabclosers[i]) {
continue;
}
tabclosers[i].onclick = function(ev) {
(<HTMLElement> tabclosers[i]).onclick = function(ev) {
tab_free( this.getAttribute('data-tab') );
return noprop(ev);
@ -575,8 +561,8 @@ var tab_addHandlers = function() {
/* */
var maybeWriterFor = function(username) {
if (! username in pm_tabs || ! pm_tabs[username]) {
var maybeWriterFor = function(username: string) {
if (! (username in pm_tabs) || ! pm_tabs[username]) {
return null;
}
@ -601,7 +587,7 @@ var tabcomplete_state = '';
var tabcompletion_start = function(direction) {
var cursor = el("#chatbox").value.replace(/^.*\s([^\s]+)$/, '$1');
var cursor = (<HTMLInputElement>document.getElementById("chatbox")).value.replace(/^.*\s([^\s]+)$/, '$1');
if (tabcomplete_state === '') {
// new tab completion
@ -637,10 +623,11 @@ var tabcompletion_start = function(direction) {
// Replace in textbox
var chatprefix = el("#chatbox").value.substr(0, el("#chatbox").value.length - cursor.length);
var $chatbox = (<HTMLInputElement>document.getElementById("chatbox"));
var chatprefix = $chatbox.value.substr(0, $chatbox.value.length - cursor.length);
el("#chatbox").value = chatprefix + targetName;
el("#chatbox").focus();
$chatbox.value = chatprefix + targetName;
$chatbox.focus();
};
var tabcompletion_inactive = function() {
@ -689,7 +676,7 @@ MenuList.prototype.toggle = function() {
/* */
var menu = new MenuList(el("#menubutton"));
var menu = new MenuList(document.getElementById("menubutton"));
menu.reset = function() {
this.clear();
@ -792,7 +779,7 @@ var toggle_joinparts = function(ev) {
var updateTitle = function() {
var prefix = "";
var unrTabs = el(".unread");
var unrTabs = document.getElementsByClassName("unread");
if (unrTabs.length === 1 && unrTabs[0].getAttribute('data-tab') == "tab-main") {
prefix = "[" + mainchat_unread_count + " NEW] "
} else if (unrTabs.length > 0) {
@ -806,14 +793,15 @@ var updateTitle = function() {
document.title = prefix + hub_hubname + suffix;
};
var sock = {};
var sock:SocketIOClient.Socket = null;
var hub_state = 0; // [disconnected, sent-nick, connected]
var hub_last_nick = '';
var hub_hubname = "Loading...";
var pm_tabs = {}; // nick => tabid
var next_tabid = 1;
var pm_target = false;
const PM_TARGET_NONE = "";
var pm_target = PM_TARGET_NONE;
var last_tab = "tab-main";
@ -897,7 +885,7 @@ var scrollback_move = function(delta) {
}
}
el("#chatbox").value = chat_scrollback[chat_scrollback_index];
(<HTMLInputElement>document.getElementById("chatbox")).value = chat_scrollback[chat_scrollback_index];
};
/* */
@ -918,29 +906,30 @@ var persistence_get = function(key, fallback) {
var transition = function(new_state) {
hub_state = new_state;
var $chatbox = (<HTMLInputElement>document.getElementById("chatbox"));
switch(new_state) {
case STATE_DISCONNECTED: {
userlist.clear();
el("#chatbox").disabled = true;
el("#chatbox").value = ''; // clear
$chatbox.disabled = true;
$chatbox.value = ''; // clear
} break;
case STATE_READY_FOR_LOGIN: {
userlist.clear();
el("#chatbox").spellcheck = false;
el("#chatbox").disabled = false;
el("#chatbox").value = ''; // clear
$chatbox.spellcheck = false;
$chatbox.disabled = false;
$chatbox.value = ''; // clear
} break;
case STATE_CONNECTING: {
el("#chatbox").disabled = true;
$chatbox.disabled = true;
} break;
case STATE_ACTIVE: {
write("tab-main").system("Now talking on "+hub_hubname);
el("#chatbox").disabled = false;
el("#chatbox").spellcheck = true;
$chatbox.disabled = false;
$chatbox.spellcheck = true;
} break;
}
};
@ -950,14 +939,15 @@ var tab_is_visible = function(tabref) {
}
var tab_mark_unread = function(tabref) {
if (el("#tabitem-"+tabref).className.indexOf('unread') === -1) {
el("#tabitem-"+tabref).className += " unread";
if (document.getElementById("tabitem-"+tabref).className.indexOf('unread') === -1) {
document.getElementById("tabitem-"+tabref).className += " unread";
updateTitle();
}
}
//
declare var contented: any;
var contented_url = "";
var contented_loaded_sdk = false;
var contented_load = function() {
@ -967,14 +957,14 @@ var contented_load = function() {
var onceSDKLoaded = function() {
contented.init("#inner-tab-main", function(items) {
var val = el("#chatbox").value;
var val = (<HTMLInputElement> document.getElementById("chatbox")).value;
for (var i = 0; i < items.length; ++i) {
if (val.length > 0) {
val += " ";
}
val += contented.getPreviewURL(items[i]);
}
el("#chatbox").value = val;
(<HTMLInputElement> document.getElementById("chatbox")).value = val;
});
};
@ -1002,13 +992,13 @@ window.onload = function() {
// HTML event handlers
el("#form-none").onsubmit = function(ev) {
document.getElementById("form-none").onsubmit = function(ev) {
submit();
return noprop(ev); // don't submit form
};
el("#chatbox").onkeydown = function(ev) {
document.getElementById("chatbox").onkeydown = function(ev) {
if (ev.keyCode === 9 /* Tab */) {
tabcompletion_start( ev.shiftKey ? -1 : 1 );
return noprop(ev);
@ -1036,7 +1026,7 @@ window.onload = function() {
usermenu.hide();
};
el("#menubutton").onclick = function(ev) {
document.getElementById("menubutton").onclick = function(ev) {
menu.toggle();
return noprop(ev);
};
@ -1094,7 +1084,7 @@ window.onload = function() {
if (pre_login.indexOf(":") !== -1) {
pre_login = pre_login.substr(0, pre_login.indexOf(":")) + ":" + SENTINEL_PASSWORD;
}
el("#chatbox").value = pre_login;
(<HTMLInputElement>document.getElementById("chatbox")).value = pre_login;
if (have_cleared_once) {
// re-log-in automatically

49
package-lock.json generated
View File

@ -4,6 +4,11 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@types/socket.io-client": {
"version": "1.4.31",
"resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.31.tgz",
"integrity": "sha512-CNxZH+ZPL0bkg9qr7HMNHI2TzZOHGbha3LrrH8TIMutd2TUAreb1YJ9u8pfptzZbbBiwnSpZkY+mmrqkZp5I7A=="
},
"acorn": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz",
@ -4207,6 +4212,50 @@
"punycode": "1.4.1"
}
},
"ts-loader": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-3.1.1.tgz",
"integrity": "sha512-AQmLFSIgTiR8AlS5BxqvoHpZ3OUTwHHuDZTAZ2KcKsYRz/yANGeQn4Se/DCQ4cn1/eVvN37f/caVW4+kUPNNHw==",
"requires": {
"chalk": "2.3.0",
"enhanced-resolve": "3.3.0",
"loader-utils": "1.1.0",
"semver": "5.4.1"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
"integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
"requires": {
"color-convert": "1.9.1"
}
},
"chalk": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
"integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
"requires": {
"ansi-styles": "3.2.0",
"escape-string-regexp": "1.0.5",
"supports-color": "4.5.0"
}
},
"has-flag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
},
"supports-color": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
"integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
"requires": {
"has-flag": "2.0.0"
}
}
}
},
"tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

2
package.json
View File

@ -14,6 +14,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"@types/socket.io-client": "^1.4.31",
"awesome-typescript-loader": "^3.3.0",
"css-loader": "^0.28.7",
"html-minifier": "^3.5.6",
@ -22,6 +23,7 @@
"less-plugin-clean-css": "^1.5.1",
"socket.io-client": "^2.0.4",
"style-loader": "^0.19.0",
"ts-loader": "^3.1.1",
"typescript": "^2.6.1",
"uglify-js": "^3.1.8",
"webpack": "^3.8.1"

14
webpack.config.js
View File

@ -1,17 +1,25 @@
/*! webpack.config.js */
const webpack = require("webpack");
const path = require('path');
const CleanCSSPlugin = require("less-plugin-clean-css");
module.exports = {
entry: "./client/dcwebui.js",
entry: "./client/dcwebui.ts",
output: {
path: __dirname,
filename: "clientpack/bundle.min.js"
path: path.resolve(__dirname, 'clientpack'),
filename: "bundle.min.js"
},
resolve: {
// Add '.ts' and '.tsx' as a resolvable extension.
extensions: [ '.tsx', '.ts', '.js' ]
},
module: {
loaders: [
// all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
{ test: /\.tsx?$/, loader: "ts-loader" },
// Plain CSS files (no longer present)
{ test: /\.css$/, loader: "style-loader!css-loader" },