Changes to documentation

MarkBind · Sep 25, 2018 · 14c5e49 · 14c5e49
1 parent 8310b6f
commit 14c5e49
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/docs/userGuide/contentAuthoring.md b/docs/userGuide/contentAuthoring.md
@@ -576,12 +576,12 @@ Note:
 - Footers should not be nested in other components or HTML tags. If found inside, they will be shifted outside to be rendered properly.
 - [MarkBind components](#use-components) and [includes](#include-contents) are not supported in footers.
 
-### Using Anchors
+### Heading Anchors
 
-Sometimes, you may want a user of your site to be able to obtain a link to a heading within a page, to share with someone else for example.
+Your site's readers may want to obtain a link to a heading within a page, to share with someone else for example.
 
-MarkBind can automatically generate heading anchors for your page.
+MarkBind automatically generates heading anchors for your page.
 
-When a user hovers over a heading, a small anchor icon will become visible <i class="fas fa-anchor"></i>. Clicking this icon will redirect the page to that heading, producing a URL in the URL bar.
+When the viewer hovers over a heading in your page, a small anchor icon <i class="fas fa-anchor"></i> will become visible next to the heading. Clicking this icon will redirect the page to that heading, producing the desired URL in the URL bar that the viewer can share with someone else. Try it with the headings on this page!
 
 </div>
diff --git a/test/test_site/expected/markbind/css/markbind.css b/test/test_site/expected/markbind/css/markbind.css
@@ -23,6 +23,19 @@ pre > code.hljs {
     outline: none !important;
 }
 
+.fa.fa-anchor {
+    color: #ccc;
+    display: none;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
 .markbind-table {
     width: auto;
 }

diff --git a/test/test_site/expected/markbind/js/setup.js b/test/test_site/expected/markbind/js/setup.js
@@ -9,6 +9,29 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
+function flattenModals() {
+  jQuery('.modal').each((index, modal) => {
+    jQuery(modal).detach().appendTo(jQuery('#app'));
+  });
+}
+
+function setupAnchorVisibility() {
+  jQuery('h1, h2, h3, h4, h5, h6').each((index, heading) => {
+    jQuery(heading).on('mouseenter', function () {
+      jQuery(this).children('.fa.fa-anchor').show();
+    });
+    jQuery(heading).on('mouseleave', function () {
+      jQuery(this).children('.fa.fa-anchor').hide();
+    });
+  });
+}
+
+function executeAfterMountedRoutines() {
+  flattenModals();
+  scrollToUrlAnchorHeading();
+  setupAnchorVisibility();
+}
+
 function setupSiteNav() {
   // Add event listener for site-nav-btn to toggle itself and site navigation elements.
   const siteNavBtn = document.getElementById('site-nav-btn');
@@ -37,7 +60,7 @@ function setup() {
   const vm = new Vue({
     el: '#app',
     mounted() {
-      scrollToUrlAnchorHeading();
+      executeAfterMountedRoutines();
     },
   });
   setupSiteNav();
@@ -64,7 +87,7 @@ function setupWithSearch(siteData) {
       },
     },
     mounted() {
-      scrollToUrlAnchorHeading();
+      executeAfterMountedRoutines();
     },
   });
   setupSiteNav();