From 95a111848e93cdedfb8ff7b486e6c4240882ed3f Mon Sep 17 00:00:00 2001
From: thedumbterminal <github@thedumbterminal.co.uk>
Date: Sat, 23 Dec 2017 22:39:57 +0000
Subject: [PATCH 1/3] now support divs being loaded automatically

---
 example/server.js | 27 +++++++++++++++++++++------
 src/index.js      | 34 +++++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/example/server.js b/example/server.js
index 9a2f39d..d1df476 100644
--- a/example/server.js
+++ b/example/server.js
@@ -53,6 +53,7 @@ app.get('/', (req, res, next) => {
 				<div class="page-header">
 					<h1>Todo Example</h1>
 				</div>
+				<div id="intro" data-url="/intro"></div>
 				<div id="count">${renderTodoCount(req.session)}</div>
 				<ul id="lists" class="list-group">
 					${renderTodos(req.session)}
@@ -94,16 +95,30 @@ wss.on('connection', (ws, upgradeReq) => {
 const routeMessage = (ws, request, session) => {
 	const query = qs.parse(request.query)
 	//The example app only has these functions
+	const outputCallback = (out) => {
+		ws.send(JSON.stringify(out))
+	}
+
 	if(request.pathname === '/add'){
-		addRoute(query, session, (out) => {
-			ws.send(JSON.stringify(out))
-		})
+		addRoute(query, session, outputCallback)
 	}
 	else if(request.pathname === '/delete'){
-		deleteRoute(query, session, (out) => {
-			ws.send(JSON.stringify(out))
-		})
+		deleteRoute(query, session, outputCallback)
 	}
+	else if(request.pathname === '/intro'){
+		introRoute(query, session, outputCallback)
+	}
+}
+
+//Display intro message
+const introRoute = (query, session, cb) => {
+	setTimeout(() => {	// Add a delay to highlight the content being loaded without user interaction
+		cb([{
+			action: 'replace',
+			container: 'intro',
+			content: '<h3>Just use the form below to add a todo<h3>'
+		}])
+	}, 2000)
 }
 
 //Deleting a todo
diff --git a/src/index.js b/src/index.js
index f55737f..e3f1aa7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,16 +9,19 @@ TBF.prototype._setupWebsocket = function(){
 	var socketUrl = window.location.protocol.replace('http', 'ws') + '//' + window.location.host + '/websocket';
 	this._websocket = new WebSocket(socketUrl);
 	var self = this;
-	this._websocket.onclose = function(event){
+	this._websocket.onopen = function(){
+		self._augmentInterface();
+	};
+	this._websocket.onclose = function(){
 		setTimeout(function(){
 			self._websocket.readyState > 1 && self._setupWebsocket();
-		}, 1000)
-	}
+		}, 1000);
+	};
 	this._websocket.onmessage = function(event){
 		var jsons = JSON.parse(event.data);
 		jsons.forEach(function(json){
 			self._handleResponse(json);
-		})
+		});
 	};
 };
 
