provide cancel button

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
-.sass-cache/
+.sass-cache/
+.idea/
+js/

README.md

@@ -55,7 +55,10 @@ Options (any can be provided as a function), with their defaults:
     initialDelay: 3,
 
     // How long should we wait between retries.
-    delay: (1.5 * last delay, capped at 1 hour)
+    delay: (1.5 * last delay, capped at 1 hour),
+
+    // Should we display cancel button so the user can stop the automatically reconnect proccess 
+    cancel: false
   },
 
   // Should we store and attempt to remake requests which fail while the connection is down.

coffee/offline.coffee

@@ -63,7 +63,7 @@ Offline.getOption = (key) ->
 # In Chrome they mean that the internet connection was lost or restored
 window.addEventListener? 'online', ->
   # The event fires slightly before the browser is ready to make a request
-  setTimeout Offline.confirmUp, 100
+  (Offline.reconnect.state isnt 'canceled')? setTimeout Offline.confirmUp, 100
 , false
 
 window.addEventListener? 'offline', ->
@@ -115,7 +115,7 @@ Offline.off = (event, handler) ->
 
 Offline.trigger = (event) ->
   if handlers[event]?
-    # we have to make a copy of the handlers since its possible that the called functions will modify the handlers array by calling off/on 
+    # we have to make a copy of the handlers since its possible that the called functions will modify the handlers array by calling off/on
     for [ctx, handler] in handlers[event][..]
       handler.call(ctx)
 

coffee/reconnect.coffee

@@ -26,20 +26,38 @@ tick = ->
     tryNow()
 
 tryNow = ->
-  return if rc.state isnt 'waiting'
+  return if rc.state isnt 'waiting' and rc.state isnt 'canceled'
 
-  Offline.trigger 'reconnect:connecting'
-  rc.state = 'connecting'
+  if (rc.state is 'canceled')
+    reset()
 
-  Offline.check()
+    rc.state = 'waiting'
+
+    Offline.trigger 'reconnect:started'
+    retryIntv = setInterval tick, 1000
+  else
+    Offline.trigger 'reconnect:connecting'
+    rc.state = 'connecting'
+
+    Offline.check()
+
+cancel = ->
+
+  if retryIntv?
+    clearInterval retryIntv
+
+  reset()
+
+  rc.state = 'canceled'
+  Offline.trigger 'reconnect:canceled'
 
 down = ->
   return unless Offline.getOption('reconnect')
 
   reset()
 
   rc.state = 'waiting'
-  
+
   Offline.trigger 'reconnect:started'
   retryIntv = setInterval tick, 1000
 
@@ -58,6 +76,7 @@ nope = ->
     next()
 
 rc.tryNow = tryNow
+rc.cancel = cancel
 
 reset()
 

coffee/ui.coffee

@@ -3,6 +3,7 @@ unless window.Offline
 
 TEMPLATE = '<div class="offline-ui"><div class="offline-ui-content"></div></div>'
 RETRY_TEMPLATE = '<a href class="offline-ui-retry"></a>'
+CANCEL_TEMPLATE = '<a href class="offline-ui-cancel"></a>'
 
 createFromHTML = (html) ->
   el = document.createElement('div')
@@ -49,7 +50,21 @@ render = ->
   document.body.appendChild el
 
   if Offline.reconnect? and Offline.getOption('reconnect')
-    el.appendChild createFromHTML RETRY_TEMPLATE
+    if Offline.getOption('reconnect.cancel')
+      el.appendChild createFromHTML CANCEL_TEMPLATE
+
+      cancel_button = el.querySelector('.offline-ui-cancel')
+      cancel_handler = (e) ->
+        e.preventDefault()
+
+        Offline.reconnect.cancel()
+
+      if cancel_button.addEventListener?
+        cancel_button.addEventListener 'click', cancel_handler, false
+      else
+        cancel_button.attachEvent 'click', cancel_handler
+
+      el.appendChild createFromHTML RETRY_TEMPLATE
 
     button = el.querySelector('.offline-ui-retry')
     handler = (e) ->
@@ -83,6 +98,9 @@ init = ->
     flashClass 'offline-ui-down-2s', 2
     flashClass 'offline-ui-down-5s', 5
 
+  Offline.on 'reconnect:started', ->
+    removeClass 'offline-ui-reconnect-canceled'
+
   Offline.on 'reconnect:connecting', ->
     addClass 'offline-ui-connecting'
     removeClass 'offline-ui-waiting'
@@ -102,6 +120,9 @@ init = ->
     content.setAttribute 'data-retry-in-value', null
     content.setAttribute 'data-retry-in-unit', null
 
+  Offline.on 'reconnect:canceled', ->
+    addClass 'offline-ui-reconnect-canceled'
+
   Offline.on 'reconnect:failure', ->
     flashClass 'offline-ui-reconnect-failed-2s', 2
     flashClass 'offline-ui-reconnect-failed-5s', 5

