Merge pull request #11 from jendave/hover-fix

merge in Hover fix
jendave · Jun 22, 2024 · 9364344 · 9364344
2 parents 66d53fa + db5eea7
commit 9364344
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [2.1.0](https://github.com/jendave/token-note-hover/commits/main) (2024-06-21)
+
+* The tooltip will now close when the pointer is not hovering over the token nor the tooltip. Previously, the tooltip would only close if the pointer hovered the tooltip, then moved off.
+* The delay for the opening and closing of the tooltip can be adjusted.
+
 ## [2.0.3](https://github.com/jendave/token-note-hover/commits/main) (2024-06-21)
 
 * Added support for [Twodsix - Cepheus & Traveller](https://foundryvtt.com/packages/twodsix).

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,71 +10,71 @@
         "author": "",
         "contributors": [],
         "imports": {
-            "#runtime/*": "@typhonjs-fvtt/runtime/*",
-            "#standard/*": "@typhonjs-fvtt/svelte-standard/*"
+                "#runtime/*": "@typhonjs-fvtt/runtime/*",
+                "#standard/*": "@typhonjs-fvtt/svelte-standard/*"
         },
         "dependencies": {
-            "@fortawesome/fontawesome-svg-core": "^6.5.1",
-            "@fortawesome/free-solid-svg-icons": "^6.5.1",
-            "@fortawesome/react-fontawesome": "^0.2.0",
-            "@rollup/plugin-node-resolve": "^15.2.3",
-            "@typhonjs-fvtt/runtime": "^0.1.2",
-            "@typhonjs-fvtt/svelte-standard": "^0.1.0",
-            "moment": "^2.30.1",
-            "svelte": "^4.2.12",
-            "svelte-select": "^5.8.3",
-            "svelte-virtual-scroll-list": "^1.3.0"
+                "@fortawesome/fontawesome-svg-core": "^6.5.1",
+                "@fortawesome/free-solid-svg-icons": "^6.5.1",
+                "@fortawesome/react-fontawesome": "^0.2.0",
+                "@rollup/plugin-node-resolve": "^15.2.3",
+                "@typhonjs-fvtt/runtime": "^0.1.2",
+                "@typhonjs-fvtt/svelte-standard": "^0.1.0",
+                "moment": "^2.30.1",
+                "svelte": "^4.2.12",
+                "svelte-select": "^5.8.3",
+                "svelte-virtual-scroll-list": "^1.3.0"
         },
         "devDependencies": {
-            "@babel/eslint-parser": "^7.23.10",
-            "@foundryvtt/foundryvtt-cli": "^1.0.2",
-            "@rollup/plugin-node-resolve": "^15.2.3",
-            "@typescript-eslint/eslint-plugin": "^7.1.1",
-            "@typhonjs-config/eslint-config": "^0.6.3",
-            "@typhonjs-fvtt/eslint-config-foundry.js": "^0.8.0",
-            "eslint": "^8.57.0",
-            "eslint-config-airbnb-base": "^15.0.0",
-            "eslint-config-prettier": "^9.1.0",
-            "eslint-plugin-jsdoc": "^46.10.1",
-            "eslint-plugin-prettier": "^5.1.3",
-            "fancy-log": "^2.0.0",
-            "husky": "^8.0.3",
-            "jquery": "^3.7.1",
-            "jsdoc": "^4.0.2",
-            "less": "^4.2.0",
-            "less-watch-compiler": "^1.16.3",
-            "lint-staged": "^13.3.0",
-            "prettier": "^3.2.5",
-            "rollup": "^3.29.4",
-            "sass": "^1.71.1",
-            "svelte-dnd-action": "^0.9.40",
-            "svelte-preprocess": "^5.1.3",
-            "vite": "^4.5.3",
-            "vite-plugin-clean": "^1.0.0",
-            "vite-plugin-run": "^0.5.1",
-            "vite-plugin-static-copy": "^0.17.0",
-            "yargs": "^17.7.2"
+                "@babel/eslint-parser": "^7.23.10",
+                "@foundryvtt/foundryvtt-cli": "^1.0.2",
+                "@rollup/plugin-node-resolve": "^15.2.3",
+                "@typescript-eslint/eslint-plugin": "^7.1.1",
+                "@typhonjs-config/eslint-config": "^0.6.3",
+                "@typhonjs-fvtt/eslint-config-foundry.js": "^0.8.0",
+                "eslint": "^8.57.0",
+                "eslint-config-airbnb-base": "^15.0.0",
+                "eslint-config-prettier": "^9.1.0",
+                "eslint-plugin-jsdoc": "^46.10.1",
+                "eslint-plugin-prettier": "^5.1.3",
+                "fancy-log": "^2.0.0",
+                "husky": "^8.0.3",
+                "jquery": "^3.7.1",
+                "jsdoc": "^4.0.3",
+                "less": "^4.2.0",
+                "less-watch-compiler": "^1.16.3",
+                "lint-staged": "^13.3.0",
+                "prettier": "^3.2.5",
+                "rollup": "^3.29.4",
+                "sass": "^1.71.1",
+                "svelte-dnd-action": "^0.9.40",
+                "svelte-preprocess": "^5.1.3",
+                "vite": "^4.5.3",
+                "vite-plugin-clean": "^1.0.0",
+                "vite-plugin-run": "^0.5.1",
+                "vite-plugin-static-copy": "^0.17.0",
+                "yargs": "^17.7.2"
         },
         "browserslist": [
-            ">5%",
-            "not IE 11"
+                ">5%",
+                "not IE 11"
         ],
         "scripts": {
-            "build": "node ./utils/clean.mjs && vite build",
-            "build:watch": "node ./utils/clean.mjs && vite build --watch --mode development",
-            "build:watchWithDb": "node ./utils/clean.mjs && npm run build:db && vite build --watch --mode development",
-            "dev": "vite serve",
-            "build:clean": "node ./utils/packs.mjs package clean",
-            "build:db": "node ./utils/packs.mjs package pack",
-            "build:json": "node ./utils/packs.mjs package unpack",
-            "eslint": "eslint .",
-            "prepare": "husky install",
-            "prettier-format": "prettier --config .prettierrc.json --write \"./src/**/*.{js,mjs,json,scss,css}\"",
-            "lint": "eslint --ext .js ./src",
-            "lint:fix": "eslint --ext .js ./src --fix"
+                "build": "node ./utils/clean.mjs && vite build",
+                "build:watch": "node ./utils/clean.mjs && vite build --watch --mode development",
+                "build:watchWithDb": "node ./utils/clean.mjs && npm run build:db && vite build --watch --mode development",
+                "dev": "vite serve",
+                "build:clean": "node ./utils/packs.mjs package clean",
+                "build:db": "node ./utils/packs.mjs package pack",
+                "build:json": "node ./utils/packs.mjs package unpack",
+                "eslint": "eslint .",
+                "prepare": "husky install",
+                "prettier-format": "prettier --config .prettierrc.json --write \"./src/**/*.{js,mjs,json,scss,css}\"",
+                "lint": "eslint --ext .js ./src",
+                "lint:fix": "eslint --ext .js ./src --fix",
+                "docs": "jsdoc -r ./src"
         },
         "lint-staged": {
-            "*.{js,css}": "prettier --write"
+                "*.{js,css}": "prettier --write"
         }
-    }
-
+}
diff --git a/src/languages/en.json b/src/languages/en.json
@@ -35,10 +35,14 @@
         "Name": "Tooltip Smart Placement ",
         "Hint": "Dynamic placement of the tooltips to stay inside the browser viewport."
       },
