jameskeane/.block

## .block
border: no

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Chat app example</title>
  <style>
  li {
    list-style-type: none;
    transition: background 5s ease-out;
    background: #ffffff;
  }
  span { padding: 10px; }
  .unread {
    background: #FFE0E0;
  }
  #cover {
    display: none;
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 4em;
    color: white;
  }
  </style>
</head>
<body>
  <ul id="chats">
    <li><span class="user">joey</span><span class="chat">Did you guys see the new tesla?!</span></li>
  </ul>
  <div id="cover">Lost focus<div>
  <script>
    var chats = document.getElementById('chats');
    var state = history.state || {
      messages: [],
      unread: []
    };

    function insertMessage(message, unread) {
      var el = document.createElement('li');
      el.id = message.id;
      el.innerHTML = '<span class="user">' + message.user + '</span>' +
                     '<span class="chat">' + message.chat + '</span>';
      if (unread) {
        el.setAttribute('class', 'unread');
      }
      chats.appendChild(el);
    }

    // Recieve a chat message in 'real time'
    var hasFocus = true;
    var nextId = 0;
    function recieveChat(message) {
      message.id = 'm-' + nextId++;
      state.messages.push(message);

      if (!hasFocus) {
        state.unread.push(message.id);
        document.title = '(' + state.unread.length + ') Unread - Chat app example';
      }

      history.replaceState(state, '', window.location.href);
      insertMessage(message, !hasFocus);
    }

    if (!history.state) {
      // simulate a chat
      var messages = [
        { user: 'mike', chat: 'whoa' },
        { user: 'foobar', chat: 'looks weird' },
        { user: 'enron', chat: 'oil is the future' },
        { user: 'greenpeace', chat: '@enron, jig is up' },
        { user: 'chris', chat: 'so awesome cant wait' },
        { user: 'fabio', chat: 'meh' },
        { user: 'gates', chat: '@elon, but does it cure malaria?' },
        { user: 'willitblendguy', chat: 'but will it blend' },
        { user: 'john', chat: '#electricfuture' },
        { user: 'elon', chat: 'april fools, bozos' },
        { user: 'jersh', chat: 'GOT EM' },
        { user: 'bill', chat: '#needsmoretruck' },
        { user: 'dave', chat: 'how fast is it?' },
        { user: 'npm', chat: 'hope it doesnt depend on left-pad' },
        { user: 'rstall', chat: '@elon, you released the sources yet?' },
        { user: 'sergey', chat: 'but does it drive itself?' }
      ];

      messages.forEach(function(message) {
        setTimeout(recieveChat.bind(null, message), Math.random() * 2500);
      });

      setTimeout(simulateLostFocus, 1000);
      setTimeout(function() {
        document.getElementById('cover').innerHTML =
            'refresh page, or go somewhere <a href="https://trac.webkit.org/changeset/198687">else</a> and come back for saved state.'
      }, 3000)

      function simulateLostFocus() {
        hasFocus = false;
        document.getElementById('cover').style.display = 'block';
      }
    } else {
      // reload state
      if (state.unread.length > 0) {
        document.title = '(' + state.unread.length + ') Unread - Chat app example';
      }

      state.messages.forEach(function(m) { insertMessage(m); });
      state.unread.forEach(function(id) {
        var el = document.getElementById(id);
        el.setAttribute('class', 'unread');
        setTimeout(function() { el.setAttribute('class', ''); }, 0);
      });
      setTimeout(function() {
        // in real app, messages would still be coming in but it doesn't matter
        // for the example
        state.unread = [];
        document.title = 'Chat example';
        history.replaceState(state, '', window.location.href);
      }, 3000);
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Chat app example</title>
	<style>
	li {
	list-style-type: none;
	transition: background 5s ease-out;
	background: #ffffff;
	}
	span { padding: 10px; }
	.unread {
	background: #FFE0E0;
	}
	#cover {
	display: none;
	position: absolute; top: 0; left: 0; bottom: 0; right: 0;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
	font-size: 4em;
	color: white;
	}
	</style>
	</head>
	<body>
	<ul id="chats">
	<li><span class="user">joey</span><span class="chat">Did you guys see the new tesla?!</span></li>
	</ul>
	<div id="cover">Lost focus<div>
	<script>
	var chats = document.getElementById('chats');
	var state = history.state \|\| {
	messages: [],
	unread: []
	};

	function insertMessage(message, unread) {
	var el = document.createElement('li');
	el.id = message.id;
	el.innerHTML = '<span class="user">' + message.user + '</span>' +
	'<span class="chat">' + message.chat + '</span>';
	if (unread) {
	el.setAttribute('class', 'unread');
	}
	chats.appendChild(el);
	}

	// Recieve a chat message in 'real time'
	var hasFocus = true;
	var nextId = 0;
	function recieveChat(message) {
	message.id = 'm-' + nextId++;
	state.messages.push(message);

	if (!hasFocus) {
	state.unread.push(message.id);
	document.title = '(' + state.unread.length + ') Unread - Chat app example';
	}

	history.replaceState(state, '', window.location.href);
	insertMessage(message, !hasFocus);
	}

	if (!history.state) {
	// simulate a chat
	var messages = [
	{ user: 'mike', chat: 'whoa' },
	{ user: 'foobar', chat: 'looks weird' },
	{ user: 'enron', chat: 'oil is the future' },
	{ user: 'greenpeace', chat: '@enron, jig is up' },
	{ user: 'chris', chat: 'so awesome cant wait' },
	{ user: 'fabio', chat: 'meh' },
	{ user: 'gates', chat: '@elon, but does it cure malaria?' },
	{ user: 'willitblendguy', chat: 'but will it blend' },
	{ user: 'john', chat: '#electricfuture' },
	{ user: 'elon', chat: 'april fools, bozos' },
	{ user: 'jersh', chat: 'GOT EM' },
	{ user: 'bill', chat: '#needsmoretruck' },
	{ user: 'dave', chat: 'how fast is it?' },
	{ user: 'npm', chat: 'hope it doesnt depend on left-pad' },
	{ user: 'rstall', chat: '@elon, you released the sources yet?' },
	{ user: 'sergey', chat: 'but does it drive itself?' }
	];

	messages.forEach(function(message) {
	setTimeout(recieveChat.bind(null, message), Math.random() * 2500);
	});

	setTimeout(simulateLostFocus, 1000);
	setTimeout(function() {
	document.getElementById('cover').innerHTML =
	'refresh page, or go somewhere <a href="https://trac.webkit.org/changeset/198687">else</a> and come back for saved state.'
	}, 3000)

	function simulateLostFocus() {
	hasFocus = false;
	document.getElementById('cover').style.display = 'block';
	}
	} else {
	// reload state
	if (state.unread.length > 0) {
	document.title = '(' + state.unread.length + ') Unread - Chat app example';
	}

	state.messages.forEach(function(m) { insertMessage(m); });
	state.unread.forEach(function(id) {
	var el = document.getElementById(id);
	el.setAttribute('class', 'unread');
	setTimeout(function() { el.setAttribute('class', ''); }, 0);
	});
	setTimeout(function() {
	// in real app, messages would still be coming in but it doesn't matter
	// for the example
	state.unread = [];
	document.title = 'Chat example';
	history.replaceState(state, '', window.location.href);
	}, 3000);
	}
	</script>
	</body>
	</html>