hide new entries behind a fold, click button to expand

woodwind/static/feed.js

@@ -68,6 +68,20 @@ $(function(){
     }
 
 
+    function clickUnfoldLink(evt) {
+        $('#fold').after($('#fold').children())
+        $('#unfold-link').hide();
+    }
+
+
+    function foldNewEntries(entries) {
+        $('#fold').prepend(entries.join('\n'));
+        attachListeners();
+        $('#unfold-link').text($('#fold').children().length + " New Posts");
+        $('#unfold-link').off('click').click(clickUnfoldLink);
+        $('#unfold-link').show();
+    }
+
     // topic will be user:id or feed:id
     function webSocketSubscribe(topic) {
         if ('WebSocket' in window) {
@@ -82,9 +96,9 @@ $(function(){
                 ws.send(topic);
             };
             ws.onmessage = function(event) {
+                console.log(event);
                 var data = JSON.parse(event.data);
-                $('body main').prepend(data.entries.join('\n'));
-                attachListeners();
+                foldNewEntries(data.entries);
             };
         }
     }

woodwind/static/style.css

@@ -397,6 +397,12 @@ ul#navigation {
     border-radius: 4px;
     display: inline-block; }
 
+#fold {
+  display: none; }
+
+#unfold-link {
+  display: none; }
+
 article {
   margin-bottom: 2em;
   box-shadow: 0 0 2px #687d77;

woodwind/static/style.scss

@@ -67,6 +67,14 @@ ul#navigation {
     }
 }
 
+#fold {
+    display: none;
+}
+
+#unfold-link {
+    display: none;
+}
+
 article {
     margin-bottom: 2em;
     box-shadow: $box-shadow;

woodwind/templates/base.jinja2

@@ -8,7 +8,7 @@
   <link rel="shortcut icon" href="{{ url_for('static', filename='logo.png') }}"/>
   <link rel="apple-touch-icon" href="{{ url_for('static', filename='logo.png') }}"/>
 
-  <link rel="stylesheet" href="{{ url_for('static', filename='style.css', version='2015-04-19') }}"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css', version='2015-05-12') }}"/>
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
   <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

woodwind/templates/feed.jinja2

@@ -4,7 +4,7 @@
   {% if ws_topic %}
     <script>var WS_TOPIC = "{{ ws_topic }}";</script>
   {% endif %}
-  <script src="{{url_for('static', filename='feed.js', version='2015-03-20')}}"></script>
+  <script src="{{url_for('static', filename='feed.js', version='2015-05-12')}}"></script>
 
   {% if current_user and current_user.settings
         and current_user.settings.get('reply-method') == 'indie-config' %}
@@ -32,6 +32,13 @@
 
 {% block body %}
 
+  <div class="pager">
+    <a id="unfold-link" href="#">n New Entries</a>
+  </div>
+
+  <div id="fold">
+  </div>
+
   {% for entry in entries %}
     {% include '_entry.jinja2' with context %}
   {% endfor %}