diff --git a/assets/css/document.css b/assets/css/document.css index ff7177c..9624864 100755 --- a/assets/css/document.css +++ b/assets/css/document.css @@ -33,10 +33,6 @@ body { font-size: 15px; } -body.search-dialog-open { - overflow: hidden; -} - a { display: contents; color: inherit; @@ -165,8 +161,6 @@ main.loading > * { /* ## Search */ -/* ### Box */ - searchbox { --icon-size: 25px; @@ -187,83 +181,6 @@ searchbox > svg { width: var(--icon-size); } -/* ### Dialog */ - -body.search-dialog-open main { - transform: scale(.94); -} - -dialog.search { - transition: 200ms height cubic-bezier(.41,0,.34,.99); - margin: auto; - width: 100%; - max-width: 1000px; - height: calc(var(--running-size) + (var(--padding) * 5)); - max-height: 1000px; - border-color: transparent; - background-color: transparent; - overflow: visible; - outline: none; -} - -dialog.search.active { - height: 70vh; -} - -dialog.search search { - transition: 400ms transform, 200ms opacity; - width: 100%; - height: 100%; - display: grid; - grid-template-rows: var(--running-size) 1fr; - gap: calc(var(--padding) * 2); - transform: scale(1.1); - overflow: hidden; - background-color: rgba(255, 255, 255, .05); - -webkit-backdrop-filter: blur(20px); - backdrop-filter: brightness(.3) blur(20px); - border-radius: 12px; - box-shadow: 0 10px 30px 10px black; - opacity: 0; -} - -body.search-dialog-open dialog.search search { - transform: scale(1); - padding: calc(var(--padding) * 1.5); - opacity: 1; -} - -search input { - transition: 200ms background-color, 200ms box-shadow, 200ms color; - border-radius: 6px; - border: none; - outline: none; - color: black; - font-size: 16px; - padding: var(--padding) calc(var(--padding) * 1.5); - background-color: rgba(255, 255, 255, .05); - box-shadow: 0 5px 70px 10px rgba(0, 0, 0, .3); - color: white; -} - -search input:focus { - background-color: rgba(255, 255, 255, .9); - box-shadow: 0 10px 30px 10px black; - color: black; -} - -/* ### Search results */ - -dialog.search search search-results { - overflow-y: auto; -} - -dialog.search search search-results > svg { - margin: auto; - width: 150px; - fill: rgba(255, 255, 255, .05); -} - /* # Feature queries */ @media (hover: hover) { diff --git a/assets/js/document.js b/assets/js/document.js index 8405b26..4bb2ef2 100755 --- a/assets/js/document.js +++ b/assets/js/document.js @@ -6,9 +6,6 @@ const mainElement = document.querySelector(vv._env.MAIN); // Or maybe I shouldn't... hmmm mainElement.addEventListener(vv.Navigation.events.LOADING, () => { mainElement.classList.add("loading"); - - // Clean up modified transform-origin if set after search dialog animation - mainElement.style.removeProperty("transform-origin"); }); mainElement.addEventListener(vv.Navigation.events.LOADED, () => { @@ -16,57 +13,4 @@ mainElement.addEventListener(vv.Navigation.events.LOADED, () => { // Wait 200ms for the page fade-in animation to finish setTimeout(() => mainElement.classList.remove("loading"), 200); -}); - -// Search dialog open/close logic -{ - const CLASNAME_DIALOG_OPEN = "search-dialog-open"; - // Offset in pixels from scroll position when scaling the main element - const TRANSFORM_ORIGIN_Y_PADDING = 350; - - const dialog = document.querySelector("dialog.search"); - - // "Polyfill" for HTMLDialogELement open and close events - (new MutationObserver((mutations) => { - // There is only one search dialog elemenet - const target = mutations[0].target; - - // Set or unset dialog open class on body depending on dialog visibility - target.hasAttribute("open") - ? target.dispatchEvent(new Event("open")) - : target.dispatchEvent(new Event("close")); - - }).observe(dialog, { attributes: true })); - - dialog.addEventListener("open", () => { - // Scale main element from the current scroll position - mainElement.style.setProperty("transform-origin", `50% calc(${window.scrollY}px + ${TRANSFORM_ORIGIN_Y_PADDING}px)`); - - document.body.classList.add(CLASNAME_DIALOG_OPEN); - }); - dialog.addEventListener("close", () => document.body.classList.remove(CLASNAME_DIALOG_OPEN)); - - // Close search dialog if dialog is clicked outside inner content - dialog.addEventListener("click", (event) => event.target === dialog ? dialog.close() : null); - - // Open search dialog when searchbox is clicked - document.querySelector("searchbox").addEventListener("click", () => dialog.showModal()); -} - -// Search logic -{ - const searchResultsElement = document.querySelector("search-results"); - const search = (query) => { - new vv.Navigation(`/search?q=${query}`, { - carrySearchParams: true - }).navigate(searchResultsElement); - }; - - // Run search on keyup - document.querySelector("search input").addEventListener("keyup", (event) => search(event.target.value)); - - // Trigger expand search box animation - document.querySelector("search input").addEventListener("keydown", () => { - searchResultsElement.closest("dialog").classList.add("active"); - }, { once: true }); -} \ No newline at end of file +}); \ No newline at end of file diff --git a/pages/document.php b/pages/document.php index 6cedad1..d4a86e8 100755 --- a/pages/document.php +++ b/pages/document.php @@ -56,13 +56,6 @@
- - - - - - -