@@ -31,6 +34,24 @@ TBF.prototype._augmentInterface = function(){
 	for(var i = 0; i < tags.length; i++){
 		this._augmentForm(tags.item(i));
 	}
+	if(this._websocket.readyState === 1){	// only do this if we have a working web socket
+		tags = document.getElementsByTagName('DIV');
+		for(var i = 0; i < tags.length; i++){
+			this._augmentDiv(tags.item(i));
+		}
+	}
+};
+
+TBF.prototype._augmentDiv = function(ele){
+	if(!ele.dataset.url){
+		return;
+	}
+	if(ele.dataset.actioned){	// already done
+		return;
+	}
+	console.log('augmenting div: ', ele);
+	ele.dataset.actioned = 1;
+	this._elementActivated(ele);	// activate immediately
 };
 
 TBF.prototype._augmentButton = function(ele){
@@ -65,10 +86,10 @@ TBF.prototype._elementActivated = function(ele){
 };
 
 TBF.prototype._getActionURL = function(ele){
-	if(ele.tagName === 'BUTTON'){
+	if(['BUTTON', 'DIV'].indexOf(ele.tagName) !== -1){
 		return ele.dataset.url;
 	}
-	else if(ele.tagName === 'FORM'){
+	if(ele.tagName === 'FORM'){
 		var kvPairs = [];
 		for(var i = 0; i < ele.elements.length; i++){
 			var e = ele.elements[i];
@@ -81,7 +102,6 @@ TBF.prototype._getActionURL = function(ele){
 };
 
 TBF.prototype._handleResponse = function(json){
-	console.log('got json:', json);
 	var container = document.getElementById(json.container);
 	if(!container){
 		throw new Error('container not found: ' + json.container);

From 78f654ba25a55b9b90e7fefac2ac368c3e2f0ab0 Mon Sep 17 00:00:00 2001
From: thedumbterminal <github@thedumbterminal.co.uk>
Date: Sat, 23 Dec 2017 22:55:09 +0000
Subject: [PATCH 2/3] docs

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 3bbe7c1..8c28bc5 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,8 @@ Forms are augmented automatically using their action URLs.
 
 Other clickable elements will be augmented if the `data-url` property is set. The value is the server URL where a GET request to handle the action resides.
 
+DIV elements can also be augmented to allow the client to drive automatic loading of content, for example if more complex JS is also present on the page that requires this functionality.
+
 ### Server
 
 A server must return JSON from websocket requests to `/websocket` in the following format:
@@ -82,6 +84,7 @@ This example shows the following:
 * Direct DOM change from user action.
 * Indirect DOM change from user action.
 * DOM change via timed event.
+* DOM change from non user action.
 
 ## Developing
 

From cdc8bb03eed9000e9f100aca4ae2c4323fbaf29e Mon Sep 17 00:00:00 2001
From: thedumbterminal <github@thedumbterminal.co.uk>
Date: Sat, 23 Dec 2017 23:23:01 +0000
Subject: [PATCH 3/3] small enhancements

---
 README.md    |  2 +-
 package.json |  2 +-
 src/index.js | 14 ++++----------
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 8c28bc5..8f0458e 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 Tiny browser web framework, which communicates to the server via a websocket. All DOM changes are performed using HTML provided by the server.
 
-Minified size is **2.29** Kb which when transmitted compressed is **903** Bytes!
+Minified size is **2.56** Kb which when transmitted compressed is **1.29** Kb!
 
 ## Usage
 
diff --git a/package.json b/package.json
index d9fcc04..0671a11 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     }
   ],
   "scripts": {
-    "build": "mkdir -p dist && uglifyjs src/index.js -m -v -o dist/index.min.js",
+    "build": "mkdir -p dist && uglifyjs --mangle --compress -o dist/index.min.js src/index.js && ls -al dist/index.min.js",
     "start": "nodemon example/server.js",
     "test": "node -c src/index.js",
     "ci": "npm run build && npm test"
diff --git a/src/index.js b/src/index.js
index e3f1aa7..74f5dd3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -43,10 +43,7 @@ TBF.prototype._augmentInterface = function(){
 };
 
 TBF.prototype._augmentDiv = function(ele){
-	if(!ele.dataset.url){
-		return;
-	}
-	if(ele.dataset.actioned){	// already done
+	if(!ele.dataset.url || ele.dataset.actioned){	// not supported or already done
 		return;
 	}
 	console.log('augmenting div: ', ele);
@@ -55,10 +52,7 @@ TBF.prototype._augmentDiv = function(ele){
 };
 
 TBF.prototype._augmentButton = function(ele){
-	if(!ele.dataset.url){
-		return;
-	}
-	if(ele.onclick){	// already done
+	if(!ele.dataset.url || ele.onclick){	// not supported or already done
 		return;
 	}
 	console.log('augmenting button: ', ele);
@@ -123,10 +117,10 @@ TBF.prototype._handleResponse = function(json){
 
 TBF.prototype._setupListeners = function(){
 	var self = this;
-	document.addEventListener('DOMContentLoaded', function(event) {
+	document.addEventListener('DOMContentLoaded', function() {
 		self._augmentInterface();
 	});
-	document.addEventListener('DOMSubtreeModified', function(event) {
+	document.addEventListener('DOMSubtreeModified', function() {
 		self._augmentInterface();
 	});
 	window.onbeforeunload = function(){