From 83294e1b34bd235295de9644ca3809d6adf11bc6 Mon Sep 17 00:00:00 2001
From: Frederic Sinn <frederic.sinn@diva-e.com>
Date: Tue, 12 Sep 2023 14:59:23 +0200
Subject: [PATCH 1/3] Support image container option for FocusImage

This is a more customizable than the one suggested in #17. It should also be a
non-breaking change as `container` is optional. If a user did not pass
`container` as option, we fall back to the current behaviour.
---
 src/FocusedImage.ts | 4 +++-
 src/interfaces.ts   | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/FocusedImage.ts b/src/FocusedImage.ts
index 94b70b9..dc693d7 100644
--- a/src/FocusedImage.ts
+++ b/src/FocusedImage.ts
@@ -48,7 +48,9 @@ export class FocusedImage {
 
     // Set up element references
     this.img = imageNode;
-    this.container = imageNode.parentElement;
+    this.container = this.options.container
+      ? this.options.container
+      : imageNode.parentElement;
 
     // Set up instance
     if (this.img['__focused_image_instance__']) {
diff --git a/src/interfaces.ts b/src/interfaces.ts
index a22883f..2cf0358 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -58,4 +58,10 @@ export interface FocusedImageOptions {
    * Default value is "relative"
    */
   containerPosition?: 'fixed' | 'relative' | 'absolute' | 'sticky';
+  /**
+   * Focus image container
+   *
+   * Default value is  `undefined`, and code will fall back to `FocusedImage::imageNode.parentElement`
+   */
+  container?: HTMLElement;
 }

From 0dd16d966b620d7796497d055eaa7b4353977e07 Mon Sep 17 00:00:00 2001
From: Frederic Sinn <frederic.sinn@diva-e.com>
Date: Tue, 12 Sep 2023 15:14:30 +0200
Subject: [PATCH 2/3] Document how to use custom container option

---
 README.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/README.md b/README.md
index 3e5e6ad..b3bc0dd 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,30 @@ const focusedImage = new FocusedImage(img, {
 })
 ```
 
+#### Custom Ancestor Container
+
+Use the `container` option to pass in a custom ancestor. This can come in handy if you use the `<picture>` tag in your HTML.
+
+```html
+<div class="focused-image-container">
+  <picture>
+    <!-- ... -->
+    <img class="focused-image" src="https://picsum.photos/2400/1400">
+  </picture>
+</div>
+```
+
+```ts
+import { FocusedImage } from "image-focus"
+
+const img = document.querySelector('.focused-image') as HTMLImageElement
+const container = document.querySelector('.focused-image-container') as HTMLElement
+
+const focusedImage = new FocusedImage(img, {
+  container: container
+})
+```
+
 ### FocusPicker
 
 Provide an `onChange` callback that will receive a `Focus` object that has `x` and `y` properties for the newly selected coordinates. Optionally supply a `focus` to initialize with, or a `retina` src to use instead of the default white ring SVG.

From 192927effff522065d07766f0e9e0233b102e4bc Mon Sep 17 00:00:00 2001
From: Frederic Sinn <frederic.sinn@diva-e.com>
Date: Tue, 12 Sep 2023 15:35:02 +0200
Subject: [PATCH 3/3] Test the container option

---
 test/FocusedImage.test.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/test/FocusedImage.test.ts b/test/FocusedImage.test.ts
index 0767faa..edb9886 100644
--- a/test/FocusedImage.test.ts
+++ b/test/FocusedImage.test.ts
@@ -27,6 +27,11 @@ describe('FocusedImage', () => {
       <div class="focused-image-container top-left">
         <img class="focused-image" src="https://picsum.photos/2400/1400" alt="" data-focus-x="0.28" data-focus-y="0.33">
       </div>
+      <div  class="pic-focused-image-container top-left">
+        <picture class="pic-container">
+          <img class="pic-focused-image" src="https://picsum.photos/2400/1400" alt="" data-focus-x="0.28" data-focus-y="0.33">
+        <picture>
+      </div>
     </body>
     `;
   });
@@ -66,4 +71,15 @@ describe('FocusedImage', () => {
     expect(instance.img).toBeTruthy();
     expect(instance.container).toBeTruthy();
   });
+
+  it('should use given custom container', () => {
+    const img = document.querySelector(
+      '.pic-focused-image'
+    ) as HTMLImageElement;
+    const container = document.querySelector(
+      '.pic-focused-image-container'
+    ) as HTMLElement;
+    const instance = new FocusedImage(img, { container: container });
+    expect(instance.container).toBe(container);
+  });
 });