init

frontend/widgets/Chats/chats.css

@@ -0,0 +1,55 @@
+ul#chats {
+    overflow: hidden;
+}
+
+ul#chats ~ .placeholder {
+    display: none;
+}
+
+ul#chats li {
+    transition: opacity 0.2s ease-in-out;
+    overflow: hidden;
+    box-sizing: border-box;
+    max-height: 8rem;
+}
+
+ul#chats li img.tinythumb {
+    object-fit: cover;
+    width: 1.4rem;
+    height: 1.4rem;
+    margin-right: 0.25rem;
+    border-radius: 0.25rem;
+}
+
+ul#chats li.moving {
+    transition: transform 0.1s, max-height 0.2s var(--accelerate-easing) 0.2s;
+}
+
+ul#chats li.closing {
+    transition: transform 0.1s, max-height 0.2s var(--decelerate-easing) 0.2s;
+    max-height: 0;
+}
+
+ul#chats li.closing.to_left {
+    transform: translateX(-100%);
+}
+
+ul#chats li.closing.to_right {
+    transform: translateX(100%);
+}
+
+ul#chats li.close {
+    opacity: 0.5;
+}
+
+ul#chats:empty ~ .placeholder {
+    display: block;
+}
+
+ul#chats_widget_header[data-scroll] li.subheader:first-child {
+    animation: backgroundBlink 1s;
+}
+
+ul#chats_widget_header[data-filter=roster] + ul#chats li:not(.roster) {
+    display: none;
+}

frontend/widgets/Chats/chats.js

@@ -0,0 +1,150 @@
+var Chats = {
+    startX: 0,
+    startY: 0,
+    translateX: 0,
+    translateY: 0,
+    slideAuthorized: false,
+
+    setFilter: function (filter) {
+        document.querySelector('#chats_widget_header').dataset.filter = filter;
+        Chats_ajaxSetFilter(filter);
+    },
+
+    refreshFilters: function () {
+        var filter = document.querySelector('#chats_widget_header').dataset.filter;
+
+        document.querySelectorAll('#chats_widget_header span.chip').forEach(chip => {
+            chip.classList.remove('enabled');
+
+            if (chip.dataset.filter == filter) chip.classList.add('enabled');
+        });
+    },
+
+    refresh: function () {
+        var list = document.querySelector('#chats');
+        if (!list) return;
+
+        Chats.refreshFilters();
+
+        var trim = list.innerHTML.trim();
+
+        if (trim === '') list.innerHTML = trim;
+
+        var items = document.querySelectorAll('ul#chats li:not(.subheader)');
+        var i = 0;
+
+        while (i < items.length) {
+            if (items[i].querySelector('img.tinythumb')) {
+                var img = items[i].querySelector('img.tinythumb');
+
+                try {
+                    img.src = thumbHashToDataURL(MovimUtils.base64ToBinary(img.dataset.thumbhash));
+                } catch (error) {
+                    console.log('Cannot handle thumbhash hash');
+                }
+            }
+
+            if (items[i].dataset.jid != null) {
+                items[i].onclick = function (e) {
+                    Rooms.refresh();
+                    MovimUtils.addClass('ul#bottomnavigation', 'hidden');
+
+                    Chat.get(this.dataset.jid);
+                };
+
+                items[i].onmousedown = function (e) {
+                    if (e.which == 2) {
+                        Chats.closeItem(this, false);
+                        e.preventDefault();
+                    }
+                }
+
+                clientWidth = Math.abs(document.body.clientWidth);
+                delay = 20;
+
+                if (MovimUtils.isMobile()) {
+                    items[i].addEventListener('touchstart', function (event) {
+                        if (MovimTpl.menuDragged) return;
+
+                        Chats.startX = event.targetTouches[0].pageX;
+                        Chats.startY = event.targetTouches[0].pageY;
+
+                        this.classList.remove('moving');
+                    }, true);
+
+                    items[i].addEventListener('touchmove', function (event) {
+                        if (MovimTpl.menuDragged) return;
+
+                        Chats.translateX = parseInt(event.targetTouches[0].pageX - Chats.startX);
+                        Chats.translateY = parseInt(event.targetTouches[0].pageY - Chats.startY);
+
+                        if (Math.abs(Chats.translateX) > delay && Math.abs(Chats.translateX) <= clientWidth) {
+                            if (Math.abs(Chats.translateX) > this.offsetWidth / 2) {
+                                this.classList.add('close');
+                            } else {
+                                this.classList.remove('close');
+                            }
+
+                            if (Math.abs(Chats.translateY) < delay) {
+                                Chats.slideAuthorized = true;
+                            }
+
+                            var moveX = Chats.translateX < 0
+                                ? (Chats.translateX + delay)
+                                : (Chats.translateX - delay);
+
+                            if (Chats.slideAuthorized) {
+                                this.style.transform = 'translateX(' + (moveX) + 'px)';
+                            }
+                        } else {
+                            this.style.transform = '';
+                            this.classList.remove('close');
+                        }
+                    }, true);
+
+                    items[i].addEventListener('touchend', function (event) {
+                        if (MovimTpl.menuDragged) return;
+
+                        this.classList.add('moving');
+
+                        if (Math.abs(Chats.translateX) > this.offsetWidth / 2 && Chats.slideAuthorized) {
+                            Chats.closeItem(this, (Chats.translateX < 0));
+                        } else {
+                            this.classList.remove('close');
+                        }
+
+                        this.style.transform = '';
+                        Chats.slideAuthorized = false;
+                        Chats.startX = Chats.startY = Chats.translateX = Chats.translateY = 0;
+                    }, true);
+                }
+            }
+
+            i++;
+        }
+    },
+
+    clearAllActives: function () {
+        document.querySelectorAll('ul#chats li:not(.subheader)')
+            .forEach(item => item.classList.remove('active'));
+    },
+
+    setActive: function (jid) {
+        Chats.clearAllActives();
+        Rooms.clearAllActives();
+        MovimUtils.addClass('ul#chats li[data-jid="' + jid + '"]', 'active');
+    },
+
+    closeItem(li, toLeft) {
+        li.classList.add('closing');
+        li.classList.add(toLeft ? 'to_left' : 'to_right');
+
+        window.setTimeout(() => {
+            Chats_ajaxClose(li.dataset.jid, (MovimUtils.urlParts().params[0] === li.dataset.jid));
+        }, 400);
+    }
+};
+
+MovimEvents.registerWindow('loaded', 'chats', () => Chats.refresh());
+
+MovimWebsocket.initiate(() => Chats_ajaxHttpGet());

frontend/widgets/Chats/locales.ini

@@ -0,0 +1,13 @@
+[chats]
+empty_title      = No chats yet…
+empty            = Start a new conversation by clicking on the %s button.
+new_title        = Start a new conversation
+add              = Chat with a contact
+me               = Me
+picture          = Picture
+video            = Video
+audio            = Audio
+
+[chats_filter]
+all              = All
+roster           = Contacts