Add subdirectory navigation:

- To configure, specify `dir_floor` and `dir_ceil` in the config. - Add a callback to the recursive walk procedure. - Add `data-path` attributes to the menu item elements. - Add the dir menu next to the source menu. Scrolling coming soon. - Styled similarly, so I factored out a new `.menu-item` placeholder class. - Minor refactoring on the docco.jst and docco.coffee files.
hlfcoding · Jan 27, 2012 · 048ab6d · 048ab6d
1 parent c027fa8
commit 048ab6d
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 33 deletions.
diff --git a/lib/docco-client.js b/lib/docco-client.js
diff --git a/lib/docco.js b/lib/docco.js
diff --git a/resources/docco.css b/resources/docco.css
@@ -14,6 +14,12 @@
 .close-button, #jump_to #jump_wrapper #jump_search_wrapper #clear_search { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-background-clip: border; -webkit-background-clip: border-box; background-clip: border-box; display: block; height: 12px; width: 12px; vertical-align: baseline; line-height: 12px; white-space: nowrap; text-align: center; text-transform: lowercase; text-decoration: none; font-size: 10px; font-weight: bold; color: #f4f4f4; background-color: #c5c5c5; }
 .close-button:hover, #jump_to #jump_wrapper #jump_search_wrapper #clear_search:hover { color: white; background: #a5a5a5; }
 
+.menu-item, #jump_to #jump_wrapper #jump_scroller #jump_page .source, #jump_to #jump_wrapper #jump_dirs .dir { -moz-transition-property: background; -moz-transition-duration: 0.2s; -moz-transition-timing-function: ease-in-out; -o-transition-property: background; -o-transition-duration: 0.2s; -o-transition-timing-function: ease-in-out; -webkit-transition-property: background; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -ms-transition-property: background; -ms-transition-duration: 0.2s; -ms-transition-timing-function: ease-in-out; transition-property: background; transition-duration: 0.2s; transition-timing-function: ease-in-out; display: block; padding: 5px 10px; text-decoration: none; }
+.menu-item, #jump_to #jump_wrapper #jump_scroller #jump_page .source, #jump_to #jump_wrapper #jump_dirs .dir { border-top: 1px solid white; border-bottom: 1px solid #e4e4e4; }
+.menu-item:first-child, #jump_to #jump_wrapper #jump_scroller #jump_page .source:first-child, #jump_to #jump_wrapper #jump_dirs .dir:first-child, .menu-item.first, #jump_to #jump_wrapper #jump_scroller #jump_page .first.source, #jump_to #jump_wrapper #jump_dirs .first.dir { border-top: 0; }
+.menu-item:last-child, #jump_to #jump_wrapper #jump_scroller #jump_page .source:last-child, #jump_to #jump_wrapper #jump_dirs .dir:last-child, .menu-item.last, #jump_to #jump_wrapper #jump_scroller #jump_page .last.source, #jump_to #jump_wrapper #jump_dirs .last.dir { border-bottom: 0; }
+.menu-item.selected, #jump_to #jump_wrapper #jump_scroller #jump_page .selected.source, #jump_to #jump_wrapper #jump_dirs .selected.dir, .menu-item:hover, #jump_to #jump_wrapper #jump_scroller #jump_page .source:hover, #jump_to #jump_wrapper #jump_dirs .dir:hover { background: white; }
+
 /*--------------------- Layout and Typography ----------------------------*/
 body { overflow: hidden; }
 
