From c96e0dae1cdb0c89e311c6240e47453d022d5fef Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 21 Jan 2021 12:45:10 +0100 Subject: [PATCH] pat tooltop: Change show/hide classes to less generic names. pat tooltip: Change show/hide classes to ``tooltip-active-click`` resp. ``tooltip-active-hover`` and ``tooltip-inactive``. Fixes: https://github.com/quaive/ploneintranet/issues/3723 --- CHANGES.md | 2 + src/pat/tooltip/tooltip.js | 24 +++++++----- src/pat/tooltip/tooltip.test.js | 69 +++++++++++++++++++++++++++------ 3 files changed, 74 insertions(+), 21 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 34e70465d..a8db4464d 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -18,6 +18,8 @@ The `polyfills` bundle can be injected on demand with the `polyfills-loader` script. - pat tooltip: Remove undocumented "souce: content-html" parameter. - pat tooltip: Remove undocumented "souce: auto" parameter. This parameter should not be used as it is not explicit enough and would lead to unintuitive behavior. +- pat tooltip: Change show/hide classes to ``tooltip-active-click`` resp. ``tooltip-active-hover`` and ``tooltip-inactive``. + Fixes: https://github.com/quaive/ploneintranet/issues/3723 - Remove outdated pre IE9 browser compatibility polyfill `core/compat`. - Remove unused `lib/htmlparser`. - Remove obsolete library `prefixfree`. diff --git a/src/pat/tooltip/tooltip.js b/src/pat/tooltip/tooltip.js index 66517bc53..f0b7d71ac 100644 --- a/src/pat/tooltip/tooltip.js +++ b/src/pat/tooltip/tooltip.js @@ -48,6 +48,9 @@ export default Base.extend({ canFetch: true, }, + active_class: "tooltip-active-hover", + inactive_class: "tooltip-inactive", + async init($el, opts) { const el = this.el; @@ -79,11 +82,6 @@ export default Base.extend({ el.removeAttribute("title"); } - if (this.options.markInactive) { - // Initially mark "inactive" - el.classList.add("inactive"); - } - if ( this.options.trigger === "click" && this.options.source === "ajax" @@ -94,6 +92,14 @@ export default Base.extend({ event.stopPropagation(); }); } + + if (this.options.trigger === "click") { + this.active_class = "tooltip-active-click"; + } + if (this.options.markInactive) { + // Initially mark as inactive + el.classList.add(this.inactive_class); + } }, parseOptionsForTippy(opts) { @@ -272,8 +278,8 @@ export default Base.extend({ } if (this.options.markInactive) { - this.el.classList.remove("inactive"); - this.el.classList.add("active"); + this.el.classList.remove(this.inactive_class); + this.el.classList.add(this.active_class); } if (this.options.class) { @@ -288,8 +294,8 @@ export default Base.extend({ _onHide() { if (this.options.markInactive) { - this.el.classList.remove("active"); - this.el.classList.add("inactive"); + this.el.classList.remove(this.active_class); + this.el.classList.add(this.inactive_class); } if ( diff --git a/src/pat/tooltip/tooltip.test.js b/src/pat/tooltip/tooltip.test.js index 20e3c0820..cfa181d32 100644 --- a/src/pat/tooltip/tooltip.test.js +++ b/src/pat/tooltip/tooltip.test.js @@ -699,8 +699,10 @@ describe("pat-tooltip", () => { let containers; - expect(el.classList.contains("active")).toBeFalsy(); - expect(el.classList.contains("inactive")).toBeTruthy(); + expect( + el.classList.contains("tooltip-active-click") + ).toBeFalsy(); + expect(el.classList.contains("tooltip-inactive")).toBeTruthy(); testutils.click($el); await utils.timeout(1); @@ -708,8 +710,10 @@ describe("pat-tooltip", () => { expect(spy_show).toHaveBeenCalled(); containers = document.querySelectorAll(".tippy-box"); expect(containers.length).toEqual(1); - expect(el.classList.contains("active")).toBeTruthy(); - expect(el.classList.contains("inactive")).toBeFalsy(); + expect( + el.classList.contains("tooltip-active-click") + ).toBeTruthy(); + expect(el.classList.contains("tooltip-inactive")).toBeFalsy(); testutils.click($el); @@ -721,8 +725,10 @@ describe("pat-tooltip", () => { // TODO: inspect, why container are not removed. //containers = document.querySelectorAll(".tippy-box"); //expect(containers.length).toEqual(0); - expect(el.classList.contains("active")).toBeFalsy(); - expect(el.classList.contains("inactive")).toBeTruthy(); + expect( + el.classList.contains("tooltip-active-click") + ).toBeFalsy(); + expect(el.classList.contains("tooltip-inactive")).toBeTruthy(); done(); }); @@ -745,8 +751,10 @@ describe("pat-tooltip", () => { let containers; - expect(el.classList.contains("active")).toBeFalsy(); - expect(el.classList.contains("inactive")).toBeFalsy(); + expect( + el.classList.contains("tooltip-active-click") + ).toBeFalsy(); + expect(el.classList.contains("tooltip-inactive")).toBeFalsy(); testutils.click($el); await utils.timeout(1); @@ -754,8 +762,10 @@ describe("pat-tooltip", () => { expect(spy_show).toHaveBeenCalled(); containers = document.querySelectorAll(".tippy-box"); expect(containers.length).toEqual(1); - expect(el.classList.contains("active")).toBeFalsy(); - expect(el.classList.contains("inactive")).toBeFalsy(); + expect( + el.classList.contains("tooltip-active-click") + ).toBeFalsy(); + expect(el.classList.contains("tooltip-inactive")).toBeFalsy(); testutils.click($el); @@ -767,8 +777,43 @@ describe("pat-tooltip", () => { // TODO: inspect, why container are not removed. //containers = document.querySelectorAll(".tippy-box"); //expect(containers.length).toEqual(0); - expect(el.classList.contains("active")).toBeFalsy(); - expect(el.classList.contains("inactive")).toBeFalsy(); + expect( + el.classList.contains("tooltip-active-click") + ).toBeFalsy(); + expect(el.classList.contains("tooltip-inactive")).toBeFalsy(); + + done(); + }); + it("when true and trigger is hover, toggles a different active class on the trigger", async (done) => { + const $el = testutils.createTooltip({ + data: "mark-inactive: true; trigger: hover", + }); + const el = $el[0]; + const instance = new pattern($el); + await utils.timeout(1); + + const spy_show = spyOn( + instance.tippy.props, + "onShow" + ).and.callThrough(); + + let containers; + + expect( + el.classList.contains("tooltip-active-hover") + ).toBeFalsy(); + expect(el.classList.contains("tooltip-inactive")).toBeTruthy(); + + testutils.mouseenter($el); + await utils.timeout(1); + + expect(spy_show).toHaveBeenCalled(); + containers = document.querySelectorAll(".tippy-box"); + expect(containers.length).toEqual(1); + expect( + el.classList.contains("tooltip-active-hover") + ).toBeTruthy(); + expect(el.classList.contains("tooltip-inactive")).toBeFalsy(); done(); });