From d965ff9f8e00bc6bb126ecfe2b7dae1b0ab98365 Mon Sep 17 00:00:00 2001
From: Kyle Mahan <kyle.mahan@gmail.com>
Date: Tue, 12 May 2015 08:14:58 -0700
Subject: [PATCH] hide new entries behind a fold, click button to expand

---
 woodwind/static/feed.js        | 18 ++++++++++++++++--
 woodwind/static/style.css      |  6 ++++++
 woodwind/static/style.scss     |  8 ++++++++
 woodwind/templates/base.jinja2 |  2 +-
 woodwind/templates/feed.jinja2 |  9 ++++++++-
 5 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/woodwind/static/feed.js b/woodwind/static/feed.js
index 3ad422c..a7b3563 100644
--- a/woodwind/static/feed.js
+++ b/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);
             };
         }
     }
diff --git a/woodwind/static/style.css b/woodwind/static/style.css
index 883cba3..0ec9a6a 100644
--- a/woodwind/static/style.css
+++ b/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;
diff --git a/woodwind/static/style.scss b/woodwind/static/style.scss
index 7ca73da..fa3a578 100644
--- a/woodwind/static/style.scss
+++ b/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;
diff --git a/woodwind/templates/base.jinja2 b/woodwind/templates/base.jinja2
index 8e72ef7..ea694db 100644
--- a/woodwind/templates/base.jinja2
+++ b/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">
diff --git a/woodwind/templates/feed.jinja2 b/woodwind/templates/feed.jinja2
index 23eaca6..7c312ce 100644
--- a/woodwind/templates/feed.jinja2
+++ b/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 %}