add: hotkey-query-selector

Metacor · Jun 12, 2024 · 0b25b17 · 0b25b17
1 parent 4a1e723
commit 0b25b17
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 -   Adds a "Search on Nyaa" Button to Anime and Manga database pages
     -   Individual: **[MyAnimeList](https://i.imgur.com/IXJ7XuK.png), [AniList](https://i.imgur.com/9xhFu5q.jpeg), [Anime-Planet](https://i.imgur.com/sGsl0Bw.png), [AnimeNewsNetwork](https://i.imgur.com/xXvJXHC.png), [LiveChart](https://i.imgur.com/VyIWtLC.png), [AniDB](https://i.imgur.com/DqSkmOg.jpeg), [Kitsu](https://i.imgur.com/CN2kh4C.jpeg)**
     -   Card-type: _**MyAnimeList** ([Season](https://i.imgur.com/7M4hr0z.png), [Genre](https://i.imgur.com/SklbImH.png)), **LiveChart** ([Season](https://i.imgur.com/wvLOp8N.jpeg), [Franchises](https://i.imgur.com/wcNv1JC.jpeg))_
--   Extension settings can be customized and saved in the [Extension Popup window](https://i.imgur.com/ymIkV63.png)
+-   Extension settings can be customized and saved in the [Extension Popup window](https://i.imgur.com/Ezz4S6x.png)
 
     -   The primary settings page is used to change Nyaa search parameters
         -   For Manga pages, the Category setting will search for the "Literature" equivalent

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "nyaa-linker",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "Adds a button to Anime and Manga database websites that opens a relevant Nyaa search",
     "scripts": {
         "zip": "npm run firefox && npm run chrome",

diff --git a/src/background.js b/src/background.js
@@ -21,6 +21,7 @@ const defaultSettings = () => {
             focus_setting: false,
             hotkey_key_setting: '',
             hotkey_modifier_setting: '',
+            hotkey_query_setting: 'inherit',
         },
     });
 };
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,10 @@
-chrome.runtime.onMessage.addListener((request) => request.type === 'tabUpdated' && init());
-let activeListener;
+let btn, currentPage, previousPage, hotkeyListener;
+chrome.runtime.onMessage.addListener((request) => {
+    if (request.type === 'tabUpdated') {
+        currentPage = window.location.href.split('/')[4];
+        (!btn || currentPage !== previousPage) && init();
+    }
+});
 
 async function init() {
     const loadUserSettings = await new Promise((resolve) => {
@@ -8,15 +13,16 @@ async function init() {
         });
     });
 
+    previousPage = currentPage;
     const settings = loadUserSettings.settings;
     searchNyaa(settings);
 }
 
 function searchNyaa(settings) {
     const domain = window.location.href;
     const media = window.location.pathname.includes('manga') ? 'manga' : 'anime';
+    let titleJap, titleEng, btnSpace, cardType, cardFlag;
     let queryType = settings.query_setting;
-    let titleJap, titleEng, btn, btnSpace, cardType;
 
     if (media === 'manga') {
         const searchManga = (cat) => {
@@ -26,32 +32,38 @@ function searchNyaa(settings) {
         settings.category_setting = searchManga(settings.category_setting);
     }
 
-    function createSearch(query) {
-        if (btn) {
-            !btn.title && (btn.textContent = 'Search on Nyaa');
-            btn.href = `https://nyaa.si/?f=${settings.filter_setting}&c=${settings.category_setting}&q=${query}&s=${settings.sort_setting}&o=${settings.order_setting}`;
-            btn.target = '_blank';
-        }
-    }
-
     function createBtn(btnSpace) {
-        !cardType && document.querySelector('.nyaaBtn') && document.querySelector('.nyaaBtn').remove();
+        !cardFlag && document.querySelector('.nyaaBtn') && document.querySelectorAll('.nyaaBtn').forEach((e) => e.remove()), (cardFlag = true);
         btn = btnSpace.appendChild(document.createElement('a'));
         btn.classList.add('nyaaBtn');
         settings.hide_button_setting && (btn.style.display = 'none');
+        !cardType && settings.hotkey_key_setting && startHotkeyListener();
+    }
+
+    function createSearch(query) {
+        !btn.title && (btn.textContent = 'Search on Nyaa');
+        btn.href = `https://nyaa.si/?f=${settings.filter_setting}&c=${settings.category_setting}&q=${query}&s=${settings.sort_setting}&o=${settings.order_setting}`;
+        btn.target = '_blank';
     }
 
-    if (!activeListener && settings.hotkey_key_setting) {
-        document.addEventListener('keydown', function (e) {
+    function startHotkeyListener() {
+        hotkeyListener && document.removeEventListener('keydown', hotkeyListener);
+        hotkeyListener = (e) => {
             if (
-                (btn && e[settings.hotkey_modifier_setting] && e.key.toLowerCase() == settings.hotkey_key_setting) ||
-                (btn && settings.hotkey_modifier_setting === '' && !e.ctrlKey && !e.shiftKey && !e.altKey && e.key == settings.hotkey_key_setting)
+                (btn && e[settings.hotkey_modifier_setting] && e.key.toLowerCase() === settings.hotkey_key_setting) ||
+                (btn && settings.hotkey_modifier_setting === '' && !e.ctrlKey && !e.shiftKey && !e.altKey && e.key === settings.hotkey_key_setting)
             ) {
-                document.querySelector('.nyaaBtn').dispatchEvent(new MouseEvent('click', { ctrlKey: settings.focus_setting }));
+                if (settings.hotkey_query_setting !== 'inherit') {
+                    queryType = settings.hotkey_query_setting;
+                    createSearch(getQuery(titleJap, titleEng, queryType));
+                }
+                btn.dispatchEvent(new MouseEvent('click', { ctrlKey: settings.focus_setting }));
                 e.preventDefault();
+                queryType = settings.query_setting;
+                createSearch(getQuery(titleJap, titleEng, queryType));
             }
-        });
-        activeListener = true;
+        };
+        document.addEventListener('keydown', hotkeyListener);
     }
 
     switch (true) {
@@ -87,9 +99,9 @@ function searchNyaa(settings) {
                     card.querySelector('.title h3') ? (titleEng = card.querySelector('.title h3').innerText) : (titleEng = undefined);
 
                     createBtn(card.querySelector('.broadcast'));
+                    btn.title = 'Search on Nyaa';
                     btn.style.background = 'url(https://i.imgur.com/9Fr2BRG.png) center/20px no-repeat';
                     btn.style.padding = '0 11px';
-                    btn.title = 'Search on Nyaa';
                     createSearch(getQuery(titleJap, titleEng, queryType));
                 }
             }
@@ -129,16 +141,15 @@ function searchNyaa(settings) {
 
                 btnSpace = document.querySelector('.fright') ? document.querySelector('.fright') : document.querySelector('#big-video');
                 createBtn(btnSpace);
-                btn.style.cssText = `
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 35px;
-                    border-radius: 3px;
-                    background: #2d50a7;
-                    color: #fff;
-                    border: 1px solid black;
-                    text-decoration: none;`;
+                btn.style.display !== 'none' && (btn.style.display = 'flex');
+                btn.style.alignItems = 'center';
+                btn.style.justifyContent = 'center';
+                btn.style.height = '35px';
+                btn.style.borderRadius = '3px';
+                btn.style.background = '#2d50a7';
+                btn.style.color = '#fff';
+                btn.style.border = '1px solid black';
+                btn.style.textDecoration = 'none';
                 btnSpace.children[0].tagName === 'TABLE' && (btn.style.marginTop = '4px');
                 createSearch(getQuery(titleJap, titleEng, queryType));
             }, 50);
@@ -170,15 +181,14 @@ function searchNyaa(settings) {
                 }
 
                 createBtn(document.querySelector('.cover-wrap-inner'));
-                btn.style.cssText = `
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 35px;
-                    border-radius: 3px;
-                    margin-bottom: 20px;
-                    background: rgb(var(--color-blue));
-                    color: rgb(var(--color-white));`;
+                btn.style.display !== 'none' && (btn.style.display = 'flex');
+                btn.style.alignItems = 'center';
+                btn.style.justifyContent = 'center';
+                btn.style.height = '35px';
+                btn.style.borderRadius = '3px';
+                btn.style.marginBottom = '20px';
+                btn.style.background = 'rgb(var(--color-blue))';
+                btn.style.color = 'rgb(var(--color-white))';
                 createSearch(getQuery(titleJap, titleEng, queryType));
             });
             break;

diff --git a/src/manifest-chrome.json b/src/manifest-chrome.json
@@ -1,6 +1,6 @@
 {
     "name": "Nyaa Linker",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "Adds a button to Anime and Manga database websites that opens a relevant Nyaa search",
     "manifest_version": 3,
 

diff --git a/src/manifest-firefox.json b/src/manifest-firefox.json
@@ -1,6 +1,6 @@
 {
     "name": "Nyaa Linker",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "Adds a button to Anime and Manga database websites that opens a relevant Nyaa search",
     "manifest_version": 2,
 

diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -18,12 +18,32 @@ body {
     background: var(--clrDark);
     color: var(--clrLight);
     width: max-content;
+    font-family: sans-serif;
+}
+
+#parametersPage,
+#settingsPage {
+    display: grid;
+    grid-template-columns: max-content max-content;
+    gap: 2px;
+    padding: 2px 0 2px 2px;
+    text-align: right;
+}
+
+#settingsPage {
+    display: none;
+    border: 1px solid var(--clrAccent);
+    border-top: none;
+    padding-left: 25px;
 }
 
 button,
 input,
-select {
+select,
+option {
     cursor: pointer;
+    text-align: center;
+    height: 21px;
 }
 
 select,
@@ -35,7 +55,7 @@ select,
 
 option,
 #settingsPage {
-    background-color: var(--clrDark);
+    background: var(--clrDark);
     color: var(--clrAccent);
 }
 
@@ -45,43 +65,21 @@ option,
 }
 
 #saveButton {
-    flex: 13;
+    flex: 11;
 }
 
 #settingsButton {
     background: var(--clrAccent) url('https://upload.wikimedia.org/wikipedia/commons/5/58/Ic_settings_48px.svg') no-repeat 0 0 / contain;
     flex: 1;
 }
 
