From b9a8c0fc463aa669854c2361e099d97d78b5a212 Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Thu, 18 Mar 2021 18:15:05 +0100
Subject: [PATCH] bugfix: move the emoji picker into the document body so it's
well placed
---
src/plugins/sib-reactions.js | 20 +++++---------------
1 file changed, 5 insertions(+), 15 deletions(-)
diff --git a/src/plugins/sib-reactions.js b/src/plugins/sib-reactions.js
index 8ba3be9..938b744 100644
--- a/src/plugins/sib-reactions.js
+++ b/src/plugins/sib-reactions.js
@@ -260,8 +260,9 @@ converse.plugins.add('sib-reactions', {
});
});
- // Append picker to the message
- this.appendChild(picker);
+ // Append picker to the document
+ // Note: It must be the body since the shadowRoot is misplaced when switching room (?)
+ document.body.appendChild(picker);
// Position the emoji picker according to the current target
// TODO: Clean this part, maybe look for a lib that does the job
@@ -272,19 +273,8 @@ converse.plugins.add('sib-reactions', {
let rectTop = tr.top + window.pageYOffset - docEl.clientTop;
let rectLeft = tr.left + window.pageXOffset - docEl.clientLeft;
- // Fix the position if contained in a shadowRoot
- // TODO: Should iterate through all the parent instances
- const root = _converse.root;
- if (root.nodeType === 11) {
- const rcr = root.getRootNode().host?.getBoundingClientRect();
- if (rcr) {
- rectLeft -= rcr.left;
- rectTop -= rcr.top;
- }
- }
-
picker.style.position = 'fixed';
- picker.style.zIndex = '999';
+ picker.style.zIndex = '9999';
picker.style.margin = '10px';
picker.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
picker.style.borderRadius = '3px';
@@ -294,7 +284,7 @@ converse.plugins.add('sib-reactions', {
if (window.innerWidth - (rectLeft + tr.width) > pr.width) {
picker.style.left = `${rectLeft + tr.width}px`;
} else {
- picker.style.right = `${rectLeft}px`;
+ picker.style.right = `${window.innerWidth - rectLeft}px`;
}
// Add an offset so it's a bit higher than the
--
GitLab