js/offline.js

@@ -75,7 +75,8 @@
 
   if (typeof window.addEventListener === "function") {
     window.addEventListener('online', function() {
-      return setTimeout(Offline.confirmUp, 100);
+      var base;
+      return typeof (base = Offline.reconnect.state !== 'canceled') === "function" ? base(setTimeout(Offline.confirmUp, 100)) : void 0;
     }, false);
   }
 

js/reconnect.js

@@ -1,5 +1,5 @@
 (function() {
-  var down, next, nope, rc, reset, retryIntv, tick, tryNow, up;
+  var cancel, down, next, nope, rc, reset, retryIntv, tick, tryNow, up;
 
   if (!window.Offline) {
     throw new Error("Offline Reconnect brought in without offline.js");
@@ -36,12 +36,28 @@
   };
 
   tryNow = function() {
-    if (rc.state !== 'waiting') {
+    if (rc.state !== 'waiting' && rc.state !== 'canceled') {
       return;
     }
-    Offline.trigger('reconnect:connecting');
-    rc.state = 'connecting';
-    return Offline.check();
+    if (rc.state === 'canceled') {
+      reset();
+      rc.state = 'waiting';
+      Offline.trigger('reconnect:started');
+      return retryIntv = setInterval(tick, 1000);
+    } else {
+      Offline.trigger('reconnect:connecting');
+      rc.state = 'connecting';
+      return Offline.check();
+    }
+  };
+
+  cancel = function() {
+    if (retryIntv != null) {
+      clearInterval(retryIntv);
+    }
+    reset();
+    rc.state = 'canceled';
+    return Offline.trigger('reconnect:canceled');
   };
 
   down = function() {
@@ -74,6 +90,8 @@
 
   rc.tryNow = tryNow;
 
+  rc.cancel = cancel;
+
   reset();
 
   Offline.on('down', down);

js/ui.js

@@ -1,5 +1,5 @@
 (function() {
-  var RETRY_TEMPLATE, TEMPLATE, _onreadystatechange, addClass, content, createFromHTML, el, flashClass, flashTimeouts, init, removeClass, render, roundTime;
+  var CANCEL_TEMPLATE, RETRY_TEMPLATE, TEMPLATE, _onreadystatechange, addClass, content, createFromHTML, el, flashClass, flashTimeouts, init, removeClass, render, roundTime;
 
   if (!window.Offline) {
     throw new Error("Offline UI brought in without offline.js");
@@ -9,6 +9,8 @@
 
   RETRY_TEMPLATE = '<a href class="offline-ui-retry"></a>';
 
+  CANCEL_TEMPLATE = '<a href class="offline-ui-cancel"></a>';
+
   createFromHTML = function(html) {
     var el;
     el = document.createElement('div');
@@ -59,11 +61,24 @@
   };
 
   render = function() {
-    var button, handler;
+    var button, cancel_button, cancel_handler, handler;
     el = createFromHTML(TEMPLATE);
     document.body.appendChild(el);
     if ((Offline.reconnect != null) && Offline.getOption('reconnect')) {
-      el.appendChild(createFromHTML(RETRY_TEMPLATE));
+      if (Offline.getOption('reconnect.cancel')) {
+        el.appendChild(createFromHTML(CANCEL_TEMPLATE));
+        cancel_button = el.querySelector('.offline-ui-cancel');
+        cancel_handler = function(e) {
+          e.preventDefault();
+          return Offline.reconnect.cancel();
+        };
+        if (cancel_button.addEventListener != null) {
+          cancel_button.addEventListener('click', cancel_handler, false);
+        } else {
+          cancel_button.attachEvent('click', cancel_handler);
+        }
+        el.appendChild(createFromHTML(RETRY_TEMPLATE));
+      }
       button = el.querySelector('.offline-ui-retry');
       handler = function(e) {
         e.preventDefault();
@@ -93,6 +108,9 @@
       flashClass('offline-ui-down-2s', 2);
       return flashClass('offline-ui-down-5s', 5);
     });
+    Offline.on('reconnect:started', function() {
+      return removeClass('offline-ui-reconnect-canceled');
+    });
     Offline.on('reconnect:connecting', function() {
       addClass('offline-ui-connecting');
       return removeClass('offline-ui-waiting');
@@ -110,6 +128,9 @@
       content.setAttribute('data-retry-in-value', null);
       return content.setAttribute('data-retry-in-unit', null);
     });
+    Offline.on('reconnect:canceled', function() {
+      return addClass('offline-ui-reconnect-canceled');
+    });
     Offline.on('reconnect:failure', function() {
       flashClass('offline-ui-reconnect-failed-2s', 2);
       return flashClass('offline-ui-reconnect-failed-5s', 5);