From c8046070c2a26082424f1e200441f9cb8d317b76 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:26:59 +0200 Subject: [PATCH 01/10] #12 Base search input --- enhancements/quickSearch.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 enhancements/quickSearch.js diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js new file mode 100644 index 0000000..5e962f6 --- /dev/null +++ b/enhancements/quickSearch.js @@ -0,0 +1,33 @@ +registerScript(node => { + initSearch(); +}, ".*"); + +function initSearch() { + let menu = document.getElementById('materialize-menu-dropdown'); + + let entry = document.createElement('li'); + entry.setAttribute('ng-repeat', 'item in navbar'); + entry.setAttribute('ng-class', '{\'anime-indicator\': item[\'@attributes\'].title==\'Anime\'}'); + + let quickSearchElement = document.createElement('input'); + quickSearchElement.setAttribute('aria-label', 'Quick Search Input'); + quickSearchElement.setAttribute('ng-model-options', '{debounce: 500}'); + quickSearchElement.type = 'text'; + quickSearchElement.classList.add('ng-pristine', 'ng-valid', 'ng-empty', 'ng-touched'); + quickSearchElement.placeholder = 'Quick Search (Shift + F)'; + quickSearchElement.addEventListener('keydown', event => handleQuickSearch(event, quickSearchElement)); + + entry.appendChild(quickSearchElement); + + menu.insertAdjacentElement('beforeend', entry); +} + +function handleQuickSearch(event, quickSearchElement) { + if (event.key === 'Enter') { + let url = new URL(window.location.origin) + url.pathname = '/search'; + url.searchParams.append('q', quickSearchElement.value); + + window.location.href = url.href; + } +} \ No newline at end of file -- 2.43.5 From 0ca4b42431e7cfa3330ed3f1da2b85d5643292e3 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:28:38 +0200 Subject: [PATCH 02/10] #12 Edited manifest --- manifest.json | 1 + 1 file changed, 1 insertion(+) diff --git a/manifest.json b/manifest.json index 7a8508d..22d1468 100644 --- a/manifest.json +++ b/manifest.json @@ -21,6 +21,7 @@ "*://aniwatch.me/*" ], "js": [ + "enhancements/quickSearch.js", "enhancements/animeRequests.js" ], "run_at": "document_end" -- 2.43.5 From 1b663795156e87919e67f1c838939813be2e57ea Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:37:08 +0200 Subject: [PATCH 03/10] #12 Added runAfterLoad in aniwatch Core --- utils/aniwatchCore.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/utils/aniwatchCore.js b/utils/aniwatchCore.js index fb7587a..4552c98 100644 --- a/utils/aniwatchCore.js +++ b/utils/aniwatchCore.js @@ -1,4 +1,5 @@ let __scripts = []; +let __afterLoadScripts = []; function registerScript(func, pattern = '.*') { __scripts.push({ "function": func, "pattern": pattern }); @@ -24,4 +25,30 @@ observer.observe(document.documentElement || document.body, { childList: true, subtree: true, attributes: true -}); \ No newline at end of file +}); + +function runAfterLoad(func, pattern = '.*') { + __afterLoadScripts.push({ "function": func, "pattern": pattern }); +} + +document.addEventListener("DOMContentLoaded", event => awaitPageLoaded(), false); + +function awaitPageLoaded() { + let preLoader = document.getElementById('preloader'); + + if (typeof preLoader === 'undefined') { + return; + } + + let loop = setInterval(() => { + if (preLoader.style.display === "none") { + clearInterval(loop); + + __afterLoadScripts.forEach(script => { + if (window.location.pathname.match(script.pattern)) { + script.function(); + } + }) + } + }, 100); +} \ No newline at end of file -- 2.43.5 From 41d4ac18456b33e770d7db8cce532c12a1a3e996 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:37:41 +0200 Subject: [PATCH 04/10] #12 Run quick Search Script after load --- enhancements/quickSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js index 5e962f6..c877a39 100644 --- a/enhancements/quickSearch.js +++ b/enhancements/quickSearch.js @@ -1,4 +1,4 @@ -registerScript(node => { +runAfterLoad(() => { initSearch(); }, ".*"); -- 2.43.5 From c88ea3b6f38f6bfd315776c190c0968da7ceaff1 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:40:52 +0200 Subject: [PATCH 05/10] #12 Mostly fixed position issues --- enhancements/quickSearch.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js index c877a39..14bdb6c 100644 --- a/enhancements/quickSearch.js +++ b/enhancements/quickSearch.js @@ -3,8 +3,6 @@ runAfterLoad(() => { }, ".*"); function initSearch() { - let menu = document.getElementById('materialize-menu-dropdown'); - let entry = document.createElement('li'); entry.setAttribute('ng-repeat', 'item in navbar'); entry.setAttribute('ng-class', '{\'anime-indicator\': item[\'@attributes\'].title==\'Anime\'}'); @@ -19,6 +17,11 @@ function initSearch() { entry.appendChild(quickSearchElement); + let dummyNode = document.createElement('a'); + dummyNode.appendChild(quickSearchElement); + entry.appendChild(dummyNode); + + let menu = document.getElementById('materialize-menu-dropdown'); menu.insertAdjacentElement('beforeend', entry); } -- 2.43.5 From 00ef7e75ebbf4294c09160f3d2d346b92c9a5142 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:41:25 +0200 Subject: [PATCH 06/10] #12 Added comment for dummy element --- enhancements/quickSearch.js | 1 + 1 file changed, 1 insertion(+) diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js index 14bdb6c..cf9db68 100644 --- a/enhancements/quickSearch.js +++ b/enhancements/quickSearch.js @@ -17,6 +17,7 @@ function initSearch() { entry.appendChild(quickSearchElement); + // Aniwatch CSS requires the search input to be in some kind of known menu container let dummyNode = document.createElement('a'); dummyNode.appendChild(quickSearchElement); entry.appendChild(dummyNode); -- 2.43.5 From cae43ec998b6e029d61dbb03119b3541b52ea68e Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:49:05 +0200 Subject: [PATCH 07/10] #12 Extended helpers for pressed State of shift and ctrl keys --- utils/helpers.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/utils/helpers.js b/utils/helpers.js index cb18055..ed73b4f 100644 --- a/utils/helpers.js +++ b/utils/helpers.js @@ -1,3 +1,25 @@ +var isShiftPressed = false; +var isCtrlPressed = false; + function isHtmlElement(object) { return object instanceof HTMLElement; +} + +document.addEventListener('keydown', event => handleKeyDown(event)); +document.addEventListener('keyup', event => handleKeyUp(event)); + +function handleKeyDown(event) { + handleKeyToggle(event, true); +} + +function handleKeyUp(event) { + handleKeyToggle(event, false); +} + +function handleKeyToggle(event, isPressed) { + if (event.key === 'Shift') { + isShiftPressed = isPressed; + } else if (event.key === 'Control') { + isCtrlPressed = isPressed; + } } \ No newline at end of file -- 2.43.5 From 5230daaf17d01d342fb33fb33b02101c382654fd Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:51:11 +0200 Subject: [PATCH 08/10] #12 Registered Shift + F for global search --- enhancements/quickSearch.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js index cf9db68..68cf247 100644 --- a/enhancements/quickSearch.js +++ b/enhancements/quickSearch.js @@ -1,3 +1,5 @@ +const quickSearchID = 'ea-quickSearch'; + runAfterLoad(() => { initSearch(); }, ".*"); @@ -13,7 +15,9 @@ function initSearch() { quickSearchElement.type = 'text'; quickSearchElement.classList.add('ng-pristine', 'ng-valid', 'ng-empty', 'ng-touched'); quickSearchElement.placeholder = 'Quick Search (Shift + F)'; - quickSearchElement.addEventListener('keydown', event => handleQuickSearch(event, quickSearchElement)); + quickSearchElement.id = quickSearchID; + // register Enter keybinding + quickSearchElement.addEventListener('keypress', event => handleQuickSearch(event)); entry.appendChild(quickSearchElement); @@ -24,14 +28,26 @@ function initSearch() { let menu = document.getElementById('materialize-menu-dropdown'); menu.insertAdjacentElement('beforeend', entry); + + // register focus hotkey + document.addEventListener('keypress', event => handleSearchForShiftF(event)); } -function handleQuickSearch(event, quickSearchElement) { +function handleQuickSearch(event) { if (event.key === 'Enter') { let url = new URL(window.location.origin) url.pathname = '/search'; - url.searchParams.append('q', quickSearchElement.value); + url.searchParams.append('q', document.getElementById(quickSearchID).value); window.location.href = url.href; } +} + +function handleSearchForShiftF(event) { + if (isShiftPressed) { + if (event.key === 'F') { + event.preventDefault(); + document.getElementById(quickSearchID).focus(); + } + } } \ No newline at end of file -- 2.43.5 From c311c996e6273daef952e7f82459c4e2fc7d7672 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:54:21 +0200 Subject: [PATCH 09/10] #12 Improved page navigation --- enhancements/quickSearch.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js index 68cf247..1bf32ba 100644 --- a/enhancements/quickSearch.js +++ b/enhancements/quickSearch.js @@ -1,4 +1,5 @@ const quickSearchID = 'ea-quickSearch'; +const quickSearchLink = 'ea-quickSearchLink'; runAfterLoad(() => { initSearch(); @@ -22,9 +23,10 @@ function initSearch() { entry.appendChild(quickSearchElement); // Aniwatch CSS requires the search input to be in some kind of known menu container - let dummyNode = document.createElement('a'); - dummyNode.appendChild(quickSearchElement); - entry.appendChild(dummyNode); + let linkElement = document.createElement('a'); + linkElement.appendChild(quickSearchElement); + linkElement.id = quickSearchLink; + entry.appendChild(linkElement); let menu = document.getElementById('materialize-menu-dropdown'); menu.insertAdjacentElement('beforeend', entry); @@ -39,7 +41,9 @@ function handleQuickSearch(event) { url.pathname = '/search'; url.searchParams.append('q', document.getElementById(quickSearchID).value); - window.location.href = url.href; + let linkElement = document.getElementById(quickSearchLink); + linkElement.href = `${url.pathname}${url.search}`; + linkElement.click(); } } -- 2.43.5 From 76bc6ae965eb3c7513a76363868246fc7d68ebe3 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 29 Jul 2020 13:58:06 +0200 Subject: [PATCH 10/10] #12 Reset quick search after usage --- enhancements/quickSearch.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js index 1bf32ba..212e7aa 100644 --- a/enhancements/quickSearch.js +++ b/enhancements/quickSearch.js @@ -37,13 +37,19 @@ function initSearch() { function handleQuickSearch(event) { if (event.key === 'Enter') { + let quickSearchElement = document.getElementById(quickSearchID); + let linkElement = document.getElementById(quickSearchLink); + let url = new URL(window.location.origin) url.pathname = '/search'; - url.searchParams.append('q', document.getElementById(quickSearchID).value); + url.searchParams.append('q', quickSearchElement.value); - let linkElement = document.getElementById(quickSearchLink); linkElement.href = `${url.pathname}${url.search}`; linkElement.click(); + + // clean up afterwards + linkElement.href = ''; + quickSearchElement.value = ''; } } -- 2.43.5