-#parametersPage {
-    display: grid;
-    margin: 2px 0 2px 2px;
-}
-
-#parametersPage,
-#settingsPage {
-    grid-template-columns: max-content max-content;
-    gap: 2px;
-    text-align: right;
-}
-
-#settingsPage {
-    display: none;
-    border: 1px solid var(--clrAccent);
-    position: fixed;
-    padding: 5px 25px;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 85%;
-}
-
-#hide_button_select,
 #hotkey_key_select,
-#focus_select {
-    width: 24px;
-    height: 24px;
-    text-align: center;
-    align-self: center;
+input[type='checkbox'] {
+    width: 21px;
     justify-self: left;
 }
+
+#hotkey_modifier_select,
+#hotkey_query_select {
+    width: 150%;
+}
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -58,21 +58,30 @@
 
         <div id="settingsPage">
                 <label for="hide_button_select">Hide Button:</label>
-                <input type="checkbox" id="hide_button_select" title="Stops the 'Search on Nyaa' buttom from being rendered">
+                <input type="checkbox" id="hide_button_select" title="Stops the 'Search on Nyaa' button from being rendered">
 
                 <label for="focus_select">Maintain Focus:</label>
                 <input type="checkbox" id="focus_select" title="Changes Tab Focus behavior when using the Hotkey">
 
                 <label for="hotkey_key_select">Hotkey:</label>
                 <input type="text" maxlength="1" placeholder="?" id="hotkey_key_select">
 