-      "TooltipDelay": {
-        "Name": "Tooltip Delay",
+      "TooltipOpenDelay": {
+        "Name": "Tooltip Open Delay",
         "Hint": "Length of delay before the token note tooltip appears (in milliseconds)."
       },
+      "TooltipCloseDelay": {
+        "Name": "Tooltip Close Delay",
+        "Hint": "Length of delay before the token note tooltip closes (in milliseconds)."
+      },
       "TooltipColor": {
         "Name": "Tooltip Theme",
         "Hint": "The color theme of the token note tooltip. `System` will use the game system theme.",

diff --git a/src/module.js b/src/module.js
@@ -2,6 +2,28 @@ import CONSTANTS from './scripts/constants';
 import registerSettings from './scripts/settings';
 import TokenNoteHoverHUD from './scripts/TokenNoteHoverHUD';
 
+// eslint-disable-next-line no-unused-vars
+/**
+ * OnMouseOver
+ *
+ * @param {*} event
+ */
+function onMouseOver(event) {
+  canvas.hud.tokenNoteHover.isHovered = true;
+  // console.log(`isHovered module.js:  ${canvas.hud.tokenNoteHover.hover}`);
+}
+
+// eslint-disable-next-line no-unused-vars
+/**
+ * onMouseLeave
+ *
+ * @param {*} event
+ */
+function onMouseLeave(event) {
+  canvas.hud.tokenNoteHover.isHovered = false;
+  // console.log(`isHovered module.js:  ${canvas.hud.tokenNoteHover.hover}`);
+}
+
 /* -------------------------------------------------------------------------- */
 /*                                    Hooks                                   */
 /* -------------------------------------------------------------------------- */
@@ -16,6 +38,7 @@ Hooks.once('init', () => {
 /**
  * Hook on render HUD
  */
+// eslint-disable-next-line no-unused-vars
 Hooks.on('renderHeadsUpDisplay', (app, html, data) => {
   html.append('<template id="token-note-hover"></template>');
   canvas.hud.tokenNoteHover = new TokenNoteHoverHUD();
@@ -27,7 +50,14 @@ Hooks.on('renderHeadsUpDisplay', (app, html, data) => {
 Hooks.on('hoverToken', (note, hovered) => {
   if (game.settings.get(CONSTANTS.MODULE_ID, 'hoverEnabled')) {
     const ownershipPermissionsRequired = game.settings.get(CONSTANTS.MODULE_ID, 'ownershipPermissionsRequired');
-    const tooltipDelay = game.settings.get(CONSTANTS.MODULE_ID, 'tooltipDelay');
+    const tooltipOpenDelay = game.settings.get(CONSTANTS.MODULE_ID, 'tooltipOpenDelay');
+    const tooltipCloseDelay = game.settings.get(CONSTANTS.MODULE_ID, 'tooltipCloseDelay');
+
+    if (!hovered) {
+      if (!canvas.hud.tokenNoteHover.hover) {
+        setTimeout(() => canvas.hud.tokenNoteHover.hide(), tooltipCloseDelay);
+      }
+    }
 
     if (hovered) {
       setTimeout(() => {
@@ -36,8 +66,17 @@ Hooks.on('hoverToken', (note, hovered) => {
             || note.actor.ownership.default === -1)) {
           canvas.hud.tokenNoteHover.bind(note);
         }
-      }, tooltipDelay);
+      }, tooltipOpenDelay);
     }
   }
+
+  const element = document.querySelector('#container.token-note-hover-hud-container');
+
+  if (element) {
+    // console.log(`element module.js: ${element}`);
+    element.addEventListener('mouseover', onMouseOver);
+    element.addEventListener('mouseleave', onMouseLeave);
+  }
+
   return canvas.hud.tokenNoteHover.clear();
 });
diff --git a/src/scripts/TokenNoteHoverHUD.js b/src/scripts/TokenNoteHoverHUD.js
@@ -1,18 +1,42 @@
 import CONSTANTS from './constants';
 
 /**
- * @class TokenNoteHoverHUD
- *
  * A HUD extension that shows the Note preview
+ *
+ * @export
+ * @class TokenNoteHoverHUD
+ * @typedef {TokenNoteHoverHUD}
+ * @extends {BasePlaceableHUD}
  */
 export default class TokenNoteHoverHUD extends BasePlaceableHUD {
   constructor(note, options) {
     super(note, options);
     this.data = note;
+    this.hover = false;
+  }
+
+  /**
+   * Is element hovered over
+   *
+   * @type {boolean}
+   */
+  get isHovered() {
+    return this.hover;
+  }
+
+  /**
+   * Set if element hovered over
+   */
+  set isHovered(value) {
+    this.hover = value;
   }
 
   /**
    * Retrieve and override default options for this application
+   *
+   * @static
+   * @readonly
+   * @type {*}
    */
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
@@ -26,6 +50,9 @@ export default class TokenNoteHoverHUD extends BasePlaceableHUD {
 
   /**
    * Get data for template
+   *
+   * @async
+   * @returns {unknown}
    */
   async getData() {
     const data = super.getData();
@@ -238,6 +265,7 @@ export default class TokenNoteHoverHUD extends BasePlaceableHUD {
                 async: true,
               });
             } else {
+              // eslint-disable-next-line max-len
               tempContent = (await TextEditor.enrichHTML(actor.system.details.biography.appearance, {
                 secrets: actorIsOwner,
                 documents: true,
@@ -501,6 +529,7 @@ export default class TokenNoteHoverHUD extends BasePlaceableHUD {
 
     let elementToTooltip = this.element;
     if (!elementToTooltip.document) {
+      // eslint-disable-next-line no-undef
       elementToTooltip = $(elementToTooltip);
     }
 
@@ -541,10 +570,14 @@ export default class TokenNoteHoverHUD extends BasePlaceableHUD {
         tooltipColor = 'default';
       }
     }
+
+    const tooltipCloseDelay = game.settings.get(CONSTANTS.MODULE_ID, 'tooltipCloseDelay');
+
     const tooltipPopupClass = tooltipColor
       ? `token-note-hover-hud-tooltip-${tooltipColor}`
       : 'token-note-hover-hud-tooltip-default';
 
+    // eslint-disable-next-line no-undef
     const contentTooltip = $(this.contentTooltip);
 
     elementToTooltip.data('powertipjq', contentTooltip);
@@ -591,12 +624,24 @@ export default class TokenNoteHoverHUD extends BasePlaceableHUD {
       // (cross the gap between the element and the tooltip div) for mouseOnToPopup tooltips.
       // And, second, it lets the cursor briefly leave the element and return without causing
       // the whole fade-out, intent test, and fade-in cycle to happen.
-      closeDelay: 100,
+      closeDelay: tooltipCloseDelay,
 
       // (default: 100) Hover intent polling interval in milliseconds.
       intentPollInterval: 100,
     });
 
+    // eslint-disable-next-line no-undef
     $.powerTip.show(elementToTooltip);
   }
 }
+
+// eslint-disable-next-line func-names
+TokenNoteHoverHUD.prototype.hide = function () {
+  const element = document.querySelector('#container.token-note-hover-hud-container');
+  // console.log(`element TokenNoteHoverHUD.js: ${element}`);
+
+  if (element && !this.isHovered) {
+    // eslint-disable-next-line no-undef
+    $.powerTip.hide();
+  }
+};
diff --git a/src/scripts/constants.js b/src/scripts/constants.js
@@ -1,3 +1,7 @@
+/**
+ * Constants for the module
+ *
+ */
 const CONSTANTS = {
   MODULE_ID: 'token-note-hover',
   ELEMENT_ID: 'token-note-hover',