HTML5 Report: enable hiding and resizing of navigation bar (fixes #96)

TNG · Aug 5, 2015 · a2bb27a · a2bb27a
1 parent b32faf8
commit a2bb27a
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 19 deletions.
diff --git a/jgiven-html5-report/src/app/css/jgivenreport.css b/jgiven-html5-report/src/app/css/jgivenreport.css
@@ -369,6 +369,45 @@ input.search {
     padding-bottom: 0;
 }
 
+.nav-hide-icon, .nav-show-icon {
+    position: absolute;
+    color: #aaa;
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+.nav-hide-icon {
+    right: 0;
+    top: 0;
+}
+
+.nav-hide-icon:hover {
+    color: black;
+    background: #eee;
+}
+
+.nav-show-icon:hover {
+    color: #333;
+    background: #efefef;
+}
+
+.nav-show-icon {
+    color: #ccc;
+    left: 0.1rem;
+    top: 75px;
+    z-index: 3;
+}
+
+#nav-move-icon {
+    position: absolute;
+    color: #e0e0e0;
+    padding: 5px;
+    right: 1px;
+    top: 400px;
+    z-index: 3;
+    cursor: col-resize;
+}
+
 #nav-search {
     height: 1.7rem;
 }
@@ -437,7 +476,7 @@ ul.off-canvas-list li.off-canvas-label > a:hover {
     background-color: white;
 }
 
