From 97c865a1274112ef0c0e6e4e733f98dcc82d2ad1 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Mon, 14 Aug 2017 04:22:13 +0200
Subject: [PATCH] Make emoji editor only show after adding emoji, fix minor UI
issues
---
Resources/Plugins/emoji-keyboard/browser.js | 84 +++++++++++++++------
1 file changed, 60 insertions(+), 24 deletions(-)
diff --git a/Resources/Plugins/emoji-keyboard/browser.js b/Resources/Plugins/emoji-keyboard/browser.js
index b5a748f8..7ccb41dd 100644
--- a/Resources/Plugins/emoji-keyboard/browser.js
+++ b/Resources/Plugins/emoji-keyboard/browser.js
@@ -30,19 +30,25 @@ enabled(){
this.css = window.TDPF_createCustomStyle(this);
this.css.insert(".emoji-keyboard { position: absolute; width: 15.35em; background-color: white; border-radius: 1px; font-size: 24px; z-index: 9999 }");
+
this.css.insert(".emoji-keyboard-list { height: 10.14em; padding: 0.1em; box-sizing: border-box; overflow-y: auto }");
this.css.insert(".emoji-keyboard-list .separator { height: 26px }");
this.css.insert(".emoji-keyboard-list img { padding: 0.1em !important; width: 1em; height: 1em; vertical-align: -0.1em; cursor: pointer }");
+
this.css.insert(".emoji-keyboard-search { height: auto; padding: 4px 10px 8px; background-color: #292f33; border-radius: 1px 1px 0 0 }");
this.css.insert(".emoji-keyboard-search input { width: 100%; border-radius: 1px; }");
+
this.css.insert(".emoji-keyboard-skintones { height: 1.3em; text-align: center; background-color: #292f33; border-radius: 0 0 1px 1px }");
this.css.insert(".emoji-keyboard-skintones div { width: 0.8em; height: 0.8em; margin: 0.25em 0.1em; border-radius: 50%; display: inline-block; box-sizing: border-box; cursor: pointer }");
this.css.insert(".emoji-keyboard-skintones .sel { border: 2px solid rgba(0, 0, 0, 0.35); box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.65), 0 0 1px 0 rgba(255, 255, 255, 0.4) inset }");
this.css.insert(".emoji-keyboard-skintones :hover { border: 2px solid rgba(0, 0, 0, 0.25); box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 1px 0 rgba(255, 255, 255, 0.25) inset }");
- this.css.insert("#emoji-keyboard-tweet-input { padding: 2px 0 !important; line-height: 18px }");
+
+ this.css.insert("#emoji-keyboard-tweet-input { padding: 0 !important; line-height: 18px }");
this.css.insert("#emoji-keyboard-tweet-input img { padding: 0.1em !important; width: 1em; height: 1em; vertical-align: -0.25em }");
this.css.insert("#emoji-keyboard-tweet-input:empty::before { content: \"What's happening?\"; display: inline-block; color: #ced8de }");
- this.css.insert(".js-docked-compose .js-compose-text:not(.debug) { position: absolute; z-index: -9999; left: 0; opacity: 0 }");
+
+ this.css.insert(".js-docked-compose .compose-text-container.td-emoji-keyboard-swap .js-compose-text { position: absolute; z-index: -9999; left: 0; opacity: 0 }");
+ this.css.insert(".compose-text-container:not(.td-emoji-keyboard-swap) #emoji-keyboard-tweet-input { display: none; }");
// layout
@@ -211,6 +217,8 @@ enabled(){
};
var insertEmoji = (src, alt) => {
+ replaceEditor(true);
+
let sel = window.getSelection();
if (!sel.anchorNode || $(sel.anchorNode).closest("#emoji-keyboard-tweet-input").length === 0){
@@ -220,7 +228,7 @@ enabled(){
document.execCommand("insertHTML", false, `<img src="${src}" alt="${alt}">`);
};
- // event handlers
+ // general event handlers
this.emojiKeyboardButtonClickEvent = function(e){
if (me.currentKeyboard){
@@ -246,7 +254,7 @@ enabled(){
};
this.documentClickEvent = function(e){
- if (me.currentKeyboard && !e.target.classList.contains("compose-text")){
+ if (me.currentKeyboard && $(e.target).closest(".compose-text-container").length === 0){
hideKeyboard();
}
};
@@ -264,34 +272,55 @@ enabled(){
}
};
+ // editor event handlers
+
var prevOldInputVal = "";
+ var isEditorActive = false;
+
+ var migrateEditorText = function(){
+ let selStart = me.composeInputOrig[0].selectionStart;
+ let selEnd = me.composeInputOrig[0].selectionEnd;
+
+ me.composeInputNew.text(me.composeInputOrig.val());
+ me.composeInputNew.focus();
+
+ let sel = window.getSelection();
+ let range = document.createRange();
+ range.setStart(me.composeInputNew[0].firstChild, selStart);
+ range.setEnd(me.composeInputNew[0].firstChild, selEnd);
+
+ sel.removeAllRanges();
+ sel.addRange(range);
+ };
+
+ var replaceEditor = function(useCustom){
+ if (useCustom && !isEditorActive){
+ isEditorActive = true;
+ migrateEditorText();
+ }
+ else if (!useCustom && isEditorActive){
+ isEditorActive = false;
+ }
+ else return;
+
+ $(".compose-text-container", ".js-docked-compose").toggleClass("td-emoji-keyboard-swap", isEditorActive);
+ };
this.composeOldInputFocusEvent = function(){
- let ele = $(this);
- let val = ele.val();
+ if (!isEditorActive){
+ return;
+ }
+
+ let val = $(this).val();
if (val != prevOldInputVal){
- prevOldInputVal = val;
-
- setTimeout(function(){
- let selStart = ele[0].selectionStart;
- let selEnd = ele[0].selectionEnd;
-
- me.composeInputNew.text(val);
- me.composeInputNew.focus();
-
- let sel = window.getSelection();
- let range = document.createRange();
- range.setStart(me.composeInputNew[0].firstChild, selStart);
- range.setEnd(me.composeInputNew[0].firstChild, selEnd);
-
- sel.removeAllRanges();
- sel.addRange(range);
- }, 1);
+ setTimeout(migrateEditorText, 1);
}
else{
focusWithCaretAtEnd();
}
+
+ prevOldInputVal = val;
};
var allowedShortcuts = [ 65 /* A */, 67 /* C */, 86 /* V */, 89 /* Y */, 90 /* Z */ ];
@@ -325,14 +354,21 @@ enabled(){
me.composeInputOrig.val(prevOldInputVal = clone.text());
me.composeInputOrig.trigger("change");
+
+ if (prevOldInputVal.length === 0){
+ replaceEditor(false);
+ me.composeInputOrig.focus();
+ }
};
- this.composeInputPasteEvent = function(e){
+ this.composeInputPasteEvent = function(e){ // contenteditable with <img alt> handles copying just fine
e.preventDefault();
let text = e.originalEvent.clipboardData.getData("text/plain");
text && document.execCommand("insertText", false, text);
};
+
+ // TODO handle @ and hashtags
}
ready(){