Implement span.anchor in panel to replace id

packages/cli/test/functional/test_site/expected/index.html

@@ -265,20 +265,20 @@ <h1 id="heading-with-keyword-in-panel"><span id="heading-with-keyword-in-panel"
             <span class="keyword">panel keyword</span>
           </panel>
           <p><strong>Panel with heading with keyword</strong></p>
-          <panel expanded id="panel-with-heading"><template #header>
+          <panel expanded panelId="panel-with-heading"><template #header>
               <h1 id="panel-with-heading"><span id="panel-with-heading" class="anchor"></span>Panel with heading<a class="fa fa-anchor" href="#panel-with-heading" onclick="event.stopPropagation()"></a></h1>
             </template>
             <span class="keyword">panel keyword</span>
           </panel>
           <p><strong>Expanded panel without heading with keyword</strong></p>
-          <panel expanded id="panel-without-heading-with-keyword"><template #header>
+          <panel expanded panelId="panel-without-heading-with-keyword"><template #header>
               <h1 id="panel-without-heading-with-keyword"><span id="panel-without-heading-with-keyword" class="anchor"></span>Panel without heading with keyword<a class="fa fa-anchor" href="#panel-without-heading-with-keyword" onclick="event.stopPropagation()"></a></h1>
             </template>
             <h1 id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading"><span id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading" class="anchor"></span>Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading" onclick="event.stopPropagation()"></a></h1>
             <p><span class="keyword">panel keyword</span></p>
           </panel>
           <p><strong>Unexpanded panel with heading with keyword</strong></p>
-          <panel id="panel-with-heading-with-keyword"><template #header>
+          <panel panelId="panel-with-heading-with-keyword"><template #header>
               <h1 id="panel-with-heading-with-keyword"><span id="panel-with-heading-with-keyword" class="anchor"></span>Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword" onclick="event.stopPropagation()"></a></h1>
             </template>
             <h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading"><span id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading" class="anchor"></span>Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading" onclick="event.stopPropagation()"></a></h1>
@@ -591,51 +591,51 @@ <h2 id="feature-list"><span id="feature-list" class="anchor"></span>Feature list
             </span>
           </panel>
           <p><strong>Panel without src</strong></p>
-          <panel expanded id="panel-without-src-header"><template #header>
+          <panel expanded panelId="panel-without-src-header"><template #header>
               <h2 id="panel-without-src-header"><span id="panel-without-src-header" class="anchor"></span>Panel without src header<a class="fa fa-anchor" href="#panel-without-src-header" onclick="event.stopPropagation()"></a></h2>
             </template>
             <div>
               <p><strong>Panel without src content heading</strong></p>
             </div>
           </panel>
           <p><strong>Panel with normal src</strong></p>
-          <panel src="/test_site/testPanels/PanelNormalSource._include_.html" expanded id="panel-with-normal-src-header"><template #header>
+          <panel src="/test_site/testPanels/PanelNormalSource._include_.html" expanded panelId="panel-with-normal-src-header"><template #header>
               <h2 id="panel-with-normal-src-header"><span id="panel-with-normal-src-header" class="anchor"></span>Panel with normal src header<a class="fa fa-anchor" href="#panel-with-normal-src-header" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Panel with src from a page segment</strong></p>
-          <panel src="/test_site/testPanels/PanelSourceContainsSegment._include_.html#segment" expanded fragment="segment" id="panel-with-src-from-a-page-segment-header"><template #header>
+          <panel src="/test_site/testPanels/PanelSourceContainsSegment._include_.html#segment" expanded fragment="segment" panelId="panel-with-src-from-a-page-segment-header"><template #header>
               <h2 id="panel-with-src-from-a-page-segment-header"><span id="panel-with-src-from-a-page-segment-header" class="anchor"></span>Panel with src from a page segment header<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment-header" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Panel with boilerplate</strong></p>
-          <panel src="/test_site/testPanels/boilerTestPanel._include_.html" expanded id="boilerplate-referencing"><template #header>
+          <panel src="/test_site/testPanels/boilerTestPanel._include_.html" expanded panelId="boilerplate-referencing"><template #header>
               <h2 id="boilerplate-referencing"><span id="boilerplate-referencing" class="anchor"></span>Boilerplate referencing<a class="fa fa-anchor" href="#boilerplate-referencing" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
