Support loading of divs automatically

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
 

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

src/index.js

@@ -9,11 +9,14 @@ 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);
-	}
+	};
 	this._websocket.onmessage = function(event){
 		var jsons = JSON.parse(event.data);
 		jsons.forEach(function(json){
@@ -31,13 +34,25 @@ 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._augmentButton = function(ele){
-	if(!ele.dataset.url){
+TBF.prototype._augmentDiv = function(ele){
+	if(!ele.dataset.url || ele.dataset.actioned){	// not supported or already done
 		return;
 	}
-	if(ele.onclick){	// already done
+	console.log('augmenting div: ', ele);
+	ele.dataset.actioned = 1;
+	this._elementActivated(ele);	// activate immediately
+};
+
+TBF.prototype._augmentButton = function(ele){
+	if(!ele.dataset.url || ele.onclick){	// not supported or already done
 		return;
 	}
 	console.log('augmenting button: ', ele);
@@ -65,10 +80,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 +96,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);