Updated docs to reflect default options changes

marekdedic · Oct 6, 2024 · e6b9195 · e6b9195
1 parent 7f43264
commit e6b9195
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 282 deletions.
diff --git a/src/index.css b/src/index.css
@@ -223,6 +223,10 @@ header h2 {
   margin-bottom: 0.625em;
 }
 
+#main_content h2:first-child {
+  border-top: none;
+}
+
 p {
   margin-bottom: 20px;
 }
@@ -240,6 +244,11 @@ ul li {
   margin: 0.625em;
 }
 
+#main_content section {
+  border-top: 1px solid #999;
+  padding-bottom: 20px;
+}
+
 footer {
   padding-bottom: 30px;
   background: transparent url("../images/hr.png") 0 0 no-repeat;

diff --git a/src/index.html b/src/index.html
diff --git a/src/index.ts b/src/index.ts
@@ -3,73 +3,77 @@ import { ImageLightbox } from "./lib/imagelightbox";
 declare const TEST: boolean | undefined;
 const isTest: boolean = typeof TEST !== "undefined" ? TEST : false;
 
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="a"]'), {
-  activity: true,
+new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="basic"]'), {
+  ...(isTest && { animationSpeed: 0 }),
+});
+
+new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="video"]'), {
+  ...(isTest && { animationSpeed: 0 }),
 });
 
 new ImageLightbox(
-  document.querySelectorAll('a[data-imagelightbox="allowedtypes"]'),
+  document.querySelectorAll('a[data-imagelightbox="minimal"]'),
   {
-    allowedTypes: "gif",
+    activity: false,
+    arrows: false,
+    button: false,
+    fullscreen: false,
+    overlay: false,
+    quitOnDocClick: false,
     ...(isTest && { animationSpeed: 0 }),
   },
 );
 
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="b"]'), {
-  overlay: true,
-  ...(isTest && { animationSpeed: 0 }),
-});
-
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="c"]'), {
-  button: true,
-  quitOnDocClick: false,
-  ...(isTest && { animationSpeed: 0 }),
-});
-
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="d"]'), {
-  caption: true,
-  ...(isTest && { animationSpeed: 0 }),
-});
-
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="e"]'), {
-  navigation: true,
-  ...(isTest && { animationSpeed: 0 }),
-});
+new ImageLightbox(
+  document.querySelectorAll('a[data-imagelightbox="caption"]'),
+  {
+    caption: true,
+    ...(isTest && { animationSpeed: 0 }),
+  },
+);
 
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="f"]'), {
-  arrows: true,
-  ...(isTest && { animationSpeed: 0 }),
-});
+new ImageLightbox(
+  document.querySelectorAll('a[data-imagelightbox="navigation"]'),
+  {
+    navigation: true,
+    ...(isTest && { animationSpeed: 0 }),
+  },
+);
 
 new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="quit"]'), {
-  quitOnEnd: true,
+  quitOnDocClick: false,
+  quitOnEnd: false,
   quitOnImgClick: true,
   ...(isTest && { animationSpeed: 0 }),
 });
 
 new ImageLightbox(
-  document.querySelectorAll('a[data-imagelightbox="fullscreen"]'),
+  document.querySelectorAll('a[data-imagelightbox="history"]'),
   {
-    fullscreen: true,
+    history: true,
     ...(isTest && { animationSpeed: 0 }),
   },
 );
 
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="g"]'), {
-  activity: true,
-  arrows: true,
-  button: true,
-  caption: true,
-  navigation: true,
-  overlay: true,
-  quitOnDocClick: false,
-  ...(isTest && { animationSpeed: 0 }),
-});
+new ImageLightbox(
+  document.querySelectorAll('a[data-imagelightbox="history-ids"]'),
+  {
+    history: true,
+    ...(isTest && { animationSpeed: 0 }),
+  },
+);
+
+new ImageLightbox(
+  document.querySelectorAll('a[data-imagelightbox="allowedtypes"]'),
+  {
+    allowedTypes: "gif",
+    ...(isTest && { animationSpeed: 0 }),
+  },
+);
 
 const manualOpenGallery = new ImageLightbox(
-  document.querySelectorAll('a[data-imagelightbox="h"]'),
+  document.querySelectorAll('a[data-imagelightbox="trigger"]'),
   {
-    arrows: true,
     ...(isTest && { animationSpeed: 0 }),
   },
 );
@@ -81,9 +85,8 @@ document
   });
 
 const dynamicAddingGallery = new ImageLightbox(
-  document.querySelectorAll('a[data-imagelightbox="i"]'),
+  document.querySelectorAll('a[data-imagelightbox="dynamic"]'),
   {
-    arrows: true,
     ...(isTest && { animationSpeed: 0 }),
   },
 );
@@ -98,7 +101,7 @@ document
     linkContainer?.appendChild(newLi);
 
     const newAnchor = document.createElement("a");
-    newAnchor.dataset["imagelightbox"] = "i";
+    newAnchor.dataset["imagelightbox"] = "dynamic";
     newAnchor.href = "images/demo4.jpg";
     newLi.appendChild(newAnchor);
 
@@ -107,29 +110,10 @@ document
     newAnchor.appendChild(newImg);
 
     dynamicAddingGallery.addImages(
-      document.querySelectorAll('a[data-imagelightbox="i"]'),
+      document.querySelectorAll('a[data-imagelightbox="dynamic"]'),
     );
   });
 
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="j"]'), {
-  arrows: true,
-  history: true,
-  ...(isTest && { animationSpeed: 0 }),
-});
-
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="k"]'), {
-  arrows: true,
-  history: true,
-  ...(isTest && { animationSpeed: 0 }),
-});
-
-new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="video"]'), {
-  activity: true,
-  arrows: true,
-  overlay: true,
-  ...(isTest && { animationSpeed: 0 }),
-});
-
 new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="events"]'), {
   ...(isTest && { animationSpeed: 0 }),
 });

diff --git a/tests/basic.spec.ts b/tests/basic.spec.ts
@@ -15,7 +15,7 @@ test("has correct title", async ({ page }) => {
 
 test("opens and closes the lightbox", async ({ page }) => {
   await page.goto("/");
-  await page.getByTestId("activity").getByRole("link").first().click();
+  await page.getByTestId("basic").getByRole("link").first().click();
   await expect(page.locator("#ilb-activity-indicator")).toBeVisible();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-activity-indicator")).toBeHidden();
@@ -53,7 +53,7 @@ test("can add images dynamically", async ({ page }) => {
 
 test("quits on end", async ({ page }) => {
   await page.goto("/");
-  await page.getByTestId("quit").getByRole("link").first().click();
+  await page.getByTestId("basic").getByRole("link").first().click();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",
@@ -75,7 +75,7 @@ test("quits on end", async ({ page }) => {
   );
   await page.keyboard.press("ArrowRight");
   await expect(page.locator("#ilb-image")).toBeHidden();
-  await page.getByTestId("quit").getByRole("link").first().click();
+  await page.getByTestId("basic").getByRole("link").first().click();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",

diff --git a/tests/decorations.spec.ts b/tests/decorations.spec.ts
@@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {
 
 test("shows the overlay", async ({ page }) => {
   await page.goto("/");
-  await page.getByTestId("overlay").getByRole("link").first().click();
+  await page.getByTestId("basic").getByRole("link").first().click();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",
@@ -22,7 +22,7 @@ test("shows the overlay", async ({ page }) => {
 
 test("can be closed with the close button", async ({ page }) => {
   await page.goto("/");
-  await page.getByTestId("close-button").getByRole("link").first().click();
+  await page.getByTestId("basic").getByRole("link").first().click();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",

diff --git a/tests/history.spec.ts b/tests/history.spec.ts
@@ -41,7 +41,7 @@ test("has a working history", async ({ page }) => {
 });
 
 test("can open history links", async ({ page }) => {
-  await page.goto("/?imageLightboxIndex=2&imageLightboxSet=j");
+  await page.goto("/?imageLightboxIndex=2&imageLightboxSet=history");
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",
@@ -51,7 +51,7 @@ test("can open history links", async ({ page }) => {
 
 test.describe("doesn't break on invalid history links", () => {
   test("invalid index", async ({ page }) => {
-    await page.goto("/?imageLightboxIndex=42&imageLightboxSet=j");
+    await page.goto("/?imageLightboxIndex=42&imageLightboxSet=history");
     await expect(page.locator("#ilb-image")).toBeHidden();
   });
   test("no index", async ({ page }) => {
@@ -99,7 +99,7 @@ test("has a working history with IDs", async ({ page }) => {
 });
 
 test("can open history links with IDs", async ({ page }) => {
-  await page.goto("/?imageLightboxIndex=2&imageLightboxSet=k");
+  await page.goto("/?imageLightboxIndex=2&imageLightboxSet=history-ids");
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",

diff --git a/tests/navigation.spec.ts b/tests/navigation.spec.ts
@@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {
 
 test("can be controlled with image clicks", async ({ page }) => {
   await page.goto("/");
-  await page.getByTestId("overlay").getByRole("link").first().click();
+  await page.getByTestId("basic").getByRole("link").first().click();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",
@@ -49,7 +49,7 @@ test("can be controlled with image clicks", async ({ page }) => {
 
 test("can be controlled with keyboard", async ({ page }) => {
   await page.goto("/");
-  await page.getByTestId("fullscreen").getByRole("link").first().click();
+  await page.getByTestId("basic").getByRole("link").first().click();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",
@@ -88,7 +88,7 @@ test("can be controlled with keyboard", async ({ page }) => {
 
 test("can be controlled with arrows", async ({ page }) => {
   await page.goto("/");
-  await page.getByTestId("arrows").getByRole("link").first().click();
+  await page.getByTestId("quit").getByRole("link").first().click();
   await expect(page.locator("#ilb-image")).toBeVisible();
   await expect(page.locator("#ilb-image")).toHaveAttribute(
     "src",