Merge pull request #73 from medialab-prado/legislation-text-index-style

Legislation text index styles

app/assets/javascripts/application.js

@@ -56,6 +56,7 @@
 //= require legislation_allegations
 //= require legislation_annotatable
 //= require watch_form_changes
+//= require tree_navigator
 //= require custom
 
 var initialize_modules = function() {
@@ -87,6 +88,7 @@ var initialize_modules = function() {
   if ( $(".legislation-annotatable").length )
     App.LegislationAnnotatable.initialize();
   App.WatchFormChanges.initialize();
+  App.TreeNavigator.initialize();
 };
 
 $(function(){

app/assets/javascripts/legislation_annotatable.js.coffee

@@ -100,7 +100,8 @@ App.LegislationAnnotatable =
 
   scrollToAnchor: ->
     annotationsLoaded: (annotations) ->
-      if anchor = $(location).attr('hash')
+      anchor = $(location).attr('hash')
+      if anchor && anchor.startsWith('#annotation')
         ann_id = anchor.split("-")[-1..]
         el = $("span[data-annotation-id='" + ann_id + "']")
         App.LegislationAllegations.show_comments()

app/assets/javascripts/tree_navigator.js.coffee

@@ -0,0 +1,38 @@
+App.TreeNavigator =
+  closeNodes: (nodes) ->
+    children = nodes.children('ul')
+
+    if(children.length == 0)
+      return
+
+    children.each ->
+      link = $(this).prev('a')
+      $('<span class="closed"></span>').insertBefore(link)
+      $(this).hide()
+      App.TreeNavigator.closeNodes($(this).children())
+
+  initialize: ->
+    elem = $('[data-tree-navigator]')
+    if(elem.length == 0)
+      return
+
+    ul = elem.find('ul:eq(0)')
+    if(ul.length && ul.children().length)
+      App.TreeNavigator.closeNodes(ul.children())
+
+    $('[data-tree-navigator] span').on
+      click: (e) ->
+        elem = $(this)
+        if(elem.hasClass('open'))
+          elem.removeClass('open').addClass('closed')
+          elem.siblings('ul').hide()
+        else if(elem.hasClass('closed'))
+          elem.removeClass('closed').addClass('open')
+          elem.siblings('ul').show()
+
+    if anchor = $(location).attr('hash')
+      if link = elem.find('a[href="'+anchor+'"]')
+        link.parents('ul').each ->
+          $(this).show()
+          $(this).siblings('span').removeClass('closed').addClass('open')
+

app/assets/javascripts/watch_form_changes.js.coffee

@@ -7,7 +7,6 @@ App.WatchFormChanges =
       return $('[data-watch-form-message]').data('watch-form-message')
 
   checkChanges: (event) ->
-    console.log(event)
     changes = false
     App.WatchFormChanges.forms().each ->
       form = $(this)

app/assets/stylesheets/legislation_process.scss

@@ -642,53 +642,36 @@ $epigraph-line-height: rem-calc(22);
     }
 
     .draft-index {
-      table {
-        tbody {
-          border: none;
-
-          tr {
-            background: white;
-
-            td {
-              padding: 0.25rem 1rem;
-
-              .icon-plus-square,
-              .icon-minus-square {
-                color: $text-medium;
-                cursor: pointer;
-                vertical-align: sub;
-              }
-
-              a {
-                color: $brand;
-                text-decoration: underline;
-                font-size: $small-font-size;
-              }
-            }
-
-            .collapse-all {
-              padding: 1rem;
-
-              a {
-                color: $text-medium;
-              }
-
-              .icon-plus-square,
-              .icon-minus-square {
-                color: $text-medium;
-              }
-            }
-          }
-
-          .child_group {
-            td {
-              padding: 0 1rem;
-
-              table {
-                margin-bottom: 0.5rem;
-              }
-            }
-          }
+      ul:first-child {
+        font-size: 1rem;
+        text-decoration: underline;
+        margin-left: 2.25rem;
+        margin-top: 1.5rem;
+      }
+      
+      ul {
+        list-style: none;
+        
+        li {
+          margin-bottom: 1rem;
+        }
+        .open::before {
+          cursor: pointer;
+          position: absolute;
+          margin-left: -1.25rem;
+          font-family: "icons";
+          content: "\58";
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+        .closed::before {
+          cursor: pointer;
+          position: absolute;
+          margin-left: -1.25rem;
+          font-family: "icons";
+          content: "\5a";
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
         }
       }
     }

app/views/legislation/draft_versions/show.html.erb

@@ -40,9 +40,9 @@
         <div class="draft-index-rotated center">
           <span class="panel-title"><%= t('.text_toc') %></span>
         </div>
-        
+
         <div data-sticky-container>
-          <div data-sticky data-anchor="sticky-panel" class="draft-index sticky">
+          <div data-sticky data-anchor="sticky-panel" class="draft-index sticky" data-tree-navigator>
             <%= @draft_version.toc_html.html_safe %>
           </div>
         </div>