cworsley4/Makefile

## common.js
(function (global, undefined) {
  global.getHost = function () {
    var location = global.location;
    return location.protocol + '://' + location.hostname + ':' + location.port;
  };
})(window);

## Makefile
start:
	serve .
install:
	npm install -g serve

## messenger.js
(function (global, undefined) {
  function Messenger() {
    this.listeners = {};
  }

  Messenger.prototype.emit = function (event, payload) {
    var callback = null;
    var listeners = this.listeners[event] || [];
    console.debug('About to emit events for the ' + event + ' event');
    for(var i = 0; i < listeners.length; i++) {
      callback = listeners[i];
      callback.apply([null, event, payload]);
    }
  };

  Messenger.prototype.register = function (event, callback) {
    // TODO: Validate events
    this.listeners[event] = [callback];
    return true;
  };

  global.Messenger = Messenger;
})(window);

## popup.html
<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
  <script src="./common.js"></script>
  <script src="./messenger.js"></script>
  <script type="text/javascript">
    (function (global, undefined) {
      var killerTimer = null;
      var messenger = new global.Messenger();

      messenger.register('system:heartbeat:ping', function(event, payload) {
        console.info('What it is!');
        window.postMessage({
          event: 'system:heartbeat:pong',
          payload: null
        }, global.getHost());
      });

      window.addEventListener('message', function reciever(event) {
        if (event.isTrusted) {
          clearTimeout(killerTimer);
          killer();

          var data = event.data;
          messenger.emit(data.event, data.payload);
        } else {
          console.error('Event came from an untrusted source.', event);
        }
      }, false);

      function killer() {
        killerTimer = setTimeout(function () {
          alert('Parent window has gone away.');
          window.close();
        }, 30000);
      }

      killer();
    })(window);
  </script>
</head>
<body>
  <h1>Popup</h1>
  <a href="./popup2.html">Go to next</a>
</body>
</html>

## popup2.html
<!DOCTYPE html>
<html>
<head>
  <title>Popup 2</title>
  <script src="./common.js"></script>
  <script src="./messenger.js"></script>
  <script type="text/javascript">
    (function (global, undefined) {
      var killerTimer = null;
      var messenger = new global.Messenger();

      messenger.register('system:heartbeat:ping', function(event, payload) {
        console.info('What it is!');
        window.postMessage({
          event: 'system:heartbeat:pong',
          payload: null
        }, global.getHost());
      });

      window.addEventListener('message', function reciever(event) {
        if (event.isTrusted) {
          clearTimeout(killerTimer);
          killer();

          var data = event.data;
          messenger.emit(data.event, data.payload);
        } else {
          console.error('Event came from an untrusted source.', event);
        }
      }, false);

      function killer() {
        killerTimer = setTimeout(function () {
          alert('Parent window has gone away.');
          window.close();
        }, 30000);
      }

      killer();
    })(window);
  </script>
</head>
<body>
  <h1>Popup 2</h1>
</body>
</html>

## start.html
<!DOCTYPE html />
<html lang="en">
<head>
  <title>Do it</title>
  <script src="./common.js"></script>
  <script src="./messenger.js"></script>
  <script type="text/javascript">
    (function (global, undefined) {
      var editor = null;
      var ticker = null;
      var messenger = new Messenger();

      global.openPopup = function() {
        editor = global.open('./popup.html', '_blank', 'height=600,width=800');
        heartbeat();
      }

      function generatePayload() {
        return {
          event: event,
          payload: payload || {},
          timestamp: new Date()
        }
      }

      function heartbeat() {
        editor.postMessage({
          event: 'system:heartbeat:ping',
          payload: null
        }, global.getHost());

        if (!editor.closed) {
          setTimeout(heartbeat, 500);
        } else {
          console.debug('The editor has closed');
          // end editing session here
        }
      }
    })(window);
  </script>
</head>
<body>
  <button onclick="openPopup();">Open</button>
</body>
</html>
	(function (global, undefined) {
	global.getHost = function () {
	var location = global.location;
	return location.protocol + '://' + location.hostname + ':' + location.port;
	};
	})(window);
	(function (global, undefined) {
	function Messenger() {
	this.listeners = {};
	}

	Messenger.prototype.emit = function (event, payload) {
	var callback = null;
	var listeners = this.listeners[event] \|\| [];
	console.debug('About to emit events for the ' + event + ' event');
	for(var i = 0; i < listeners.length; i++) {
	callback = listeners[i];
	callback.apply([null, event, payload]);
	}
	};

	Messenger.prototype.register = function (event, callback) {
	// TODO: Validate events
	this.listeners[event] = [callback];
	return true;
	};

	global.Messenger = Messenger;
	})(window);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Popup 2</title>
	<script src="./common.js"></script>
	<script src="./messenger.js"></script>
	<script type="text/javascript">
	(function (global, undefined) {
	var killerTimer = null;
	var messenger = new global.Messenger();

	messenger.register('system:heartbeat:ping', function(event, payload) {
	console.info('What it is!');
	window.postMessage({
	event: 'system:heartbeat:pong',
	payload: null
	}, global.getHost());
	});

	window.addEventListener('message', function reciever(event) {
	if (event.isTrusted) {
	clearTimeout(killerTimer);
	killer();

	var data = event.data;
	messenger.emit(data.event, data.payload);
	} else {
	console.error('Event came from an untrusted source.', event);
	}
	}, false);

	function killer() {
	killerTimer = setTimeout(function () {
	alert('Parent window has gone away.');
	window.close();
	}, 30000);
	}

	killer();
	})(window);
	</script>
	</head>
	<body>
	<h1>Popup 2</h1>
	</body>
	</html>
	<!DOCTYPE html />
	<html lang="en">
	<head>
	<title>Do it</title>
	<script src="./common.js"></script>
	<script src="./messenger.js"></script>
	<script type="text/javascript">
	(function (global, undefined) {
	var editor = null;
	var ticker = null;
	var messenger = new Messenger();

	global.openPopup = function() {
	editor = global.open('./popup.html', '_blank', 'height=600,width=800');
	heartbeat();
	}

	function generatePayload() {
	return {
	event: event,
	payload: payload \|\| {},
	timestamp: new Date()
	}
	}

	function heartbeat() {
	editor.postMessage({
	event: 'system:heartbeat:ping',
	payload: null
	}, global.getHost());

	if (!editor.closed) {
	setTimeout(heartbeat, 500);
	} else {
	console.debug('The editor has closed');
	// end editing session here
	}
	}
	})(window);
	</script>
	</head>
	<body>
	<button onclick="openPopup();">Open</button>
	</body>
	</html>