Update tests for encapsulating anchor plugin

test/functional/test_site/expected/bugs/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
   <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">

test/functional/test_site/expected/markbind/css/markbind.css

@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;

test/functional/test_site/expected/markbind/js/setup.js

@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 

test/functional/test_site/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css

@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}

test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html

@@ -1,13 +1,13 @@
-<h1 id="specifying-requirements">Specifying requirements<a class="fa fa-anchor" href="#specifying-requirements"></a></h1>
+<h1 id="specifying-requirements">Specifying requirements<a class="fa fa-anchor" href="#specifying-requirements" onclick="event.stopPropagation()"></a></h1>
 <p>
   <seg id="preview">As we establish requirements, they should be recorded in some way for future reference, usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders, and refine requirements based on their feedback.
     The next phase is to convert requirements into a product specification that specifies how the product will address the requirements. </seg>
 </p>
 <p>Given next are some tools and techniques that can be used to specify requirements. Note that they can also be used for establishing requirements too.</p>
-<h2 id="textual-descriptions-unstructured-prose">Textual descriptions (unstructured prose)<a class="fa fa-anchor" href="#textual-descriptions-unstructured-prose"></a></h2>
+<h2 id="textual-descriptions-unstructured-prose">Textual descriptions (unstructured prose)<a class="fa fa-anchor" href="#textual-descriptions-unstructured-prose" onclick="event.stopPropagation()"></a></h2>
 <p>This is the most straight forward way of describing requirements. A textual description can be used to give a quick overview of the domain/system that is understandable to both the users and the development team. Textual descriptions are especially useful
   when describing the vision of a product. However, lengthy textual descriptions are hard to follow.</p>
-<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
 <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample feature
   list from Minesweeper (only a brief description has been provided to save space).</p>
 <ol>

test/functional/test_site/expected/sub_site/index._include_.html

@@ -1,5 +1,5 @@
 <p>This is a page from another Markbind site.</p>
-<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
 <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample feature
   list from Minesweeper (only a brief description has been provided to save space).</p>
 <ol>

test/functional/test_site/expected/sub_site/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
   <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -26,7 +27,7 @@
     <div id="flex-body">
       <div id="content-wrapper">
         <p>This is a page from another Markbind site.</p>
-        <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+        <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
         <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample
           feature list from Minesweeper (only a brief description has been provided to save space).</p>
         <ol>

test/functional/test_site/expected/sub_site/nested_sub_site/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="../../markbind/css/github.min.css">
   <link rel="stylesheet" href="../../markbind/css/markbind.css">
   <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../../markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">

test/functional/test_site/expected/testAfterSetup.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
   <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/testAfterSetup/styles.css">
   <meta name="head-bottom">
   <link rel="icon" href="/test_site/favicon.png">