Added new example with updated version and asynchronous loading

loggly · niftylettuce · Sep 4, 2012 · Sep 4, 2012 · Sep 4, 2012 · Sep 4, 2012
commit d5f7eec601f5ecd83efed9811b3cbffd35659fc0
diff --git a/README.md b/README.md
@@ -9,20 +9,20 @@ Include the loggly.js file in a web page.  You can use our CloudFront version if
 
 Create a new HTTP input in your Loggly account, make a note of the URL, and then edit and use the following code in that same web page:
 
-<pre>
-  <script type="text/javascript"> 
-    window.onload=function(){
-      castor = new loggly({ url: 'http://logs.loggly.com/inputs/a2e232e9-4827-49aa-9d28-e18e5ba5a818?rt=1', level: 'info'});
-      castor.info("url=" + window.location.href + " browser=" + castor.user_agent + " width=" + castor.browser_size.width);
-    }
-  </script> 
-</pre>
-
-This should result in the page posting an event to Loggly that looks something like this: 
-
-<pre>
+```html
+<script type="text/javascript">
+  window.onload=function(){
+    castor = new loggly({ url: 'http://logs.loggly.com/inputs/a2e232e9-4827-49aa-9d28-e18e5ba5a818?rt=1', level: 'info'});
+    castor.info("url=" + window.location.href + " browser=" + castor.user_agent + " width=" + castor.browser_size.width);
+  }
+</script>
+```
+
+This should result in the page posting an event to Loggly that looks something like this:
+
+```js
 source=castor url=http://www.geekceo.com/ browser=MozillaNetscape5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.57 Safari/534.24 width=1009
-</pre>
+```
 
 ## Log Levels
 Set the log level using the *level: 'info'* parameter.  Call the library using the error, warn, info, debug and log methods.  Events called with these methods that match or exceed the current logging level will be forwarded on to Loggly.
diff --git a/index.html b/index.html
@@ -1,33 +1,93 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <title>Loggly Javascript Logging Example</title> 
+  <title>loggly-castor - Client-side JavaScript Logging Example</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link rel="shortcut icon" href="/images/favicon.ico">
   <link rel="stylesheet" href="/css/reset.css" type="text/css" />
   <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
-  <script type="text/JavaScript">
-    var scr = document.createElement("script"); 
-    var host = (("https:" == document.location.protocol) ? "https://d3eyf2cx8mbems.cloudfront.net" : "http://d3eyf2cx8mbems.cloudfront.net");
-    scr.type = "text/javascript";
-    scr.src = host + "/js/loggly-0.2.1.js";
-    document.documentElement.firstChild.appendChild(scr);
-  </script>
-
-  <script type="text/javascript">
-    window.onload=function(){ 
-      var key = "a00039e9-4827-49aa-9d28-e18e5ba5a818";
-      var host = (("https:" == document.location.protocol) ? "https://logs.loggly.com" : "http://logs.loggly.com");
-      castor = new loggly.castor({ url: host+'/inputs/'+key, level: 'log'});
-      castor.log({url:window.location.href});
-    }
-  </script>
-
+  <script src="https://raw.github.com/gist/3620903/1dd5b6093046043f9c22d0eac47a616870331f34/getscript.min.js"></script>
 </head>
 <body>
   <div>
-    <p>sending test event</p>
-    <p>© 2012 <a href="http://loggly.com/">Loggly, Inc.</a></p>
+    <h1>loggly-castor example (<a href="#" id="view-source">view source</a>)</h1>
+    <p>&copy; 2012 <a href="http://loggly.com/">Loggly, Inc.</a></p>
   </div>
+  <script>
+
+    // # loggly-castor example by @niftylettuce
+
+    // castor namespace
+    var _castor = {}
+
+    // loggly-castor's protocol relative paths
+    _castor.paths = {
+        http  : "http://cloudfront.loggly.com/js/loggly-0.2.1.js"
+      , https : "https://d3eyf2cx8mbems.cloudfront.net/js/loggly-0.2.1.js"
+    }
+    _castor.p = document.location.protocol
+    _castor.p = _castor.p.substring(0, _castor.p.length - 1)
+    _castor.src = _castor.paths[_castor.p]
+
+    // loggly namespace
+    _loggly = {}
+    _loggly.paths = {
+        http  : "http://logs.loggly.com"
+      , https : "https://logs.loggly.com"
+    }
+    _loggly.src = _loggly.paths[_castor.p]
+    _loggly.key = "a00039e9-4827-49aa-9d28-e18e5ba5a818"
+    _loggly.config = {
+        url   : this.src + '/inputs/' + this.key
+      , level : 'log'
+    }
+
+    // global castor namespace
+    var castor
+
+    _castor.onload = function() {
+      castor.log({
+          source : 'castor'
+        , url    : window.location.href
+      })
+    }
+
+    _castor.onerror = function(err, file, line) {
+      castor.log({
+          source : 'castor'
+        , url    : window.location.href
+        , err    : err
+        , file   : file
+        , line   : line
+      })
+    }
+
+    _castor.cb = function() {
+      castor = new loggly.castor(_loggly.config)
+      // jQuery users would use:
+      // `$(_castor.onload)`
+      // (or)
+      // `$(function() { _castor.onload() })`
+      window.onload  = _castor.onload
+      window.onerror = _castor.onerror
+    }
+
+    console.log('_castor', _castor)
+    console.log('_loggly', _loggly)
+
+    getScript(_castor.src, _castor.cb)
+
+  </script>
+  <script>
+    // example stuff (ignore this)
+    (function(d, w) {
+      var $s  = d.getElementById('view-source')
+        , url = 'view-source:' + w.location.href
+      $s.onclick = viewSource
+      function viewSource() {
+        w.location = url
+      }
+    }(document, window))
+  </script>
 </body>
 </html>