From 915d36867ccb01b571b65221c9e47e4278159cbe Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Tue, 6 Jun 2017 03:27:30 +0200
Subject: [PATCH] Fix emoji keyboard position and leaking outside the window
---
Resources/Plugins/emoji-keyboard/browser.js | 53 +++++++++++++++------
1 file changed, 39 insertions(+), 14 deletions(-)
diff --git a/Resources/Plugins/emoji-keyboard/browser.js b/Resources/Plugins/emoji-keyboard/browser.js
index 080c4a38..cfea32aa 100644
--- a/Resources/Plugins/emoji-keyboard/browser.js
+++ b/Resources/Plugins/emoji-keyboard/browser.js
@@ -58,11 +58,17 @@ enabled(){
// keyboard generation
this.currentKeyboard = null;
+ this.currentSpanner = null;
var hideKeyboard = () => {
$(this.currentKeyboard).remove();
this.currentKeyboard = null;
+ $(this.currentSpanner).remove();
+ this.currentSpanner = null;
+
+ this.composePanelScroller.trigger("scroll");
+
$(".emoji-keyboard-popup-btn").removeClass("is-selected");
$(".js-compose-text").first().focus();
};
@@ -156,7 +162,7 @@ enabled(){
outer.appendChild(search);
outer.appendChild(keyboard);
outer.appendChild(skintones);
- document.body.appendChild(outer);
+ $(".js-app").append(outer);
skintones.addEventListener("click", function(e){
if (e.target.hasAttribute("data-tone")){
@@ -185,17 +191,17 @@ enabled(){
this.currentKeyboard = outer;
selectSkinTone(this.selectedSkinTone);
+
+ this.currentSpanner = document.createElement("div");
+ this.currentSpanner.style.height = ($(this.currentKeyboard).height()-10)+"px";
+ $(".emoji-keyboard-popup-btn").parent().after(this.currentSpanner);
+
+ this.composePanelScroller.trigger("scroll");
};
- this.prevTryPasteImage = window.TDGF_tryPasteImage;
- var prevTryPasteImageF = this.prevTryPasteImage;
-
- window.TDGF_tryPasteImage = function(){
- if (me.currentKeyboard){
- hideKeyboard();
- }
-
- return prevTryPasteImageF.apply(this, arguments);
+ var getKeyboardTop = () => {
+ let button = $(".emoji-keyboard-popup-btn");
+ return button.offset().top+button.outerHeight()+me.composePanelScroller.scrollTop()+8;
};
// event handlers
@@ -206,15 +212,19 @@ enabled(){
$(this).blur();
}
else{
- var pos = $(this).offset();
- me.generateKeyboard($(".js-compose-text").first(), pos.left, pos.top+$(this).outerHeight()+8);
-
+ me.generateKeyboard($(".js-compose-text").first(), $(this).offset().left, getKeyboardTop());
$(this).addClass("is-selected");
}
e.stopPropagation();
};
+ this.composerScrollEvent = function(e){
+ if (me.currentKeyboard){
+ me.currentKeyboard.style.marginTop = (-$(this).scrollTop())+"px";
+ }
+ };
+
this.documentClickEvent = function(e){
if (me.currentKeyboard && !e.target.classList.contains("js-compose-text")){
hideKeyboard();
@@ -227,12 +237,22 @@ enabled(){
e.stopPropagation();
}
};
+
+ this.uploadFilesEvent = function(e){
+ if (me.currentKeyboard){
+ me.currentKeyboard.style.top = getKeyboardTop()+"px";
+ }
+ }
}
ready(){
+ this.composePanelScroller = $(".js-compose-scroller", ".js-docked-compose").first().children().first();
+ this.composePanelScroller.on("scroll", this.composerScrollEvent);
+
$(".emoji-keyboard-popup-btn").on("click", this.emojiKeyboardButtonClickEvent);
$(document).on("click", this.documentClickEvent);
$(document).on("keydown", this.documentKeyEvent);
+ $(document).on("uiComposeImageAdded", this.uploadFilesEvent);
// HTML generation
@@ -338,12 +358,17 @@ disabled(){
$(this.currentKeyboard).remove();
}
- window.TDGF_tryPasteImage = this.prevTryPasteImage;
+ if (this.currentSpanner){
+ $(this.currentSpanner).remove();
+ }
+
+ this.composePanelScroller.off("scroll", this.composerScrollEvent);
$(".emoji-keyboard-popup-btn").off("click", this.emojiKeyboardButtonClickEvent);
$(".emoji-keyboard-popup-btn").remove();
$(document).off("click", this.documentClickEvent);
$(document).off("keydown", this.documentKeyEvent);
+ $(document).off("uiComposeImageAdded", this.uploadFilesEvent);
TD.mustaches["compose/docked_compose.mustache"] = this.prevComposeMustache;
}