fixes #411 so we have a nicer layout of the help navigation bars and …

…sections and can easily switch between the user sections to the developer sections
hawtio · Jul 25, 2013 · b7e24f0 · b7e24f0
1 parent 0ccaca7
commit b7e24f0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 38 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/doc/developer.md b/hawtio-web/src/main/webapp/app/core/doc/developer.md
@@ -0,0 +1,10 @@
+### Developer Guide
+
+[hawtio](http://hawt.io/) is designed around a large suite of [plugins](http://hawt.io/plugins/index.html) and active [community](http://hawt.io/community/index.html) and we love [contributions](http://hawt.io/contributing/index.html)!
+
+For more background on how to build your own plugins for **hawtio** check out the [developer help](http://hawt.io/developers/index.html)
+
+**hawtio** also includes a number of developer focussed plugins to help developers create even better plugins.
+
+Click on the links on the left to see more!
+
diff --git a/hawtio-web/src/main/webapp/app/core/html/help.html b/hawtio-web/src/main/webapp/app/core/html/help.html
@@ -2,17 +2,17 @@
   <div class="row-fluid">
     <div class="span2">
       <ul class="nav help-sidebar">
-        <li ng-repeat="(topic, subtopic) in topics" ng-class="{active : isTopicActive(topic)}">
-          <a ng-href="#/help/{{topic}}">{{mapTopicName(topic)}}</a>
+        <li ng-repeat="section in sections" ng-class="{active : section.active}">
+          <a ng-href="#/help/{{section.topic}}/{{section.subTopic}}">{{section.label}}</a>
         </li>
       </ul>
     </div>
     <div class="span1 help-spacer"></div>
     <div class="span8">
       <div class="row">
         <ul class="nav nav-tabs connected">
-          <li ng-repeat="(subtopic, url) in topics[topic]" ng-class="{active : isSubTopicActive(subtopic)}">
-            <a ng-href="#/help/{{topic}}/{{subtopic}}">{{mapSubTopicName(topic, subtopic)}}</a>
+          <li ng-repeat="breadcrumb in breadcrumbs" ng-class="{active : breadcrumb.active}">
+            <a ng-href="#/help/{{breadcrumb.topic}}/{{breadcrumb.subTopic}}">{{breadcrumb.label}}</a>
           </li>
         </ul>
       </div>
@@ -21,9 +21,6 @@
           <div ng-bind-html-unsafe="html"></div>
         </div>
       </div>
-
     </div>
-
-
   </div>
 </div>
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -54,12 +54,12 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
           $routeProvider.
                   when('/preferences', {templateUrl: 'app/core/html/preferences.html'}).
                   when('/help', {
-                    redirectTo: '/help/overview'
+                    redirectTo: '/help/index'
                   }).
                   when('/help/:topic/', {templateUrl: 'app/core/html/help.html'}).
                   when('/help/:topic/:subtopic', {templateUrl: 'app/core/html/help.html'}).
 
-                  otherwise({redirectTo: '/help/overview'});
+                  otherwise({redirectTo: '/help/index'});
         }).
         constant('layoutTree', 'app/core/html/layoutTree.html').
         constant('layoutFull', 'app/core/html/layoutFull.html').
@@ -261,8 +261,9 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
           viewRegistry['help'] = layoutFull;
           viewRegistry['preferences'] = layoutFull;
 
-          helpRegistry.addUserDoc('overview', 'app/core/doc/overview.md');
-          helpRegistry.addSubTopic('overview', 'faq', 'app/core/doc/faq.md');
+          helpRegistry.addUserDoc('index', 'app/core/doc/overview.md');
+          helpRegistry.addSubTopic('index', 'faq', 'app/core/doc/faq.md');
+          helpRegistry.addSubTopic('index', 'developer', 'app/core/doc/developer.md');
           helpRegistry.discoverHelpFiles(hawtioPluginLoader.getModules());
 
         }).

diff --git a/hawtio-web/src/main/webapp/app/core/js/help.ts b/hawtio-web/src/main/webapp/app/core/js/help.ts
@@ -8,52 +8,68 @@ module Core {
       $scope.subTopic = $routeParams.subtopic
     }
 
-    $scope.$on('hawtioNewHelpTopic', function() {
-      $scope.topics = helpRegistry.getTopics();
-    });
-
-    $scope.isTopicActive = function(topic) {
-      if (topic === $scope.topic) {
-        return true;
-      }
-      return false;
-    };
+    // when on the index pages, filter the user subTopic unless on the dev page
+    var isIndex = $scope.topic === "index";
+    var filterSubTopic = $scope.subTopic;
+    if (isIndex && filterSubTopic !== "developer") {
+      filterSubTopic = "user";
+    }
 
-    $scope.isSubTopicActive = function(topic) {
-      if (topic === $scope.subTopic) {
-        return true;
+    $scope.breadcrumbs = [
+      {
+        topic: "index",
+        subTopic: "user",
+        label: "User Guide"
+      },
+      {
+        topic: "index",
+        subTopic: "faq",
+        label: "FAQ"
+      },
+      {
+        topic: "index",
+        subTopic: "developer",
+        label: "Developers"
       }
-      return false;
-    };
-
-    $scope.filterSubTopicc = (topicObject) => {
+    ];
 
-    };
+    // lets select the active tab
+    var activeBreadcrumb = $scope.breadcrumbs.find(b => b.topic === $scope.topic && b.subTopic === $scope.subTopic);
+    if (activeBreadcrumb) activeBreadcrumb.active = true;
 
-    $scope.mapTopicName = function(topic) {
-      return helpRegistry.mapTopicName(topic);
-    };
+    $scope.sections = [];
+    angular.forEach($scope.topics, (details, topic) => {
+      // lets hide any index topics or any topics which don't have a filter sub topic
+      if (topic !== "index" && details[filterSubTopic]) {
+        $scope.sections.push({
+          topic: topic,
+          subTopic: filterSubTopic,
+          label: helpRegistry.mapTopicName(topic),
+          active: topic === $scope.topic
+        });
+      }
+    });
 
-    $scope.mapSubTopicName = function(topic, subtopic) {
-      return helpRegistry.mapSubTopicName(subtopic);
-    };
+    $scope.$on('hawtioNewHelpTopic', function () {
+      $scope.topics = helpRegistry.getTopics();
+    });
 
     if (!angular.isDefined($scope.topics[$scope.topic])) {
       $scope.html = "Unable to download help data for " + $scope.topic;
     } else {
-      
+
       $.ajax({
         url: $scope.topics[$scope.topic][$scope.subTopic],
         dataType: 'html',
         cache: false,
-        success: function(data, textStatus, jqXHR) {
+        success: function (data, textStatus, jqXHR) {
           $scope.html = "Unable to download help data for " + $scope.topic;
           if (angular.isDefined(data)) {
             $scope.html = marked(data);
           }
           Core.$apply($scope);
         },
-        error: function(jqXHR, textStatus, errorThrown) {
+        error: function (jqXHR, textStatus, errorThrown) {
           $scope.html = "Unable to download help data for " + $scope.topic;
           Core.$apply($scope);
         }