init

frontend/widgets/Stickers/locales.ini

@@ -0,0 +1,6 @@
+[sticker]
+title       = Stickers
+sent        = A sticker has been sent using Movim
+keyword     = Type a keyword
+gif_title   = Find a GIF
+gif_text    = Powered by Tenor

frontend/widgets/Stickers/stickers.css

@@ -0,0 +1,77 @@
+#stickers ul.list > li > img.sticker {
+    padding: 0.25rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+#stickers {
+    padding: 1rem;
+}
+
+#stickers ul.list > li:hover {
+    cursor: pointer;
+}
+
+#stickers ul.list > li.block:not(.large) {
+    transition: all 100ms ease-in;
+    transform: scale(1);
+    padding: 0;
+}
+
+#stickers ul.list > li.block.zoomed {
+    transform: scale(1.3);
+    z-index: 2;
+}
+
+#gifs + div ul.tabs,
+#stickers + div ul.tabs {
+    height: 6rem;
+    border-bottom: none;
+}
+
+#gifs {
+    height: calc(100% - 7.5rem);
+    overflow-x: hidden;
+}
+
+#gifs .masonry {
+    width: calc(50% - 1.75rem);
+    float: left;
+    margin-top: 1rem;
+}
+
+#gifs .masonry.first {
+    margin-left: 1rem;
+    margin-right: 0.75rem;
+}
+
+#gifs .masonry.second {
+    margin-right: 1rem;
+    margin-left: 0.75rem;
+}
+
+#gifs .masonry.first:not(:empty) + .masonry.second:not(:empty) + .placeholder {
+    display: none;
+}
+
+#gifs .masonry .brick {
+    width: 100%;
+    max-height: 40rem;
+    display: inline-block;
+    object-fit: cover;
+    border-radius: 1rem;
+    margin-bottom: 1rem;
+    background-color: rgb(var(--movim-background));
+    transition: box-shadow 0.3s ease-in-out;
+}
+
+#gifs .masonry .brick.clicked {
+    opacity: 0.5;
+    pointer-events: none;
+    box-shadow: var(--elevation-0);
+}
+
+#gifs .masonry .brick:hover {
+    cursor: pointer;
+    box-shadow: var(--elevation-1);
+}

frontend/widgets/Stickers/stickers.js

@@ -0,0 +1,98 @@
+var Stickers = {
+    timer : null,
+    stickersPage : 0,
+    file : null,
+
+    addSmiley: function(element) {
+        Chat.insertAtCursor(element.dataset.emoji + ' ');
+        Drawer.clear();
+    },
+    zoom: function(element, jid, id) {
+        var zoomed = document.querySelectorAll('.zoomed');
+
+        if (element.classList.contains('zoomed')) {
+            Drawer.clear();
+
+            var textarea = Chat.getTextarea();
+            Stickers_ajaxSend(jid, id, Boolean(textarea.dataset.muc));
+        }
+
+        var i = 0;
+        while(i < zoomed.length) {
+            zoomed[i].classList.remove('zoomed');
+            i++;
+        }
+
+        element.classList.add('zoomed');
+    },
+    setEmojisEvent(mid) {
+        const emojis = document.querySelectorAll('.emojis_grid img');
+        let i = 0;
+
+        while (i < emojis.length) {
+            emojis[i].onclick = function() {
+                if (mid) {
+                    Chat_ajaxHttpDaemonSendReaction(mid, this.dataset.emoji);
+                } else {
+                    Stickers.addSmiley(this);
+                }
+
+                Drawer_ajaxClear();
+            }
+
+            i++;
+        }
+
+        document.querySelector('form[name=search] input').focus();
+    },
+    setGifsSearchEvent() {
+        const search = document.querySelector('#gifssearchbar input');
+        search.focus();
+
+        search.addEventListener('input', e => {
+            clearTimeout(Stickers.timer);
+
+            Stickers.timer = setTimeout(() => {
+                const gifsF = document.querySelector('#gifs .masonry.first');
+                gifsF.innerHTML = '';
+                const gifsS = document.querySelector('#gifs .masonry.second');
+                gifsS.innerHTML = '';
+                Stickers.stickersPage = 0;
+
+                if (search.value !== '') {
+                    document.querySelector('#gifssearchbar li.search').classList.add('searching');
+                    Stickers_ajaxSearchGifs(search.value, Stickers.stickersPage);
+                }
+            }, 400);
+        });
+    },
+    setGifsEvents() {
+        if (search.value !== '') {
+            document.querySelector('#gifssearchbar li.search').classList.remove('searching');
+        }
+
+        const gifs = document.querySelectorAll('#gifs video');
+
+        let i = 0;
+
+        while (i < gifs.length) {
+            gifs[i].addEventListener('mouseover', e => {
+                e.target.play();
+            });
+            gifs[i].addEventListener('mouseout', e => {
+                e.target.pause();
+            });
+            gifs[i].addEventListener('click', e => {
+                e.target.classList.add('clicked');
+                Drawer.clear();
+                Stickers_ajaxSendGif(
+                    Chat.getTextarea().dataset.jid,
+                    e.target.dataset.id,
+                    Boolean(Chat.getTextarea().dataset.muc)
+                );
+            }, {once:true});
+
+            i++;
+        }
+    }
+}