From b349796ad57738d6b89bbbb3ee21b8029c6e1be5 Mon Sep 17 00:00:00 2001
From: xavijam <xavijam@gmail.com>
Date: Mon, 18 Jan 2016 16:31:15 +0100
Subject: [PATCH] Fix displaying current section within styleguide

---
 src/scss/components/typography.scss |  5 ++---
 src/scss/icon-font.css.scss         |  5 ++---
 styleguide/_template.html           | 16 ++++++++++++----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/scss/components/typography.scss b/src/scss/components/typography.scss
index 719a5c7..c44facf 100644
--- a/src/scss/components/typography.scss
+++ b/src/scss/components/typography.scss
@@ -2,7 +2,7 @@
 // ----------------------------------------------
 
 /* SG
-# Typography/
+# Typography
 
 ```
 <p class="Text Size-huge">Open Sans 26/34 Regular</p>
@@ -11,7 +11,7 @@
 <p class="Text Size-medium">Open Sans 12/16 Semibold</p>
 <p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
 <p class="Text Size-small">Open Sans 10/14 Regular</p>
-``` 
+```
 */
 
 @import '../variables/sizes';
@@ -47,4 +47,3 @@
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;
 }
-
diff --git a/src/scss/icon-font.css.scss b/src/scss/icon-font.css.scss
index c1bc793..20aaad5 100644
--- a/src/scss/icon-font.css.scss
+++ b/src/scss/icon-font.css.scss
@@ -19,8 +19,8 @@
   line-height: 1;
 }
 
-/* SG 
-# Icon font
+/* SG
+# IconFont
 ```
 
 <h4>Clock</h4>
@@ -670,4 +670,3 @@
 .IconFont-Download::before {
   content: '\E05C';
 }
-
diff --git a/styleguide/_template.html b/styleguide/_template.html
index 2576881..6617217 100644
--- a/styleguide/_template.html
+++ b/styleguide/_template.html
@@ -10,12 +10,20 @@
     var j = jQuery.noConflict(true);
     j(function() {
 
+        // Show current section
+        var hash = window.location.hash.replace(/#/g, '');
+        if (hash) {
+          setTimeout(function() {
+            showSection(hash.split('-')[0]);
+          }, 0);
+        }
+
         // Show section in Styleguide
         j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
 
         // Click on link with subheadings
         j('#styleguide-menu .submenulink').click(function(event) {
-            event.preventDefault();
+            // event.preventDefault();
             var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
             var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
             j('#styleguide-menu .on').removeClass('on');
@@ -28,7 +36,7 @@
 
         // Click on link without subheadings
         j('#styleguide-menu .sectionlink').click(function(event) {
-            event.preventDefault();
+            // event.preventDefault();
             j('#styleguide-menu .on').removeClass('on');
             j(this).addClass('on');
             showSection(j(this).data('section'));
@@ -48,7 +56,7 @@
 	{{#each menu}}
 		<li>
 			{{#if headings.0.name}}
-                <a class="submenulink" href="#" data-section="{{name}}">{{name}}</a>
+                <a class="submenulink" href="#{{name}}" data-section="{{name}}">{{name}}</a>
                 <ul class="submenu" data-submenu="{{../name}}">
                 {{#each headings}}
                     <li><a href="#{{id}}">{{name}}</a></li>
@@ -56,7 +64,7 @@
                 </ul>
 			{{/if}}
             {{#unless headings.0.name}}
-                <a class="sectionlink" href="#" data-section="{{name}}">{{name}}</a>
+                <a class="sectionlink" href="#{{name}}" data-section="{{name}}">{{name}}</a>
             {{/unless}}
 		</li>
 	{{/each}}