(DEV) Blacklisting

Author: Nemesis

src/assets/css/index.css

@@ -14,12 +14,8 @@
   background-color: #242424;
 }
 
-body::-webkit-scrollbar {background-color: #242424; width: 0.5em;}
-body::-webkit-scrollbar-thumb {background-color: #6688EC;}
-ul.sidenav::-webkit-scrollbar {background-color: #242424; width: 0.5em;}
-ul.sidenav::-webkit-scrollbar-thumb {background-color: #6688EC;}
-ul#dropdownTagsParent::-webkit-scrollbar {background-color: #242424; width: 0.5em;}
-ul#dropdownTagsParent::-webkit-scrollbar-thumb {background-color: #6688EC;}
+*::-webkit-scrollbar {background-color: #242424; width: 0.5em;}
+*::-webkit-scrollbar-thumb {background-color: #6688EC;}
 ::selection {background: #FFF;}
 
 body {
@@ -128,6 +124,20 @@ div#loading {
   filter: brightness(80%)
 }
 
+.modal h1 {
+  font-weight: 600;
+  margin: 0;
+}
+
+.modal .modalClose {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.modal .input-field {
+  margin-top: 2rem;
+}
 
 /*
 * MATERIALIZE CSS

src/index.html

@@ -54,7 +54,7 @@
         <li><a class="subheader">Settings</a></li>
         <li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">favorite</i>Favorites</a></li>
         <li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">folder</i>Change download folder</a></li>
-        <li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">label</i>Exclude tags</a></li>
+        <li><a onclick="openBlacklistModal()" class="waves-effect modal-trigger"><i class="material-icons left">label</i>Exclude tags</a></li>
         <li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">library_add</i>Add sources</a></li>
         <li><a onclick="handleTheme()" id="displayTheme" class="waves-effect"><i class="material-icons left">invert_colors</i>Enable light theme</a></li>
         <li><div class="divider"></div></li>
@@ -110,6 +110,31 @@
       </ul>
     </ul>
     <!-- [End Sidenav with image details ] -->
+
+    <!-- Blacklist tags modal -->
+    <div id="blacklist" class="modal">
+      <div class="modal-content">
+        <div class="row">
+
+          <div class="col s12 center">
+            <h1>Your Blacklist</h1>
+          </div>
+
+          <div class="col s10 offset-s1 modalInput">
+            <div class="input-field">
+              <textarea id="blacklistTags" class="materialize-textarea"></textarea>
+              <label for="blacklistTags">Enter blacklisted tags separated with space</label>
+            </div>
+          </div>
+
+          <div class="modalClose col s10 offset-s1">
+            <a href="#" onclick="updateBlacklist()" class="modal-action modal-close waves-effect btn">Update Blacklist</a>
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <!-- [End Blacklist tags modal] -->
 
   </main>
   <!-- [END MAIN] -->

src/renderer.js

@@ -27,7 +27,8 @@
       rating = "rating:safe",
       imgLimit = 10,
       view = 'one_column'
-      pid = 1;
+      pid = 1,
+      blacklistTags;
 
 // Store
 
@@ -100,6 +101,20 @@ var lastTheme = store.get('theme');
     getResults(url);
   }
 
+  function openBlacklistModal()
+  {
+    const blacklistModal = document.querySelector('#blacklist.modal');
+    const instanceBlacklistModal = M.Modal.init(blacklistModal);
+    instanceBlacklistModal.open();
+  }
+
+  function updateBlacklist()
+  {
+    blacklistTags = document.getElementById('blacklistTags').value;
+    blacklistTags.split(' ');
+    console.log(blacklistTags);
+  }
+
   // Sidenav image details
 
   function openImageDetails(event)
@@ -129,7 +144,7 @@ var lastTheme = store.get('theme');
         });
     // Open sidenav
     const sidenavImageDetails = document.querySelector('#sidenavImageDetails.sidenav');
-    var instanceSidenavImageDetails = M.Sidenav.init(sidenavImageDetails);
+    const instanceSidenavImageDetails = M.Sidenav.init(sidenavImageDetails);
     instanceSidenavImageDetails.open();
   }
 
@@ -299,7 +314,6 @@ var lastTheme = store.get('theme');
 
   // Handle links
     document.addEventListener('click', (event) => {
-      console.log(event);
       if (event.target.tagName === 'A')
       {
         if (event.target.href.startsWith('https://gelbooru.com/') || event.target.href.startsWith('https://github.com/'))
@@ -410,15 +424,10 @@ function getUrl(tags = '', imgLimit = 10, rating = 'rating:safe', pid = 1)
   var url = `https://gelbooru.com/index.php?page=dapi&s=post&q=index&json=1&limit=${imgLimit}`;
   if (tags != '')
   {
-    if (tags.includes('webm'))
-    {
-      url += `&tags=${tags.replace(/\s/g, '+')}`;
-      url += `+${rating}`;
-    }
-    else
+    url += `&tags=${tags.replace(/\s/g, '+')}+${rating}+${blacklistTags}`;
+    if (!tags.includes('webm'))
     {
-      url += `&tags=${tags.replace(/\s/g, '+')}`;
-      url += `+${rating}+-webm`;
+      url += `+-webm`;
     }
   }
   else