Split protocol and handler code apart.

author: Bent Bisballe Nyeng <deva@aasimon.org> 2013-01-17 13:47:09 +0100
committer: Bent Bisballe Nyeng <deva@aasimon.org> 2013-01-17 13:47:09 +0100
commit: 2254587e62f050edd11af9e182b65aff3184eba6 (patch)
tree: 690d07c72ce4fd83755f0189c0db57017d67bac6
parent: ba391ba4bbc3a51b896af917a9b8c8c7a29b9391 (diff)
3 files changed, 103 insertions, 272 deletions
diff --git a/munia.html b/munia.html
index a5e0f14..4e5fd14 100644
--- a/munia.html
+++ b/munia.html
@@ -48,6 +48,21 @@ body {
   background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
   background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
 }
+
+
+.log
+{
+	height: 20em;
+	font-family: monospace;
+	font-size: 1em;
+	padding: 2px 5px;
+	color: #0f0;
+	background-color: #111;
+	border: 1px solid #030;
+	border-radius: 4px;
+	overflow: auto;
+}
+
 </style>
 </head>
 <body id="body">
@@ -57,6 +72,12 @@ TaskProto: <input type="text" id="input_task_data" value="observe 0" onfocus="cl
 <input type="button" value="submit" onclick="task_submit()"/><br/>
 TaskMessages: <span id="wstask_lastmsg"></span><br/>
 </div>
+
+<pre class="log" id="log">Event information log
+=====================
+</pre>
+
+<script type="text/javascript" charset="utf-8" src="/handler.js"></script>
 <script type="text/javascript" charset="utf-8" src="/proto.js"></script>
 
 </body>
diff --git a/proto.js b/proto.js
index 87d2e7b..a7f9fdf 100644
--- a/proto.js
+++ b/proto.js
@@ -1,72 +1,6 @@
 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set et sw=2 ts=2: */
 
-var BrowserDetect = {
-  init: function () {
-    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
-    this.version = this.searchVersion(navigator.userAgent)
-      || this.searchVersion(navigator.appVersion)
-      || "an unknown version";
-    this.OS = this.searchString(this.dataOS) || "an unknown OS";
-  },
-  searchString: function (data) {
-    for (var i=0;i<data.length;i++)  {
-      var dataString = data[i].string;
-      var dataProp = data[i].prop;
-      this.versionSearchString = data[i].versionSearch || data[i].identity;
-      if (dataString) {
-        if (dataString.indexOf(data[i].subString) != -1)
-          return data[i].identity;
-      }
-      else if (dataProp)
-        return data[i].identity;
-    }
-  },
-  searchVersion: function (dataString) {
-    var index = dataString.indexOf(this.versionSearchString);
-    if (index == -1) return;
-    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
-  },
-  dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },
-                 { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/",
-                   identity: "OmniWeb" },
-                 { string: navigator.vendor, subString: "Apple", identity: "Safari",
-                   versionSearch: "Version" },
-                 { prop: window.opera, identity: "Opera", versionSearch: "Version" },
-                 { string: navigator.vendor, subString: "iCab", identity: "iCab" },
-                 { string: navigator.vendor, subString: "KDE", identity: "Konqueror" },
-                 { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" },
-                 { string: navigator.vendor, subString: "Camino", identity: "Camino" },
-                 // for newer Netscapes (6+)
-                 { string: navigator.userAgent, subString: "Netscape", identity: "Netscape" },
-                 { string: navigator.userAgent, subString: "MSIE", identity: "Explorer",
-                   versionSearch: "MSIE" },
-                 { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla",
-                   versionSearch: "rv" } ,
-                 // for older Netscapes (4-)
-                 { string: navigator.userAgent, subString: "Mozilla", identity: "Netscape",
-                   versionSearch: "Mozilla" }
-  ],
-  dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" },
-             { string: navigator.platform, subString: "Mac", identity: "Mac" },
-             { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" },
-             { string: navigator.platform, subString: "Linux", identity: "Linux" }
-  ]
-
-};
-
-BrowserDetect.init();
-
-function createId(boardid, taskid)
-{
-  return "b" + boardid + "_t" + taskid;
-}
-
-function idFromStr(str)
-{
-  return str.substring(str.search('t') + 1, str.length);
-}
-
 function get_appropriate_ws_url()
 {
     var pcol;
@@ -91,26 +25,33 @@ function get_appropriate_ws_url()
     return pcol + u[0];
 }
 
