v1.1.0

CHANGELOG.md

@@ -1,3 +1,12 @@
+# v1.1.0
+
+- *Fix* chat cards *sometimes* not being the correct size, when images were still being loaded, when rendering. (Solution is that the card will jump to full size, when finishing loading)
+- *Fix* some incompatibility with modules updating chat cards, resulting in repeated popups.
+  - Now the module correctly updates the shown notification of the card.
+  - If the update is done after the notification already disappeared, it will reappear.
+  - There are still some cases possible where this won't work properly, one is the combination of MidiQOL and Dice So Nice. While both alone do work nicely, both together won't result in the chat card being updated properly.
+- Moved the event listeners to use delegation instead of being bound to every card, to react to the updated nodes better.
+
 # v1.0.0
 
-**Initial release!**
+**Initial release!**

js/index.js

@@ -24,7 +24,7 @@ function findTarget(card, ev, messageId) {
 
   let target = document.elementFromPoint(x,y);
 
-  if (target && target.closest('.chat-message')?.dataset.messageId === messageId) return {target,x , y};
+  if (target && target.closest('.message')?.dataset.messageId === messageId) return {target,x , y};
   const targetRect = ev.target.getBoundingClientRect();
   // If click element is obscured, rasterize the target and test if some point is free
   // doing 10 steps in each direction, with a minimum of 5 px is some arbitrary number chosen, but i think its quite okayish in regards of accuracy and performance
@@ -36,7 +36,7 @@ function findTarget(card, ev, messageId) {
       x = hor - popupRect.left + cardRect.left;
       target = document.elementFromPoint(x,y)
 
-      if (target && target.closest('.chat-message')?.dataset.messageId === messageId) return {target, x, y};
+      if (target && target.closest('.message')?.dataset.messageId === messageId) return {target, x, y};
     }
   }
 
@@ -50,6 +50,7 @@ function delegateEvent(node, ev) {
   card.scrollIntoView();
   // Get target element on "real" chat-card
   const {target, x, y} = findTarget(card, ev, node.dataset.messageId);
+
   if (!target) return;
   // If for some reason wrong one was found.. just do nothing
   const event = new MouseEvent(ev.type, {
@@ -64,7 +65,9 @@ function delegateEvent(node, ev) {
   target.dispatchEvent(event);
 }
 
-function handleMouseEvent(node, ev) {
+function handleMouseEvent(ev) {
+  const node = ev.target.closest('.message');
+  if (!node) return;
   // activate chat
   const tabBtn = document.getElementById('sidebar-tabs').children[0];
   if (!tabBtn.classList.contains('active')) 
@@ -79,17 +82,23 @@ function handleMouseEvent(node, ev) {
 
 function addMessage(node) {
   const div = document.querySelector(`.${moduleName}`);
+  const messageId = node.dataset.messageId;
+
+  const oldNode = div.querySelector(`[data-message-id="${messageId}"]`);
+  if (oldNode) return updateMessage(node, oldNode);
   if (div.children.length >= maxMessages) div.firstElementChild.remove();
 
   div.appendChild(node);
-  TweenMax.from(node, 0.3, {height: 0, onComplete: () => removeMessage(node)});
-
-  node.addEventListener('click', (ev) => {
-    handleMouseEvent(node, ev);
+  TweenMax.from(node, 0.3, {height: 0, onComplete: () => {
+      node.style.height = "";
+      removeMessage(node);
+    }
   });
-  node.addEventListener('contextmenu', (ev) => {
-    handleMouseEvent(node, ev);
-  })
+}
+
+function updateMessage(newNode, oldNode) {
+  oldNode.parentNode?.replaceChild(newNode, oldNode);
+  removeMessage(newNode);
 }
 
 function removeMessage(node, {time = 0.3, delay = fadeOutDelay}={}) {
@@ -103,6 +112,14 @@ Hooks.on('renderChatLog', async (app, html) => {
   const chatTab = html[0];
   const div = document.body.appendChild(html[0].querySelector('#chat-log').cloneNode(true));
   div.classList.add(moduleName);
+
+  div.addEventListener('click', (ev) => {
+    handleMouseEvent(ev);
+  });
+  div.addEventListener('contextmenu', (ev) => {
+    handleMouseEvent(ev);
+  });
+
   Hooks.on('renderChatMessage', (app, html, options) => {
     if (chatTab.classList.contains('active') && !chatTab.closest('#sidebar').classList.contains('collapsed')) return;
     const newNode = html[0].cloneNode(true);

module.json

@@ -2,7 +2,7 @@
 	"name": "chat-notifications",
 	"title": "Hey, listen! - Chat Notifications",
 	"description": "This module shows notifications of the newest chat messages, when you're currently not viewing the chat tab.<br>Position, opacity, fade delay, ... is all customizable!",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"author": "Moerill",
 	"scripts": [
 		"greensock/dist/TweenMax.min.js"
@@ -14,6 +14,6 @@
 	"minimumCoreVersion": "0.6.6",
 	"compatibleCoreVersion": "0.7.2",
 	"manifest": "https://raw.githubusercontent.com/Moerill/fvtt-chat-notifications/master/module.json",
-	"download": "https://github.com/Moerill/fvtt-chat-notifications/releases/download/v1.0.0/v1.0.0.zip",
+	"download": "https://github.com/Moerill/fvtt-chat-notifications/releases/download/v1.1.0/v1.1.0.zip",
 	"url": "https://github.com/Moerill/fvtt-chat-notifications"
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "module-template",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1"