Add AnchorJS logic for header links (#10155)

* Add AnchorJS JavaScript

* Remove existing inpage_heading logic

* Remove underline from anchor tags

* Use single icon and add touch visibility

* Use paragraph link icon for AnchorJS

* Update Sass to use code formatting in docsContent headers

* Update header size coverage to H3-H6

assets/sass/_base.sass

@@ -800,8 +800,6 @@ dd
 	&:after
 		transform: rotate(-45deg)
 
-
-
 #docsContent
 	position: relative
 	float: right
@@ -895,7 +893,6 @@ dd
 		overflow-x: auto
 
 	h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
-		font-family: inherit
 		font-size: inherit
 		background-color: transparent
 
@@ -999,10 +996,6 @@ dd
 	img
 		max-width: 100%
 
-	a
-		//font-weight: 700
-		text-decoration: underline
-
 	#TableOfContents > ul > li { list-style: none; }
 	#TableOfContents
 		ul, li

layouts/docs/baseof.html

@@ -48,22 +48,5 @@
     </div>
 		{{ partialCached "footer.html" . }}
 		{{ partialCached "footer-scripts.html" . }}
-    <script>
-      // This script turns in-page headers into clickable and shareable
-      (function addHeadingLinks(){
-        var article = document.getElementById('docsContent');
-        var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
-        headings.forEach(function(heading){
-          if(heading.id){
-            var a = document.createElement('a');
-            a.innerHTML = heading.innerHTML;
-            a.href = '#'+heading.id;
-            a.classList.add('inpage_heading');
-            heading.innerHTML = '';
-            heading.appendChild(a);
-          }
-        });
-      })();
-    </script>
 	</body>
-</html>
+</html>

layouts/partials/head.html

@@ -27,6 +27,7 @@
 <meta property="og:image" content="{{ index . 0 | replaceRE ".*src=\"(.+?)\".*" "$1" }}" />
 {{ end }}
 {{ end }}
+<script src="{{ "js/anchor-4.1.1.min.js" | relURL }}"></script>
 <script src="{{ "js/jquery-3.2.1.min.js" | relURL }}"></script>
 <script src="{{ "js/jquery-ui-1.12.1.min.js" | relURL }}"></script>
 <script src="{{ "js/bootstrap-3.3.7.min.js" | relURL }}"></script>

resources/_gen/assets/sass/sass/case_study_styles.sass_cb957da2191fde4902dd41b139c8069d.json

@@ -1 +1 @@
-{"Target":"css/styles.min.55d1e72cc5418eace24df1a4450abe45a6ee9111f9814269bc6540e8c49d2399.css","MediaType":"text/css","Data":{"Integrity":"sha256-VdHnLMVBjqziTfGkRQq+RabukRH5gUJpvGVA6MSdI5k="}}
+{"Target":"css/styles.min.ece7e7b8765fe37209670b4fdb98dc7c18c77ce66f423368a943e602cf2ab436.css","MediaType":"text/css","Data":{"Integrity":"sha256-7OfnuHZf43IJZwtP25jcfBjHfOZvQjNoqUPmAs8qtDY="}}

resources/_gen/assets/sass/sass/styles.sass_a6e533854c4de092afe9278041939937.json

@@ -1 +0,0 @@
-{"Target":"css/styles.css","MediaType":"text/css","Data":{}}

resources/_gen/assets/sass/sass/styles.sass_cb957da2191fde4902dd41b139c8069d.json

@@ -1 +1 @@
-{"Target":"css/styles.min.995606e495d8e0e2b5bf4b5293e26c01bac4635d30a956f7da45de66c66f6619.css","MediaType":"text/css","Data":{"Integrity":"sha256-mVYG5JXY4OK1v0tSk+JsAbrEY10wqVb32kXeZsZvZhk="}}
+{"Target":"css/styles.min.36e2d5e7b70bfce1c48918362c1c1fc87ea3c820c5a8e9985d1f9b09c0bf737a.css","MediaType":"text/css","Data":{"Integrity":"sha256-NuLV57cL/OHEiRg2LBwfyH6jyCDFqOmYXR+bCcC/c3o="}}

static/css/custom-jekyll/tags.css

@@ -55,13 +55,3 @@
     opacity: 1;
 }
 
-/* In-page section heading permalinks */
-a.inpage_heading {
-  color: #000;
-  text-decoration: none !important;
-}
-
-a.inpage_heading:hover {
-  text-decoration: underline !important;
-  opacity: .8;
-}

static/js/script.js

@@ -1,4 +1,12 @@
- //modal close button
+function addAnchorTags() {
+  anchors.options = {
+    visible: 'touch'
+  }
+
+  anchors.add('#docsContent h2, #docsContent h3, #docsContent h4, #docsContent h5, #docsContent h6');
+}
+
+//modal close button
 (function(){
     //π.modalCloseButton = function(closingFunction){
     //	return π.button('pi-modal-close-button', null, null, closingFunction);
@@ -506,6 +514,8 @@ var pushmenu = (function(){
 })();
 
 $(function() {
+  addAnchorTags();
+
 
     // Make global nav be active based on pathname
     if ((location.pathname.split("/")[1]) !== ""){