feat: remove old search features

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) {

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, () => {
@@ -17,56 +14,3 @@ 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 });
-}

pages/document.php

@@ -57,13 +57,6 @@
 
 	<main></main>
 
-	<dialog class="search">
-		<search>
-			<input type="text" placeholder="start typing to search..."></input>
-			<search-results></search-results>
-		</search>
-	</dialog>
-
 	<?php // Bootstrapping ?>
 	<script><?= VV::init() ?></script>
 	<script><?= VV::js("document") ?></script>