intercom/delay-replay-click-event.html

## delay-replay-click-event.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <link rel="stylesheet" href="http://www.contrast.ie/blog/wp-content/uploads/2009/09/spidermonkey-example.css" type="text/css" media="screen" charset="utf-8" />
  <link rel="stylesheet" href="http://www.contrast.ie/blog/wp-content/themes/sandbox/assets/css/screen/style.css" type="text/css" media="screen" charset="utf-8" />
  <script type="text/javascript">
    var waitForMe = {
      lastClick: null,
      listener : function(e) {
        e.stopPropagation();
        e.preventDefault();
        waitForMe.lastClick = e;
      },
      onLoad : function() {
        waitForMe.detach();
        $('#loading-notice').addClass('finished_loading');
        $('#loading-notice').html("Loaded");
        if (waitForMe.lastClick) {
          var fireOnThis = waitForMe.lastClick.target;
          var evObj = document.createEvent('MouseEvents');
          evObj.initEvent('click', true, true);
          fireOnThis.dispatchEvent(evObj);
        }
      },
      attach : function() {
        if (document.addEventListener)
          document.addEventListener('click', waitForMe.listener, true);
      },
      detach : function() {
        if (document.removeEventListener)
          document.removeEventListener('click', waitForMe.listener, true);
      }
    };
    waitForMe.attach();
  </script>
</head>
<body>
  <div id="Page">
    <div id="loading-notice">Loading...</div>
    <p>Click a link while loading and it will be handled after loading is finished.</p>
    <p><a href="/some_other_page_that_doesnt_exist" class="link">Link 1</a> <a href="/some_other_page_that_doesnt_exist" class="link">Link 2</a> <a href="/some_other_page_that_doesnt_exist" class="link">Link 3</a> </p>
    <div id="message"></div>
  </div>
  <p style="text-align:center;">Can you make it work on Internet Explorer? <a href="http://gist.github.com/gists/183593">fork this gist</a>.</p>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
  $(function() {
    $('.link').click(function() {
      $('#message').html("Just handled click on: " + $(this).text());
      return false;
    });
    setTimeout(function(){
      waitForMe.onLoad();
    }, 5000);
  });
</script>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link rel="stylesheet" href="http://www.contrast.ie/blog/wp-content/uploads/2009/09/spidermonkey-example.css" type="text/css" media="screen" charset="utf-8" />
	<link rel="stylesheet" href="http://www.contrast.ie/blog/wp-content/themes/sandbox/assets/css/screen/style.css" type="text/css" media="screen" charset="utf-8" />
	<script type="text/javascript">
	var waitForMe = {
	lastClick: null,
	listener : function(e) {
	e.stopPropagation();
	e.preventDefault();
	waitForMe.lastClick = e;
	},
	onLoad : function() {
	waitForMe.detach();
	$('#loading-notice').addClass('finished_loading');
	$('#loading-notice').html("Loaded");
	if (waitForMe.lastClick) {
	var fireOnThis = waitForMe.lastClick.target;
	var evObj = document.createEvent('MouseEvents');
	evObj.initEvent('click', true, true);
	fireOnThis.dispatchEvent(evObj);
	}
	},
	attach : function() {
	if (document.addEventListener)
	document.addEventListener('click', waitForMe.listener, true);
	},
	detach : function() {
	if (document.removeEventListener)
	document.removeEventListener('click', waitForMe.listener, true);
	}
	};
	waitForMe.attach();
	</script>
	</head>
	<body>
	<div id="Page">
	<div id="loading-notice">Loading...</div>
	<p>Click a link while loading and it will be handled after loading is finished.</p>
	<p><a href="/some_other_page_that_doesnt_exist" class="link">Link 1</a> <a href="/some_other_page_that_doesnt_exist" class="link">Link 2</a> <a href="/some_other_page_that_doesnt_exist" class="link">Link 3</a> </p>
	<div id="message"></div>
	</div>
	<p style="text-align:center;">Can you make it work on Internet Explorer? <a href="http://gist.github.com/gists/183593">fork this gist</a>.</p>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
	<script type="text/javascript">
	$(function() {
	$('.link').click(function() {
	$('#message').html("Just handled click on: " + $(this).text());
	return false;
	});
	setTimeout(function(){
	waitForMe.onLoad();
	}, 5000);
	});
	</script>
	</body>
	</html>