From 008ce3af165c171686410c3df9ef25668961314a Mon Sep 17 00:00:00 2001 From: vyneer Date: Fri, 26 Jul 2024 16:47:06 +0300 Subject: [PATCH] chore: rename event-bar stuff --- assets/chat/css/style.scss | 14 ++--- assets/chat/js/menus/ChatEventBar.js | 65 +++++++++++------------- assets/chat/js/messages/PinnedMessage.js | 6 +-- assets/views/embed.html | 6 +-- assets/views/stream.html | 6 +-- assets/views/templates.html | 2 +- 6 files changed, 48 insertions(+), 51 deletions(-) diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 22ea6e27..4f9c26a1 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -783,7 +783,7 @@ hr { display: none; } - .msg-event-bar-wrapper { + .event-bar-button { cursor: pointer; transition: transform 500ms, @@ -863,7 +863,7 @@ hr { } /* Hovering frame containing highlighted event from event bar and pinned message */ -#chat-hover-frame { +#chat-hover-container { padding: 4px; position: absolute; width: 100%; @@ -871,14 +871,14 @@ hr { } /* Event highlight frame */ -#chat-event-highlight-frame { - .msg-event-bar { +#chat-event-selected { + .event-bar-selected { margin: $gutter-sm $gutter-sm $gutter-sm $gutter-sm; } } /* Pinned Messages */ -#chat-pinned-frame { +#chat-pinned-message { display: none; &.active { @@ -987,7 +987,7 @@ hr { opacity: 1; } - &.msg-event-bar { + &.event-bar-selected { opacity: 1; } } @@ -2005,7 +2005,7 @@ button.btn { #chat-event-bar { display: none !important; } - #chat-hover-frame { + #chat-hover-container { display: none !important; } diff --git a/assets/chat/js/menus/ChatEventBar.js b/assets/chat/js/menus/ChatEventBar.js index 441f8f81..8f196659 100644 --- a/assets/chat/js/menus/ChatEventBar.js +++ b/assets/chat/js/menus/ChatEventBar.js @@ -9,9 +9,7 @@ export default class ChatEventBar { /** @type HTMLDivElement */ this.eventBarUI = document.getElementById('chat-event-bar'); /** @type HTMLDivElement */ - this.eventHighlightUI = document.getElementById( - 'chat-event-highlight-frame', - ); + this.eventSelectUI = document.getElementById('chat-event-selected'); this.eventBarUI.addEventListener('wheel', (event) => { if (event.deltaX === 0) { @@ -28,22 +26,21 @@ export default class ChatEventBar { * @param {ExpiringEvent} event */ add(event) { - if (!this.isValidEvent(event)) { + if (!this.shouldEventBeDisplayed(event)) { return; } - const eventMessageWrapper = document.createElement('div'); - eventMessageWrapper.classList.add('msg-event-bar-wrapper'); - eventMessageWrapper.dataset.uuid = event.uuid; - eventMessageWrapper.dataset.unixtimestamp = event.timestamp.valueOf(); - eventMessageWrapper.addEventListener('click', () => { - this.highlight(event); + const eventButton = document.createElement('div'); + eventButton.classList.add('event-bar-button'); + eventButton.dataset.uuid = event.uuid; + eventButton.dataset.unixtimestamp = event.timestamp.valueOf(); + eventButton.addEventListener('click', () => { + this.select(event); this.chat.userfocus.toggleFocus('', false, true); }); /** @type HTMLDivElement */ const eventMessageUI = event.html(this.chat); - eventMessageUI.classList.add('msg-event-bar'); eventMessageUI.querySelector('.event-bottom')?.remove(); const eventInfoUI = eventMessageUI.querySelector('.event-info'); const user = eventMessageUI.querySelector('.event-info a'); @@ -54,57 +51,57 @@ export default class ChatEventBar { user.classList.add('scrolling'); } - eventMessageWrapper.append(eventMessageUI); + eventButton.append(eventMessageUI); - this.eventBarUI.prepend(eventMessageWrapper); + this.eventBarUI.prepend(eventButton); setTimeout(() => { - eventMessageWrapper.classList.add('active'); + eventButton.classList.add('active'); }, 1); // Update chat window to fix the scroll position this.chat.mainwindow.update(); let percentageLeft = this.calculateExpiryPercentage(event); - this.setExpiryPercentage(eventMessageWrapper, percentageLeft); + this.setExpiryPercentage(eventButton, percentageLeft); const intervalID = setInterval(() => { percentageLeft = this.calculateExpiryPercentage(event); if (percentageLeft <= 0) { - eventMessageWrapper.addEventListener('transitionend', () => { - eventMessageWrapper.remove(); + eventButton.addEventListener('transitionend', () => { + eventButton.remove(); clearInterval(intervalID); }); - eventMessageWrapper.classList.replace('active', 'removed'); + eventButton.classList.replace('active', 'removed'); return; } - this.setExpiryPercentage(eventMessageWrapper, percentageLeft); + this.setExpiryPercentage(eventButton, percentageLeft); }, 1000); } /** - * Unhighlights the currently highlighted event. + * Unselects the currently highlighted event. */ - unhighlight() { - if (this.eventHighlightUI.hasChildNodes()) { - this.eventHighlightUI.replaceChildren(); + unselect() { + if (this.eventSelectUI.hasChildNodes()) { + this.eventSelectUI.replaceChildren(); // Unhide pinned message interface if (this.chat.pinnedMessage) this.chat.pinnedMessage.hidden = false; } } /** - * Highlights the specified event. + * Selects the specified event. * @param {ExpiringEvent} event */ - highlight(event) { + select(event) { /** @type HTMLDivElement */ const clonedMessageUI = event.html(this.chat); - clonedMessageUI.classList.add('msg-event-bar'); + clonedMessageUI.classList.add('event-bar-selected'); - this.eventHighlightUI.replaceChildren(); - this.eventHighlightUI.append(clonedMessageUI); + this.eventSelectUI.replaceChildren(); + this.eventSelectUI.append(clonedMessageUI); // Hide full pinned message interface to make everything look nice if (this.chat.pinnedMessage) this.chat.pinnedMessage.hidden = true; @@ -117,7 +114,7 @@ export default class ChatEventBar { */ contains(event) { return !!this.eventBarUI.querySelector( - `.msg-event-bar-wrapper[data-uuid="${event.uuid}"]`, + `.event-bar-button[data-uuid="${event.uuid}"]`, ); } @@ -140,7 +137,7 @@ export default class ChatEventBar { * @returns {boolean} * @private */ - isValidEvent(event) { + shouldEventBeDisplayed(event) { if (this.contains(event)) { return false; } @@ -173,13 +170,13 @@ export default class ChatEventBar { /** * Sets the progress gradient of the specified event. - * @param {HTMLDivElement} eventWrapper + * @param {HTMLDivElement} eventButton * @param {number} percentageLeft * @private */ - setExpiryPercentage(eventWrapper, percentageLeft) { - eventWrapper.dataset.percentageLeft = percentageLeft; - eventWrapper.querySelector('.event-top').style.background = + setExpiryPercentage(eventButton, percentageLeft) { + eventButton.dataset.percentageLeft = percentageLeft; + eventButton.querySelector('.event-top').style.background = `linear-gradient(90deg, #282828, #282828 ${percentageLeft}%, #151515 ${percentageLeft}%, #151515)`; } } diff --git a/assets/chat/js/messages/PinnedMessage.js b/assets/chat/js/messages/PinnedMessage.js index a1fe72b5..707dcd31 100644 --- a/assets/chat/js/messages/PinnedMessage.js +++ b/assets/chat/js/messages/PinnedMessage.js @@ -58,7 +58,7 @@ export default class PinnedMessage extends ChatUserMessage { * @param {boolean} state */ set hidden(state) { - const frame = document.getElementById('chat-pinned-frame'); + const frame = document.getElementById('chat-pinned-message'); frame.classList.toggle('active', !state); } @@ -70,7 +70,7 @@ export default class PinnedMessage extends ChatUserMessage { dismissPin(this.uuid); this.hidden = true; - const frame = document.getElementById('chat-pinned-frame'); + const frame = document.getElementById('chat-pinned-message'); frame.replaceChildren(); return null; @@ -135,7 +135,7 @@ export default class PinnedMessage extends ChatUserMessage { this.ui.prepend(closePin); - const pinnedFrame = document.getElementById('chat-pinned-frame'); + const pinnedFrame = document.getElementById('chat-pinned-message'); pinnedFrame.classList.toggle('active', true); pinnedFrame.prepend(this.ui); pinnedFrame.prepend(showPin); diff --git a/assets/views/embed.html b/assets/views/embed.html index 1f9509c4..6f8e4e4f 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -26,9 +26,9 @@
-
-
-
+
+
+
diff --git a/assets/views/stream.html b/assets/views/stream.html index 2704ec37..57199c97 100644 --- a/assets/views/stream.html +++ b/assets/views/stream.html @@ -2,9 +2,9 @@
-
-
-
+
+
+
diff --git a/assets/views/templates.html b/assets/views/templates.html index 22d7d42d..ff3785b1 100644 --- a/assets/views/templates.html +++ b/assets/views/templates.html @@ -1,5 +1,5 @@