diff --git a/src/pat/tooltip/documentation.md b/src/pat/tooltip/documentation.md
index 8165f1892..41e1f1c2d 100644
--- a/src/pat/tooltip/documentation.md
+++ b/src/pat/tooltip/documentation.md
@@ -104,12 +104,6 @@ option:
This will load the contents of the `#myTip` element of
balloon-contents.html and display it in a tooltip.
-You can also use the `::element` modifier after a document fragment to select
-the element itself instead of it's contents. E.g.:
-
-
- …
-
### Generated markup
diff --git a/src/pat/tooltip/index.html b/src/pat/tooltip/index.html
index 9628d0c8e..550ed370e 100644
--- a/src/pat/tooltip/index.html
+++ b/src/pat/tooltip/index.html
@@ -449,73 +449,11 @@
-
Hello there
diff --git a/src/pat/tooltip/tooltip.js b/src/pat/tooltip/tooltip.js
index adc049f64..66517bc53 100644
--- a/src/pat/tooltip/tooltip.js
+++ b/src/pat/tooltip/tooltip.js
@@ -310,7 +310,7 @@ export default Base.extend({
if (this.ajax_state.isFetching || !this.ajax_state.canFetch) {
return undefined;
}
- const { url, selector, modifier } = this.get_url_parts(
+ const { url, selector } = this.get_url_parts(
this.el.getAttribute("href")
);
let content;
@@ -327,7 +327,7 @@ export default Base.extend({
// TODO: use pat-inject, once it supports async
const response = await fetch(url);
const text = await response.text();
- content = await handler(text, url, selector, modifier);
+ content = await handler(text, url, selector);
} catch (e) {
log.error(`Error on ajax request ${e}`);
}
@@ -335,7 +335,7 @@ export default Base.extend({
} else if (selector) {
// Tooltip content from current DOM tree.
content = document.querySelector(selector);
- content = content ? content[modifier] : undefined;
+ content = content?.innerHTML || undefined;
}
if (content) {
this.tippy.setContent(content);
@@ -344,34 +344,28 @@ export default Base.extend({
},
get_url_parts(href) {
- // Return the URL, a CSS ID selector and a DOM query modifier.
- // The modifier is a as defined in pat-inject:
- // ::element selects the element itself and not it's children.
- let url, selector, modifier;
+ // Return the URL and a CSS ID selector.
+ let url, selector;
if (!href) {
- return { url, selector, modifier };
+ return { url, selector };
}
- url = (href.split("#")[0] || "").split("::")[0] || undefined;
- selector = (href.split("#")[1] || "").split("::")[0] || undefined;
+ url = href.split("#")[0] || undefined;
+ selector = href.split("#")[1] || undefined;
selector = selector ? `#${selector}` : undefined;
- modifier = (href.split("#")[1] || "").split("::")[1] || undefined;
- modifier = modifier === "element" ? "outerHTML" : "innerHTML";
- return { url, selector, modifier };
+ return { url, selector };
},
_ajaxDataTypeHandlers: {
- html(text, url, selector, modifier) {
- const tmp = document.createElement("div");
+ html(text, url, selector) {
+ let tmp = document.createElement("div");
tmp.innerHTML = text;
if (selector) {
- const el = tmp.querySelector(selector);
- return el ? el[modifier] : "";
+ tmp = tmp.querySelector(selector);
}
- return tmp.innerHTML;
+ return tmp?.innerHTML || "";
},
- // eslint-disable-next-line no-unused-vars
- async markdown(text, url, selector, modifier) {
+ async markdown(text, url, selector) {
const pat_markdown = await import("../markdown/markdown");
const pat = pat_markdown.default.init($("
"));
const cfg = { url };
diff --git a/src/pat/tooltip/tooltip.test.js b/src/pat/tooltip/tooltip.test.js
index 98be4105b..20e3c0820 100644
--- a/src/pat/tooltip/tooltip.test.js
+++ b/src/pat/tooltip/tooltip.test.js
@@ -1409,150 +1409,23 @@ this will be extracted.
});
});
- describe("::element modifier support", () => {
- it("ajax mode: it fetches the outerHTML with the ::element modifier", async (done) => {
- global.fetch = jest
- .fn()
- .mockImplementation(
- mockFetch('
External content
')
- );
-
- const $el = testutils.createTooltip({
- data: "source: ajax; trigger: click",
- href: "http://test.com/#outer::element",
- });
- new pattern($el);
- await utils.timeout(1);
-
- testutils.click($el);
- await utils.timeout(1); // wait a tick for async fetch
-
- expect(
- document.querySelector(".tippy-box .tippy-content").innerHTML
- ).toBe('
External content
');
-
- global.fetch.mockClear();
- delete global.fetch;
-
- done();
- });
-
- it("ajax mode: it fetches the innerHTML without the ::element modifier", async (done) => {
- global.fetch = jest
- .fn()
- .mockImplementation(
- mockFetch('
External content
')
- );
-
- const $el = testutils.createTooltip({
- data: "source: ajax; trigger: click",
- href: "http://test.com/#outer",
- });
- new pattern($el);
- await utils.timeout(1);
-
- testutils.click($el);
- await utils.timeout(1); // wait a tick for async fetch
-
- expect(
- document.querySelector(".tippy-box .tippy-content").innerHTML
- ).toBe("External content");
-
- global.fetch.mockClear();
- delete global.fetch;
-
- done();
- });
-
- it("local content: it uses the outerHTML with the ::element modifier", async (done) => {
- const content = document.createElement("div");
- content.setAttribute("id", "local-content");
- content.innerHTML = '
okay';
- document.body.appendChild(content);
-
- const $el = testutils.createTooltip({
- data: "source: ajax; trigger: click",
- href: "#local-content::element",
- });
- new pattern($el);
- await utils.timeout(1);
-
- testutils.click($el);
- await utils.timeout(1); // wait a tick for async fetch
-
- expect(
- document.querySelector(
- ".tippy-box .tippy-content #local-content"
- )
- ).toBeTruthy();
-
- done();
- });
-
- it("local content: it uses the innerHTML without the ::element modifier", async (done) => {
- const content = document.createElement("div");
- content.setAttribute("id", "local-content");
- content.innerHTML = '
okay';
- document.body.appendChild(content);
-
- const $el = testutils.createTooltip({
- data: "source: ajax; trigger: click",
- href: "#local-content",
- });
- new pattern($el);
- await utils.timeout(1);
-
- testutils.click($el);
- await utils.timeout(1); // wait a tick for async fetch
-
- expect(
- document.querySelector(
- ".tippy-box .tippy-content #local-content"
- )
- ).toBeFalsy();
-
- expect(
- document.querySelector(".tippy-box .tippy-content .testinner")
- ).toBeTruthy();
-
- done();
- });
- });
-
describe("URL splitting", () => {
it("it extracts the correct parts from any url", async (done) => {
const $el = testutils.createTooltip({});
const instance = new pattern($el);
await utils.timeout(1);
- let parts = instance.get_url_parts(
- "https://text.com/#selector::modifier"
- );
- expect(parts.url === "https://text.com/").toBeTruthy();
- expect(parts.selector === "#selector").toBeTruthy();
- expect(parts.modifier === "innerHTML").toBeTruthy();
-
- parts = instance.get_url_parts(
- "https://text.com/#selector::element"
- );
+ let parts = instance.get_url_parts("https://text.com/#selector");
expect(parts.url === "https://text.com/").toBeTruthy();
expect(parts.selector === "#selector").toBeTruthy();
- expect(parts.modifier === "outerHTML").toBeTruthy();
-
- parts = instance.get_url_parts("#selector::element");
- expect(typeof parts.url === "undefined").toBeTruthy();
- expect(parts.selector === "#selector").toBeTruthy();
- expect(parts.modifier === "outerHTML").toBeTruthy();
parts = instance.get_url_parts("#selector");
expect(typeof parts.url === "undefined").toBeTruthy();
expect(parts.selector === "#selector").toBeTruthy();
- expect(parts.modifier === "innerHTML").toBeTruthy();
parts = instance.get_url_parts("https://text.com/");
expect(parts.url === "https://text.com/").toBeTruthy();
expect(typeof parts.selector === "undefined").toBeTruthy();
- expect(parts.modifier === "innerHTML").toBeTruthy();
done();
});