-          <panel src="/test_site/testPanelsDuplicate/boilerTestPanel._include_.html" expanded id="boilerplate-referencing-2"><template #header>
+          <panel src="/test_site/testPanelsDuplicate/boilerTestPanel._include_.html" expanded panelId="boilerplate-referencing-2"><template #header>
               <h2 id="boilerplate-referencing-2"><span id="boilerplate-referencing-2" class="anchor"></span>Boilerplate referencing 2<a class="fa fa-anchor" href="#boilerplate-referencing-2" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
-          <panel src="/test_site/testPanels/notInside._include_.html" expanded id="referencing-specified-path-in-boilerplate"><template #header>
+          <panel src="/test_site/testPanels/notInside._include_.html" expanded panelId="referencing-specified-path-in-boilerplate"><template #header>
               <h2 id="referencing-specified-path-in-boilerplate"><span id="referencing-specified-path-in-boilerplate" class="anchor"></span>Referencing specified path in boilerplate<a class="fa fa-anchor" href="#referencing-specified-path-in-boilerplate" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Nested panel</strong></p>
-          <panel src="/test_site/testPanels/NestedPanel._include_.html" expanded id="outer-nested-panel"><template #header>
+          <panel src="/test_site/testPanels/NestedPanel._include_.html" expanded panelId="outer-nested-panel"><template #header>
               <h2 id="outer-nested-panel"><span id="outer-nested-panel" class="anchor"></span>Outer nested panel<a class="fa fa-anchor" href="#outer-nested-panel" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Nested panel without src</strong></p>
-          <panel expanded id="outer-nested-panel-without-src"><template #header>
+          <panel expanded panelId="outer-nested-panel-without-src"><template #header>
               <h2 id="outer-nested-panel-without-src"><span id="outer-nested-panel-without-src" class="anchor"></span>Outer nested panel without src<a class="fa fa-anchor" href="#outer-nested-panel-without-src" onclick="event.stopPropagation()"></a></h2>
             </template>
             <p><strong>Panel content of outer nested panel</strong></p>
-            <panel expanded id="inner-panel-header-without-src"><template #header>
+            <panel expanded panelId="inner-panel-header-without-src"><template #header>
                 <h2 id="inner-panel-header-without-src"><span id="inner-panel-header-without-src" class="anchor"></span>Inner panel header without src<a class="fa fa-anchor" href="#inner-panel-header-without-src" onclick="event.stopPropagation()"></a></h2>
               </template>
               <p><strong>Panel content of inner nested panel</strong></p>
             </panel>
           </panel>
           <p><strong>Panel with src from another Markbind site</strong></p>
-          <panel src="/test_site/sub_site/index._include_.html" expanded id="panel-with-src-from-another-markbind-site-header"><template #header>
+          <panel src="/test_site/sub_site/index._include_.html" expanded panelId="panel-with-src-from-another-markbind-site-header"><template #header>
               <h2 id="panel-with-src-from-another-markbind-site-header"><span id="panel-with-src-from-another-markbind-site-header" class="anchor"></span>Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
-          <panel src="/test_site/sub_site/testReuseSubsite._include_.html" expanded id="panel-with-src-from-another-markbind-site-header-2"><template #header>
+          <panel src="/test_site/sub_site/testReuseSubsite._include_.html" expanded panelId="panel-with-src-from-another-markbind-site-header-2"><template #header>
               <h2 id="panel-with-src-from-another-markbind-site-header-2"><span id="panel-with-src-from-another-markbind-site-header-2" class="anchor"></span>Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header-2" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
         </div>
@@ -644,18 +644,18 @@ <h2 id="panel-with-src-from-another-markbind-site-header-2"><span id="panel-with
           <trigger for="modal-with-panel">trigger</trigger>
         </p>
         <b-modal id="modal-with-panel" hide-footer size modal-class="mb-zoom" ref="modal-with-panel"><template #modal-title>modal title with panel inside</template>
-          <panel expanded id="panel-inside-modal"><template #header>
+          <panel expanded panelId="panel-inside-modal"><template #header>
               <h2 id="panel-inside-modal"><span id="panel-inside-modal" class="anchor"></span>Panel inside modal<a class="fa fa-anchor" href="#panel-inside-modal" onclick="event.stopPropagation()"></a></h2>
             </template>
             <p><strong>Panel content inside modal</strong></p>
           </panel>
         </b-modal>
         <p><strong>Unexpanded panel</strong></p>
