<!DOCTYPE html>
<html>

  <head>
    <script data-require="rxjs@*" data-semver="2.5.3" src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.js"></script>
    <script data-require="rx.dom.js@4.0.4" data-semver="4.0.4" src="https://cdn.rawgit.com/Reactive-Extensions/RxJS-DOM/v4.0.4/dist/rx.dom.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <input type="text" id="input" value="123">
    <p>Idle timeout triggers after 5 seconds of inactivity. You can stop with Quit and restart it refreshing the page. Check console for messages.</p>
  </body>

</html>
var mergedStreams = Rx.Observable.merge(
  Rx.DOM.click(document),
  Rx.DOM.keydown(document),
  Rx.DOM.mousemove(document),
  Rx.DOM.touchstart(document),
  Rx.DOM.scroll(document)
);
  
var idleStream = mergedStreams
  .bufferWithTime(5000)
  .filter(function(arr){
    return arr.length===0;
  })
  .pausable();

var subscription = idleStream.subscribeOnNext(
  function () {
    idleStream.pause();
    if (!confirm("Idle timeout. Quit?")){
      console.log('user wants to stay');
      idleStream.resume();
    } else {
      //add quit logic
      console.log('user wants to quit');
    }
  },
  function (err) {
    console.log('Error: ' + err);
  });

//start
idleStream.resume();
/* Styles go here */