@@ -68,24 +74,24 @@ td.code, th.code { padding: 14px 15px 16px 25px; width: 100%; vertical-align: to
 #jump_to, #jump_wrapper { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-background-clip: border; -webkit-background-clip: border-box; background-clip: border-box; -moz-box-shadow: inset 0 0 0 1px white ; -webkit-box-shadow: inset 0 0 0 1px white ; box-shadow: inset 0 0 0 1px white ; background: #f4f4f4; border: 1px solid #d4d4d4; border-top: 0; border-right: 0; cursor: pointer; text-align: right; position: fixed; right: 0; top: 0; }
 
 #jump_to { padding: 5px 10px; text-transform: uppercase; }
-#jump_to #jump_wrapper { text-transform: none; padding: 0 5px 0 0; display: none; height: 97%; }
-#jump_to #jump_wrapper #jump_scroller { overflow: hidden; overflow-y: auto; height: 100%; margin-bottom: 10px; }
+#jump_to #jump_wrapper { zoom: 1; text-transform: none; padding: 0 5px 0 0; display: none; height: 97%; }
+#jump_to #jump_wrapper::before, #jump_to #jump_wrapper::after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+#jump_to #jump_wrapper::after { clear: both; }
+#jump_to #jump_wrapper #jump_scroller { overflow: hidden; overflow-y: auto; height: 100%; margin-bottom: 10px; float: left; }
 #jump_to #jump_wrapper #jump_scroller::-webkit-scrollbar { width: 5px; height: 5px; }
 #jump_to #jump_wrapper #jump_scroller::-webkit-scrollbar-track-piece { margin: 5px; }
 #jump_to #jump_wrapper #jump_scroller::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
 #jump_to #jump_wrapper #jump_scroller::-webkit-scrollbar-thumb { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: border; -webkit-background-clip: border-box; background-clip: border-box; background: rgba(0, 0, 0, 0.2); }
 #jump_to #jump_wrapper #jump_scroller::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); }
 #jump_to #jump_wrapper #jump_scroller::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.1); }
 #jump_to #jump_wrapper #jump_scroller #jump_page { min-width: 72px; padding: 5px 0; margin-right: 5px; }
-#jump_to #jump_wrapper #jump_scroller #jump_page .source { -moz-transition-property: background; -moz-transition-duration: 0.2s; -moz-transition-timing-function: ease-in-out; -o-transition-property: background; -o-transition-duration: 0.2s; -o-transition-timing-function: ease-in-out; -webkit-transition-property: background; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -ms-transition-property: background; -ms-transition-duration: 0.2s; -ms-transition-timing-function: ease-in-out; transition-property: background; transition-duration: 0.2s; transition-timing-function: ease-in-out; display: block; padding: 5px 10px; text-decoration: none; }
-#jump_to #jump_wrapper #jump_scroller #jump_page .source { border-top: 1px solid white; border-bottom: 1px solid #e4e4e4; }
-#jump_to #jump_wrapper #jump_scroller #jump_page .source:first-child, #jump_to #jump_wrapper #jump_scroller #jump_page .source.first { border-top: 0; }
-#jump_to #jump_wrapper #jump_scroller #jump_page .source:last-child, #jump_to #jump_wrapper #jump_scroller #jump_page .source.last { border-bottom: 0; }
-#jump_to #jump_wrapper #jump_scroller #jump_page .source.selected, #jump_to #jump_wrapper #jump_scroller #jump_page .source:hover { background: white; }
 #jump_to #jump_wrapper #jump_search_wrapper { position: relative; margin: 3px 5px 0 5px; }
 #jump_to #jump_wrapper #jump_search_wrapper #clear_search { position: absolute; top: 7px; right: 5px; }
 #jump_to #jump_wrapper #jump_search_wrapper #jump_search { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: border; -webkit-background-clip: border-box; background-clip: border-box; -moz-box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.3) ; -webkit-box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.3) ; box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.3) ; outline: 0; padding: 3px 3%; border: 1px solid white; color: #858579; width: 94%; }
 #jump_to #jump_wrapper #jump_search_wrapper #jump_search:focus { border-color: #999999; color: #252519; }
+#jump_to #jump_wrapper #jump_dirs { float: left; margin-top: 5px; }
+#jump_to #jump_wrapper #jump_dirs .dir { border-right: 1px solid white; }
+#jump_to #jump_wrapper #jump_dirs + #jump_scroller .source { border-left: 1px solid #e4e4e4; }
 #jump_to:hover #jump_wrapper { display: block; }
 
 /*---------------------- Syntax Highlighting -----------------------------*/

diff --git a/resources/docco.jst b/resources/docco.jst
@@ -9,21 +9,29 @@
 <body>
   <div id="container">
     <div id="background"></div>
-  <% if (sources.length > 1) { %>
+  <% if (sources.length > 1) { var i, l, dest, dest_; %>
     <div id="jump_to">
       Jump To &hellip;
       <div id="jump_wrapper">
         <form id="jump_search_wrapper" name="jump_search_form">
           <input id="jump_search" name="jump_search" type="text" placeholder="Search..." tabindex="1">
           <a id="clear_search" href="#" title="Clear">x</a>
         </form>
+        <div id="jump_dirs">
+          <% for (i=0, l=dirs.length; i<l; i++) { %>
+            <a class="dir" href="#"
+               title="<%= dirs[i] %>" data-path="<%= dirs[i] %>">
+               <%= dirs[i].split('/').slice(-2).join(' / ') %>
+            </a>
+          <% } %>
+        </div>
         <div id="jump_scroller">
           <div id="jump_page">
-            <% var i, dest, dest_; for (i=0, l=sources.length; i<l; i++) { %>
+            <% for (i=0, l=sources.length; i<l; i++) { %>
               <% dest = path.basename(destination(sources[i])); %>
               <% dest_ = path.basename(destination(sources[i]), true); %>
               <a class="source" href="<%= dest %>"
-                 title="<%= sources[i] %>">
+                 title="<%= sources[i] %>" data-path="<%= sources[i] %>">
                 <%= dest_.split('.').slice(-3).slice(0, -2).join('.') %>
               </a>
             <% } %>

diff --git a/resources/docco.scss b/resources/docco.scss
@@ -62,6 +62,18 @@ $prose-width: 525px;
   }
 }
 
+.menu-item {
+  @include transition(background, 0.2s);
+  @include ruled($ui-bg-color + $hx, $ui-bg-color - $hx);
+  display: block;
+  padding: $ui-gutter-size ($ui-gutter-size * 2);
+  text-decoration: none;
+  &.selected,
+  &:hover {
+    background: $ui-bg-color + $hx;
+  }
+}
+
 /*--------------------- Layout and Typography ----------------------------*/
 body {
   @extend .prose-text;
@@ -201,6 +213,7 @@ pre, tt, code {
   padding: $ui-gutter-size ($ui-gutter-size * 2);
   text-transform: uppercase;
   #jump_wrapper {
+    @include clearfix;
     text-transform: none;
     padding: 0 $ui-gutter-size 0 0;
     display: none;
@@ -209,20 +222,13 @@ pre, tt, code {
       @include scrollbar(v, $ui-gutter-size, $ui-gutter-size, $ui-bg-color);
       height: 100%;
       margin-bottom: $ui-gutter-size * 2;
+      float: left;
       #jump_page {
         min-width: 72px; // size of #jump_to
         padding: $ui-gutter-size 0;
         margin-right: $ui-gutter-size;
         .source {
-          @include transition(background, 0.2s);
-          @include ruled($ui-bg-color + $hx, $ui-bg-color - $hx);
-          display: block;
-          padding: $ui-gutter-size ($ui-gutter-size * 2);
-          text-decoration: none;
-          &.selected,
-          &:hover {
-            background: $ui-bg-color + $hx;
-          }
+          @extend .menu-item;
         }
       }
     }
@@ -252,6 +258,17 @@ pre, tt, code {
         width: 94%;
       }
     }
+    #jump_dirs {
+      float: left;
+      margin-top: $ui-gutter-size;
+      .dir {
+        @extend .menu-item;
+        border-right: 1px solid $ui-bg-color + $hx;
+      }
+      &+#jump_scroller .source {
+        border-left: 1px solid $ui-bg-color - $hx;
+      }
+    }
   }
   &:hover #jump_wrapper {
     display: block;

