[#148] Moving JS over to Alpine

vigetlabs · Nov 8, 2024 · 3d38fd5 · 3d38fd5
1 parent aea3bff
commit 3d38fd5
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 44 deletions.
diff --git a/wp-content/themes/wp-starter/blocks/dialog/editor.css b/wp-content/themes/wp-starter/blocks/dialog/editor.css
@@ -1,4 +1,4 @@
-.acf-block-dialog {
+/* .acf-block-dialog {
 	position: absolute;
 	top: 0;
 	left: 50%;
@@ -50,3 +50,4 @@ input:checked + label + .acf-block-dialog {
 .is-root-container:has(.acf-block-dialog) {
 	position: relative;
 }
+
diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php
@@ -14,9 +14,41 @@
 	<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-label"><?php esc_html_e( 'Toggle', 'wp-site-starter' ); ?></label>
 <?php endif; ?>
 
-<dialog <?php block_attrs( $block ); ?>>
+<div
+<?php if ( ! is_admin() ) : ?>
+	x-data="{
+	openDialog: false,
+
+	// Close the dialog when the user clicks backdrop
+	handleDialogClick(event) {
+		(event.target === $refs.dialogRef) && this.handleDialogClose()
+	},
+
+	// Delay close to allow for animation
+	handleDialogClose() {
+		if (!this.openDialog) return
+
+		this.openDialog = false
+		$refs.dialogRef.close()
+	}
+	}"
+<?php endif; ?>
+>
+
+<dialog
+	<?php block_attrs( $block ); ?>
 	<?php if ( ! is_admin() ) : ?>
-<!--		<button>--><?php //esc_html_e( 'Close', 'wp-site-starter' ); ?><!--</button>-->
+		x-ref="dialogRef"
+		@keydown.escape.prevent="handleDialogClose()"
+		@click="handleDialogClick(event)"
+	<?php endif; ?>
+>
+	<?php if ( ! is_admin() ) : ?>
+		<button
+			@click="handleDialogClose()"
+		>
+			<?php esc_html_e( 'Close', 'wp-site-starter' ); ?>
+		</button>
 	<?php endif; ?>
 
 	<div class="inner">
@@ -26,5 +58,12 @@
 		<?php inner_blocks(); ?>
 	</div>
 </dialog>
-
-<button><?php esc_html_e( 'Open', 'wp-site-starter' ); ?></button>
+<button
+	class="btn-default"
+	<?php if ( ! is_admin() ) : ?>
+		@click="$refs.dialogRef.showModal(), openDialog = true"
+	<?php endif; ?>
+>
+	<?php esc_html_e( 'Open', 'wp-site-starter' ); ?>
+</button>
+</div>
diff --git a/wp-content/themes/wp-starter/blocks/dialog/view.css b/wp-content/themes/wp-starter/blocks/dialog/view.css
@@ -1,46 +1,34 @@
-html:has(.acf-block-dialog[open]),
-body:has(.acf-block-dialog[open]) {
-	overflow: hidden;
-}
-
-.acf-block-dialog {
-	border-radius: 5px;
-	border: 0;
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	background: #fff;
-	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-	z-index: 1000;
-	display: none;
-	margin: 0 !important;
-	padding: 0 !important;
-}
+@layer components {
+	html:has(.acf-block-dialog[open]),
+	body:has(.acf-block-dialog[open]) {
+		overflow: hidden;
+	}
 
-.acf-block-dialog::backdrop {
-	background: rgba(0, 0, 0, 0.4);
-	cursor: pointer;
-}
+	.acf-block-dialog {
+		border-radius: 0;
+		border: none;
+		background: white;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	}
 
-.acf-block-dialog[open],
-.acf-block-dialog::backdrop {
-	animation: show 500ms ease;
-}
+	.acf-block-dialog::backdrop {
+		@apply bg-black/40;
+	}
 
-.acf-block-dialog[open] {
-	display: block;
-}
+	.acf-block-dialog[open],
+	.acf-block-dialog::backdrop {
+		animation: show 500ms ease;
+	}
 
-.acf-block-dialog > .inner {
-	padding: 50px;
-	display: flex;
-	flex-direction: column;
-}
+	.acf-block-dialog > .inner {
+		padding: 50px;
+		display: flex;
+		flex-direction: column;
+	}
 
-@keyframes show {
-	0% {
-		opacity: 0;
+	@keyframes show {
+		0% {
+			opacity: 0;
+		}
 	}
 }
-