chore: rename event-bar stuff

destinygg · Jul 26, 2024 · 008ce3a · 008ce3a
1 parent e937126
commit 008ce3a
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 51 deletions.
diff --git 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,22 +863,22 @@ hr {
 }
 
 /* Hovering frame containing highlighted event from event bar and pinned message */
-#chat-hover-frame {
+#chat-hover-container {
   padding: 4px;
   position: absolute;
   width: 100%;
   z-index: 210;
 }
 
 /* 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
@@ -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
@@ -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
@@ -26,9 +26,9 @@
   </div>
 
   <div id="chat-output-frame" data-scroll-notify>
-    <div id="chat-hover-frame">
-      <div id="chat-event-highlight-frame"></div>
-      <div id="chat-pinned-frame"></div>
+    <div id="chat-hover-container">
+      <div id="chat-event-selected"></div>
+      <div id="chat-pinned-message"></div>
     </div>
   </div>
 

diff --git a/assets/views/stream.html b/assets/views/stream.html
@@ -2,9 +2,9 @@
   <div id="chat-event-bar"></div>
   <div id="chat-vote-frame"></div>
   <div id="chat-output-frame">
-    <div id="chat-hover-frame">
-      <div id="chat-event-highlight-frame"></div>
-      <div id="chat-pinned-frame"></div>
+    <div id="chat-hover-container">
+      <div id="chat-event-selected"></div>
+      <div id="chat-pinned-message"></div>
     </div>
   </div>
 </div>
diff --git a/assets/views/templates.html b/assets/views/templates.html
@@ -1,5 +1,5 @@
 <template id="event-template">
-  <div>
+  <div class="msg-event">
     <div class="event-wrapper">
       <div class="event-top">
         <span class="event-info"></span>