Add filtering by contents, images, downloads, and edited status

src/renderer/index.html

@@ -46,6 +46,10 @@
         <select id="opt-messages-filter">
           <option value="">No filter&nbsp;</option>
           <option value="user">Filter messages by user&nbsp;</option>
+          <option value="contents">Filter messages by contents&nbsp;</option>
+          <option value="withimages">Only messages with images&nbsp;</option>
+          <option value="withdownloads">Only messages with downloads&nbsp;</option>
+          <option value="edited">Only edited messages&nbsp;</option>
         </select>
       </div>
       
@@ -53,6 +57,11 @@
         <select id="opt-filter-user" data-filter-type="user">
           <option value="">Select user...</option>
         </select>
+        <input type="text" data-filter-type="contents" placeholder="Messages containing...">
+        <input type="hidden" data-filter-type="withimages" value="1">
+        <input type="hidden" data-filter-type="withattachments" value="1">
+        <input type="hidden" data-filter-type="withdownloads" value="1">
+        <input type="hidden" data-filter-type="edited" value="1">
       </div>
       
       <div class="separator"></div>

src/renderer/scr.discord.js

@@ -76,6 +76,8 @@ var DISCORD = (function(){
       ].join(""));
     },
     
+    isImageAttachment: isImageAttachment,
+    
     getChannelHTML: function(channel){
       return (channel.server.type === "SERVER" ? templateChannelServer : templateChannelPrivate).apply(channel, (property, value) => {
         if (property === "server.type"){

src/renderer/scr.gui.js

@@ -101,7 +101,7 @@ var GUI = (function(){
       });
       
       Array.prototype.forEach.call(containerFilterList.children, ele => {
-        ele.addEventListener("change", e => triggerFilterChanged());
+        ele.addEventListener(ele.tagName === "SELECT" ? "change" : "input", e => triggerFilterChanged());
       });
       
       DOM.id("opt-messages-per-page").addEventListener("change", () => {

src/renderer/scr.processor.js

@@ -8,7 +8,10 @@ var PROCESSOR = function(messageObject){
 PROCESSOR.FILTER = {
   byUser: ((userindex) => message => message.u === userindex),
   byTime: ((timeStart, timeEnd) => message => message.t >= timeStart && message.t <= timeEnd),
-  byContents: ((search) => search.test ? message => search.test(message.m) : message => message.m.indexOf(search) !== -1),
+  byContents: ((substr) => message => message.m.indexOf(substr) !== -1),
+  byRegex: ((regex) => message => regex.test(message.m)),
+  withImages: (() => message => (message.e && message.e.some(embed => embed.type === "image")) || (message.a && message.a.some(DISCORD.isImageAttachment))),
+  withDownloads: (() => message => message.a && message.a.some(attachment => !DISCORD.isImageAttachment(attachment))),
   withEmbeds: (() => message => message.e && message.e.length > 0),
   withAttachments: (() => message => message.a && message.a.length > 0),
   isEdited: (() => message => (message.f&1) === 1)

src/renderer/scr.state.js

@@ -146,6 +146,22 @@ var STATE = (function(){
       case "user":
         filterFunction = PROCESSOR.FILTER.byUser(FILE.getUserIndex(filter.value));
         break;
+        
+      case "contents":
+        filterFunction = PROCESSOR.FILTER.byContents(filter.value);
+        break;
+        
+      case "withimages":
+        filterFunction = PROCESSOR.FILTER.withImages();
+        break;
+        
+      case "withdownloads":
+        filterFunction = PROCESSOR.FILTER.withDownloads();
+        break;
+        
+      case "edited":
+        filterFunction = PROCESSOR.FILTER.isEdited();
+        break;
 
       default:
         filterFunction = null;

src/renderer/stl.menu.css

@@ -18,7 +18,7 @@
   cursor: default;
 }
 
-#menu button, #menu select {
+#menu button, #menu select, #menu input[type="text"] {
   margin: 8px;
   background-color: #7289DA;
   color: #FFF;
@@ -38,6 +38,12 @@
   border: 0;
 }
 
+#menu input[type="text"] {
+  font-size: 14px;
+  padding: 7px 12px;
+  border: 0;
+}
+
 #menu p {
   font-size: 16px;
   padding: 8px;