-        <panel id="unexpanded-panel-header"><template #header>
+        <panel panelId="unexpanded-panel-header"><template #header>
             <h2 id="unexpanded-panel-header"><span id="unexpanded-panel-header" class="anchor"></span>Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header" onclick="event.stopPropagation()"></a></h2>
           </template>
           <p><strong>Panel content of unexpanded panel should not appear in search data</strong></p>
-          <panel expanded id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><template #header>
+          <panel expanded panelId="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><template #header>
               <h2 id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><span id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data" class="anchor"></span>Panel header inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data" onclick="event.stopPropagation()"></a></h2>
             </template>
             <p><strong>Panel content inside unexpanded panel should not appear in search data</strong></p>

packages/cli/test/functional/test_site/expected/testAnchorGeneration.html

@@ -214,7 +214,7 @@ <h3 id="should-have-anchor-3"><span id="should-have-anchor-3" class="anchor"></s
         <h4 id="should-have-anchor-4"><span id="should-have-anchor-4" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4" onclick="event.stopPropagation()"></a></h4>
         <h5 id="should-have-anchor-5"><span id="should-have-anchor-5" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5" onclick="event.stopPropagation()"></a></h5>
         <h6 id="should-have-anchor-6"><span id="should-have-anchor-6" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6" onclick="event.stopPropagation()"></a></h6>
-        <panel id="should-have-anchor-7"><template #header>
+        <panel panelId="should-have-anchor-7"><template #header>
             <h4 id="should-have-anchor-7"><span id="should-have-anchor-7" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7" onclick="event.stopPropagation()"></a></h4>
           </template>
           Lorem ipsum
@@ -251,7 +251,7 @@ <h3 id="should-have-anchor-16"><span id="should-have-anchor-16" class="anchor"><
           <h4 id="should-have-anchor-17"><span id="should-have-anchor-17" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17" onclick="event.stopPropagation()"></a></h4>
           <h5 id="should-have-anchor-18"><span id="should-have-anchor-18" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18" onclick="event.stopPropagation()"></a></h5>
           <h6 id="should-have-anchor-19"><span id="should-have-anchor-19" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19" onclick="event.stopPropagation()"></a></h6>
-          <panel id="should-have-anchor-20"><template #header>
+          <panel panelId="should-have-anchor-20"><template #header>
               <h4 id="should-have-anchor-20"><span id="should-have-anchor-20" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20" onclick="event.stopPropagation()"></a></h4>
             </template>
             Lorem ipsum

packages/cli/test/functional/test_site/expected/testPanels/NestedPanel._include_.html

@@ -1,3 +1,3 @@
-<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded id="nested-panel"><template #header>
+<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded panelId="nested-panel"><template #header>
     <h2 id="nested-panel"><span id="nested-panel" class="anchor"></span>Nested Panel<a class="fa fa-anchor" href="#nested-panel" onclick="event.stopPropagation()"></a></h2>
   </template></panel>

packages/core-web/src/index.js

@@ -49,7 +49,6 @@ function detectAndApplyFixedHeaderStyles() {
     top: calc(-${headerHeight}px - ${bufferHeight}rem)
     }`,
   );
-  insertCss(`.card-container { scroll-margin-top: calc(${headerHeight}px + ${bufferHeight}rem); }`);
   insertCss(`.nav-menu-open { max-height: calc(100% - ${headerHeight}px); }`);
 
   const adjustHeaderClasses = () => {
@@ -68,9 +67,6 @@ function detectAndApplyFixedHeaderStyles() {
           case 'span.anchor':
             rules[0].style.top = `calc(-${newHeaderHeight}px - ${bufferHeight}rem)`;
             break;
-          case '.card-container':
-            rules[0].style.scrollMarginTop = `calc(${newHeaderHeight}px + ${bufferHeight}rem)`;
-            break;
           case '.nav-menu-open':
             rules[0].style.maxHeight = `calc(100% - ${newHeaderHeight}px + 50px)`;
             break;

packages/core/src/html/headerProcessor.js

@@ -76,7 +76,7 @@ function assignPanelId(node) {
           + 'Please report this to the MarkBind developers. Thank you!');
     }
 
-    node.attribs.id = header.attribs.id;
+    node.attribs.panelId = header.attribs.id;
   }
 }
 

packages/core/test/unit/html/NodeProcessor.data.js

@@ -50,7 +50,7 @@ module.exports.POST_PROCESS_PANEL_ID_ASSIGNED_USING_HEADER_SLOT = `
 `;
 
 module.exports.POST_PROCESS_PANEL_ID_ASSIGNED_USING_HEADER_SLOT_EXPECTED = `