-var socket_task;
-
-var boards = document.getElementById("boards");
-
-if (BrowserDetect.browser == "Firefox" && BrowserDetect.version < 12) {
-    socket_task = new MozWebSocket(get_appropriate_ws_url(), "lws-task-protocol");
-} else {
-    socket_task = new WebSocket(get_appropriate_ws_url(),  "lws-task-protocol");
-}
+var socket_task = new WebSocket(get_appropriate_ws_url(), "lws-task-protocol");
 
 try {
     socket_task.onopen = function() {
-        document.getElementById("wstask_status").style.backgroundColor = "#40ff40";
-        document.getElementById("wstask_status").textContent = "TaskProto websocket connection opened ";
-        socket_task.send("observe 0;");
+        var connectEvent = new CustomEvent("connectEvent", {
+			      detail: {
+				        time: new Date(),
+			      },
+			      bubbles: true,
+			      cancelable: true
+		    });
+        document.dispatchEvent(connectEvent);
     } 
 
     socket_task.onmessage = function got_packet(msg) {
         document.getElementById("wstask_lastmsg").textContent = msg.data;
-        
+
+        var messageEvent = new CustomEvent("messageEvent", {
+			      detail: {
+				        message: msg.data,
+				        time: new Date(),
+			      },
+			      bubbles: true,
+			      cancelable: true
+		    });
+        document.dispatchEvent(messageEvent);
+
         var msgs = new Array();
         var idx = 0;
         msgs[idx] = '';
@@ -131,9 +72,14 @@ try {
             instring = false;
             idx = 0;
 
-            // strip padding and trailing whitespace.
+            // Strip padding and trailing whitespace.
             var msgstr = msgs[f].replace(/^\s+||\s+$/g,'');
 
+            if(msgstr == ';') {
+                f++;
+                continue;
+            }
+
             msg[idx] = '';
             for(c = 0; c < msgstr.length; c++) {
                 if(msgstr[c] == '"' && c > 0 && msgstr[c - 1] != '\\') {
@@ -152,212 +98,68 @@ try {
             var cmd = msg[1];
             var id = msg[2];
 
-            var board = document.getElementById("board_" + observeid);
-            if(!board) {
-              board = document.createElement("div");
-              board.name = "board";
-              board.setAttribute("class", "board");
-              board.id = "board_" + observeid;
-              boards.appendChild(board);
-            }
-
             if(cmd == "remove") {
-                var task = document.getElementById(createId(observeid, id));
-                var parent = task.parentNode;
-                parent.removeChild(task);
-
-                var board = document.getElementById("board_" + observeid);
-                if(board.childNodes.length == 0) {
-                    board.parentNode.removeChild(board);
-                }
+                var removeEvent = new CustomEvent("removeEvent", {
+			              detail: {
+                        observeid: observeid,
+                        id: id,
+			              },
+			              bubbles: true,
+			              cancelable: true
+		            });
+                document.dispatchEvent(removeEvent);
             }
             else if(cmd == "move") {
-	              var parent_id = msg[3];
-                var task = document.getElementById(createId(observeid, id));
-                if(parent_id != -1) {
-                  var parent_task = document.getElementById(createId(observeid, parent_id));
-                  parent_task.appendChild(task);
-                }
-                else {
-                    board.appendChild(task);
-                }
+                var moveEvent = new CustomEvent("moveEvent", {
+			              detail: {
+                        observeid: observeid,
+                        id: id,
+                        parentid: msg[3],
+			              },
+			              bubbles: true,
+			              cancelable: true
+		            });
+                document.dispatchEvent(moveEvent);
             }
             else if(cmd == "create") {
-	              var parent_id = msg[3];
-                var task = document.createElement("div");
-
-                task.name = "task";
-                task.setAttribute("class", "task");
-                task.setAttribute("ondblclick", "editTitle(this, event)");
-                //task.setAttribute("onclick", "showHideChildren(this, event)");
-                task.setAttribute("ondrop", "drop(this, event)");
-                task.setAttribute("ondragover", "return false");
-                task.setAttribute("draggable", true);
-                task.setAttribute("ondragstart", "drag(this, event)");
-                task.setAttribute("title", id);
-                
-	              task.id = createId(observeid, id);
-
-                var observe_button = document.createElement("div");
-                observe_button.name = "observe_button";
-                observe_button.setAttribute("onclick", "observeMe(this, event)");
-                observe_button.setAttribute("title", id);
-                observe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid green 2px; cursor: pointer;");
-                var txt_plus = document.createTextNode("+");
-                observe_button.appendChild(txt_plus);
-                task.appendChild(observe_button);
-
-                var unobserve_button = document.createElement("div");
-                unobserve_button.name = "unobserve_button";
-                unobserve_button.setAttribute("onclick", "unobserveMe(this, event)");
-                unobserve_button.setAttribute("title", id);
-                unobserve_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid red 2px; cursor: pointer;");
-                var txt_minus = document.createTextNode("-");
-                unobserve_button.appendChild(txt_minus);
-                task.appendChild(unobserve_button);
-
-                var txtdiv = document.createElement("div");
-                txtdiv.id = createId(observeid, id) + "_txt";
-                var txt = document.createTextNode(id + ": (missing title)");
-	              txtdiv.appendChild(txt);
-	              task.appendChild(txtdiv);
-	                    	        
-                var parent_task = document.getElementById(createId(observeid, parent_id));
-
-	              if(parent_task) {
-                    parent_task.appendChild(task);
-	              }
-	              else {
-                    board.appendChild(task);
-	              }
+                var createEvent = new CustomEvent("createEvent", {
+			              detail: {
+                        observeid: observeid,
+                        id: id,
+                        parentid: msg[3],
+			              },
+			              bubbles: true,
+			              cancelable: true
+		            });
+                document.dispatchEvent(createEvent);
             }
             else if(cmd == "update") {
-                var name = msg[3];
-                var value = msg[4];
-                if(name == "title") {
-                    var txtdiv = document.getElementById(createId(observeid, id) + "_txt");
-                    txtdiv.removeChild(txtdiv.firstChild);
-
-                    var txt = document.createTextNode(id + ": " + value);
-	                  txtdiv.appendChild(txt);
-                }
-                if(name == "colour") {
-                    var txtdiv = document.getElementById(createId(observeid, id) + "_txt");
-                    txtdiv.style.color = value;
-                }
+                var updateEvent = new CustomEvent("updateEvent", {
+			              detail: {
+                        observeid: observeid,
+                        id: id,
+                        name: msg[3],
+                        value: msg[4],
+			              },
+			              bubbles: true,
+			              cancelable: true
+		            });
+                document.dispatchEvent(updateEvent);
             }
             f++;
         }
     }
 
     socket_task.onclose = function(){
-        document.getElementById("wstask_status").style.backgroundColor = "#ff4040";
-        document.getElementById("wstask_status").textContent = "TaskProto websocket connection CLOSED ";
+        var disconnectEvent = new CustomEvent("disconnectEvent", {
+			      detail: {
+				        time: new Date(),
+			      },
+			      bubbles: true,
+			      cancelable: true
+		    });
+        document.dispatchEvent(disconnectEvent);
     }
 } catch(exception) {
     alert('<p>Error' + exception + '</p>');
 }
-
-function task_submit() {
-    var data = document.getElementById("input_task_data").value;
-    socket_task.send(data);
-}
-
-function clear() {
-    document.getElementById("input_data").value = "";
-}
-
-function deleteTask(id) {
-    socket_task.send("del " + id + ";");
-}
-
-function drag(target, e) {
-    e.dataTransfer.setData('Text', target.id);
-    e.stopPropagation(); // <--- this fixes the drag target problem
-}
-
-function drop(target, e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    var id = e.dataTransfer.getData('Text');
-    var task = document.getElementById(id);
-    socket_task.send("move " + idFromStr(id) + " " + idFromStr(target.id) + ";");
-}
-
-function observeMe(target, e)
-{
-  e.stopPropagation();
-  socket_task.send("observe "+target.title+";");
-}
-
-function unobserveMe(target, e)
-{
-  e.stopPropagation();
-  socket_task.send("unobserve "+target.title+";");
-}
-
-function showHideChildren(target, e)
-{
-  e.stopPropagation();
-  updateid = idFromStr(target.id);
-  if(target.style.backgroundColor != "red") {
-    target.style.backgroundColor = "red";
-    for(var i = 1; i < target.childNodes.length; i++) {
-      target.childNodes[i].style.display = "none";
-    }
-  } else {
-    target.style.backgroundColor = "grey";
-    for(var i = 1; i < target.childNodes.length; i++) {
-      target.childNodes[i].style.display = "block";
-    }
-  }
-}
-
-//
-// Butt ugly.. but hey! it works...
-//
-var updateid;
-var divtxt;
-var oldtxt;
-var oldtitle;
-function onKeyUpHandler(target, e)
-{
-  if(e.which == 13) { // enter
-    divtxt.removeChild(target);
-    oldtxt.nodeValue = 'updating...';
-    socket_task.send("update " + updateid + " \""+target.value+"\";");
-  }
-  if(e.which == 27) { // escape
-    divtxt.removeChild(target);
-    oldtxt.nodeValue = oldtitle;
-  }
-}
-
-function onLostFocusHandler(target, e)
-{
-  if(target.value == oldtitle) {
-    divtxt.removeChild(target);
-    oldtxt.nodeValue = oldtitle;
-  }
-}
-
-function editTitle(target, e)
-{
-  e.stopPropagation();
-  updateid = idFromStr(target.id);
-  if(updateid < 10) return;
-  var inp = document.createElement("input");
-  var txtdiv = document.getElementById(target.id + "_txt");
-  divtxt = txtdiv;
-  oldtxt = txtdiv.firstChild;
-  oldtitle = oldtxt.nodeValue;
-  oldtxt.nodeValue = "";
-  inp.setAttribute("onkeyup", "onKeyUpHandler(this, event)");
-  inp.setAttribute("onblur", "onLostFocusHandler(this, event)");
-  inp.setAttribute("style", "border: inherit; padding: inherit; margin: inherit; background: inherit;");
-  inp.value = oldtitle;
-  lineedit = inp;
-  txtdiv.appendChild(inp);
-  inp.focus();
-}
diff --git a/src/http.cc b/src/http.cc
index 8aa83c3..6b14ed5 100644
--- a/src/http.cc
+++ b/src/http.cc
@@ -62,6 +62,14 @@ int callback_http(struct libwebsocket_context * context,
 			break;
 		}
 
+		if(in && strcmp((const char *)in, "/handler.js") == 0) {
+			if(libwebsockets_serve_http_file(wsi,
+                                       LOCAL_RESOURCE_PATH"/handler.js",
+                                       "text/javascript"))
+				DEBUG(httpd,"Failed to send javascript\n");
+			break;
+		}
+
 
 		/* send the script... when it runs it'll start websockets */
 		if(libwebsockets_serve_http_file(wsi,
author	Bent Bisballe Nyeng <deva@aasimon.org>	2013-01-17 13:47:09 +0100
committer	Bent Bisballe Nyeng <deva@aasimon.org>	2013-01-17 13:47:09 +0100
commit	2254587e62f050edd11af9e182b65aff3184eba6 (patch)
tree	690d07c72ce4fd83755f0189c0db57017d67bac6
parent	ba391ba4bbc3a51b896af917a9b8c8c7a29b9391 (diff)