reading view panel stubbed in place

client/client.js

@@ -21,4 +21,26 @@ if (Meteor.isClient) {
     return current && current.route && current.route.name === 'readingview';
   }
 
+  function set_panel(name) {
+    if (Session.equals('reading-view-panel', name) &&
+        Session.get('reading-view-panel-visible')) {
+      Session.set('reading-view-panel-visible', false);
+    } else {
+      Session.set('reading-view-panel', name);
+      Session.set('reading-view-panel-visible', true);
+    }
+  }
+
+  Template.readingmenu.events({
+    'click #show-table-of-contents': function() {
+      set_panel('table_of_contents_panel');
+    },
+    'click #show-annotations': function() {
+      set_panel('annotation_list_panel');
+    },
+    'click #show-type-menu': function() {
+      set_panel('type_panel');
+    }
+  });
+
 }

client/controllers/readingview.js

@@ -1,8 +1,30 @@
 if (Meteor.isClient) {
 
+  Meteor.startup(function() {
+    Session.setDefault('reading-view-panel', null);
+    Session.setDefault('reading-view-panel-visible', false);
+  });
+
   Template.readingview.get_section = function() {
     var id = new Meteor.Collection.ObjectID(Router.current().params._id);
     return SectionContents.findOne(id);
   }
 
+  Template.readingview.get_panel_visible = function() {
+    if (Session.get('reading-view-panel-visible')) {
+      return 'show-panel';
+    } else {
+      return 'hide-panel';
+    }
+  }
+
+  Template.readingview.get_panel_contents = function() {
+    var panel = Session.get('reading-view-panel');
+    if (panel === null) {
+      return null;
+    }
+
+    return Template[panel];
+  }
+
 }

client/home.html

@@ -50,9 +50,9 @@ <h1 class="title">Annotorious</h1>
 
 <template name="readingmenu">
   {{#if show_reading_menu }}
-    <li><a href="#">Chapter</a></li>
-    <li><a href="#">Annotations</a></li>
-    <li><a href="#">Type</a></li>
+    <li><a href="#" id="show-table-of-contents">Chapter</a></li>
+    <li><a href="#" id="show-annotations">Annotations</a></li>
+    <li><a href="#" id="show-type-menu">Type</a></li>
   {{/if}}
 </template>
 

client/stylesheets/sass/_readingview.scss

@@ -1,5 +1,45 @@
 @import 'palette';
 
-.content {
-  margin: 1em 25%;
+.show-panel {
+  #side-panel-wrap {
+    width: 25%;
+  }
+
+  #content-wrap {
+    width: 75%;
+  }
+}
+
+.hide-panel {
+  #side-panel-wrap {
+    width: 0%;
+  }
+
+  #content-wrap {
+    width: 100%;
+  }
+}
+
+#panel-selector {
+  font-size: 0em;
+
+  #side-panel-wrap {
+    vertical-align: top;
+    overflow: hidden;
+
+    #side-panel-content {
+      min-width: 25%;
+    }
+  }
+
+  #side-panel-wrap, #content-wrap {
+    font-size: 1rem;
+    display: inline-block;
+    transition: width 1s ease;
+  }
+}
+
+#content {
+  width: 75%;
+  margin: 1em auto;
 }

client/templates/readingview.html

@@ -1,9 +1,33 @@
 <!-- READING VIEW -->
 
 <template name="readingview">
-  <div class="content">
-  {{#with get_section }}
-    {{{ html }}}
-  {{/with}}
+  <div id="panel-selector" class="{{get_panel_visible}}">
+    <div id="side-panel-wrap">
+      <div id="side-panel-content">
+        {{> get_panel_contents}}
+      </div>
+    </div>
+    <div id="content-wrap">
+      <div id="content">
+        {{#with get_section }}
+          {{{ html }}}
+        {{/with}}
+      </div>
+    </div>
   </div>
 </template>
+
+<template name="table_of_contents_panel">
+ToC placeholder<br />
+ToC placeholder<br />
+</template>
+
+<template name="annotation_list_panel">
+annotations placeholder<br />
+annotations placeholder<br />
+</template>
+
+<template name="type_panel">
+type placeholder<br />
+type placeholder<br />
+</template>