Skip to content

Instantly share code, notes, and snippets.

@jameskeane
Last active April 1, 2016 20:46
Show Gist options
  • Save jameskeane/e0b145e6287b3f12f5e47e6b1d313308 to your computer and use it in GitHub Desktop.
Save jameskeane/e0b145e6287b3f12f5e47e6b1d313308 to your computer and use it in GitHub Desktop.
Small example to demonstrate safari bug.
border: no
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment