Ind.ie is now Small Technology Foundation.
Commit 635e5ce2 authored by Aral Balkan's avatar Aral Balkan

Fixed the Public timeline. It now also displays an initial message and...

Fixed the Public timeline. It now also displays an initial message and indeterminate progress indicator when the app first transitions to it after the setup process.
parent e11bd96a
......@@ -7,6 +7,14 @@ window.addEventListener('load', function(){
return;
}
// Check if there are no messages to begin with, remove the pre-rendered repeater.
// (It’s ID will be different if there are.)
var messageRepeater = document.getElementById('messageRepeater');
if (messageRepeater != null)
{
messageRepeater.parentNode.removeChild(messageRepeater);
}
//
// Listen for mutations on messages so that we can intelligently respond to them.
// e.g., scroll to show a message when one arrives.
......@@ -31,6 +39,9 @@ window.addEventListener('load', function(){
var messages = document.getElementById('messages');
mutationObserver.observe(messages, mutationObserverOptions);
//
// Poll every two seconds for new messages.
//
setInterval(function(){
// console.log("Polling server for new public posts…")
......@@ -45,8 +56,7 @@ window.addEventListener('load', function(){
var firstMessage = messages.firstElementChild;
var newestPostID = 0;
if (firstMessage != null)
{
if (firstMessage != null) {
newestPostID = messages.firstElementChild.getAttribute('id');
}
......@@ -70,6 +80,12 @@ window.addEventListener('load', function(){
return;
}
// Make sure that the notice is hidden and that the main section is showing.
// (Set can’t handle this automatically as we are not running it on the
// entire document but only on the delta repeat block below for performance reasons.)
document.getElementById('notice').style.display = 'none';
document.getElementById('messages').style.display = 'block';
var repeaterNodeHTML =
" <div style='background-color: rgb(200, 50, 50, 0.5);' class='message' data-set-repeat='message messages' data-set-attribute='id message.key' >"
+ " <div class='messageBody' data-set-attribute='id message.key messageBodyIDFormatter'>"
......@@ -87,6 +103,7 @@ window.addEventListener('load', function(){
div.innerHTML = repeaterNodeHTML;
// Insert new items at the beginning.
messages.insertBefore(div, messages.firstElementChild);
// messages.innerHTML = repeaterNodeHTML + messages.innerHTML;
......
......@@ -7,18 +7,33 @@
<link rel='stylesheet' href='/css/styles.css'>
<script type='text/javascript' src='/js/superagent.js'></script>
<script type='text/javascript' src='/js/moment.js'></script>
<script type='text/javascript' src='/js/zenscroll.min.js'></script>
<script type='text/javascript' src='/js/set.js'></script>
<script type='text/javascript' src='/js/zenscroll.min.js'></script>
<script type='text/javascript' src='/js/public.js'></script>
<script type='text/javascript' data-set-text='meta'></script>
<style type='text/css'>
.progress-spinner
{
display:inline;
width:16px;
vertical-align:top;
padding-top: 2px;
padding-right:5px;
}
</style>
</head>
<body>
<section id='public-timeline'>
<h1>Public</h1>
<!-- Notice to display if there are no messages yet. -->
<div data-set-if='not:messages' id='notice'>
<p><img class='progress-spinner' src='/images/progress-spinner@2x.gif'> Announcing you…</p>
</div>
<div id='messages' class='messages' data-set-if='messages'>
<!-- Repeater -->
<div class='message' data-set-repeat='message messages' data-set-attribute='id message.key' >
<div id='messageRepeater' class='message' data-set-repeat='message messages' data-set-attribute='id message.key' >
<div class='messageBody' data-set-attribute='id message.key messageBodyIDFormatter'>
<div class='image-and-body'>
<img class='profileImage' src='http://localhost:42000/about/me.jpg'>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment