Merge pull request #1117 from marekdedic/remove-fullscreen-keyboard

Removed Enter to launch fullscreen

README.md

@@ -65,7 +65,7 @@ You can pass an object with options to the `ImageLightbox` constructor as a seco
 | `arrows`         | `boolean` | `false`               | Whether to show navigation arrows |
 | `button`         | `boolean` | `false`               | Whether to show a close button |
 | `caption`        | `boolean` | `false`               | Whether to show image captions, if they are available |
-| `enableKeyboard` | `boolean` | `true`                | Whether to enable keyboard navigation (previous/next with arrows, Escape to exit, Enter for fullscreen) |
+| `enableKeyboard` | `boolean` | `true`                | Whether to enable keyboard navigation (previous/next with arrows, Escape to exit) |
 | `history`        | `boolean` | `false`               | Whether to save the current lightbox state to the browser history and add perma-linkable URLs |
 | `fullscreen`     | `boolean` | `false`               | Whether to enable the availability to show the lightbox in fullscreen mode |
 | `gutter`         | `number` | `10`                   | The minimum amount of free space (in % relative to the window size) to always keep around the image |

src/index.html

@@ -256,7 +256,7 @@ <h2>Video support</h2>
                 </ul>
                 Add data-ilb2-video to the link, containing the parameters of a HTML5 video tag as JSON. You can also include a sources field - a list of source tags similarily encoded.
 
-                <h2>Press enter for fullscreen</h2>
+                <h2>Fullscreen button</h2>
                 <ul data-testid="fullscreen">
                  <li><a href="images/demo1.jpg" data-imagelightbox="fullscreen"><img src="images/thumb1.jpg"></a></li>
                  <li><a href="images/demo2.jpg" data-imagelightbox="fullscreen"><img src="images/thumb2.jpg"></a></li>

src/lib/keyboard-navigation.ts

@@ -1,45 +1,32 @@
-import { fullscreenEnabled, toggleFullscreen } from "./fullscreen";
-
 let keyHandler: ((e: KeyboardEvent) => void) | null = null;
 
-function fullscreenKeyHandler(e: KeyboardEvent): void {
-  if (e.key === "Enter") {
-    e.preventDefault();
-    toggleFullscreen();
-  }
-}
-
 export function addKeyboardNavigation(
   options: ILBOptions,
   closeLightbox: () => void,
   previousImage: () => void,
   nextImage: () => void,
 ): void {
-  if (options.fullscreen && fullscreenEnabled) {
-    document.addEventListener("keypress", fullscreenKeyHandler);
-  }
-
-  if (options.enableKeyboard) {
-    keyHandler = (e): void => {
-      if (options.quitOnEscKey && e.key === "Escape") {
-        e.preventDefault();
-        closeLightbox();
-      }
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        previousImage();
-      }
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-        nextImage();
-      }
-    };
-    document.addEventListener("keyup", keyHandler);
+  if (!options.enableKeyboard) {
+    return;
   }
+  keyHandler = (e): void => {
+    if (options.quitOnEscKey && e.key === "Escape") {
+      e.preventDefault();
+      closeLightbox();
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      previousImage();
+    }
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      nextImage();
+    }
+  };
+  document.addEventListener("keyup", keyHandler);
 }
 
 export function removeKeyboardNavigation(): void {
-  document.removeEventListener("keypress", fullscreenKeyHandler);
   if (keyHandler !== null) {
     document.removeEventListener("keyup", keyHandler);
   }