-
Notifications
You must be signed in to change notification settings - Fork 34
/
ChatEmojis.user.js
173 lines (156 loc) · 6.54 KB
/
ChatEmojis.user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
// ==UserScript==
// @name Chat Emojis
// @description Allows users to insert emojis into chat. If chat message contains just an emoji, increase display size
// @homepage https://github.com/samliew/SO-mod-userscripts
// @author Samuel Liew
// @version 2.0.13
//
// @match https://chat.stackoverflow.com/rooms/*
// @match https://chat.stackexchange.com/rooms/*
// @match https://chat.meta.stackexchange.com/rooms/*
//
// @match https://chat.stackoverflow.com/transcript/*
// @match https://chat.stackexchange.com/transcript/*
// @match https://chat.meta.stackexchange.com/transcript/*
//
// @match https://chat.stackoverflow.com/users/*?tab=recent*
// @match https://chat.stackexchange.com/users/*?tab=recent*
// @match https://chat.meta.stackexchange.com/users/*?tab=recent*
//
// @match https://chat.stackoverflow.com/users/*?tab=replies*
// @match https://chat.stackexchange.com/users/*?tab=replies*
// @match https://chat.meta.stackexchange.com/users/*?tab=replies*
//
// @require https://raw.githubusercontent.com/samliew/SO-mod-userscripts/master/lib/se-ajax-common.js
// @require https://raw.githubusercontent.com/samliew/SO-mod-userscripts/master/lib/common.js
// ==/UserScript==
/* globals StackExchange, jQuery */
/// <reference types="./globals" />
'use strict';
// emojionearea - https://github.com/mervick/emojionearea/tree/version2
const libCdn = 'https://cdn.jsdelivr.net/gh/mervick/emojionearea@2';
// Emoji regex - https://stackoverflow.com/a/41164587
const emojiRegex = /^(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])$/;
/**
* @summary Find and mark messages that contain only emojis using emojiRegex
*/
const findEmojiMessages = function () {
$('.message .content').not('.js-emoji-checked').addClass('js-emoji-checked').filter(function (i, v) {
const text = v.textContent.trim() || '';
return text && text.length <= 2 && emojiRegex.test(text);
}).addClass('msg-emoji');
}
function initEmojiPicker() {
// Load emojionearea script and init emoji picker on chat field
$.getCachedScript(`${libCdn}/js/emojionearea.min.js`, function () {
const chatfield = document.getElementById('input');
const el = $(chatfield).emojioneArea({
template: "<editor/><filters/><tabs/>",
standalone: true,
hideSource: false,
autoHideFilters: true,
events: {
filter_click: function (filter, event) {
// Add labels to emojis
$('.emojionearea-tab:visible i.emojibtn').each(function (i, el) {
$(this).attr('title', el.children[0].dataset.name.replace(/(^:|:$)/g, ''));
});
},
'emojibtn_click': function (button, event) {
// Add emoji to chat field
const emoji = el.get(0).emojioneArea.getText();
chatfield.value += emoji;
chatfield.focus();
},
},
});
// Close events when open
$(document).on('keyup', function (evt) {
if (evt.keyCode === 27 && !$('.emojionearea-filters').hasClass('ea-hidden')) { // esc
$('.emojionearea-button').trigger('click');
}
}).on('keydown click focus', '#input, #chat, #sidebar', function (evt) {
if (!$('.emojionearea-filters').hasClass('ea-hidden')) {
$('.emojionearea-button').trigger('click');
}
});
});
}
// Append styles
addExternalStylesheet(`${libCdn}/css/emojionearea.min.css`);
addStylesheet(`
#bubble {
/* Relative to position emoji picker */
position: relative;
height: 78px;
text-align: left;
}
#footer-legal {
/* Needs repositioning due to #bubble relative */
position: absolute;
bottom: 9px;
right: 0;
}
.content.msg-emoji {
font-size: 2.2em;
line-height: 1.3;
}
/* Override Plugin CSS */
.emojionearea .emojionearea-editor {
min-height: 88px;
height: 88px;
padding: 6px 28px 6px 6px;
}
.emojionearea.has-button {
position: absolute !important;
top: 0;
right: 0;
}
.emojionearea.has-button .emojionearea-filters,
.emojionearea.has-button .emojionearea-tabs {
top: initial;
left: initial;
right: 0;
bottom: 100%;
width: 450px;
}
.emojionearea.has-button .emojionearea-filters {
bottom: calc(100% + 138px);
}
.emojionearea .emojionearea-button {
position: absolute;
top: 0;
right: 0;
width: 18px;
height: 18px;
padding: 4px;
margin: 0;
border: none;
background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTYg%0D%0ANTEyIj48cGF0aCBkPSJNMjQ4IDhDMTExIDggMCAxMTkgMCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0%0D%0AOC0xMTEgMjQ4LTI0OFMzODUgOCAyNDggOHptMCA0NjRjLTExOS4xIDAtMjE2LTk2LjktMjE2LTIx%0D%0ANlMxMjguOSA0MCAyNDggNDBzMjE2IDk2LjkgMjE2IDIxNi05Ni45IDIxNi0yMTYgMjE2em05MC4y%0D%0ALTE0Ni4yQzMxNS44IDM1Mi42IDI4Mi45IDM2OCAyNDggMzY4cy02Ny44LTE1LjQtOTAuMi00Mi4y%0D%0AYy01LjctNi44LTE1LjgtNy43LTIyLjUtMi02LjggNS43LTcuNyAxNS43LTIgMjIuNUMxNjEuNyAz%0D%0AODAuNCAyMDMuNiA0MDAgMjQ4IDQwMHM4Ni4zLTE5LjYgMTE0LjgtNTMuOGM1LjctNi44IDQuOC0x%0D%0ANi45LTItMjIuNS02LjgtNS42LTE2LjktNC43LTIyLjYgMi4xek0xNjggMjQwYzE3LjcgMCAzMi0x%0D%0ANC4zIDMyLTMycy0xNC4zLTMyLTMyLTMyLTMyIDE0LjMtMzIgMzIgMTQuMyAzMiAzMiAzMnptMTYw%0D%0AIDBjMTcuNyAwIDMyLTE0LjMgMzItMzJzLTE0LjMtMzItMzItMzItMzIgMTQuMy0zMiAzMiAxNC4z%0D%0AIDMyIDMyIDMyeiIvPjwvc3ZnPg==') center/16px no-repeat;
background-size: 16px;
font-size: 0;
}
.emojionearea .emojionearea-button:hover {
background-color: transparent;
}
.emojionearea .emojionearea-button.placeholder:before,
.emojionearea .emojionearea-button:after,
.emojionearea .emojionearea-button img {
display: none;
}
`); // end stylesheet
// On script run
(function init() {
// If live chat and not mobile chat UI
if (/\/rooms\/\d+\//.test(location.pathname) && !document.body.classList.contains('mob')) {
// Init emoji picker
initEmojiPicker();
// Occasionally, look for new single-emoji messages and apply class
setInterval(findEmojiMessages, 1000);
}
// Other pages (e.g. transcript, conversations, recent, etc.)
else {
findEmojiMessages();
$(document).ajaxStop(findEmojiMessages);
}
})();