svn commit: r1297538 - in /incubator/devicemap/trunk/prototypes/logcapture: index.html logcapture.js

[bd...@apache.org]

Author: bdelacretaz
Date: Tue Mar  6 15:47:11 2012
New Revision: 1297538

URL: http://svn.apache.org/viewvc?rev=1297538&view=rev
Log:
more reliable screen size on android, and less intrusive javascript

Modified:
    incubator/devicemap/trunk/prototypes/logcapture/index.html
    incubator/devicemap/trunk/prototypes/logcapture/logcapture.js

Modified: incubator/devicemap/trunk/prototypes/logcapture/index.html
URL: http://svn.apache.org/viewvc/incubator/devicemap/trunk/prototypes/logcapture/index.html?rev=1297538&r1=1297537&r2=1297538&view=diff
==============================================================================
--- incubator/devicemap/trunk/prototypes/logcapture/index.html (original)
+++ incubator/devicemap/trunk/prototypes/logcapture/index.html Tue Mar  6 15:47:11 2012
@@ -1,23 +1,48 @@
+<!DOCTYPE html>
 <html>
 
 <head>
 <title>DeviceMap logcapture prototype</title>
 
+<script language="javascript">
+  // setup onload handler to check that logcapture.js
+  // correctly preserves it
+  window.onload = function() {
+    document.getElementById("onload").innerHTML = "Old onload was called correctly.";
+  }
+</script>
+
+<!-- 
+    To setup devicemap detection, add this script in head
+    and add a div id="devicemap" element somewhere in the
+    document. The devicemap img and debug output elements 
+    will be added as children of that element.
+     
+    The devicemapDebug CSS class can be used to control 
+    the display of debugging info.
+-->
+<script src="logcapture.js" language="javascript"></script>
+
 <style type="text/css">
 body {
     font-family: Georgia, Verdana, Arial, serif;
 }
+.debug {
+    color:blue; 
+}
 h1 {
     border-bottom: solid grey 1px;
 }
-.imgurl {
+.devicemapDebug {
+    color:grey;
     font-size:80%;
     font-family: Courier New, Courier, monospace;
 }
-.title {
+.devicemapDebug .title {
     font-weight:bold;
 }
 </style>
+
 </head>
 
 <body>
@@ -40,8 +65,9 @@ basic device information that the server
 See example httpd.conf in this folder for how to log those values.  
 </p>
 
-<p>
+<div id="devicemap"></div>
+
+<div class="debug" id="onload"></div>
 
-<script src="logcapture.js" language="javascript"></script>
 </body>
-</html>
+</html>
\ No newline at end of file

Modified: incubator/devicemap/trunk/prototypes/logcapture/logcapture.js
URL: http://svn.apache.org/viewvc/incubator/devicemap/trunk/prototypes/logcapture/logcapture.js?rev=1297538&r1=1297537&r2=1297538&view=diff
==============================================================================
--- incubator/devicemap/trunk/prototypes/logcapture/logcapture.js (original)
+++ incubator/devicemap/trunk/prototypes/logcapture/logcapture.js Tue Mar  6 15:47:11 2012
@@ -23,6 +23,9 @@
   client device encoded in request parameters
 */
 
+// start devicemap code scope
+(function() {
+
 // return expr, suitably formatted as an URL parameter,
 // invalid expr outputs NOVALUE.
 function getExpr(expr) {
@@ -44,8 +47,8 @@ function getElementSupport(prefix, name,
     return "&" + prefix + "." + name + "." + propertyName + "=" + result;
 }
 
-// build devicemap image URL, adding useful device values
-var img="devicemap.png?dmap=1";
+// build devicemap image URL with cache killer, adding useful device values
+var img="devicemap.png?dmap=" + new Date(). getTime();
 var expr = [ 
     "screen.width", 
     "screen.height",
@@ -68,5 +71,31 @@ img += getElementSupport("dummy","video"
 
 // add img element with computed path + parameters, so
 // that server log provides device information
-document.write("<img src=\"" + img + "\"/>");
-document.write("<div class='imgurl'><span class='title'>Image URL: </span>" + img + "</div>");
+function writeDeviceMapInfo(container) {
+  var e = document.createElement("img");
+  e.src = img;
+  container.appendChild(e);
+  e = document.createElement("div");
+  e.setAttribute("class", "devicemapDebug");
+  e.innerHTML = "<span class='title'>Image URL: </span>" + img
+  container.appendChild(e);
+}
+
+// set onload handler
+var oldOnload = window.onload;
+window.onload = function() {
+  var cid = "devicemap";
+  var container =  document.getElementById(cid);
+  if(!container) {
+    // TODO less intrusive warning
+    alert("devicemap container element (id=" + cid + ") not found");
+  } else {
+    writeDeviceMapInfo(container);
+  }
+  if(oldOnload) {
+    oldOnload.call(window);
+  } 
+}
+
+// end devicemap code scope 
+})();
\ No newline at end of file