Improve file share example UI

Makefile

@@ -47,7 +47,6 @@ help:
 	@echo ""
 	@echo "    make clean    : Clean the repository of any built/generated files"
 
-
 build: check
 	@mkdir -p $(JS_BIN)
 	@echo ""; echo " -- Building $(BIN)/$(PROJECT) -- ";

README.md

@@ -9,7 +9,7 @@ To read more and find examples check out the wiki: [leaps wiki](https://github.c
 Leaps is a single binary, with no runtime dependencies, everything is set through a single config file. Just download a release package for your OS and do the following to run an example:
 
 ```bash
-tar -xvf ./leaps-linux_amd64-v0.1.2.tar.gz
+tar -xvf ./leaps-linux_amd64-v0.4.0.tar.gz
 cd leaps
 ./bin/leaps -c ./config/leaps_example.yaml
 ```
@@ -27,6 +27,8 @@ To generate a configuration file of all default values:
 ./bin/leaps --print-yaml
 ```
 
+For a cooler example check out the [website](https://jeffail.github.io/leaps)
+
 ##Customizing your service
 
 There are lots of example configuration files in ./config to check out for various use cases.
@@ -95,12 +97,14 @@ To build and then start up an example server do the following:
 go get github.com/jeffail/leaps
 cd $GOPATH/src/github.com/jeffail/leaps
 
-# To build the binary and client libraries:
 make build
 ./bin/leaps -c ./config/leaps_example.yaml
+```
+
+Or, to simply build the service binary on its own is just:
 
-# Or, to build only the service binary:
-go build
+```bash
+go get github.com/jeffail/leaps
 ```
 
 For more build options call `make help`.

static/share_dir/leapshare.js

@@ -431,6 +431,7 @@ var create_path_click = function(ele, id) {
 				current_ele.className = fileItemClass;
 			}
 			ele.className = fileItemClass + ' selected';
+			window.location.hash = "path:" + id;
 			join_new_document(id);
 		}
 	};
@@ -546,6 +547,16 @@ var get_paths = function() {
 	});
 };
 
+// Use to alert users when new messages appear
+var flash_chat_window = function() {
+	var info_window = document.getElementById("info-window");
+	info_window.style.boxShadow = "0px 0px 0px 5px #4E81B4";
+
+	setTimeout(function() {
+		info_window.style.boxShadow = "0px 0px 0px 0px #4E81B4";
+	}, 300);
+};
+
 var chat_message = function(user_id, username, message) {
 	var container = document.getElementById("info-window");
 	var messages = document.getElementById("info-messages");
@@ -589,6 +600,8 @@ var chat_message = function(user_id, username, message) {
 
 	messages.appendChild(div);
 	container.scrollTop = container.scrollHeight;
+
+	flash_chat_window();
 };
 
 var system_message = function(text, style) {
@@ -603,6 +616,8 @@ var system_message = function(text, style) {
 	div.appendChild(textNode);
 	messages.appendChild(div);
 	container.scrollTop = container.scrollHeight;
+
+	flash_chat_window();
 };
 
 var set_cookie_option = function(key, value) {
@@ -742,13 +757,24 @@ window.onload = function() {
 		chat_bar.focus();
 	};
 
+	/* We're using our own implementation of usernames by sending JSON objects in leaps messages,
+	 * so to keep all clients up to date across name changes lets just send it every second. It's a
+	 * painless job so why not?
+	 */
 	setInterval(function() {
 		if ( leaps_client !== null ) {
 			leaps_client.send_message(JSON.stringify({
 				username: username
 			}));
 		}
 	}, 1000);
+
+	// You can link directly to a filepath with <URL>#path:/this/is/the/path.go
+	if ( window.location.hash.length > 0 &&
+			window.location.hash.substr(1, 5) === "path:" ) {
+		var path = window.location.hash.substr(6);
+		join_new_document(path);
+	}
 };
 
 })();

static/share_dir/style.css

@@ -150,9 +150,9 @@ h1, h2, h3, h4, h5, button, strong, .button, .round-button {
 }
 
 .logo {
-	height: 40px;
+	height: 100%;
 	padding: 0px;
-	margin: 5px 0 0 30px;
+	margin: 0 0 0 20px;
 }
 
 .directory-name {
@@ -303,6 +303,7 @@ h1, h2, h3, h4, h5, button, strong, .button, .round-button {
 #info-window {
 	right: 0;
 	bottom: 0;
+	transition: box-shadow .25s ease-in-out;
 }
 
 #file-list-container {
@@ -326,11 +327,6 @@ h1, h2, h3, h4, h5, button, strong, .button, .round-button {
 		left: 16vw;
 	}
 
-	#chat-bar-container {
-		right: 10px;
-		bottom: 10px;
-	}
-
 	#chat-bar {
 		width: 80px;
 		width: 10vw;