From 015fcad3f99cbd71e18db6f1820fcc38a77e1071 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Sun, 6 Dec 2020 02:15:17 +0100 Subject: [PATCH] pat-tooltip: Remove ::element modifier for references to tooltip content. Remove unannounced (not in changelog) feature which allowed for ::element modifiers in href references to tooltip content. Likewise as in pat-inject ::element modifiers selected the element itself with el.outerHTML instead of el.innerHTML. This was problematic with rebasing URLs in pat-inject. --- src/pat/tooltip/documentation.md | 6 -- src/pat/tooltip/index.html | 62 --------------- src/pat/tooltip/tooltip.js | 34 ++++---- src/pat/tooltip/tooltip.test.js | 129 +------------------------------ 4 files changed, 15 insertions(+), 216 deletions(-) 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 @@

works with other patterns

Like - -

works with other patterns / pt2

- This opens a - Tooltip form with other patterns.
Liked
-
-
-
- -
-
- - -
-
-
  • - Open a modal. -
    • -
    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(); });