Add a table of contents directive to assemble a big page out of a bun…

…ch of documents
hawtio · Nov 21, 2013 · 5489447 · 5489447
1 parent fc31ad4
commit 5489447
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 9 deletions.
diff --git a/hawtio-web/src/main/webapp/app/ui/html/toc.html b/hawtio-web/src/main/webapp/app/ui/html/toc.html
@@ -0,0 +1,6 @@
+<div>
+  <div ng-repeat="item in myToc">
+    <div id="{{item['href']}}Target" ng-bind-html-unsafe="item.text">
+    </div>
+  </div>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/ui/js/toc.ts b/hawtio-web/src/main/webapp/app/ui/js/toc.ts
@@ -0,0 +1,140 @@
+module UI {
+
+  export function HawtioTocDisplay(marked, $location, $anchorScroll) {
+    return {
+      restrict: 'A',
+      scope: {
+        getContents: '&'
+      },
+      controller: ($scope, $element, $attrs) => {
+        $scope.remaining = -1;
+        $scope.render = false;
+        $scope.chapters = [];
+
+        $scope.addChapter = (item) => {
+          console.log("Adding: ", item);
+          $scope.chapters.push(item);
+          if (!angular.isDefined(item['text'])) {
+            $scope.fetchItemContent(item);
+          }
+        };
+
+        $scope.getTarget = (id) => {
+          if (!id) {
+            return '';
+          }
+          return id.replace(".", "_");
+        };
+
+        $scope.getFilename = (href, ext) => {
+          var filename = href.split('/').last();
+          if (ext && !filename.endsWith(ext)) {
+            filename = filename + '.' + ext;
+          }
+          return filename;
+        };
+
+        $scope.$watch('remaining', (newValue, oldValue) => {
+          if (newValue !== oldValue) {
+            if (newValue === 0) {
+              $scope.render = true;
+            }
+          }
+        });
+
+        $scope.fetchItemContent = (item) => {
+          var me = $scope;
+          $scope.$eval((parent) => {
+            parent.getContents({
+              filename: item['filename'],
+              cb: (data) => {
+                if (data) {
+                  if (item['filename'].endsWith(".md")) {
+                    item['text'] = marked(data);
+                  } else {
+                    item['text'] = data;
+                  }
+                  $scope.remaining--;
+                  Core.$apply(me);
+                }
+              }
+            });
+          });
+        };
+      },
+      link: ($scope, $element, $attrs) => {
+        var offsetTop = 0;
+        var logbar = $('.logbar');
+        if (logbar.length) {
+          var offsetTop = logbar.height() + logbar.offset().top;
+        }
+
+        if (!$element.get(0).id) {
+          $element.get(0).id = 'toc';
+        }
+        $scope.tocId = '#' + $element.get(0).id;
+        $scope.remaining = $element.find('a').filter('[hawtio-toc]').length;
+        $element.find('a').filter('[hawtio-toc]').each((index, a) => {
+          log.debug("Found: ", a);
+          var filename = $scope.getFilename(a.href, a.getAttribute('file-extension'));
+          var item = {
+            filename: filename,
+            title: a.textContent
+          };
+          $scope.addChapter(item);
+        });
+
+        $scope.$watch('render', (newValue, oldValue) => {
+          if (newValue !== oldValue) {
+            if (newValue) {
+              if (!$element.next('.hawtio-toc').length) {
+                var div = $('<div class="hawtio-toc"></div>');
+                div.appendTo($element);
+
+                $scope.chapters.forEach((chapter, index) => {
+                  log.debug("index:", index);
+                  var panel = $('<div></div>');
+                  var panelHeader:any = null;
+
+                  if (index > 0) {
+                    panelHeader = $('<div id="' + $scope.getTarget(chapter['filename']) + '"class="panel-title"><a class="toc-back" href="">Back to Contents</a></div>');
+                  }
+                  var panelBody = $('<div class="panel-body">' + chapter['text'] + '</div>');
+                  if (panelHeader) {
+                    panel.append(panelHeader).append(panelBody);
+                  } else {
+                    panel.append(panelBody);
+                  }
+                  panel.hide().appendTo(div).fadeIn(1000);
+                });
+
+                var pageTop = $element.offset().top - offsetTop;
+
+                div.find('a.toc-back').each((index, a) => {
+                  $(a).click((e) => {
+                    e.preventDefault();
+                    $('body').animate({
+                      scrollTop: pageTop
+                    }, 2000);
+                  })
+                });
+                $element.find('a').filter('[hawtio-toc]').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;
+                    $('body').animate({
+                      scrollTop: top
+                    }, 2000);
+                    return true;
+                  });
+                })
+              }
+            }
+          }
+        });
+      }
+    }
+  }
+}
diff --git a/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts b/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
@@ -9,16 +9,15 @@ module UI {
         $routeProvider.
             when('/ui/test', {templateUrl: templatePath + 'test.html'})
       }).
