Implement src attribute for popovers

docs/userGuide/syntax/popovers.md

@@ -51,8 +51,17 @@
   </div>
   <button class="btn btn-secondary">Hover</button>
 </popover>
-<br />
-<br />
+<h4 class="no-index">Content using src</h4>
+<p>
+  <popover header="From a HTML file" src="{{ baseUrl }}/userGuide/syntax/extra/loadContent.html#fragment">
+    This is loaded from a .html file
+  </popover>
+</p>
+<p>
+  <popover header="From a MarkDown file" src="{{ baseUrl }}/userGuide/formattingContents.md#overview">
+    This is loaded from a .md file
+  </popover>
+</p>
 <h4 class="no-index">Wrap Text</h4>
 <popover header="false" content="Nice!">What do you say</popover>
 </variable>
@@ -76,13 +85,24 @@ This is the same <trigger for="pop:trigger_id">trigger</trigger> as last one.
 
 ****Options****
 
-Name | Type | Default | Description
----- | ---- | ------- | ------
-trigger | `String` |	`hover`	| How the Popover is triggered.<br>Supports: `click`, `focus`, `hover`.
-header{{slot_info_trigger}} | `String` | `''` | Popover header, supports MarkDown text.
-content{{slot_info_trigger}} | `String` | `''` | Popover content, supports MarkDown text.
-placement | `String` | `top` | How to position the Popover.<br>Supports: `top`, `left`, `right`, `bottom`.
+| Name                         | Type     | Default | Description                                                                                                    |
+| ---------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------|
+| trigger                      | `String` | `hover` | How the Popover is triggered.<br>Supports: `click`, `focus`, `hover`.                                          |
+| header{{slot_info_trigger}}  | `String` | `''`    | Popover header, supports MarkDown text.                                                                        |
+| content{{slot_info_trigger}} | `String` | `''`    | Popover content, supports MarkDown text.                                                                       |
+| src                          | `String` |         | The url to the remote page to be loaded as the content of the popover.<br>Both `.md` and `.html` are accepted. |
+| placement                    | `String` | `top`   | How to position the Popover.<br>Supports: `top`, `left`, `right`, `bottom`.                                    |
+
+<box type="info" light>
+
+MarkBind supports the `src` attribute, `content` attribute and `content` slot for popovers. 
+Usually, only one of these would be used at a time.
 
+If multiple of these are used, MarkBind will prioritise in the following order:
+  1. `content` slot
+  1. `content` attribute
+  1. `src` attribute
+</box>
 
 <span id="short" class="d-none">
 

packages/cli/test/functional/test_site/expected/siteData.json

@@ -214,6 +214,16 @@
       "headings": {},
       "headingKeywords": {}
     },
+    {
+      "src": "testPopovers.md",
+      "title": "Test: Popovers",
+      "headings": {
+        "nested-panel": "Nested Panel",
+        "normal-panel-content-heading": "Normal panel content heading",
+        "some-heading": "Some heading"
+      },
+      "headingKeywords": {}
+    },
     {
       "src": "testPopoverTrigger.md",
       "title": "Popover initiated by trigger should honor trigger attribute",

packages/cli/test/functional/test_site/site.json

@@ -74,6 +74,10 @@
       "src": "testIncludeMultipleModals.md",
       "title": "Multiple inclusions of a modal should be supported"
     },