diff --git a/src/docco-client.coffee b/src/docco-client.coffee
@@ -68,7 +68,7 @@ search = (query) ->
   results = 0
   if query?
     # Get search results.
-    @$searchItems = @$items.filter(":contains('#{query}'), [title*='#{query}']")
+    @$searchItems = @$items.filter(":contains('#{query}'), [data-path*='#{query}']")
       .clone()
     results = @$searchItems.length
     # Manipulate.
@@ -148,6 +148,9 @@ setup = () ->
   #
   # Menu bindings
   $menu.on 'click', (e) -> e.stopPropagation()
+  $menu.$navItems.on 'click', (e) ->
+    e.preventDefault()
+    $menu.search $(@).data('path')
   #
   # Search bindings
   $menu.$searchWrapper.on 'submit', (e) ->
@@ -174,6 +177,7 @@ $(() ->
   # Properties
   $menu.$itemWrapper = -> $menu.find '#jump_page'
   $menu.$items = $menu.find 'a.source'
+  $menu.$navItems = $menu.find '#jump_dirs a.dir'
   $menu.$searchWrapper = $menu.find '#jump_search_wrapper'
   $menu.$searchField = $menu.find '#jump_search'
   $menu.$clearSearch = $menu.$searchWrapper.find '#clear_search'

diff --git a/src/docco.coffee b/src/docco.coffee
@@ -141,7 +141,7 @@ generate_html = (source, sections) ->
     sources: sources 
     path: path 
     destination: destination
-
+    dirs: sub_dirs
   console.log "docco: #{source} -> #{dest}"
   fs.writeFile dest, html
 
@@ -264,12 +264,14 @@ conf.file_types ?= ['js']
 conf.exclude_dirs ?= ''
 conf.exclude_files ?= ''
 conf.index_file ?= ''
+conf.dir_floor ?= 1
+conf.dir_ceil ?= 4
 
 # Loop through arguments; make the tough decisions.
 sources = []
 args = process.ARGV.slice()
 while args.length
-  switch arg = args.shift()
+  switch (arg = args.shift())
     # If you want to see the Docco version using `--version`, your ride ends here
     when '--version'
       console.log "Docco v#{version}"
@@ -303,24 +305,26 @@ run_script = ->
 # Directory tree walking helper.
 # Not the same as `get_directory_files`.
 skipped = 0
-walk = (full_path) ->
+walk = (full_path, callback, _level=0) ->
+  _level++
   children = fs.readdirSync full_path
   console.log "docco: generating for #{full_path}..."
   # Make the path relative.
   file_path = full_path.replace base_path
+  callback file_path, _level
   for c in children
     p = "#{file_path}/#{c}"
     fp = "#{full_path}/#{c}"
     stat = fs.statSync fp
     if stat.isFile() and type_pattern.test(p) and not file_pattern.test(p) then sources.push p 
-    else if stat.isDirectory() and not dir_pattern.test(p) then walk.call this, fp
+    else if stat.isDirectory() and not dir_pattern.test(p) then walk.call this, fp, callback, _level
     else console.log "docco: skipped (#{skipped++}) #{p}"
-
   skipped
 
 # Run the walker script as needed.
 if conf.recursive
   sources = []
+  sub_dirs = []
   base_path = "#{process.cwd()}/#{conf.base_dir}"
   base_pattern = new RegExp "^#{conf.base_dir}/"
   console.log "docco: generating recursively, reseting and getting files..."
@@ -332,7 +336,8 @@ if conf.recursive
 #{(if conf.exclude_dirs.length then '|' else '')}
 #{conf.exclude_dirs.join('|')}$", 'i'
   console.log "patterns: #{type_pattern}, #{file_pattern}, #{dir_pattern}"
-  walk conf.base_dir
+  walk conf.base_dir, (path, level) -> 
+    sub_dirs.push path if conf.dir_floor < level < conf.dir_ceil
 
 # Run the generator script.
 run_script()