Add 'Jump to message' button when viewing filtered messages

Closes #93

src/viewer/scripts/discord.js

@@ -57,7 +57,7 @@ var DISCORD = (function(){
       
       templateMessage = new TEMPLATE([
         "<div>",
-        "<h2><strong class='username'>{user.name}</strong><span class='info time'>{timestamp}</span>{edit}</h2>",
+        "<h2><strong class='username'>{user.name}</strong><span class='info time'>{timestamp}</span>{edit}{jump}</h2>",
         "<div class='message'>{contents}{embeds}{attachments}</div>",
         "</div>"
       ].join(""));
@@ -172,6 +172,9 @@ var DISCORD = (function(){
         else if (property === "edit"){
           return value ? "<span class='info edited'>Edited" + (value > 1 ? " " + getHumanReadableTime(value) : "") + "</span>" : "";
         }
+        else if (property === "jump"){
+          return STATE.hasActiveFilter ? "<span class='info jump' data-jump='" + value + "'>Jump to message</span>" : "";
+        }
       });
     }
   };

src/viewer/scripts/gui.js

@@ -70,7 +70,14 @@ var GUI = (function(){
       var inputUploadedFile = DOM.id("uploaded-file");
       var inputMessageFilter = DOM.id("opt-messages-filter");
       var containerFilterList = DOM.id("opt-filter-list");
-
+      
+      var resetActiveFilter = function(){
+        inputMessageFilter.value = "";
+        inputMessageFilter.dispatchEvent(new Event("change"));
+        
+        DOM.id("opt-filter-contents").value = "";
+      };
+      
       DOM.id("btn-upload-file").addEventListener("click", () => {
         inputUploadedFile.click();
       });
@@ -78,11 +85,7 @@ var GUI = (function(){
       inputUploadedFile.addEventListener("change", () => {
         if (eventOnFileUploaded && eventOnFileUploaded(inputUploadedFile.files)){
           inputUploadedFile.value = null;
-          
-          inputMessageFilter.value = "";
-          inputMessageFilter.dispatchEvent(new Event("change"));
-          
-          DOM.id("opt-filter-contents").value = "";
+          resetActiveFilter();
         }
       });
       
@@ -122,6 +125,17 @@ var GUI = (function(){
         showInfoModal();
       });
       
+      DOM.id("messages").addEventListener("click", e => {
+        var jump = e.target.getAttribute("data-jump");
+        
+        if (jump){
+          resetActiveFilter();
+          
+          var index = STATE.navigateToMessage(jump);
+          DOM.id("messages").children[index].scrollIntoView();
+        }
+      });
+      
       DOM.id("overlay").addEventListener("click", () => {
         DOM.id("modal").classList.remove("visible");
         DOM.id("dialog").innerHTML = "";

src/viewer/scripts/state.js

@@ -139,15 +139,34 @@ var STATE = (function(){
         "contents": ("m" in message) ? message.m : null,
         "embeds": message.e,
         "attachments": message.a,
-        "edit": ("te" in message) ? message.te : (message.f & 1) === 1
+        "edit": ("te" in message) ? message.te : (message.f & 1) === 1,
+        "jump": key
       };
     });
   };
+  
+  ROOT.navigateToMessage = function(id){
+    if (!MSGS){
+      return 0;
+    }
+    
+    var index = MSGS.indexOf(id);
+    
+    if (index == -1){
+      return 0;
+    }
+    
+    currentPage = Math.max(1, Math.min(ROOT.getPageCount(), 1 + Math.floor(index / messagesPerPage)));
+    triggerMessagesRefreshed();
+    return index % messagesPerPage;
+  };
 
   // ----------
   // Filtering
   // ----------
   
+  ROOT.hasActiveFilter = false;
+  
   ROOT.setActiveFilter = function(filter){
     switch(filter ? filter.type : ""){
       case "user":
@@ -175,6 +194,8 @@ var STATE = (function(){
         break;
     }
     
+    ROOT.hasActiveFilter = filterFunction != null;
+    
     triggerChannelsRefreshed(selectedChannel);
     
     if (selectedChannel){

src/viewer/styles/messages.css

@@ -38,6 +38,12 @@
   width: 14px;
 }
 
+#messages .jump {
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .message {
   margin-top: 6px;
   color: rgba(255, 255, 255, 0.7);