diff --git a/README.md b/README.md
index 56b335e..cfdeab3 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
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) => {
+
${renderTodoCount(req.session)}
${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: 'Just use the form below to add a todo'
+ }])
+ }, 2000)
}
//Deleting a todo
diff --git a/src/index.js b/src/index.js
index 6a8e3bf..74f5dd3 100644
--- a/src/index.js
+++ b/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);