From b017caab28ac87950ec70d82b9bb6e9f8b599a9f Mon Sep 17 00:00:00 2001
From: Etienne Millon <me@emillon.org>
Date: Fri, 31 Oct 2014 11:32:10 +0100
Subject: [PATCH] toggle visibility depending on state

---
 static/coffee/view.coffee | 13 +++++++++++--
 templates/view.html       | 11 +++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/static/coffee/view.coffee b/static/coffee/view.coffee
index 4ea91cc..a63fb13 100644
--- a/static/coffee/view.coffee
+++ b/static/coffee/view.coffee
@@ -43,5 +43,14 @@ view_init = (docid) ->
     $('#subnav').show()
     $('#exitfullscreen').hide()
 
-  $('#toggle_annotations_button').click (e) ->
-    $('.annotation').toggle()
+  $('.view-states-btn').click ->
+    switch $(this).data 'view'
+      when 'everything'
+        $('.annotation-open').show()
+        $('.annotation-closed').show()
+      when 'only-open'
+        $('.annotation-open').show()
+        $('.annotation-closed').hide()
+      when 'nothing'
+        $('.annotation-open').hide()
+        $('.annotation-closed').hide()
diff --git a/templates/view.html b/templates/view.html
index fad027d..2d08e06 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -21,15 +21,18 @@
             <span class="glyphicon glyphicon-fullscreen"></span>
             Full screen
         </a>
-        <a id="toggle_annotations_button" href="#" class="list-group-item">
-            <span class="glyphicon glyphicon-eye-open"></span>
-            Toggle annotations
-        </a>
         <a href="{{url_for('.view_list', id=doc.id)}}" class="list-group-item">
             <span class="glyphicon glyphicon-list"></span>
             List mode
         </a>
     </div>
+    <h3><span class="glyphicon glyphicon-eye-open"></span> View</h3>
+
+    <div class="btn-group">
+        <button class="view-states-btn btn btn-default" data-view="nothing">Nothing</button>
+        <button class="view-states-btn btn btn-default" data-view="only-open">Only open</button>
+        <button class="view-states-btn btn btn-default" data-view="everything">Everything</button>
+    </div>
 
     <h3><span class="glyphicon glyphicon-pencil"></span> History</h3>