feat(module): graph fullscreen button

fix #337
compodoc · Oct 29, 2017 · 8161ea4 · 8161ea4
1 parent 69fa771
commit 8161ea4
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/src/resources/js/svg-pan-zoom.controls.js b/src/resources/js/svg-pan-zoom.controls.js
@@ -20,4 +20,30 @@ document.addEventListener('DOMContentLoaded', function() {
         panZoom.resetZoom();
         panZoom.resetPan();
     });
+
+    var overviewFullscreen = false,
+        originalOverviewHeight;
+
+    document.getElementById('fullscreen').addEventListener('click', function(ev) {
+        if (overviewFullscreen) {
+            document.getElementById('module-graph-svg').style.height = originalOverviewHeight;
+            overviewFullscreen = false;
+            if (ev.target) {
+                ev.target.classList.remove('fa-compress');
+            }
+        } else {
+            originalOverviewHeight = document.getElementById('module-graph-svg').style.height;
+            document.getElementById('module-graph-svg').style.height = '85vh';
+            overviewFullscreen = true;
+            if (ev.target) {
+                ev.target.classList.add('fa-compress');
+            }
+        }
+        setTimeout(function() {
+            panZoom.resize();
+            panZoom.fit();
+            panZoom.center();
+        }, 0)
+    });
+
 });
diff --git a/src/resources/styles/compodoc.css b/src/resources/styles/compodoc.css
@@ -779,3 +779,13 @@ ul.index-list {
     margin-right: 8px;
     font-weight: normal;
 }
+
+.module-graph-container {
+    position: relative;
+}
+.module-graph-fullscreen-btn {
+    position: absolute;
+    right: 5px;
+    top: 0;
+    cursor: pointer;
+}
diff --git a/src/templates/partials/module.hbs b/src/templates/partials/module.hbs
@@ -5,10 +5,11 @@
 
 {{#unless disableGraph}}
   {{#if module.graph }}
-      <div class="text-center">
+      <div class="text-center module-graph-container">
           <div id="module-graph-svg">
               {{{ module.graph }}}
           </div>
+          <i id="fullscreen" class="fa fa-expand module-graph-fullscreen-btn" aria-hidden="true"></i>
           <div class="btn-group">
               <button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
               <button id="reset" class="btn btn-default btn-sm">Reset</button>

diff --git a/src/templates/partials/overview.hbs b/src/templates/partials/overview.hbs
@@ -2,10 +2,11 @@
 {{#unless disableGraph}}
     {{#unless disableMainGraph}}
         {{#if modules}}
-            <div class="text-center">
+            <div class="text-center module-graph-container">
                 <div id="module-graph-svg">
                     {{{ mainGraph }}}
                 </div>
+                <i id="fullscreen" class="fa fa-expand module-graph-fullscreen-btn" aria-hidden="true"></i>
                 <div class="btn-group">
                     <button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
                     <button id="reset" class="btn btn-default btn-sm">Reset</button>