From 7a8c760bcaa775c280e73f339826649492ca9606 Mon Sep 17 00:00:00 2001 From: NoRePercussions Date: Fri, 6 Oct 2023 17:11:35 -0400 Subject: [PATCH 1/4] Add selected :blob: emotes --- app/assets/javascripts/application.js | 1 + vendor/assets/javascripts/emotes.js | 35 +++++++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 vendor/assets/javascripts/emotes.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 6a05a2f6..72441cb2 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -18,3 +18,4 @@ //= require moment.min //= require fullcalendar.min //= require jquery.multi-select +//= require emotes diff --git a/vendor/assets/javascripts/emotes.js b/vendor/assets/javascripts/emotes.js new file mode 100644 index 00000000..ddce78cf --- /dev/null +++ b/vendor/assets/javascripts/emotes.js @@ -0,0 +1,35 @@ +let emoticons = { + ':party-blob:': 'https://emojis.slackmojis.com/emojis/images/1643514770/7808/party-blob.gif?1643514770', + ':blobsob:': 'https://emojis.slackmojis.com/emojis/images/1643514690/6921/blob_sob.png?1643514690', + ':blobtoiletspin:': 'https://github.com/thomplinds/custom-slack-emojis/blob/main/images/blobtoiletflush.gif?raw=true', + ':blobsad:': 'https://emojis.slackmojis.com/emojis/images/1643514688/6904/blob_sad.png?1643514688', + ':blob-spin:': 'https://emojis.slackmojis.com/emojis/images/1643515247/12652/blobspin.png?1643515247', + ':blob-go:': 'https://emojis.slackmojis.com/emojis/images/1643514683/6858/blob_go.png?1643514683', + ':blob_excited:': 'https://emojis.slackmojis.com/emojis/images/1643514936/9579/blob_excited.gif?1643514936', + ':blobeyes:': 'https://emojis.slackmojis.com/emojis/images/1643514682/6848/blob_eyes.png?1643514682', + ':blobfearful:': 'https://emojis.slackmojis.com/emojis/images/1643514682/6850/blob_fearful.png?1643514682', +}; + +$(function() { + // For each emote, + for (const [text, url] of Object.entries(emoticons)) { + // Find nodes with it + let text_nodes = $(`:contains("${text}")`).contents(); + + // Filter to text (type 3) nodes that definitely contain it + // (:contains doesn't guarantee this: https://stackoverflow.com/a/29418265) + text_nodes = text_nodes.filter(function() { + return this.nodeType === 3 && this.textContent.indexOf(text) > -1; + }); + + // replace the emote text with the img + text_nodes.replaceWith(function() { + return this.nodeValue.replace(RegExp(text, "g"), + // .emote-inline doesn't actually do anything + // height should end up roughly true line height + // alt text shows if image is not found and allows copy-paste + `${text}` + ); + }); + } +}) From 7f6aa2823c154fc2f6fe3ddc2add58818359e218 Mon Sep 17 00:00:00 2001 From: NoRePercussions Date: Fri, 6 Oct 2023 17:40:12 -0400 Subject: [PATCH 2/4] Documentation --- vendor/assets/javascripts/emotes.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/vendor/assets/javascripts/emotes.js b/vendor/assets/javascripts/emotes.js index ddce78cf..16a50635 100644 --- a/vendor/assets/javascripts/emotes.js +++ b/vendor/assets/javascripts/emotes.js @@ -1,4 +1,13 @@ -let emoticons = { +/* Adds selected emotes to all pages. + * Allows copy-paste to/from ABTech Slack + * + * Usage: + * ----- + * Just use the emotes in any text :blobeyes: + */ + + +let emotes = { ':party-blob:': 'https://emojis.slackmojis.com/emojis/images/1643514770/7808/party-blob.gif?1643514770', ':blobsob:': 'https://emojis.slackmojis.com/emojis/images/1643514690/6921/blob_sob.png?1643514690', ':blobtoiletspin:': 'https://github.com/thomplinds/custom-slack-emojis/blob/main/images/blobtoiletflush.gif?raw=true', @@ -11,24 +20,22 @@ let emoticons = { }; $(function() { - // For each emote, - for (const [text, url] of Object.entries(emoticons)) { - // Find nodes with it - let text_nodes = $(`:contains("${text}")`).contents(); + for (const [emote_text, url] of Object.entries(emotes)) { + let text_nodes = $(`:contains("${emote_text}")`).contents(); // Filter to text (type 3) nodes that definitely contain it // (:contains doesn't guarantee this: https://stackoverflow.com/a/29418265) text_nodes = text_nodes.filter(function() { - return this.nodeType === 3 && this.textContent.indexOf(text) > -1; + return this.nodeType === 3 && this.textContent.indexOf(emote_text) > -1; }); // replace the emote text with the img text_nodes.replaceWith(function() { - return this.nodeValue.replace(RegExp(text, "g"), + return this.nodeValue.replace(RegExp(emote_text, "g"), // .emote-inline doesn't actually do anything // height should end up roughly true line height // alt text shows if image is not found and allows copy-paste - `${text}` + `${emote_text}` ); }); } From 0e48c3bcc8c343d14b679a60f7b885a17c6ddc09 Mon Sep 17 00:00:00 2001 From: NoRePercussions Date: Fri, 6 Oct 2023 17:47:23 -0400 Subject: [PATCH 3/4] technicalities --- vendor/assets/javascripts/emotes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vendor/assets/javascripts/emotes.js b/vendor/assets/javascripts/emotes.js index 16a50635..4527c672 100644 --- a/vendor/assets/javascripts/emotes.js +++ b/vendor/assets/javascripts/emotes.js @@ -1,5 +1,5 @@ /* Adds selected emotes to all pages. - * Allows copy-paste to/from ABTech Slack + * Allows copy-paste from ABTech Slack * * Usage: * ----- From 8963610e3304efdfbdb0201b87f207ed45b22a6a Mon Sep 17 00:00:00 2001 From: NoRePercussions Date: Fri, 6 Oct 2023 21:48:59 -0400 Subject: [PATCH 4/4] Render emotes if logged in, remove if logged out --- app/views/layouts/_emote_handler.html.erb | 7 +++++++ app/views/layouts/application.html.erb | 1 + vendor/assets/javascripts/emotes.js | 21 +++++++++++++++++++-- 3 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 app/views/layouts/_emote_handler.html.erb diff --git a/app/views/layouts/_emote_handler.html.erb b/app/views/layouts/_emote_handler.html.erb new file mode 100644 index 00000000..48f26aae --- /dev/null +++ b/app/views/layouts/_emote_handler.html.erb @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f0a375a2..1a8b07ee 100755 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -16,6 +16,7 @@ <%= render 'layouts/url_helpers' %> <%= javascript_include_tag "application" %> <%= javascript_pack_tag "application" %> + <%= render 'layouts/emote_handler' %> <%= csrf_meta_tags %> diff --git a/vendor/assets/javascripts/emotes.js b/vendor/assets/javascripts/emotes.js index 4527c672..9a8867d6 100644 --- a/vendor/assets/javascripts/emotes.js +++ b/vendor/assets/javascripts/emotes.js @@ -19,7 +19,7 @@ let emotes = { ':blobfearful:': 'https://emojis.slackmojis.com/emojis/images/1643514682/6850/blob_fearful.png?1643514682', }; -$(function() { +function renderEmoteTags() { for (const [emote_text, url] of Object.entries(emotes)) { let text_nodes = $(`:contains("${emote_text}")`).contents(); @@ -39,4 +39,21 @@ $(function() { ); }); } -}) +} + +function removeEmoteTags() { + for (const [emote_text, url] of Object.entries(emotes)) { + let text_nodes = $(`:contains("${emote_text}")`).contents(); + + // Filter to text (type 3) nodes that definitely contain it + // (:contains doesn't guarantee this: https://stackoverflow.com/a/29418265) + text_nodes = text_nodes.filter(function() { + return this.nodeType === 3 && this.textContent.indexOf(emote_text) > -1; + }); + + // remove emote tags + text_nodes.replaceWith(function() { + return this.nodeValue.replace(RegExp(emote_text, "g"), ""); + }); + } +}