-      directive('hawtioConfirmDialog', function() {
+      factory('UI', () => {
+        return UI;
+      }).directive('hawtioConfirmDialog', function() {
         return new UI.ConfirmDialog();
-      }).
-      directive('hawtioSlideout', function() {
+      }).directive('hawtioSlideout', function() {
         return new UI.SlideOut();
-      }).
-      directive('hawtioPager', function() {
+      }).directive('hawtioPager', function() {
         return new UI.TablePager();
-      }).
-      directive('hawtioEditor', function($parse) {
+      }).directive('hawtioEditor', function($parse) {
         return UI.Editor($parse);
       }).directive('hawtioColorPicker', function() {
         return new UI.ColorPicker()
@@ -38,8 +37,6 @@ module UI {
         return new UI.DivRow();
       }).directive('hawtioJsplumb', () => {
         return new UI.JSPlumb();
-      //}).directive('connectTo', () => {
-      //  return new UI.JSPlumbConnection();
       }).directive('zeroClipboard', ($parse) => {
         return UI.ZeroClipboardDirective($parse);
       }).directive('hawtioAutoDropdown', () => {
@@ -52,6 +49,8 @@ module UI {
         return new UI.AutoColumns();
       }).directive('hawtioTemplatePopover', ($templateCache, $compile, $document) => {
         return UI.TemplatePopover($templateCache, $compile, $document);
+      }).directive('hawtioTocDisplay', (marked, $location, $anchorScroll) => {
+        return UI.HawtioTocDisplay(marked, $location, $anchorScroll);
       }).run(function (helpRegistry) {
 
         helpRegistry.addDevDoc("ui1", 'app/ui/doc/developerPage1.md');

diff --git a/hawtio-web/src/main/webapp/app/wiki/js/view.ts b/hawtio-web/src/main/webapp/app/wiki/js/view.ts
@@ -585,6 +585,26 @@ module Wiki {
       }
     }
 
+    // Called by hawtio TOC directive...
+    $scope.getContents = (filename, cb) => {
+      var pageId = filename;
+      if ($scope.directory) {
+        pageId = $scope.pageId + '/' + filename;
+      } else {
+        var pathParts = $scope.pageId.split('/');
+        pathParts = pathParts.remove(pathParts.last());
+        pathParts.push(filename);
+        pageId = pathParts.join('/');
+      }
+      log.debug("pageId: ", $scope.pageId);
+      log.debug("branch: ", $scope.branch);
+      log.debug("filename: ", filename);
+      log.debug("using pageId: ", pageId);
+      wikiRepository.getPage($scope.branch, pageId, undefined, (data) => {
+        cb(data.text);
+      });
+    };
+
     function getNewDocumentPath() {
       var template = $scope.selectedCreateDocumentTemplate;
       if (!template) {

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -3109,3 +3109,21 @@ tabset > .tabbable > .tab-content > .nav.nav-tabs > li.disabled {
 .toast.toast-warning * {
   color: black;
 }
+
+.hawtio-toc .panel-title {
+  border: 1px solid #d4d4d4;
+  border-radius: 4px;
+  padding: 0;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.hawtio-toc .panel-title a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding: 10px;
+}
+
+