#783 allow the content of the toc directive to go into a separate div…

… so we can more easily style the content separately from the TOC; also added some basic CSS so things kinda look nice (and fix a little NPE gremlin on the top link)
hawtio · Nov 28, 2013 · 8c84862 · 8c84862
1 parent 47801a6
commit 8c84862
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 10 deletions.
diff --git a/hawtio-web/src/main/webapp/app/ui/css/toc.css b/hawtio-web/src/main/webapp/app/ui/css/toc.css
@@ -0,0 +1,70 @@
+/*
+ * jquery.tocify.css 1.8.0
+ * Author: @gregfranko
+ */
+/* The Table of Contents container element */
+.tocify {
+    width: 20%;
+    padding-left: 1em;
+    padding-right: 1em;
+    overflow: auto;
+    position: fixed;
+    border: 1px solid #ccc;
+    webkit-border-radius: 6px;
+    moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
+/*
+.tocify ul, .tocify li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    line-height: 30px;
+}
+*/
+
+/* Top level header elements */
+/*
+.tocify-header {
+    text-indent: 10px;
+}
+
+*/
+/* Top level subheader elements.  These are the first nested items underneath a header element. */
+/*
+.tocify-subheader {
+    text-indent: 20px;
+    display: none;
+}
+
+*/
+/* Makes the font smaller for all subheader elements. */
+.tocify-subheader li {
+    font-size: 12px;
+}
+
+/* Further indents second level subheader elements. */
+.tocify-subheader .tocify-subheader {
+    text-indent: 30px;
+}
+
+/* Further indents third level subheader elements. You can continue this pattern if you have more nested elements. */
+.tocify-subheader .tocify-subheader .tocify-subheader {
+    text-indent: 40px;
+}
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a, .nav-list .nav-header {
+/*
+    margin: 0px;
+}
+*/
+
+/* Twitter Bootstrap Override Style */
+/*
+.nav-list > li > a {
+    padding: 5px;
+}*/
diff --git a/hawtio-web/src/main/webapp/app/ui/js/toc.ts b/hawtio-web/src/main/webapp/app/ui/js/toc.ts
@@ -75,11 +75,14 @@ module UI {
         }
         var previousHtml = null;
         var html = $element;
+        var contentDiv = $("#toc-content");
+        if (!contentDiv || !contentDiv.length) {
+          contentDiv = $element;
+        }
+
         var linkFilter = $attrs["linkFilter"] || "[hawtio-toc]";
-        log.info("Using link filter: " + linkFilter);
         var htmlName = $attrs["html"];
         if (htmlName) {
-          log.info("Found html attribute " + htmlName);
           var ownerScope = $scope.$parent || $scope;
           ownerScope.$watch(htmlName, () => {
             var htmlText = ownerScope[htmlName];
@@ -116,9 +119,9 @@ module UI {
         $scope.$watch('render', (newValue, oldValue) => {
           if (newValue !== oldValue) {
             if (newValue) {
-              if (!html.next('.hawtio-toc').length) {
+              if (!contentDiv.next('.hawtio-toc').length) {
                 var div = $('<div class="hawtio-toc"></div>');
-                div.appendTo(html);
+                div.appendTo(contentDiv);
 
                 $scope.chapters.forEach((chapter, index) => {
                   log.debug("index:", index);
@@ -137,7 +140,7 @@ module UI {
                   panel.hide().appendTo(div).fadeIn(1000);
                 });
 
-                var pageTop = html.offset().top - offsetTop;
+                var pageTop = contentDiv.offset().top - offsetTop;
 
                 div.find('a.toc-back').each((index, a) => {
                   $(a).click((e) => {
@@ -147,12 +150,17 @@ module UI {
                     }, 2000);
                   })
                 });
+                // TODO should this be html or contentDiv?
                 html.find('a').filter(linkFilter).each((index, a) => {
                   var filename = $scope.getFilename(a.href, a.getAttribute('file-extension'));
                   $(a).click((e) => {
                     e.preventDefault();
                     var target = '#' + $scope.getTarget(filename);
-                    var top = $(target).offset().top - offsetTop;
+                    var top = 0;
+                    var offset = $(target).offset();
+                    if (offset) {
+                      top = offset.top - offsetTop;
+                    }
                     $('body').animate({
                       scrollTop: top
                     }, 2000);

diff --git a/hawtio-web/src/main/webapp/app/wiki/html/viewBook.html b/hawtio-web/src/main/webapp/app/wiki/html/viewBook.html
@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="app/ui/css/toc.css" type="text/css"/>
+
 <div ng-controller="Wiki.ViewController">
 
   <script type="text/ng-template" id="fileCellTemplate.html">
@@ -34,12 +36,17 @@
 
   <div class="wiki-fixed form-horizontal">
     <div class="row-fluid">
-      <div wiki-href-adjuster>
-        <!-- TODO we maybe want a more flexible way to find the links to include than the current link-filter -->
-        <div hawtio-toc-display get-contents="getContents(filename, cb)"
-             html="html" link-filter="[file-extension]">
+      <div class="span3">
+        <div class="tocify" wiki-href-adjuster>
+          <!-- TODO we maybe want a more flexible way to find the links to include than the current link-filter -->
+          <div hawtio-toc-display get-contents="getContents(filename, cb)"
+               html="html" link-filter="[file-extension]">
+          </div>
         </div>
       </div>
+      <div class="span9">
+        <div id="toc-content"></div>
+      </div>
     </div>
   </div>
 </div>