+    {
+      "src": "testPopovers.md",
+      "title": "Test: Popovers"
+    },
     {
       "src": "testPopoverTrigger.md",
       "title": "Popover initiated by trigger should honor trigger attribute"

packages/cli/test/functional/test_site/testPopovers.md

@@ -0,0 +1,103 @@
+**Popover with attributes**
+
+<popover header="Correct header" content="Correct content">
+  Hover popover
+</popover>
+
+<br>
+
+<popover header="Correct header" content="Correct content" trigger="click">
+  Click popover
+</popover>
+
+<br>
+
+**Popover with slots**
+
+<popover>
+  <span slot="content">Correct content</span>
+  Hover popover
+</popover>
+
+<br>
+
+<popover trigger="click">
+  <span slot="header">Correct header</span>
+  <span slot="content">Correct content</span>
+  Click popover
+</popover>
+
+<br>
+
+**Popover with slots overriding attributes**
+
+<popover header="Correct header" content="Should not appear: Overwritten content">
+  <span slot="content">Correct content</span>
+  Hover popover
+</popover>
+
+<br>
+
+<popover header="Should not appear: Overwritten header" content="Should not appear: Overwritten content" trigger="click">
+  <span slot="header">Correct header</span>
+  <span slot="content">Correct content</span>
+  Click popover
+</popover>
+
+<br>
+
+**Popover with src attribute**
+
+<popover header="Correct header" src="{{ baseUrl }}/test_md_fragment.md">
+  src from a .md file
+</popover>
+
+<br>
+
+<popover header="Correct header" src="{{ baseUrl }}/testInclude.html">
+  src from a .html file
+</popover>
+
+<br>
+
+<popover src="{{ baseUrl }}/contentFragmentToInclude.md#fragment">
+  src with a fragment
+</popover>
+
+<br>
+
+<popover src="{{ baseUrl }}/testPanels/NestedPanel.md">
+  <span slot="header">Reactive content</span>
+  src containing reactive content
+</popover>
+
+<br>
+
+**Popover contents should use the priority of content slot > content attribute > src attribute**
+
+<popover header="Content slot > content attrib > src attrib" src="{{ baseUrl }}/test_md_fragment.md" content="Correct content">
+  Content attribute overrides src attribute
+</popover>
+
+<br>
+
+<popover header="Content slot > content attrib > src attrib" src="{{ baseUrl }}/test_md_fragment.md" content="This should be overwritten by slot">
+  <span slot="content">Correct content</span>
+  Content slot overrides content attribute overrides src attribute
+</popover>
+
+<br>
+
+<popover header="Content slot > content attrib > src attrib" src="{{ baseUrl }}/test_md_fragment.md">
+  <span slot="content">Correct content</span>
+  Content slot overrides content attribute overrides src attribute
+</popover>
+
+<br>
+
+**URLs are not valid src**
+
+<popover header="URLs are not valid" src="http://www.shouldnotwork.com">
+  URLs should not be valid
+</popover>
+

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

@@ -59,7 +59,7 @@
       </template>
       <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
     </popover>
-    <popover placement="top"><template #header>Title</template><template #content>Content should have <code class="hljs inline no-lang" v-pre>algolia-no-index</code> class</template>
+    <popover placement="top"><template #content>Content should have <code class="hljs inline no-lang" v-pre>algolia-no-index</code> class</template><template #header>Title</template>
       <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
     </popover>
     <p><strong>Tooltip content should have algolia-no-index class</strong></p>

packages/core/src/html/MdAttributeRenderer.js

@@ -44,9 +44,50 @@ class MdAttributeRenderer {
     delete node.attribs[attribute];
   }
 
-  processPopover(node) {
+  /**
+   * Checks if the node has both the given slot and the given attribute,
+   * deleting the attribute and logging a warning if both the slot and attribute exist.
+   * @param node Element to process
+   * @param attribute Attribute name to process
+   * @param slotName Name attribute of the <slot> element to insert, which defaults to the attribute name
+   * @returns {boolean} whether the node has both the slot and attribute
+   */
+  // eslint-disable-next-line class-methods-use-this
+  hasSlotOverridingAttribute(node, attribute, slotName = attribute) {
+    const hasNamedSlot = node.children
+      && node.children.some(child => getVslotShorthandName(child) === slotName);
+    if (!hasNamedSlot) {
+      return false;
+    }
+
+    // If the slot is present, remove the attribute as the attribute has no effect.
+    const hasAttribute = _.has(node.attribs, attribute);
+    if (hasAttribute) {
+      logger.warn(`${node.name} has a ${slotName} slot, '${attribute}' attribute has no effect.`);
+      delete node.attribs[attribute];
+    }
+
+    return hasAttribute;
+  }
+
+  processPopoverAttributes(node) {
+    if (!this.hasSlotOverridingAttribute(node, 'header')) {
+      this.processAttributeWithoutOverride(node, 'header', true);
+    }
+
+    // Warn if there is a content slot overriding the attributes 'content' or 'src'
+    const hasSlotAndContentAttribute = this.hasSlotOverridingAttribute(node, 'content', 'content');
+    const hasSlotAndSrcAttribute = this.hasSlotOverridingAttribute(node, 'src', 'content');
+    if (hasSlotAndContentAttribute || hasSlotAndSrcAttribute) {
+      return;
+    }
+
+    if (_.has(node.attribs, 'content') && _.has(node.attribs, 'src')) {
+      logger.warn(`${node.name} has a 'content' attribute, 'src' attribute has no effect.`);
+      delete node.attribs.src;
+    }
+
     this.processAttributeWithoutOverride(node, 'content', true);
-    this.processAttributeWithoutOverride(node, 'header', true);
   }
 
   processTooltip(node) {