-<panel id="slot-header"><template #header><h1 id="slot-header">Slot Header</h1></template>
+<panel panelId="slot-header"><template #header><h1 id="slot-header">Slot Header</h1></template>
   Header and alt attributes should be processed and inserted under panel as slots and internal slots respectively and deleted.
 </panel>
 `;

packages/core/test/unit/html/NodeProcessor.test.js

@@ -121,7 +121,7 @@ test('processNode processes box attributes and inserts into dom as slots correct
                            testData.PROCESS_BOX_HEADING_EXPECTED);
 });
 
-test('postProcessNode assigns the correct header id to panels', () => {
+test('postProcessNode assigns the correct panel id to panels', () => {
   processAndVerifyTemplate(testData.POST_PROCESS_PANEL_ID_ASSIGNED_USING_HEADER_SLOT,
                            testData.POST_PROCESS_PANEL_ID_ASSIGNED_USING_HEADER_SLOT_EXPECTED,
                            true);

packages/vue-components/src/Panel.vue

@@ -1,11 +1,16 @@
 <template>
-  <minimal-panel v-if="isMinimal" v-bind="$attrs">
+  <minimal-panel
+    v-if="isMinimal"
+    :panel-id="panelId"
+    v-bind="$attrs"
+  >
     <template v-for="(node, name) in $scopedSlots" #[name]>
       <slot :name="name"></slot>
     </template>
   </minimal-panel>
   <nested-panel
     v-else
+    :panel-id="panelId"
     :type="type"
     v-bind="$attrs"
   >
@@ -25,6 +30,10 @@ export default {
     minimalPanel,
   },
   props: {
+    panelId: {
+      type: String,
+      default: null,
+    },
     type: {
       type: String,
       default: null,

packages/vue-components/src/__tests__/Panels.spec.js

@@ -59,4 +59,17 @@ describe('NestedPanels', () => {
 
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  test('should have span.anchor when id is present', async () => {
+    const wrapper = mount(NestedPanel, {
+      propsData: {
+        panelId: 'test-id',
+      },
+      slots: {
+        header: 'test header',
+      },
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });

packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap

@@ -1,9 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`NestedPanels should have span.anchor when id is present 1`] = `
+<div
+  class="card-container"
+>
+  <span
+    class="anchor"
+    id="test-id"
+  />
+
+  <div
+    class="card expandable-card"
+  >
+    <div
+      class="card-header header-toggle bg-light"
+    >
+      <div
+        class="caret-wrapper"
+      >
+        <!---->
+      </div>
+
+      <div
+        class="header-wrapper card-title bg-light"
+      >
+        test header
+      </div>
+
+      <div
+        class="button-wrapper"
+      >
+        <button
+          class="collapse-button btn btn-outline-secondary"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="collapse-icon glyphicon glyphicon-menu-down"
+          />
+        </button>
+
+        <button
+          class="close-button btn btn-outline-secondary"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="glyphicon glyphicon-remove"
+          />
+        </button>
+
+        <button
+          class="popup-button btn btn-outline-secondary"
+          style="display: none;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="glyphicon glyphicon-new-window"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div
+      class="card-collapse"
+      style="max-height: 0px;"
+    >
+      <!---->
+
+      <hr
+        style="display: none;"
+      />
+    </div>
+
+    <transition-stub
+      name="peek-read-more-fade"
+    >
+      <!---->
+    </transition-stub>
+  </div>
+</div>
+`;
+
 exports[`NestedPanels should not show header after expand with expandHeaderless as true 1`] = `
 <div
   class="card-container"
 >
+  <!---->
+
   <div
     class="card expandable-card"
   >
@@ -97,6 +182,8 @@ exports[`NestedPanels should show header after expand with expandHeaderless as f
 <div
   class="card-container"
 >
+  <!---->
+
   <div
     class="card expandable-card"
   >
@@ -190,6 +277,8 @@ exports[`NestedPanels should show header when collapsed with expandHeaderless as
 <div
   class="card-container"
 >
+  <!---->
+
   <div
     class="card expandable-card"
   >
@@ -268,6 +357,8 @@ exports[`NestedPanels should show header when collapsed with expandHeaderless as
 <div
   class="card-container"
 >
+  <!---->
+
   <div
     class="card expandable-card"
   >