v1.0.5

Edsardio · Apr 29, 2022 · 452f0cd · 452f0cd
1 parent f93173c
commit 452f0cd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/dist/module.cjs.js b/dist/module.cjs.js
@@ -42,11 +42,16 @@ function src_default(Alpine) {
                                       </svg>
                                   </button>
                               </div>
-                              <img class="shadow-xl" x-bind:src="$store.lightbox.src">
+                              <img @click.away="$store.lightbox.show = false" class="shadow-xl" x-bind:src="$store.lightbox.src">
                           </div>
                       </div>
                   </div>
         `);
+    document.addEventListener("keyup", (e) => {
+      if (e.key === "Escape") {
+        Alpine.store("lightbox").show = false;
+      }
+    });
     Alpine.store("lightbox", {
       show: false,
       src: null,

diff --git a/dist/module.esm.js b/dist/module.esm.js
@@ -29,11 +29,16 @@ function src_default(Alpine) {
                                       </svg>
                                   </button>
                               </div>
-                              <img class="shadow-xl" x-bind:src="$store.lightbox.src">
+                              <img @click.away="$store.lightbox.show = false" class="shadow-xl" x-bind:src="$store.lightbox.src">
                           </div>
                       </div>
                   </div>
         `);
+    document.addEventListener("keyup", (e) => {
+      if (e.key === "Escape") {
+        Alpine.store("lightbox").show = false;
+      }
+    });
     Alpine.store("lightbox", {
       show: false,
       src: null,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@edsardio/alpine-lightbox",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A dynamic lightbox using AlpineJS and TailwindCSS",
   "main": "dist/module.cjs.js",
   "module": "dist/module.esm.js",

diff --git a/src/index.js b/src/index.js
@@ -28,12 +28,18 @@ export default function (Alpine) {
                                       </svg>
                                   </button>
                               </div>
-                              <img class="shadow-xl" x-bind:src="$store.lightbox.src">
+                              <img @click.away="$store.lightbox.show = false" class="shadow-xl" x-bind:src="$store.lightbox.src">
                           </div>
                       </div>
                   </div>
         `);
 
+        document.addEventListener('keyup', (e) => {
+            if (e.key === 'Escape') {
+                Alpine.store('lightbox').show = false;
+            }
+        })
+
         Alpine.store('lightbox', {
             show: false,
             src: null,