fix: disabled state is missing

Neovici · Dec 11, 2023 · 91e718b · 91e718b
1 parent d0f9bb4
commit 91e718b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/cosmoz-image-viewer.js b/cosmoz-image-viewer.js
@@ -40,6 +40,8 @@ const renderCosmozImageViewer = ({
 	nextImage,
 	previousImage,
 	total,
+	first,
+	last,
 	currentImageIndex,
 	selectedImageNumber,
 	syncImageIndex,
@@ -71,10 +73,20 @@ const renderCosmozImageViewer = ({
 					${when(
 						shouldShow(host.showNav, total, 2),
 						() => html`
-							<button class="nav" name="prev" @click=${previousImage}>
+							<button
+								class="nav"
+								name="prev"
+								?disabled=${first}
+								@click=${previousImage}
+							>
 								${leftArrow}
 							</button>
-							<button class="nav" name="next" @click=${nextImage}>
+							<button
+								class="nav"
+								name="next"
+								?disabled=${last}
+								@click=${nextImage}
+							>
 								${rightArrow}
 							</button>
 						`,

diff --git a/cosmoz-image-viewer.style.js b/cosmoz-image-viewer.style.js
@@ -57,11 +57,18 @@ button.nav {
     border: none;
     width: 40px;
     height: 40px;
-    cursor: pointer;
     transition: background-color 100ms;
 }
 
-button.nav:active {
+button.nav:not([disabled]) {
+    cursor: pointer;
+}
+
+button.nav[disabled] {
+    opacity: 0.5;
+}
+
+button.nav:active:not([disabled]) {
     background-color: rgba(0, 0, 0, 0.60);
 }
 
@@ -108,7 +115,8 @@ button.nav:active {
 
 cosmoz-slider { 
     min-height: 150px;
-    // overflow-y: auto !important;
     height:100%;
     overflow-y: hidden;
-}`;
+}
+
+`;