feat(app): Link directly to the README of a component

fix #154

Author: vogloblinsky

dist/index-cli.js

@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var tabs = document.getElementsByClassName('nav-tabs'),
+        updateAddress = function(e) {
+            if(history.pushState && e.target.dataset.link) {
+                history.pushState(null, null, '#' + e.target.dataset.link);
+            }
+        };
+    if (tabs.length > 0) {
+        tabs = tabs[0].querySelectorAll('li');
+        for (var i = 0; i < tabs.length; i++) {
+            tabs[i].addEventListener('click', updateAddress);
+            var linkTag = tabs[i].querySelector('a');
+            if (location.hash !== '') {
+                var currentHash = location.hash.substr(1);
+                if (currentHash === linkTag.dataset.link) {
+                    linkTag.click();
+                }
+            }
+        }
+    }
+});

dist/index.js

@@ -123,6 +123,7 @@
        <script src="{{relativeURL data.depth }}js/search/lunr.min.js"></script>
        <script src="{{relativeURL data.depth }}js/search/search-lunr.js"></script>
 
+       <script src="{{relativeURL data.depth }}js/tabs.js"></script>
        <script src="{{relativeURL data.depth }}js/menu.js"></script>
        <script src="{{relativeURL data.depth }}js/libs/prism.js"></script>
        <script src="{{relativeURL data.depth }}js/sourceCode.js"></script>

src/resources/js/tabs.js

@@ -9,7 +9,7 @@
         <a href="#infos" id="infos-tab" role="tab" data-toggle="tab">Infos</a>
     </li>
     <li>
-        <a href="#source" role="tab" id="source-tab" data-toggle="tab">Source</a>
+        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
     </li>
 </ul>
 

src/templates/page.hbs

@@ -5,27 +5,27 @@
 
 <ul class="nav nav-tabs" role="tablist">
     <li class="active">
-        <a href="#infos" id="infos-tab" role="tab" data-toggle="tab">Infos</a>
+        <a href="#infos" id="infos-tab" role="tab" data-toggle="tab" data-link="infos">Infos</a>
     </li>
     {{#if component.readme}}
     <li>
-        <a href="#readme" role="tab" id="readme-tab" data-toggle="tab">README</a>
+        <a href="#readme" role="tab" id="readme-tab" data-toggle="tab" data-link="readme">README</a>
     </li>
     {{/if}}
 
     {{#unless disableSourceCode}}
     <li>
-        <a href="#source" role="tab" id="source-tab" data-toggle="tab">Source</a>
+        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
     </li>
     {{/unless}}
 
     {{#if component.templateData}}
     <li>
-        <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab">Template</a>
+        <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
     </li>
     {{/if}}
     <li>
-        <a href="#tree" role="tab" id="tree-tab" data-toggle="tab">DOM Tree</a>
+        <a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
     </li>
 </ul>
 

src/templates/partials/class.hbs

@@ -9,7 +9,7 @@
         <a href="#infos" id="infos-tab" role="tab" data-toggle="tab">Infos</a>
     </li>
     <li>
-        <a href="#source" role="tab" id="source-tab" data-toggle="tab">Source</a>
+        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
     </li>
 </ul>
 

src/templates/partials/component.hbs

@@ -9,7 +9,7 @@
         <a href="#infos" id="infos-tab" role="tab" data-toggle="tab">Infos</a>
     </li>
     <li>
-        <a href="#source" role="tab" id="source-tab" data-toggle="tab">Source</a>
+        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
     </li>
 </ul>
 

src/templates/partials/directive.hbs

@@ -9,7 +9,7 @@
         <a href="#infos" id="infos-tab" role="tab" data-toggle="tab">Infos</a>
     </li>
     <li>
-        <a href="#source" role="tab" id="source-tab" data-toggle="tab">Source</a>
+        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
     </li>
 </ul>
 

src/templates/partials/injectable.hbs

@@ -24,7 +24,7 @@
         <a href="#infos" id="infos-tab" role="tab" data-toggle="tab">Infos</a>
     </li>
     <li>
-        <a href="#source" role="tab" id="source-tab" data-toggle="tab">Source</a>
+        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
     </li>
 </ul>