-.scenario-container {
+#scenario-container {
     position: relative;
     padding-top: 1rem;
     padding-left: 3rem;
@@ -450,7 +489,7 @@ ul.off-canvas-list li.off-canvas-label > a:hover {
     min-height: 100%;
 }
 
-.scenario-container.embed {
+#scenario-container.embed {
     margin-left: 0;
     margin-top: 0;
     border-left: none;
@@ -460,7 +499,7 @@ body, .footer-bottom {
     background: none repeat scroll 0 0 white;
 }
 
-.sidebar {
+#sidebar {
     background: none repeat scroll 0 0 #fafafa;
     padding: 0px;
     position: fixed;
@@ -626,14 +665,14 @@ a.show-tree-link:hover {
 }
 
 @media only screen and (max-width: 64em) {
-    .scenario-container {
-        margin-left: 0;
+    #scenario-container {
+        margin-left: 0 !important;
         padding-left: 2rem;
         border-left: none;
         margin-top: 0;
     }
 
-    .sidebar, .header-fixed, .page-icon-bar, .scenario-link-icon {
+    #sidebar, .header-fixed, .page-icon-bar, .scenario-link-icon {
         display: none;
     }
 }
@@ -645,21 +684,21 @@ a.show-tree-link:hover {
 }
 
 @media only screen and (min-width: 64.063em) and (max-width: 90em) {
-    .scenario-container {
+    #scenario-container {
         margin-left: 15rem;
     }
 
-    .sidebar {
+    #sidebar {
         width: 15rem;
     }
 }
 
 @media only screen and (min-width: 90.063em) and (max-width: 120em) {
-    .scenario-container {
+    #scenario-container {
         margin-left: 21rem;
     }
 
-    .sidebar {
+    #sidebar {
         width: 21rem;
     }
 }

diff --git a/jgiven-html5-report/src/app/css/print.css b/jgiven-html5-report/src/app/css/print.css
@@ -1,5 +1,5 @@
 
-.tab-bar, .top-bar, .breadcrumbs, .sidebar, .caret-column, .page-icon-bar, .duration, .case-count, .statistics-chart, .scenario-link-icon {
+.tab-bar, .top-bar, .breadcrumbs, #sidebar, .caret-column, .page-icon-bar, .duration, .case-count, .statistics-chart, .scenario-link-icon {
     display: none !important;
 }
 
@@ -15,7 +15,7 @@
     opacity: 1 !important;
 }
 
-.scenario-container {
+#scenario-container {
     margin-left: 10px;
     margin-top: 0;
     border-left: none;
@@ -30,7 +30,6 @@ h3.scenario-group-header {
     display: none;
 }
 
-
 .scenario-title {
     margin-left: 0rem;
 }
@@ -41,7 +40,7 @@ h3.scenario-group-header {
     page-break-after: auto;
 }
 
-.scenario-expand-icon, .case-expand-icon {
+.scenario-expand-icon, .case-expand-icon, .nav-show-icon {
     display: none !important;
 }
 

diff --git a/jgiven-html5-report/src/app/index.html b/jgiven-html5-report/src/app/index.html
@@ -151,10 +151,17 @@ <h1 class="title">JGiven Report</h1>
 
       <div ng-controller="JGivenNavigationCtrl as navigationCtrl" class="" style="padding-left:0px;"
            ng-if="!currentPage.embed">
-        <div class="hide-for-small">
-          <div class="sidebar">
+        <div class="hide-for-small" ng-if="navHidden">
+          <i class="fa fa-angle-double-right nav-show-icon" ng-click="showNav()"></i>
+        </div>
+
+        <div class="hide-for-small" ng-show="!navHidden">
+          <div id="sidebar">
             <nav>
-              <ul ng-cloak class="side-nav">
+              <i class="fa fa-angle-double-left nav-hide-icon" ng-click="hideNav()"></i>
+              <i id="nav-move-icon" class="fa fa-bars fa-rotate-90" ng-mousedown="startResizeNav($event)"></i>
+
+              <ul ng-cloak class=" side-nav">
                 <li class="heading">
                   <a ng-click="summaryExpanded = !summaryExpanded">Summary</a>
                   <ul ng-if="summaryExpanded">
@@ -210,7 +217,7 @@ <h1 class="title">JGiven Report</h1>
 
       <!-- RIGHT SCENARIO PAGE -->
 
-      <div ng-cloak class="scenario-container {{currentPage.embed ? 'embed' : ''}}">
+      <div ng-cloak id="scenario-container" class="{{currentPage.embed ? 'embed' : ''}}">
 
 
         <!-- PAGE TITLE -->

diff --git a/jgiven-html5-report/src/app/lib/navigationCtrl.js b/jgiven-html5-report/src/app/lib/navigationCtrl.js
@@ -3,21 +3,70 @@
  */
 
 
-jgivenReportApp.controller('JGivenNavigationCtrl', function ($scope, classService, tagService) {
+jgivenReportApp.controller('JGivenNavigationCtrl', function ($scope, $document, $window, classService, tagService) {
   'use strict';
 
+  var scenarioContainer = $('#scenario-container');
+
+  var navWidthBeforeResize;
+  var pageXBeforeResize;
   /**
    * The root tag node of the hierarchical tag tree
    */
   $scope.rootTags = tagService.getRootTags();
 
+  $scope.navHidden = false;
+
   /**
    * The root package node of the hierarchical package tree
    */
   $scope.rootPackage = classService.getRootPackage();
 
+  adaptResizeHandle();
+  $(window).resize(adaptResizeHandle);
+
   $scope.orderNodes = function (node) {
     return node.nodeName();
   };
 
+  $scope.hideNav = function () {
+    $scope.navHidden = true;
+    scenarioContainer.previousLeftMargin = parseInt(scenarioContainer.css("margin-left"));
+    scenarioContainer.css("margin-left", "0");
+  };
+
+  $scope.showNav = function () {
+    $scope.navHidden = false;
+    scenarioContainer.css("margin-left", scenarioContainer.previousLeftMargin);
+    $scope.navStyle = scenarioContainer.previousLeftMargin;
+    $('#sidebar').css("visible", "true");
+    $('#sidebar').css("width", scenarioContainer.previousLeftMargin);
+  };
+
+  function adaptResizeHandle() {
+    $('#nav-move-icon').css("top", ($(window).height() - parseInt($('#sidebar').css("top"))) / 2);
+  }
+
+  function resizeNav(event) {
+    var widthDiff = pageXBeforeResize - event.pageX;
+    var newWidth = navWidthBeforeResize - widthDiff;
+    scenarioContainer.css("margin-left", newWidth);
+    $('#sidebar').css("width", newWidth);
+    console.log("resize " + newWidth);
+  };
+
+  $scope.startResizeNav = function (event) {
+    event.preventDefault();
+    console.log("start resize " + event.pageX);
+    navWidthBeforeResize = parseInt(scenarioContainer.css("margin-left"));
+    pageXBeforeResize = event.pageX;
+    $document.on("mousemove", resizeNav);
+    $document.on("mouseup", finishResizeNav);
+  };
+
+  function finishResizeNav() {
+    $document.unbind('mousemove', resizeNav);
+    $document.unbind('mouseup', finishResizeNav);
+  };
+
 });