Merge pull request magento#350 from magento/jc_2542_add-permalinks

Add permalinks to headers
YevSent · Sep 30, 2016 · a6056fc · a6056fc
2 parents 57993c0 + d7c4961
commit a6056fc
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 2 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -15,6 +15,9 @@
 	<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 
 	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script>
+        var baseUrl = "{{site.baseurl}}";
+    </script>
 
 </head>
 <body>

diff --git a/common/js/devdocs.js b/common/js/devdocs.js
@@ -44,6 +44,40 @@ $(document).ready(function(){
         $("#searchbox").submit();
     });
 
+    // Prepend link anchor to content headers
+    $(".content-wrap :header").each(function(){
+        var link = $("<a>",{
+            href: "#"+$(this).attr("id"),
+            class: "anchor"
+        });
+        var img = $("<img>",{
+            src: baseUrl+"i/icons/ico-link-grey.png",
+            width: 25
+        });
+
+        link.prepend(img);
+        $(this).prepend(link);
+
+        $(this).hover(function(){
+            img.show();
+        },
+        function(){
+            img.hide();
+        });
+    });
+
+    // Fix anchor jumps hiding headers
+    $(window).on("hashchange",function(){
+        $(document).scrollTop($(document).scrollTop()-86);
+    });
+
+});
+
+$(window).load(function(){
+    // Fix headers hiding behind nav when loading on anchor link
+    if(window.location.hash) {
+        $(document).scrollTop($(document).scrollTop()-43);
+    }
 });
 
 //Allows for sticky menu

diff --git a/css/app.css b/css/app.css
diff --git a/i/icons/ico-link-grey.png b/i/icons/ico-link-grey.png
diff --git a/scss/_overrides.scss b/scss/_overrides.scss
@@ -484,3 +484,5 @@ body.offcanvas-active {
     width: 100%;
     text-align: right;
 }
+
+
diff --git a/scss/partials/_layout.scss b/scss/partials/_layout.scss
@@ -124,3 +124,24 @@ html,body {
         float: left;
     }
 }
+
+.content-wrap {
+   h1,h2,h3,h4,h5{
+    line-height: 1.25em;
+  } 
+    .anchor {
+        line-height: 1;
+        float: left;
+        margin-left: -35px;
+        clear: both;
+        font-size:inherit;
+        padding-right: 10px;
+
+        img {
+            display: inline-block;
+            vertical-align: middle;
+            display: none;
+        }
+    }
+
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -484,3 +484,5 @@ body.offcanvas-active {
		width: 100%;
		text-align: right;
		}