Support custom ancestor container

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.

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__']) {

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;
 }

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);
+ });
 });