diff --git a/enhancements/quickSearch.js b/enhancements/quickSearch.js new file mode 100644 index 0000000..212e7aa --- /dev/null +++ b/enhancements/quickSearch.js @@ -0,0 +1,63 @@ +const quickSearchID = 'ea-quickSearch'; +const quickSearchLink = 'ea-quickSearchLink'; + +runAfterLoad(() => { + initSearch(); +}, ".*"); + +function initSearch() { + 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.id = quickSearchID; + // register Enter keybinding + quickSearchElement.addEventListener('keypress', event => handleQuickSearch(event)); + + entry.appendChild(quickSearchElement); + + // Aniwatch CSS requires the search input to be in some kind of known menu container + 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); + + // register focus hotkey + document.addEventListener('keypress', event => handleSearchForShiftF(event)); +} + +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', quickSearchElement.value); + + linkElement.href = `${url.pathname}${url.search}`; + linkElement.click(); + + // clean up afterwards + linkElement.href = ''; + quickSearchElement.value = ''; + } +} + +function handleSearchForShiftF(event) { + if (isShiftPressed) { + if (event.key === 'F') { + event.preventDefault(); + document.getElementById(quickSearchID).focus(); + } + } +} \ No newline at end of file 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" 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 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