From 77eed67ea5fd4c40b1d67852e1514c93160be280 Mon Sep 17 00:00:00 2001
From: Remy Sharp <remy@leftlogic.com>
Date: Thu, 4 Mar 2010 15:09:30 +0000
Subject: [PATCH] New demo to demonstrate on and offline events and expose bugs
 in browsers.

---
 demos/offline-events.html | 54 +++++++++++++++++++++++++++++++++++++++
 demos/offline.html        | 21 +++++++--------
 index.php                 |  1 +
 3 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 demos/offline-events.html

diff --git a/demos/offline-events.html b/demos/offline-events.html
new file mode 100644
index 0000000..9d3e39e
--- /dev/null
+++ b/demos/offline-events.html
@@ -0,0 +1,54 @@
+<title>on/offline event capture</title>
+<style>
+li {
+  font-weight: bold;
+}
+li::before {
+  font-weight: normal;
+}
+#viabody::before {
+  content: 'via body "on" events: ';
+}
+#viaon::before {
+  content: 'via window "on" events: ';
+}
+#vialistener::before {
+  content: 'via window.addEventListener: ';
+}
+</style>
+<article>
+  <p>Test required here: File -> Work Offline - toggle the value and there <em>should</em> be three list items notifying of online and offline.</p>
+  <ul>
+    <li id="viabody"></li>
+    <li id="vialistener"></li>
+    <li id="viaon"></li>
+  </ul>
+  <p>Note that the test shows </p>
+</article>
+<script>
+ function update(online) {
+   document.getElementById('viabody').innerHTML = navigator.onLine ? 'Online' : 'Offline';
+ }
+
+ window.addEventListener('online', function () {
+   document.getElementById('vialistener').innerHTML = 'Online';
+ }, false);
+ 
+ window.addEventListener('offline', function () {
+   document.getElementById('vialistener').innerHTML = 'Offline';
+ }, false);
+ 
+ window.ononline = function () {
+   document.getElementById('viaon').innerHTML = 'Online';
+ };
+ 
+ window.onoffline = function () {
+   document.getElementById('viaon').innerHTML = 'Offline';
+ };
+ 
+ document.body.onOnline = update;
+ document.body.onOffline = update;
+ 
+ document.body.onload = update;
+ 
+</script>
\ No newline at end of file
diff --git a/demos/offline.html b/demos/offline.html
index a742bc0..dcb255e 100644
--- a/demos/offline.html
+++ b/demos/offline.html
@@ -1,18 +1,19 @@
 <title>Online connectivity monitoring</title>
 <article>
   <p>Current network status: <span id="status">checking...</span></p>
+  <ol id="state"></ol>
 </article>
 <script>
-function online() {
-  var status = document.querySelector('#status');
-  if (status) {
-    status.className = navigator.onLine ? 'online' : 'offline';
-    status.innerHTML = navigator.onLine ? 'online' : 'offline';
-  }
+var status = document.getElementById('status'),
+    state = document.getElementById('state');
+
+function online(event) {
+  status.className = navigator.onLine ? 'online' : 'offline';
+  status.innerHTML = navigator.onLine ? 'online' : 'offline';
+  state.innerHTML += '<li>New event: ' + event.type + '</li>';
 }
 
-document.addEventListener('DOMContentLoaded', online, true);
-window.addEventListener('online', online, true);
-window.addEventListener('offline', online, true);
-
+addEvent(window, 'online', online);
+addEvent(window, 'offline', online);
+online({ type: 'ready' });
 </script>
\ No newline at end of file
diff --git a/index.php b/index.php
index 2dc54a3..08ea2bd 100644
--- a/index.php
+++ b/index.php
@@ -26,6 +26,7 @@
         <li><a href="drag">drag and drop</a> (IE, Safari 4, FF3.5)</li>
         <li><a href="drag-anything">drag <em>anything</em></a> (IE, Safari 4, FF3.5)</li>
         <li><a href="offline">offline detection</a> (FF3.5, iPhone OS 3)</li>
+        <li><a href="offline-events">on/offline event tests</a> (Opera, Firefox - requires "Work Offline")</li>
         <li><a href="offlineapp">offline application using the manifest</a> (Safari 4, FF3.5.3) (<em>Note: pre-FF3.5.3 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501422">has a bug</a></em>)</li>
         <li><a href="storage">Storage</a> (all latest browsers)</li>
         <li><a href="database">Web SQL Database Storage</a> (Safari, iPhone OS 3, Opera 10.50)</li>