update emote js

Luch00 · Oct 22, 2018 · 9595cfb · 9595cfb
1 parent c321ea4
commit 9595cfb
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 34 deletions.
diff --git a/LxBTSC/template/chat.html b/LxBTSC/template/chat.html
@@ -165,10 +165,6 @@
                 }
             }
 
-            function escapeRegExp(str) {
-                return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-            }
-
             function ToggleEmoteMenu() {
                 $("#popup").toggleClass('menu-visible');
                 main.toggleClass('no-scroll');

diff --git a/LxBTSC/template/js/embed.js b/LxBTSC/template/js/embed.js
@@ -4,7 +4,7 @@
  *
  * Copyright (C) 2018 Luch (https://github.com/Luch00)
 */
-'use strict'
+'use strict';
 var imageMime = [ "image/gif", "image/jpeg", "image/png", "image/svg+xml", "image/webp" ];
 var audioMime = [ "audio/wave", "audio/wav", "audio/x-wav", "audio/x-pn-wav", "audio/webm", "audio/ogg", "audio/flac"];
 var videoMime = [ "video/webm", "video/ogg", "application/ogg" ];
@@ -130,14 +130,14 @@ function FreezeframeGif(url) {
 
     let a = $('<a/>', {
         class: 'hidden-image fancybox',
-        href: url,
+        href: url
     });
 
     a.append(img);
     img.onload = function() {
         $(img).freezeframe({overlay: true});        
         $(a).removeClass('hidden-image');
-    }
+    };
     img.src = encodeURI(url);
 
     embed.append(a);

diff --git a/LxBTSC/template/js/emotes.js b/LxBTSC/template/js/emotes.js
@@ -3,13 +3,14 @@
  * GPLv3 license
  *
  * Copyright (C) 2018 Luch (https://github.com/Luch00)
-*/
-var Emotes = {
+*/ 
+'use strict';
+let Emotes = {
     emoteList: new Map(),
-    emoteKeyList: [],
     emoteset_json: "emotesets.json",
     emote_list_element: {},
     emoteIndex: 0,
+    fullRegex: undefined,
     addEmote: function (key, value) {
         if (this.emoteList.has(key)) {
             this.emoteList.get(key).element.remove();
@@ -18,62 +19,59 @@ var Emotes = {
         this.emoteList.set(key, value);
     },
     emoticonize: function (string) {
-        var html = string.html();
-        this.emoteKeyList.forEach(function(key) {
-            html = html.replace(new RegExp(escapeRegExp(key)+'(?::([a-z]+):)?(?![^<]*?(?:</a>|">))', 'g'), function (a, b) {
-                return `<img class="emote emote-${Emotes.emoteList.get(key).index} emote-mod-${b}" src="${Emotes.emoteList.get(key).name}" alt="${key}">`;
-            });
+        let html = string.html();
+        html = html.replace(this.fullRegex, function (a, b, c) {
+            let e = Emotes.emoteList.get(b);
+            return `<img class="emote emote-${e.index} emote-mod-${c}" src="${e.name}" alt="${e.code}">`;
         });
         string.html(html);
     },
-    makeKeyList: function () {
-        console.log("makeKeyList");
-        this.emoteKeyList = Array.from(this.emoteList.keys()).sort(function(a, b) {
+    buildRegex: function () {
+        let emoteKeyList = Array.from(this.emoteList.keys()).sort(function(a, b) {
             return b.length - a.length;
         });
+        var stringlist = Emotes.escapeRegExp(emoteKeyList.join('|'));
+        Emotes.fullRegex = new RegExp('('+stringlist+')(?::([a-z0-9]+):)?(?![^<]*?(?:</a>|">))', 'g');
     },
     clear: function () {
         Emotes.emoteIndex = 0;
         Emotes.emoteList.clear();
-        Emotes.emoteKeyList = [];
+        Emotes.fullRegex = "";
         Emotes.emote_list_element.empty();
     },
     load: function () {
         $.getJSON(this.emoteset_json, function(setlist) {
-            console.log(setlist);
             setlist.forEach(function(set) {
                 $.getJSON("Emotes/" + set).then(function(json) {
                     Emotes.parseJson(json);
                 });
             });
         });
-        /*var list = [];
-        Config.REMOTE_EMOTES.forEach(function(set) {
-            list.push(set);
-        });
-        QtObject.requestEmoteJson(list);*/
-        QtObject.requestEmoteJson(Config.REMOTE_EMOTES);
+        if (Config.REMOTE_EMOTES.length > 0) {
+            QtObject.requestEmoteJson(Config.REMOTE_EMOTES);
+        }
     },
     addRemoteEmote: function (jsonString) {
         Emotes.parseJson(JSON.parse(jsonString));
     },
     parseJson: function(json) {
-        var set_element = $('<div>', {
+        let set_element = $('<div>', {
             class: 'emoteset',
             'data-name': json.setname
         });
         set_element.append('<div class="set-header">' + json.setname + '</div>');
-        var emote_container = $('<div>', {
+        let emote_container = $('<div>', {
             class: 'emote-container'
         });
         set_element.append(emote_container);
         json.emoticons.forEach(function(emote) {
-            var e = { 
+            let e = {
                 name: `${json.pathbase}${emote.name}${json.pathappend}`,
-                index: Emotes.emoteIndex 
-            }
+                code: emote.code,
+                index: Emotes.emoteIndex
+            };
             Emotes.emoteIndex++;
-            var emote_img = $('<img >', {
+            let emote_img = $('<img >', {
                 class: 'emote',
                 src: e.name,
                 alt: emote.code,
@@ -86,7 +84,10 @@ var Emotes = {
             e.element = emote_img;
             Emotes.addEmote(emote.code, e);
         });
-        Emotes.makeKeyList();
+        Emotes.buildRegex();
         this.emote_list_element.append(set_element);
+    },
+    escapeRegExp: function(str) {
+        return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$]/g, "\\$&");
     }
-}
+};
diff --git a/LxBTSC/template/style/style.css b/LxBTSC/template/style/style.css
@@ -160,6 +160,12 @@ video {
     max-height: 32px;
 }
 
+/*.emote-wrapper {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+}*/
+
 .set-header {
     text-align: center;
     padding: 2px;
@@ -304,6 +310,13 @@ video {
     100% { transform: rotate(360deg); }
 }
 
+.emote-mod-spin2 {
+    animation: spin2 2.5s linear infinite;
+}
+@keyframes spin2 {
+    100% { transform: rotate(-360deg);}
+}
+
 .emote-mod-flip {
     animation: flip 2s linear infinite;
 }