tsconfig.json: commit

.gitignore

@@ -0,0 +1,2 @@
+clientpack/**
+node_modules/**

.hgignore

@@ -2,6 +2,11 @@ mode:regex
 
 \.exe$
 ^nmdc-webfrontend\.conf$
+^clientpack/
+^node_modules/
 
 ^_dist/
-^bindata\.go$
+^vendor/
+
+^nmdc-webfrontend$
+^nmdc-webfrontend\.exe$

.hgtags

@@ -1,2 +1,11 @@
-769fad81e3f8db8f7e5f5c164656a382a169d735 release-1.0.0
+769fad81e3f8db8f7e5f5c164656a382a169d735 v1.0.0
-9ed95938d809a8226aca529e34b655e6d8c8c379 release-1.0.1
+9ed95938d809a8226aca529e34b655e6d8c8c379 v1.0.1
+46fe533682419c8a519836ac95b5575053aa0fa8 v1.0.2
+a2c92b262f339f82eb01c8d92dda252a27432255 v1.1.0
+d14041daa7bbbd37ea2ff47aa978b9595af67ca3 v1.1.1
+7278eb0d067d8ed2a653de6a1feeeb7f76fb9891 v1.1.2
+6cbd9d59630372c0dff430e3dc6c1fbd7dcee734 v1.1.3
+76c178b8f27ec894e79b8f73649fcb3e45a73729 v1.1.4
+0eeab5594ba4d683e6a268ef971675c73b226bd0 v1.2.0
+c8cd84947e4516215e50639914adfaecf350fe91 v1.2.1
+0c6b957de43252f89688ba73c4857f6d912b2912 v1.2.2

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "0.1.0",
+    "command": "npm",
+    "isShellCommand": true,
+    "showOutput": "always",
+    "suppressTaskName": true,
+    "tasks": [
+        {
+            "taskName": "install",
+            "args": ["install"]
+        },
+        {
+            "taskName": "update",
+            "args": ["update"]
+        },
+        {
+            "taskName": "test",
+            "args": ["run", "test"]
+        }
+    ]
+}

Config.go

@@ -2,17 +2,17 @@ package main
 
 type Config struct {
 	App struct {
-		Name     string `json:"name"`
+		MotdHTML        string `json:"motd"`
-		Version  string `json:"version"`
+		ContentedServer string `json:"contented_server"`
-		MotdHTML string `json:"motd"`
-		Debug    bool   `json:"debug"`
 	}
 
 	Web struct {
-		Port   int    `json:"port"`
+		Port          int    `json:"port"`
-		BindTo string `json:"bind_to"`
+		BindTo        string `json:"bind_to"`
-		Extern string `json:"extern"`
+		Title         string `json:"title"`
-		Title  string `json:"title"`
+		CustomFavicon bool   `json:"custom_favicon"`
+
+		ExternalWebroot bool `json:"external_webroot,omitempty"`
 	}
 
 	Hub struct {

Gopkg.lock

@@ -0,0 +1,33 @@
+# This file is autogenerated, do not edit; changes may be undone by the next 'dep ensure'.
+
+
+[[projects]]
+  name = "code.ivysaur.me/libnmdc"
+  packages = ["."]
+  revision = "21847db9fdc1b983285de44e789cd9e921bdf1bb"
+  version = "v0.14.0"
+
+[[projects]]
+  branch = "master"
+  name = "github.com/googollee/go-engine.io"
+  packages = [".","message","parser","polling","transport","websocket"]
+  revision = "80ae0e43aca17b4c5a6834999d0f2eaa16b9afda"
+
+[[projects]]
+  branch = "master"
+  name = "github.com/googollee/go-socket.io"
+  packages = ["."]
+  revision = "5447e71f36d394766bf855d5714a487596809f0d"
+
+[[projects]]
+  name = "github.com/gorilla/websocket"
+  packages = ["."]
+  revision = "ea4d1f681babbce9545c9c5f3d5194a789c89f5b"
+  version = "v1.2.0"
+
+[solve-meta]
+  analyzer-name = "dep"
+  analyzer-version = 1
+  inputs-digest = "928468c40a3a664870459e1d5a1fa97fcbc45802fdd498ebf89bcffe0b44ec6e"
+  solver-name = "gps-cdcl"
+  solver-version = 1

Gopkg.toml

@@ -0,0 +1,30 @@
+
+# Gopkg.toml example
+#
+# Refer to https://github.com/golang/dep/blob/master/docs/Gopkg.toml.md
+# for detailed Gopkg.toml documentation.
+#
+# required = ["github.com/user/thing/cmd/thing"]
+# ignored = ["github.com/user/project/pkgX", "bitbucket.org/user/project/pkgA/pkgY"]
+#
+# [[constraint]]
+#   name = "github.com/user/project"
+#   version = "1.0.0"
+#
+# [[constraint]]
+#   name = "github.com/user/project2"
+#   branch = "dev"
+#   source = "github.com/myfork/project2"
+#
+# [[override]]
+#  name = "github.com/x/y"
+#  version = "2.4.0"
+
+
+[[constraint]]
+  name = "code.ivysaur.me/libnmdc"
+  version = "0.14.0"
+
+[[constraint]]
+  branch = "master"
+  name = "github.com/googollee/go-socket.io"

Makefile

@@ -0,0 +1,59 @@
+# Makefile for nmdc-webfrontend
+
+BINNAME=nmdc-webfrontend
+
+VERSION=1.2.3
+
+GOFLAGS=-a \
+	-ldflags "-s -w -X main.VERSION=$(BINNAME)/$(VERSION)" \
+	-gcflags "-trimpath ${GOPATH}" \
+	-asmflags "-trimpath ${GOPATH}"
+
+.PHONY: all dist deps clean clean-deps
+
+all: $(BINNAME) $(BINNAME).exe
+
+dist: $(BINNAME)-$(VERSION)-win32.7z $(BINNAME)-$(VERSION)-linux64.tar.xz $(BINNAME)-$(VERSION)-src.zip
+
+deps:
+	npm i
+	go get -u github.com/jteeuwen/go-bindata/...
+	go get -u github.com/golang/dep/cmd/dep
+	$(GOPATH)/bin/dep ensure
+	
+clean:
+	rm -f ./$(BINNAME)
+	rm -f ./$(BINNAME).exe
+	rm -fr ./clientpack
+	rm -f ./bindata.go
+	
+clean-deps:
+	rm -fr ./vendor
+	rm -fr ./node_modules
+
+bindata.go: client client/*
+	mkdir -p clientpack
+	cp client/favicon.ico client/apple-touch-icon.png clientpack/
+	npm run webpack
+	cat client/index.htm \
+		| sed -e '/bundle.js/{i <script>' -e 'r clientpack/bundle.min.js' -e 'a </script>' -e 'd}' \
+		> clientpack/index.htm
+	html-minifier --collapse-whitespace -o clientpack/index.min.htm clientpack/index.htm
+	mv clientpack/index.min.htm clientpack/index.htm
+	rm clientpack/bundle.min.js
+	$(GOPATH)/bin/go-bindata -nomemcopy -nometadata -prefix clientpack clientpack
+	
+$(BINNAME).exe: bindata.go *.go
+	GOARCH=386 GOOS=windows go build $(GOFLAGS) -o $(BINNAME).exe
+
+$(BINNAME): bindata.go *.go
+	GOARCH=amd64 GOOS=linux go build $(GOFLAGS) -o $(BINNAME)
+	
+$(BINNAME)-$(VERSION)-win32.7z: $(BINNAME).exe nmdc-webfrontend.conf.SAMPLE
+	7z a -mx9 "$(BINNAME)-$(VERSION)-win32.7z" $(BINNAME).exe nmdc-webfrontend.conf.SAMPLE
+	
+$(BINNAME)-$(VERSION)-linux64.tar.xz: $(BINNAME) nmdc-webfrontend.conf.SAMPLE
+	XZ_OPT='-9' tar caf "$(BINNAME)-$(VERSION)-linux64.tar.xz" $(BINNAME) nmdc-webfrontend.conf.SAMPLE --owner=0 --group=0
+
+$(BINNAME)-$(VERSION)-src.zip:
+	hg archive "$(BINNAME)-$(VERSION)-src.zip" || git archive -o "$(BINNAME)-$(VERSION)-src.zip" HEAD

_dist/README.txt

@@ -6,12 +6,92 @@ Written in Golang
 
 Tags: nmdc
 
+This project supercedes [entry=dcwebui]dcwebui[/entry], [entry=flexdc]flexdc[/entry], and [entry=dcwebui2]dcwebui2[/entry].
+
 =UPGRADING FROM DCWEBUI2=
 
-- The configuration file format is identical, but please now ensure it's valid json instead of just a .js file. This means no assignment, use double-quoted strings, and no comments.
+- The configuration file content is identical between nmdc-webfrontend 1.0.0 and dcwebui2 1.3.0, but please now ensure it's valid JSON instead of arbitrary javascript. This means no assignment, use double-quoted strings, and no comments.
+- Future changes to the configuration file since nmdc-webfrontend 1.0.0 are backward compatible (see the changelog for more details).
+
+=DEVELOPING=
+
+[go-get]code.ivysaur.me/nmdc-webfrontend git https://git.ivysaur.me/code.ivysaur.me/nmdc-webfrontend.git[/go-get]
+
+1. Install Go, Node.js, NPM, and 7-Zip (`p7zip-full` on Debian)
+2. Set up your `$GOPATH`
+3. Download the source code
+    - `git clone https://git.ivysaur.me/code.ivysaur.me/nmdc-webfrontend.git `; or
+    - `go get code.ivysaur.me/nmdc-webfrontend` ; or
+    - download and extract a source archive
+4. Install dependencies: `sudo make deps`
+5. Build: `make`
+6. Optional: Set `web.external_webroot: true` in the config file for unminified development
 
 =CHANGELOG=
 
+2017-10-28 1.2.2
+- Enhancement: Simplify build process
+- Fix an issue with closing PM tabs
+
+2017-10-16 1.2.1
+- Enhancement: Increase scrollback buffer size
+- Fix an issue with missing `contented` upload link once logged in
+- Fix a cosmetic issue with `(0)` appearing in page title
+
+2017-10-15 1.2.0
+- Feature: Add `contented` integration (set `app.contented_server` in config file)
+- Fix a cosmetic issue with the menu icon on devices without unicode font coverage
+
+2017-02-11 1.1.4
+- Update libnmdc to 0.14
+
+2017-02-11 1.1.3
+- Feature: Display user IP address on hover, if available
+- Enhancement: Allow clicking on popup notifications
+- Enhancement: Only show 'popups enabled' notification when enabling for the first time, not persistent page load
+- Update libnmdc to 0.13
+- Fix a cosmetic issue with not displaying non-zero user share sizes
+
+2017-02-06 1.1.2
+- Autodetect 'extern', no need to include it in config files
+- Enhancement: Remove redundant request, for a faster page load
+- Display server version number in log file and in response headers
+- Fix a cosmetic issue with spacing around user count in page title
+
+2017-02-06 1.1.1
+- Fix an issue with malformed content in minified build
+
+2017-02-06 1.1.0
+- Feature: Remember last username/password for login; remember last "show joins/parts" status
+- Feature: Display user details on hover (description, email, client tag, share size)
+- Feature: Optional desktop notifications for background PMs (not possible in incognito)
+- Feature: Automatically reconnect with the same username/password if connection was lost
+- Feature: Re-enter last message (Ctrl+Up, Ctrl+Down)
+- Feature: Set custom date/time format (Minutes, Seconds, Full), remembered for next session
+- Feature: Clickable magnet links
+- Feature: Display unread main-chat message count in the page title if the window is inactive
+- Feature: Add warning message when closing tab while still connected (optional preference, disabled by default, will be remembered).
+- Feature: Admin option to load a custom favicon (set `web.custom_favicon=true` and place a `favicon.ico` in the current directory)
+- Feature: Admin option to use external web resources (set `web.external_webroot=true` and use the /client/ directory)
+- Enhancement: Higher resolution favicon
+- Enhancement: Display operators in green in the user list
+- Enhancement: Enable spellcheck for text input once logged in
+- Enhancement: Prevent sending referrer to remote URLs
+- Enhancement: Display joins/parts and connection/disconnection messages in PM tabs
+- Enhancement: Support Shift+Tab to autocomplete backward
+- Enhancement: Support unread status for the main tab
+- Enhancement: Improve page load time via minification
+- Remove unused options from the config file
+- Update socket.io to 1.7.2
+- Update libnmdc to 0.12
+- Add margin between bottom of the text area and the text input box
+- Fix a cosmetic issue with collapsing consecutive spaces in posted messages
+- Fix a cosmetic issue with text size adjustment on mobile devices
+- Fix a cosmetic issue with clearing the screen on reconnection
+- Fix a cosmetic issue with not clearing the userlist on certain types of network error
+- Fix a cosmetic issue with closed PM tabs reappearing in some cases
+- Fix a cosmetic issue with marking all PM tabs as read when switching to a single one
+
 2016-11-29 1.0.2
 - Rebuild with libnmdc 0.11
 - Fix an issue with not setting a version in the client tag

build.sh

@@ -1,182 +0,0 @@
-#!/bin/bash
-# godist.sh is a template build script for golang applications.
-#
-# Copyright (c) 2016, The godist.sh Author(s)
-#
-# Permission to use, copy, modify, and/or distribute this software for any
-#  purpose with or without fee is hereby granted, provided that the above
-#  copyright notice and this permission notice appear in all copies.
-#
-# THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-#  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-#  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-#  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-#  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
-#  OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-#  PERFORMANCE OF THIS SOFTWARE.
-#
-
-set -eu
-
-DIST_DIR=./_dist
-
-EXTRA_FILES=(
-	nmdc-webfrontend.conf.SAMPLE
-)
-
-get_package_name() {
-	# Binaries are named after the containing folder.
-	pwd | tr / $'\n' | tail -n1
-}
-
-check_dependencies() {
-	# `set -e` will take care of killing the application if the dependency
-	# goes unresolved.
-	which 7z > /dev/null
-	which php > /dev/null
-}
-
-get_platform_description() {
-	if [[ $GOOS == windows ]] ; then
-		echo -n "win"
-	else
-		echo -n "${GOOS}"
-	fi
-	
-	if [[ $GOARCH == 386 ]] ; then
-		echo -n 32
-	elif [[ $GOARCH == amd64 ]] ; then
-		echo -n 64
-	else
-		echo -n "-${GOARCH}"
-		if [[ -v $GOARM ]] ; then
-			echo -n "v${GOARM}"
-		fi
-	fi
-}
-
-pathfix() {
-	if [[ $(uname -o) == Cygwin ]] ; then
-		cygpath -w "$1"
-	else
-		echo "$1"
-	fi
-}
-
-single_build() {
-	local version="$1"
-
-	# Determine build output name
-	local bin_name=''
-	if [[ $GOOS == windows ]] ; then
-		local_bin_name="$(get_package_name).exe"
-	else
-		local_bin_name="$(get_package_name)"
-	fi
-	
-	if [[ -f ./$local_bin_name ]] ; then
-		rm -f "./$local_bin_name"
-	fi
-	
-	local tmpdir=$(mktemp -d)
-	
-	# Platform identifier
-	local platform="$(get_platform_description)"
-	echo "[INFO] Building ${version} for ${platform}..."
-	
-	# Build.
-	# GOARCH/GOOS supplied in function env
-	go build \
-		-a \
-		-ldflags '-s -w' \
-		-gcflags "-trimpath=${GOPATH}" \
-		-asmflags "-trimpath=${GOPATH}" \
-		-o "$(pathfix "${tmpdir}/${local_bin_name}")"
-	
-	# Archive.
-	if [[ ! -d $DIST_DIR ]] ; then
-		mkdir "$DIST_DIR"
-	fi
-	local archive_name="${DIST_DIR}/$(get_package_name)-${version}-${platform}"
-	if [[ $GOOS == windows ]] ; then
-		archive_name="${archive_name}.7z"
-		7z a -mx9 "$archive_name" "${tmpdir}/${local_bin_name}" "${EXTRA_FILES[@]}" >/dev/null
-	else
-		archive_name="${archive_name}.tar.xz"
-		XZ_OPT='-9' tar caf "$archive_name" -C "${tmpdir}" "${local_bin_name}" -C "$(pwd)" "${EXTRA_FILES[@]}" --owner=0 --group=0 >/dev/null
-	fi
-	
-	# Cleanup
-	rm -f "${tmpdir}/${local_bin_name}"
-	rmdir "$tmpdir"
-	
-}
-
-datestamp() {
-	( TZ=UTC date +%Y%m%d%H%M%SZ )
-}
-
-usage() {
-	cat <<EOD
-Usage: ./godist.sh [-v VERSION]
-EOD
-	exit 0
-}
-
-main() {
-
-	check_dependencies
-	
-	if [[ ! -v GOPATH ]] ; then
-		echo "Please set GOPATH." >&2
-		exit 1
-	fi
-	if [[ ! -d $GOPATH ]] ; then
-		echo "Invalid GOPATH set." >&2
-		exit 1
-	fi
-
-	local version=""
-	while getopts ':v:' flag ; do
-		case "$flag" in
-			v)
-				version="$OPTARG"
-			;;
-			*)
-				usage
-			;;
-		esac
-	done
-
-	if [[ $version == "" ]] ; then
-		read -p "Enter version string (blank for timestamp)> " version
-		if [[ $version == "" ]] ; then
-			version=$(datestamp)
-		fi
-	fi
-	
-	if [[ -f ./bindata.go ]] ; then
-		rm ./bindata.go
-	fi
-	go-bindata -nomemcopy -prefix client client
-	
-	GOARCH=amd64 GOOS=windows single_build "$version"
-	GOARCH=386   GOOS=windows single_build "$version"
-	GOARCH=amd64 GOOS=linux   single_build "$version"
-	GOARCH=386   GOOS=linux   single_build "$version"
-	
-	# Also make source tarball
-	
-	local SOURCE_FILES=(
-		client/
-		build.sh
-		Config.go
-		main.go
-		nmdc-webfrontend.conf.SAMPLE
-	)
-	XZ_OPT='-9' tar caf "_dist/$(get_package_name)-${version}-src.tar.xz" "${SOURCE_FILES[@]}" --owner=0 --group=0 >/dev/null
-	
-	echo "[INFO] Build complete."
-}
-
-main "$@"

client/dcwebui.js

@@ -1,747 +0,0 @@
-/* dcwebui.js */
-//;(function() {
-	
-"use strict";
-
-var $ = (document.querySelectorAll ? 
-	function(s) {
-		var r = document.querySelectorAll(s);
-		return (s[0] === '#' && r.length === 1) ? r[0] : r;
-	} : 
-	function(s) {
-		// i'm not writing a selector engine...
-		if (! s.length) return [];
-		if (s[0] === '#') {
-			return document.getElementById(s.slice(1));
-		} else if (s[0] === '.') {
-			return document.getElementsByClassName(s.slice(1));
-		} else {
-			return document.getElementsByTagName(s);
-		}
-	}
-);
-
-var nmdc_escape = function(str) {
-	return (''+str).length ? (''+str).
-		replace(/&/g,'&').replace(/\|/g,'|').replace(/\$/g,'$') :
-		' ';
-};
-
-var hesc = function(s) {
-	var filter = {
-		'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&#34;', '\'': '&#39;'
-	};
-	return s.toString().replace(/[&<>'"]/g, function(s) { return filter[s]; });
-};
-
-var nl2br = function(str) { // thanks php.js!
-	return (str+'').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2');
-};
-
-var linkify = function(str) {
-	return str.replace(
-		/(https?:\/\/[^\s<]+)/g, "<a target='_blank' href=\"$1\">$1</a>"
-	);
-};
-
-var sanitise = function(s) {
-	return linkify(nl2br(hesc(s)));
-};
-
-var toggle = function($el) {
-	$el.style.display = ($el.style.display === "block") ? "none" : "block";
-};
-
-var textContent = function($el) {
-	if ($el.textContent) return $el.textContent;
-	if ($el.innerText) return $el.innerText;
-	return "";
-};
-
-// https://gist.github.com/eligrey/1276030
-var appendInnerHTML = function($el, html) {
-	var child = document.createElement("span");
-	child.innerHTML = html;
-	
-	var node;
-	while ((node = child.firstChild)) {
-		$el.appendChild(node);
-	}
-};
-
-// http://stackoverflow.com/a/5598797
-function getOffsetLeft( elem ) {
-    var offsetLeft = 0;
-	do {
-		if (!isNaN(elem.offsetLeft)) {
-			offsetLeft += elem.offsetLeft;
-		}
-	} while (elem = elem.offsetParent);
-	return offsetLeft;
-}
-
-function getOffsetTop( elem ) {
-    var offsetTop = 0;
-	do {
-		if (!isNaN(elem.offsetTop)) {
-			offsetTop += elem.offsetTop;
-		}
-	} while (elem = elem.offsetParent);
-	return offsetTop;
-}
-
-/* Tab writers */ 
-
-var write = function(tab) {
-	var $tab = $('#inner-'+tab);
-	return {
-		'cls': function() {
-			$tab.innerHTML = '';
-			return this;
-		},
-		'scroll': function() {
-			$tab.scrollTop = $tab.scrollHeight;
-			return this;
-		},
-		'raw': function(s) {
-			appendInnerHTML($tab, s);
-			return this.scroll();
-		},
-		'c': function(c, s) {
-			return this.raw('<span class="'+c+'">'+s+'</span>');
-		},
-		'time': function() {
-			var d = new Date();
-			var pad = function(s) {
-				return (s < 10) ? '0'+s : ''+s ;
-			};
-			return this.raw(
-				'<span class="tx-time">['+
-				pad(d.getHours()) + ":" + pad(d.getMinutes())+
-				"]</span> "
-			);
-		},
-		'system': function(s) {
-			return this.time().c('tx-sys', sanitise(s)).raw('<br/>');
-		},
-		'pubnick': function(u) {
-			return this.raw('<span class="tx-user" ondblclick="switchToPM(\''+hesc(u)+'\');return false;">&lt;'+hesc(u)+'&gt;</span>');
-		},
-		'pub': function(u, s) {
-			return this.time().
-				pubnick(u).raw('&nbsp;').
-				c('tx-chat', sanitise(s)).raw('<br/>');
-		},
-		'priv': function(f, t, s) {
-			return this.time().
-				c('tx-user', '&lt;'+hesc(f)+'&nbsp;-&gt;&nbsp'+hesc(t)+'&gt;').
-				raw('&nbsp').
-				c('tx-private', sanitise(s)).
-				raw('<br/>');
-		}
-	};
-};
-
-/* Userlist */ 
-
-var switchToPM = function(u) {
-	writerFor(u);          // create
-	tab_set(pm_tabs[u]);   // switch
-	writerFor(u).scroll(); // scroll
-};
-
-var userMenu = function(u, ev) {
-	
-	usermenu.hide();
-	usermenu = new MenuList(ev.target);
-	usermenu.add("Send private message...", function() {
-		switchToPM(u);
-	});
-	// Usercommands
-	for (var i = 0; i < user_usercommands.length; i++) (function(i) {
-		var raw = user_usercommands[i].raw;
-		usermenu.add(user_usercommands[i].title, function() {
-			
-			var message = usercommand_process( raw .replace(/%\[nick\]/g, u) );
-			sock.emit('raw', {message: message});
-		});
-	})(i);
-	
-	// Show
-	usermenu.show();
-	
-	//
-	ev.preventDefault();
-	return false;
-};
-
-var userlist = {
-	'add': function(u) {
-		if (this.has(u)) return;
-		
-		var userlists = $(".userlist");
-		for (var l = 0, e = userlists.length; l !== e; ++l) {
-			var userlist = userlists[l];
-			
-			var to_add = document.createElement('li');
-			to_add.innerHTML = hesc(u);
-			
-			to_add.onclick = function() { switchToPM(u); };
-			to_add.oncontextmenu = function(ev) { return userMenu(u, ev); };
-			
-			var users = userlist.children;
-			var cmp   = hesc(u).toUpperCase();
-			
-			var found = false;
-			for (var i = 0; i < users.length; i++) {
-				if ((''+users[i].innerHTML).toUpperCase() > cmp) {
-					userlist.insertBefore(to_add, users[i]);
-					found = true;
-					break;
-				}
-			}
-			if (! found) {
-				userlist.appendChild(to_add);
-			}
-		}
-		return this;
-	},
-	'del': function(u) {
-		var userlists = $(".userlist");
-		for (var l = 0, e = userlists.length; l !== e; ++l) {
-			if (! userlists[l].children) continue;
-			var userlist = userlists[l];
-				
-			var users = userlist.children;
-			var cmp   = hesc(u).toUpperCase();
-			for (var i = 0; i < users.length; i++) {
-				if ((''+users[i].innerHTML).toUpperCase() === cmp) {
-					userlist.removeChild(users[i]);
-					break;
-				}
-			}
-		}
-		return this;
-	},
-	'clear': function() {
-		var userlists = $(".userlist");
-		for (var i in userlists) {
-			if (! userlists[i].children) continue;
-			var userlist = userlists[i];
-			
-			var users = userlist.children;
-			for (var j = users.length; j --> 0;) {
-				userlist.removeChild(users[j]);
-			}
-		}
-		return this;
-	},
-	'names': function() {
-		var userlist = $(".userlist")[0].children;
-		var ret = [];
-		for (var i = 0, e = userlist.length; i < e; ++i) {
-			ret.push( textContent(userlist[i]) );
-		}
-		return ret;
-	},
-	'has': function(u) {
-		var userlist = $(".userlist")[0].children;
-		for (var i = 0, e = userlist.length; i < e; ++i) {
-			if (textContent(userlist[i]) === u) {
-				return true;
-			}
-		}
-		return false;
-	},
-	'count': function() {
-		return $(".userlist")[0].children.length;
-	}
-};
-
-var submit = function() {
-	var str = $("#chatbox").value;
-	if (! str.length) return;
-
-	if (hub_state === 0) {
-		hub_state = 1;
-		
-		var name_parts = str.split(":", 2);		
-		hub_last_nick = name_parts[0];
-				
-		sock.emit('hello', {'nick' : hub_last_nick, 'pass' : name_parts.length >= 2 ? name_parts[1] : ''});
-		$("#chatbox").disabled = true;
-		write("tab-main").system("Connecting...");
-		
-	} else if (hub_state === 2) {
-		if (pm_target !== false) {
-			sock.emit('priv', {'user': pm_target, 'message': str});
-			writerFor(pm_target).pub(hub_last_nick, str );
-		} else {
-			sock.emit('pub', {'message' : str});
-		}
-		
-	} else {
-		write("tab-main").system("Invalid internal state.");
-	}
-	
-	$("#chatbox").value = '';
-};
-
-/* tabs */
-
-/**
- * Switch active tab
- * 
- * @param {String} tab  Full tab ID (e.g. tab-main, tab-users, tab-ext-???)
- */
-var tab_set = function(tab) {
-	
-	var tabs = $(".tabpane");
-	for (var i in tabs) {
-		try {
-			tabs[i].style.display = (tabs[i].id === tab ? 'block' : 'none');
-		} catch (e) {};
-	}
-	var tabitems = $(".tabitem");
-	for (var i in tabitems) {
-		try {
-			tabitems[i].className = "tabitem" + (tabitems[i].getAttribute('data-tab') === tab ? ' selected' : '');
-		} catch (e) {};
-	}
-	
-	pm_target = false;
-	for (var i in pm_tabs) {
-		if (pm_tabs[i] === tab) {
-			pm_target = i;
-			break;
-		}
-	}
-	
-	updateTitle();
-	
-	write(tab).scroll();
-	$("#chatbox").focus();
-	last_tab = tab;
-};
-
-var tab_new = function(id, name) {
-	appendInnerHTML($("#bar"),
-		' <div class="tabitem" data-tab="tab-ext-'+id+'" id="tabitem-tab-ext-'+id+'">'+
-			'<span class="tab-label">'+
-				hesc(name)+
-			'</span> '+
-			'<a class="tab-closer" data-tab="tab-ext-'+id+'">&times;</a>'+
-		'</div> '
-	);
-	appendInnerHTML($("#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>'
-	);
-	tab_addHandlers();
-	return "tab-ext-"+id;
-};
-
-var tab_free = function(id) {
-	if (id === "tab-main") return;
-
-	// remove tab item and body
-	var el = $("#tabitem-"+id);
-	el.parentNode.removeChild(el);
-	
-	var el = $("#"+id);
-	el.parentNode.removeChild(el);
-	
-	// clear from PM tabs
-	for (var i in pm_tabs) {
-		if (pm_tabs[i] === id) {
-			pm_tabs[i] = false;
-		}
-	}
-	
-	// maybe clear the 'new pm' warning
-	updateTitle();
-	
-	// don't leave us with no tab displayed
-	if (last_tab === id) {
-		tab_set("tab-main");
-	}
-};
-
-var tab_addHandlers = function() {
-	var tabitems = $(".tabitem");
-	for (var i = 0; i < tabitems.length; i++) {
-		if (! tabitems[i]) continue;
-		
-		tabitems[i].onclick = function(ev) {
-			tab_set( this.getAttribute('data-tab') );
-			
-			// 360nobubble
-			if (ev.stopPropagation) {
-				ev.stopPropagation();
-			} else {
-				ev.cancelBubble = true; // oldIE
-			}
-			return false;
-		};
-	}
-	
-	var tabclosers = $(".tab-closer");
-	for (var i = 0; i < tabclosers.length; i++) {
-		if (! tabclosers[i]) continue;
-		
-		tabclosers[i].onclick = function(ev) {
-			tab_free( this.getAttribute('data-tab') );
-			
-			// 360nobubble
-			if (ev.stopPropagation) {
-				ev.stopPropagation();
-			} else {
-				ev.cancelBubble = true; // oldIE
-			}
-			return false;
-		};
-	}
-};
-
-/* */
-
-var writerFor = function(username) {
-	var tabid = "";
-	if (! username in pm_tabs || ! pm_tabs[username]) {
-		tabid = tab_new(next_tabid++, username);
-		pm_tabs[username] = tabid;
-	} else {
-		tabid = pm_tabs[username];
-	}
-	
-	return write(tabid);
-};
-
-/* */
-
-var tabcomplete_state = '';
-
-var tabcompletion_start = function() {
-	
-	var cursor = $("#chatbox").value.replace(/^.*\s([^\s]+)$/, '$1');
-	
-	if (tabcomplete_state === '') {
-		// new tab completion
-		tabcomplete_state = cursor;
-	}
-	
-	// Find all users who start with tabcomplete_state and retrieve the first
-	//    one after cursor
-	
-	var users = userlist.names();
-	var match = [];
-	
-	for (var i = 0, e = users.length; i !== e; ++i) {
-		if (users[i].toUpperCase().indexOf(tabcomplete_state.toUpperCase()) === 0) {
-			match.push(users[i]);
-		}
-	}
-	
-	if (match.length === 0) {
-		// no matches
-		return;
-	}
-	
-	// Is cursor in the list?
-	var cpos = -1;
-	for (var i = 0, e = match.length; i !== e; ++i) {
-		if (match[i] === cursor) {
-			cpos = i; break;
-		}
-	}
-	
-	var targetName = match[(i + 1) % match.length];
-	
-	// Replace in textbox
-	
-	var chatprefix = $("#chatbox").value.substr(0, $("#chatbox").value.length - cursor.length);
-	
-	$("#chatbox").value = chatprefix + targetName;
-	$("#chatbox").focus();
-};
-
-var tabcompletion_inactive = function() {
-	tabcomplete_state = '';
-};
-
-/* */ 
-
-var MenuList = function(el) {
-	this.el = el;
-	
-	this.div = document.createElement("div");
-	this.div.classList.add("menu");
-	this.div.style.position = "absolute";
-	
-	this.ul = document.createElement("ul");
-	this.div.appendChild(this.ul);
-	
-	document.body.appendChild(this.div);
-	
-};
-MenuList.prototype.clear = function() {
-	while (this.ul.children.length) {
-		this.ul.children[0].parentNode.removeChild( this.ul.children[0] );
-	}
-};
-MenuList.prototype.add = function(txt, cb) {
-	var li = document.createElement("li");
-	li.innerHTML = txt;
-	li.onclick = cb;
-	this.ul.appendChild(li);
-};
-MenuList.prototype.show = function() {
-	this.div.style.display = "block";
-	
-	this.div.style.top  = (getOffsetTop(this.el) + this.el.clientHeight)+"px";
-	this.div.style.left = (getOffsetLeft(this.el) - 200 + this.el.clientWidth)+"px";
-};
-MenuList.prototype.hide = function() {
-	this.div.style.display = "none";
-};
-MenuList.prototype.toggle = function() {
-	// ES5 strict mode sets `this` to undefined
-	(this.div.style.display === "block" ? this.hide : this.show).call(this);
-};
-
-/* */ 
-
-var menu = new MenuList($("#menubutton"));
-
-menu.reset = function() {
-	this.clear();
-	this.add(joinparts_getstr(), toggle_joinparts);
-};
-
-var usermenu = new MenuList(document.body);
-
-/**
- * Process all substitutions in a usercommand. May prompt the user for input.
- * 
- * @param {String} str
- * @returns {String}
- */
-var usercommand_process = function(str) {
-	var message = str
-		.replace(/%\[mynick\]/g, hub_last_nick)
-	;
-	var match = null;
-	for(;;) {
-		match = message.match(/%\[line:([^\]]*)\]/);
-		if (match === null) break;
-
-		var res = prompt(match[1]);
-		if (res === null) return; //cancelled
-
-		message =
-			message.substr(0, match.index) +
-			nmdc_escape(res) +
-			message.substr(match.index + match[0].length)
-		;
-	}
-	
-	return message;
-};
-
-var user_usercommands = [];
-
-/**
- * Called when a $UserCommand is recieved from the server. Register it in all
- *  relevant context menus.
- * 
- * @param {Object} data   Has properties type, context, title, raw
- * @returns {undefined}
- */
-var process_usercommand = function(data) {
-	switch(data.type) {
-		case 0: { /* USERCOMMAND_TYPE_SEPARATOR */
-			// ignore 
-		} break;
-		
-		case 1: /* USERCOMMAND_TYPE_RAW */
-		case 2:/* USERCOMMAND_TYPE_NICKLIMITED */
-		{
-			if (data.context & 1) { /* USERCOMMAND_CONTEXT_HUB */ 
-				menu.add(data.title, function() {
-					sock.emit('raw', {message: usercommand_process(data.raw)});
-				});
-			}
-			
-			if (data.context & 2) { /* USERCOMMAND_CONTEXT_USER */ 
-				user_usercommands.push(data);
-			}
-		} break;
-		
-		case 255: { /* USERCOMMAND_TYPE_CLEARALL */
-			if (data.context & 1) {
-				menu.reset();
-			}
-			
-			if (data.context & 2) {
-				user_usercommands = []; // clear
-			}
-		} break;
-	}
-};
-
-var joinparts_getstr = function() {
-	return (show_joins ? "&#9745;" : "&#9744;") + " Show Joins/Parts";
-};
-
-var toggle_joinparts = function(ev) {
-	var $el = ev.target || ev.srcElement;
-	show_joins = ! show_joins;
-	$el.innerHTML = joinparts_getstr();
-};
-
-/* */
-
-var updateTitle = function() {
-	document.title = 
-		($(".unread").length ? "[NEW PM] " : "") +
-		"("+userlist.count()+") "+
-		hub_hubname;
-};
-
-var sock = {};
-var hub_state     = 0; // [disconnected, sent-nick, connected]
-var hub_last_nick = '';
-var hub_hubname   = 'DCWebUI';
-
-var pm_tabs = {}; // nick => tabid
-var next_tabid = 1;
-var pm_target = false;
-
-var last_tab = "tab-main";
-
-var show_joins = false;
-
-window.onload = function() {
-	write("tab-main").system("Communicating with server...");
-	
-	document.title = DCWEBUI_CONF.title;
-	
-	// HTML event handlers
-	
-	$("#form-none").onsubmit = function(ev) {
-		submit();
-		
-		// don't submit form
-		ev.preventDefault();
-		return false;
-	};
-	
-	$("#chatbox").onkeydown = function(ev) {
-		if (ev.keyCode === 9) {
-			// tab
-			tabcompletion_start();
-			ev.preventDefault();
-			return false;
-			
-		} else {
-			tabcompletion_inactive();
-		}
-	};
-	
-	window.onresize = function() {
-		if (last_tab === "tab-users" && document.documentElement.clientWidth >= 590) {
-			tab_set("tab-main");
-		}
-		
-		menu.hide();
-		usermenu.hide();
-	};
-	
-	$("#menubutton").onclick = function(ev) {
-		menu.toggle();
-		ev.preventDefault();
-		ev.stopPropagation();
-		return false;
-	};
-	
-	window.onclick = function() {
-		menu.hide();
-		usermenu.hide();
-	};
-	
-	menu.reset();
-	
-	tab_addHandlers();
-	
-	// Hacks for WiiU user-agent
-	
-	if (navigator && navigator.userAgent && !!navigator.userAgent.match("Nintendo WiiU")) {
-		document.body.className += " navigator-wiiu";
-	}
-	
-	// Socket event handlers
-	
-	sock = io.connect(DCWEBUI_CONF.extern);
-	sock.on('cls', function() {
-		write("tab-main").cls();
-		userlist.clear();
-		hub_state = 0;
-	});
-	sock.on('hubname', function(s) {
-		write("tab-main").system("Now talking on "+s);
-		hub_hubname = s;
-		updateTitle();
-	});
-	sock.on('sys', function(data) {
-		write("tab-main").system(data);
-	});
-	sock.on('raw', function(data) {
-		write("tab-main").raw(data);
-	});
-	sock.on('pub', function(data) {
-		write("tab-main").pub( data.user, data.message);
-	});
-	sock.on('priv', function(data) {
-		writerFor(data.user).pub( data.user, data.message);
-		if (last_tab !== pm_tabs[data.user] &&
-			($("#tabitem-"+pm_tabs[data.user]).className.indexOf('unread') === -1)
-		) {
-			$("#tabitem-"+pm_tabs[data.user]).className += " unread";
-			updateTitle();
-		}
-	});
-	sock.on('hello', function() {
-		hub_state = 2;
-		$("#chatbox").disabled = false;
-	});
-	sock.on('part', function(u) {
-		userlist.del(u.user);
-		if (show_joins) {
-			write("tab-main").system("*** Parts: "+u.user); // sanitised
-		}
-		updateTitle();
-	});
-	sock.on('join', function(u) {
-		userlist.add(u.user);
-		if (show_joins) {
-			write("tab-main").system("*** Joins: "+u.user);
-		}
-		updateTitle();
-	});
-	sock.on('close', function() {
-		hub_state = 0;
-		userlist.clear();
-		write("tab-main").system("Connection closed by remote host.");
-	});
-	sock.on('disconnect', function() {
-		hub_state = 0;
-		userlist.clear();
-		write("tab-main").system("Lost connection to the server.");
-	});
-	sock.on('usercommand', function(data) {
-		process_usercommand(data);
-	});
-};
-
-//})();

client/dcwebui.less

@@ -1,9 +1,9 @@
 /* dcwebui.css */
 
 * {
-	-webkit-text-size-adjust:100%
+	-webkit-text-size-adjust:100%;
-	   -moz-text-size-adjust:100%
+	   -moz-text-size-adjust:100%;
-	    -ms-text-size-adjust:100%
+	    -ms-text-size-adjust:100%;
 }
 
 html,body {
@@ -51,14 +51,16 @@ html,body {
 }
 
 /* WiiU placements */
-.navigator-wiiu .placement-mid {
+.navigator-wiiu {
-	bottom:120px;
+	.placement-mid {
-}
+		bottom:120px;
-.navigator-wiiu .placement-bottom {
+	}
-	height:120px;
+	.placement-bottom {
-}
+		height:120px;
-.navigator-wiiu .placement-panel {
+	}
-	bottom:120px;
+	.placement-panel {
+		bottom:120px;
+	}
 }
 
 /* Menu button */
@@ -71,13 +73,21 @@ html,body {
 	color:black;
 	font-weight:bold;
 	
-	line-height:18px;
+	line-height:0;
+	height:18px;
 	width:18px;
 	text-align:center;
+	
+	svg {
+		width: 18px;
+		height: 18px;
+	}
+	
+	&:hover {
+		background:white;
+	}
 }
-.menubutton:hover {
+
-	background:white;
-}
 /* Menu list */
 .menu {
 	background:#DDD;
@@ -92,20 +102,24 @@ html,body {
 	z-index:10; /* above placement-panel */
 	
 	overflow-y:auto;
+	
+	ul {
+		margin:0;
+		padding:0;
+	}
+	
+	li {
+		list-style-type:none;
+		padding:6px;
+		cursor:pointer;
+		
+		&:hover {
+			background:#333;
+			color:white;
+		}
+	}
 }
-.menu ul {
+
-	margin:0;
-	padding:0;
-}
-.menu li {
-	list-style-type:none;
-	padding:6px;
-	cursor:pointer;
-}
-.menu li:hover {
-	background:#333;
-	color:white;
-}
 /* Tabs */
 .tabbar {
 	position:relative;
@@ -127,16 +141,20 @@ html,body {
 	border-right:1px solid lightgrey;
 	margin-top:2px;
 	padding:0 8px;
+	
+	&:hover {
+		border-top:2px solid #EEE;
+	}
+	
+	&.selected {
+		border-top:2px solid darkgreen;
+	}
+	
+	&.unread {
+		background:lightyellow;
+	}
 }
-.tabitem:hover {
+
-	border-top:2px solid #EEE;
-}
-.tabitem.selected {
-	border-top:2px solid darkgreen;
-}
-.tabitem.unread {
-	background:lightyellow;
-}
 .tab-label {
 	cursor:pointer;
 }
@@ -165,12 +183,14 @@ html,body {
 	-webkit-transition:0.1s linear all;
 	   -moz-transition:0.1s linear all;
 	        transition:0.1s linear all;
+	        
+	&:hover {
+		background:#FFDDDD;
+		border:1px solid red;
+		color:black;
+	}
 }
-.tab-closer:hover {
+
-	background:#FFDDDD;
-	border:1px solid red;
-	color:black;
-}
 /* */
 .content {
 	display:block;
@@ -180,13 +200,13 @@ html,body {
 	overflow-y:auto;
 	-webkit-transition: all 0.25s ease-in-out;
 	
-	padding:0; /*4px;*/
+	padding:0;
 	margin:0;
 	box-sizing:border-box;
 	
 	position:absolute;
 	top:4px;
-	bottom:0;
+	bottom:4px;
 	left:4px;
 	right:0;
 }
@@ -236,7 +256,10 @@ html,body {
 }
 #submit-container {
 	position:absolute;
-	top:0;bottom:0;right:0;width:32px;
+	top:0;
+	bottom:0;
+	right:0;
+	width:32px;
 }
 #btsubmit {
 	width:100%;
@@ -260,46 +283,49 @@ html,body {
 	-webkit-border-radius: 12px;
 	   -moz-border-radius: 12px;
 	        border-radius: 12px;
-}
+	        
-.ul-large li {
+	li {
-	color: #333;
+		color: #333;
-	font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
+		font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
-	vertical-align: middle;
+		vertical-align: middle;
-	border-bottom: 1px solid #ccc;
+		border-bottom: 1px solid #ccc;
-	list-style-type: none;
+		list-style-type: none;
-	text-align: left;
+		text-align: left;
-	white-space: nowrap;
+		white-space: nowrap;
-	overflow: hidden;
+		overflow: hidden;
-	height: 30px;
+		height: 30px;
-	list-style-type: none; 
+		list-style-type: none; 
-	display: block;
+		display: block;
-	padding: 15px 5px 5px 10px;
+		padding: 15px 5px 5px 10px;		
-}
+		cursor:pointer;
-.ul-large li:first-child { 
+		
-	border-top: 0;
+		&:first-child {
-	-webkit-border-top-left-radius: 12px;
+			border-top: 0;
-	-webkit-border-top-right-radius: 12px;
+			-webkit-border-top-left-radius: 12px;
-	   -moz-border-top-left-radius: 12px;
+			-webkit-border-top-right-radius: 12px;
-	   -moz-border-top-right-radius: 12px;
+			-moz-border-top-left-radius: 12px;
-	        border-top-left-radius: 12px;
+			-moz-border-top-right-radius: 12px;
-	        border-top-right-radius: 12px;
+					border-top-left-radius: 12px;
-}
+					border-top-right-radius: 12px;
-.ul-large li:last-child { 
+		}
-	border-bottom: 0;
+		
-	-webkit-border-bottom-left-radius: 12px;
+		&:last-child {
-	-webkit-border-bottom-right-radius: 12px;
+			border-bottom: 0;
-	   -moz-border-bottom-left-radius: 12px;
+			-webkit-border-bottom-left-radius: 12px;
-	   -moz-border-bottom-right-radius: 12px;
+			-webkit-border-bottom-right-radius: 12px;
-	        border-bottom-left-radius: 12px;
+			-moz-border-bottom-left-radius: 12px;
-	        border-bottom-right-radius: 12px;
+			-moz-border-bottom-right-radius: 12px;
-}
+					border-bottom-left-radius: 12px;
-
+					border-bottom-right-radius: 12px;
-.ul-large li {
+		}
-	cursor:pointer;
+	}
 }
 
 /* Text */
 
+.tx-sys, .tx-user, .tx-chat {	
+	white-space:pre-wrap;
+}
 .tx-time {
 	color:grey;
 }
@@ -314,10 +340,6 @@ html,body {
 .tx-chat {
 	color: black;
 }
-.tx-private {
-	color: red;
-	font-style: italic;
-}
 
 /* webkit scrollbars */
 
@@ -354,24 +376,31 @@ html,body {
 	overflow-y: auto;
 }
 
+.user-is-operator {
+	color:darkgreen;
+	font-weight:bold;
+}
+
 /* User sprite */
 
 .ul-mini {
 	padding-left: 4px;
 	margin-top:4px;
-}
-.ul-mini li {
-	list-style-type:none;
-	min-height:13px;
-	line-height:13px;
-	padding-left:14px;
-	margin-bottom:5px;
-	cursor:pointer;
 	
-	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
+	li {
-}
+		list-style-type:none;
-.ul-mini li:hover {
+		min-height:13px;
-	background-color:#EEE;
+		line-height:13px;
+		padding-left:14px;
+		margin-bottom:5px;
+		cursor:pointer;
+		
+		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
+		
+		&:hover {
+			background-color:#EEE;
+		}
+	}
 }
 
 /* Display userlist alongside main chat for wide screens */
@@ -393,4 +422,4 @@ html,body {
 	.position-panel {
 		display:block;
 	}
-}
+}

client/index.htm

@@ -5,14 +5,17 @@
 		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
 		<meta name="apple-mobile-web-app-capable" content="yes">
-		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+		<link rel="apple-touch-icon" href="./apple-touch-icon.png">
-		<link rel="stylesheet" href="/dcwebui.css">		
 		<title>Loading...</title>
 	</head>
 	<body>
 		<div class="tabbar placement-top" id="bar">
-			<div class="menubutton" id="menubutton">&#9776;</div>
+			<div class="menubutton" id="menubutton">
-			<div class="tabitem selected" data-tab="tab-main">
+				<svg viewBox="0 0 24 24">
+					<path fill="#000000" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+				</svg>
+			</div>
+			<div class="tabitem selected" data-tab="tab-main" id="tabitem-tab-main">
 				<span class="tab-label">
 					Main
 				</span>
@@ -52,8 +55,6 @@
 			</form>
 		</div>
 		
-		<script type="text/javascript" src="/socket.io-1.4.5.js"></script>
+		<script type="text/javascript" src="/bundle.js"></script>
-		<script type="text/javascript" src="/conf"></script>
-		<script type="text/javascript" src="/dcwebui.js"></script>
 	</body>
-</html>
+</html>

main.go

@@ -5,17 +5,15 @@ import (
 	"fmt"
 	"io/ioutil"
 	"log"
+	"mime"
 	"net/http"
-	"strings"
+	"path/filepath"
 
 	"code.ivysaur.me/libnmdc"
 	"github.com/googollee/go-socket.io"
 )
 
-type ActiveConnection struct {
+var VERSION string = `nmdc-webfrontend/devel-unreleased`
-	s *socketio.Socket
-	h *libnmdc.HubConnection
-}
 
 type App struct {
 	cfg *Config
@@ -81,6 +79,29 @@ func (this *App) HubWorker(Nick, Pass string, so socketio.Socket, done chan stru
 
 	// Loop hub connection
 
+	serveUserInfo := func(nick string) {
+		props := ""
+		hub.Users(func(users *map[string]libnmdc.UserInfo) error {
+			uinfo, ok := (*users)[nick]
+			if !ok {
+				return nil // just skip
+			}
+
+			bProps, err := json.Marshal(uinfo)
+			if err != nil {
+				return nil // just skip
+			}
+
+			props = string(bProps)
+			return nil
+		})
+
+		// 'Message' is a json-encoded param with user properties
+		if len(props) > 0 {
+			so.Emit("info", UserMessageStruct{User: nick, Message: props})
+		}
+	}
+
 	for {
 		select {
 
@@ -100,14 +121,19 @@ func (this *App) HubWorker(Nick, Pass string, so socketio.Socket, done chan stru
 			case libnmdc.EVENT_PRIVATE:
 				so.Emit("priv", UserMessageStruct{User: hev.Nick, Message: hev.Message})
 
+			case libnmdc.EVENT_USER_UPDATED_INFO:
+				serveUserInfo(hev.Nick)
+
 			case libnmdc.EVENT_USER_JOINED:
 				so.Emit("join", UserMessageStruct{User: hev.Nick})
+				serveUserInfo(hev.Nick)
 
 			case libnmdc.EVENT_USER_PART:
 				so.Emit("part", UserMessageStruct{User: hev.Nick})
 
 			case libnmdc.EVENT_CONNECTION_STATE_CHANGED:
 				if hev.StateChange == libnmdc.CONNECTIONSTATE_CONNECTED {
+					log.Printf("[%s] Connected to hub\n", so.Id())
 					so.Emit("hello")
 				} else if hev.StateChange == libnmdc.CONNECTIONSTATE_DISCONNECTED {
 					so.Emit("close")
@@ -126,11 +152,6 @@ func (this *App) HubWorker(Nick, Pass string, so socketio.Socket, done chan stru
 					"raw":     hev.UserCommand.Command,
 				})
 
-			default:
-				if this.cfg.App.Debug {
-					log.Printf("[%s] %v\n", so.Id(), hev)
-				}
-
 			}
 
 		case <-done:
@@ -146,9 +167,14 @@ func (this *App) SocketIOServer(so socketio.Socket) {
 	log.Printf("[%s] Client connected", so.Id())
 
 	so.Emit("cls")
+	so.Emit("hubname", this.cfg.Web.Title)
 	so.Emit("raw", this.cfg.App.MotdHTML+"<br>")
 	so.Emit("sys", "Enter a name to connect as (or name:pass for a registered nick)")
 
+	if len(this.cfg.App.ContentedServer) > 0 {
+		so.Emit("contented", this.cfg.App.ContentedServer)
+	}
+
 	doneChan := make(chan struct{}, 0)
 
 	so.On("hello", func(data map[string]string) {
@@ -163,22 +189,8 @@ func (this *App) SocketIOServer(so socketio.Socket) {
 
 }
 
-func (this *App) ConfigRequestHandler(w http.ResponseWriter, r *http.Request) {
+func (this *App) customFaviconHandler(w http.ResponseWriter, r *http.Request) {
-
+	http.ServeFile(w, r, "favicon.ico")
-	confStruct := struct {
-		Extern string `json:"extern"`
-		Title  string `json:"title"`
-	}{
-		Extern: this.cfg.Web.Extern,
-		Title:  this.cfg.Web.Title,
-	}
-	confBytes, _ := json.Marshal(confStruct)
-
-	//
-
-	w.Header().Set("Content-Type", "text/javascript")
-	w.WriteHeader(200)
-	fmt.Fprintf(w, "var DCWEBUI_CONF = %s;\n", string(confBytes))
 }
 
 func (this *App) StaticRequestHandler(w http.ResponseWriter, r *http.Request) {
@@ -193,32 +205,16 @@ func (this *App) StaticRequestHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	knownContentTypes := map[string]string{
+	w.Header().Set("Content-Type", mime.TypeByExtension(filepath.Ext(fileName)))
-		".htm": "text/html",
+	w.Header().Set("Content-Length", fmt.Sprintf("%d", len(data)))
-		".css": "text/css",
-		".js":  "application/javascript",
-		".png": "image/png",
-	}
-
-	foundMime := false
-	for ext, mimeType := range knownContentTypes {
-		if strings.HasSuffix(fileName, ext) {
-			w.Header().Set("Content-Type", mimeType)
-			foundMime = true
-			break
-		}
-	}
-	if !foundMime {
-		w.Header().Set("Content-Type", "application/x-octet-stream")
-	}
-	dataInfo, _ := AssetInfo(fileName)
-	w.Header().Set("Content-Length", fmt.Sprintf("%d", dataInfo.Size()))
-
 	w.Write(data)
 }
 
 func (this *App) RunServer() {
 
+	// Inner mux {{
+	innerMux := http.NewServeMux()
+
 	// Socket.io handler
 	server, err := socketio.NewServer(nil)
 	if err != nil {
@@ -228,22 +224,39 @@ func (this *App) RunServer() {
 	server.On("error", func(so socketio.Socket, err error) {
 		log.Println("error:", err)
 	})
-	http.Handle("/socket.io/", server)
+	innerMux.Handle("/socket.io/", server)
 
-	// Configuration handler
+	// Custom favicon handler
-	http.HandleFunc("/conf", this.ConfigRequestHandler)
+	if this.cfg.Web.CustomFavicon {
+		innerMux.HandleFunc("/favicon.ico", this.customFaviconHandler)
+	}
 
-	// Other files: asset handler
+	// Asset handler
-	http.HandleFunc("/", this.StaticRequestHandler)
+	if this.cfg.Web.ExternalWebroot {
+		innerMux.Handle("/", http.FileServer(http.Dir("client")))
+	} else {
+		innerMux.HandleFunc("/", this.StaticRequestHandler)
+	}
+	// }}
+
+	// Wrapper mux {{
+	outerMux := http.NewServeMux()
+	outerMux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Server", VERSION)
+		innerMux.ServeHTTP(w, r)
+	})
+	// }}
 
 	// Listen and serve
 	bindAddr := fmt.Sprintf("%s:%d", this.cfg.Web.BindTo, this.cfg.Web.Port)
 	log.Printf("Serving at %s...", bindAddr)
-	log.Fatal(http.ListenAndServe(bindAddr, nil))
+	log.Fatal(http.ListenAndServe(bindAddr, outerMux))
 }
 
 func main() {
 
+	log.Println(VERSION)
+
 	a, err := NewApp("nmdc-webfrontend.conf")
 	if err != nil {
 		log.Fatal(err.Error())

nmdc-webfrontend.conf.SAMPLE

@@ -1,23 +1,20 @@
 {
 	
 	"app": {
-		"name"   : "DCWebUI2",
+		"motd": "Welcome!<br>"
-		"version": "1.3.0",
-		"motd"   : "Welcome!<br>",
-		"debug"  : true
 	},
 	
 	"web": {
-		"port"   : 8082,
+		"port": 8082,
 		"bind_to": "127.0.0.1",
-		"extern" : "http://127.0.0.1:8082",
+		"title": "NMDC Web Frontend",
-		"title"  : "DCWebUI"
+		"custom_favicon": false
 	},
 	
 	"hub": {
 		"address": "127.0.0.1",
-		"port"   : 411,
+		"port": 411,
-		"tag"    : "nmdc-webfrontend"
+		"tag": "nmdc-webfrontend"
 	}
 	
 }

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "nmdc-webfrontend",
+  "version": "1.0.0",
+  "description": "A web interface to an NMDC hub",
+  "homepage": "https://code.ivysaur.me/nmdc-webfrontend/",
+  "main": "s",
+  "scripts": {
+    "webpack": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.ivysaur.me/code.ivysaur.me/nmdc-webfrontend"
+  },
+  "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",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "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"
+  },
+  "devDependencies": {}
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"target": "es3",
+        "removeComments": true
+	},
+	"include": [
+		"client/*"
+	]
+}

webpack.config.js

@@ -0,0 +1,53 @@
+/*! webpack.config.js */
+
+const webpack = require("webpack");
+const path = require('path');
+const CleanCSSPlugin = require("less-plugin-clean-css");
+
+module.exports = {
+    entry: "./client/dcwebui.ts",
+    output: {
+        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" },
+			
+			// LESS CSS files
+			{
+				test: /\.less$/,
+				use: [
+					{ loader: "style-loader" },
+					{ loader: "css-loader" },
+					{
+						loader: "less-loader",
+						options: {
+							noIeCompat: false,
+							plugins: [
+								new CleanCSSPlugin({ advanced: true })
+							]
+						}
+					}
+				]
+			}
+			
+        ]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        })
+    ]
+};