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: quaive/ploneintranet#3723

Author: thet

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`.

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 (

src/pat/tooltip/tooltip.test.js

@@ -699,17 +699,21 @@ 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);
 
                 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,17 +751,21 @@ 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);
 
                 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();
             });