Remove script templates

Piszmog · Jun 8, 2024 · 5428c2c · 5428c2c
1 parent e412916
commit 5428c2c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/components/drawer.templ b/components/drawer.templ
@@ -1,12 +1,25 @@
 package components
 
+var toggleSlideOverHandle = templ.NewOnceHandle()
+
 templ drawer(name string, title string) {
+	@toggleSlideOverHandle.Once() {
+		<script type="text/javascript">
+		function toggleSlideOver(name) {
+			const slideOver = document.getElementById(name + '-slideOver');
+			const overlay = document.getElementById(name + '-overlay');
+			slideOver.classList.toggle('translate-x-full');
+			overlay.classList.toggle('hidden');
+		}
+		</script>
+	}
 	<div
 		id={ name + "-overlay" }
 		role="dialog"
 		aria-modal="true"
 		class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"
-		onClick={ toggleSlideOver(name) }
+		data-name={ name }
+		onclick="toggleSlideOver(this.getAttribute('data-name'))"
 		tabindex="-1"
 		aria-labelledby={ name + "-slide-over-title" }
 	></div>
@@ -23,7 +36,8 @@ templ drawer(name string, title string) {
 						<button
 							type="button"
 							class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-							onClick={ toggleSlideOver(name) }
+							data-name={ name }
+							onclick="toggleSlideOver(this.getAttribute('data-name'))"
 						>
 							<span class="sr-only">Close panel</span>
 							<svg
@@ -50,10 +64,3 @@ templ drawer(name string, title string) {
 		</div>
 	</div>
 }
-
-script toggleSlideOver(name string) {
-    const slideOver = document.getElementById(name + '-slideOver');
-    const overlay = document.getElementById(name + '-overlay');
-    slideOver.classList.toggle('translate-x-full');
-    overlay.classList.toggle('hidden');
-}
diff --git a/components/filter.templ b/components/filter.templ
@@ -5,6 +5,12 @@ import (
 )
 
 templ filterForm() {
+	<script type="text/javascript">
+		function clearFilter() {
+			document.getElementById('company').value = '';
+			document.getElementById('status-select').value = '';
+		}
+	</script>
 	<form
 		id="filter-form"
 		class="ml-3 mr-3 mt-3 flex items-center space-x-2"
@@ -37,16 +43,11 @@ templ filterForm() {
 			Filter
 		</button>
 		<button
-			onclick={ clearFilter() }
+			onclick="clearFilter()"
 			type="submit"
 			class="rounded-md mt-8 px-3 py-2 text-sm font-semibold bg-white text-gray-900 shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 ring-1 ring-insert ring-gray-300"
 		>
 			Clear
 		</button>
 	</form>
 }
-
-script clearFilter() {
-	document.getElementById('company').value = '';
-	document.getElementById('status-select').value = '';
-}
diff --git a/components/header.templ b/components/header.templ
@@ -17,7 +17,7 @@ templ header(atHome bool) {
 							class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
 							aria-controls="mobile-menu"
 							aria-expanded="false"
-							onClick={ toggleSlideOver("mobile-menu") }
+							onclick="toggleSlideOver('mobile-menu')"
 						>
 							<span class="absolute -inset-0.5"></span>
 							<span class="sr-only">Open main menu</span>
@@ -42,7 +42,7 @@ templ header(atHome bool) {
 							<button
 								type="button"
 								class="relative inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-								onClick={ toggleSlideOver("new-job") }
+								onclick="toggleSlideOver('new-job')"
 							>
 								<svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 									<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"></path>

diff --git a/components/jobs.templ b/components/jobs.templ
@@ -34,7 +34,7 @@ templ jobRow(j types.JobApplication) {
 		<div class="flex flex-none items-center gap-x-4">
 			<button
 				class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block"
-				onClick={ toggleSlideOver("job-details") }
+				onclick="toggleSlideOver('job-details')"
 				hx-get={ "/jobs/" + strconv.FormatInt(j.ID, 10) }
 				hx-target="#job-details"
 				hx-trigger="click"
@@ -152,7 +152,7 @@ templ JobDetails(j types.JobApplication, timelineEntries []types.JobApplicationT
 			<button
 				type="button"
 				class="text-sm font-semibold leading-6 text-gray-900"
-				onClick={ toggleSlideOver("job-details") }
+				onclick="toggleSlideOver('job-details')"
 			>
 				Cancel
 			</button>
@@ -171,7 +171,7 @@ templ JobDetails(j types.JobApplication, timelineEntries []types.JobApplicationT
 }
 
 templ jobApplicationForm() {
-	<script lang="javascript">
+	<script type="text/javascript">
 	function afterRequest(form) {
 		form.reset();
 		const slideOver = document.getElementById('new-job-slideOver');
@@ -232,7 +232,7 @@ templ jobApplicationForm() {
 			<button
 				type="button"
 				class="text-sm font-semibold leading-6 text-gray-900"
-				onClick={ toggleSlideOver("new-job") }
+				onclick="toggleSlideOver('new-job')"
 			>
 				Cancel
 			</button>