-                <label for="hotkey_modifier_select">Modifier Key:</label>
+                <label for="hotkey_modifier_select">Hotkey Modifier:</label>
                 <select id="hotkey_modifier_select">
                     <option value="">None</option>
                     <option value="shiftKey">Shift</option>
                     <option value="ctrlKey">Control</option>
                     <option value="altKey">Alt</option>
                 </select>
+
+                <label for="hotkey_query_select">Hotkey Query:</label>
+                <select id="hotkey_query_select">
+                    <option value="inherit" title="Inherits its behavior from the Query option on the primary settings page">Inherit</option>
+                    <option value="default" title="Creates a search using both the 'Exact' and 'Base' options">Default</option>
+                    <option value="fuzzy" title="Searches for the site's default title only, without quotes — allows fuzzy matching">Fuzzy</option>
+                    <option value="exact" title="Japanese and English full titles — searches for exact title names as written">Exact</option>
+                    <option value="base" title="Japanese and English base titles — searches with Seasons and Parts removed">Base</option>
+                </select>
 
         </div>
 </html>

diff --git a/src/popup/popup.js b/src/popup/popup.js
@@ -10,6 +10,7 @@ window.onload = () => {
             document.getElementById('focus_select').checked = load.settings.focus_setting;
             document.getElementById('hotkey_key_select').value = load.settings.hotkey_key_setting;
             document.getElementById('hotkey_modifier_select').value = load.settings.hotkey_modifier_setting;
+            document.getElementById('hotkey_query_select').value = load.settings.hotkey_query_setting;
         }
     });
 };
@@ -25,6 +26,7 @@ const saveSettings = () => {
     settings['focus_setting'] = document.getElementById('focus_select').checked;
     settings['hotkey_key_setting'] = document.getElementById('hotkey_key_select').value.toLowerCase();
     settings['hotkey_modifier_setting'] = document.getElementById('hotkey_modifier_select').value;
+    settings['hotkey_query_setting'] = document.getElementById('hotkey_query_select').value;
     return settings;
 };