feat(api): Add custom class option

README.md

@@ -170,6 +170,7 @@ The options enable the customization of the zoom. They are defined as an object
 | `margin` | `number` | `0` | The space outside the zoomed image |
 | `background` | `string` | `"#fff"` | The background of the overlay |
 | `scrollOffset` | `number` | `40` | The number of pixels to scroll to close the zoom |
+| `class` | `string` \| `array` | `null` | The custom class(es) add to the zoomed image |
 | `container` | `string` \| `HTMLElement` \| `object` | `null` | The viewport to render the zoom in<br> [Read more →](docs/container.md) |
 | `template` | `string` \| `HTMLTemplateElement` | `null` | The template element to display on zoom<br> [Read more →](docs/template.md) |
 
@@ -180,6 +181,7 @@ mediumZoom('[data-zoomable]', {
  scrollOffset: 0,
  container: '#zoom-container',
  template: '#zoom-template',
+ class: null,
 })
 ```
 

src/__tests__/medium-zoom.test.js

@@ -121,6 +121,7 @@ describe('mediumZoom()', () => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  })
  })
  })
@@ -142,6 +143,7 @@ describe('mediumZoom()', () => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  })
  })
 
@@ -158,6 +160,7 @@ describe('mediumZoom()', () => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  })
  })
 
@@ -179,6 +182,7 @@ describe('mediumZoom()', () => {
  scrollOffset: 124,
  container: null,
  template: null,
+ class: null,
  })
  })
  })
@@ -202,6 +206,7 @@ describe('mediumZoom()', () => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  })
  })
  })
@@ -220,6 +225,7 @@ describe('mediumZoom()', () => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  })
  })
 
@@ -241,8 +247,39 @@ describe('mediumZoom()', () => {
  scrollOffset: 124,
  container: null,
  template: null,
+ class: null,
  })
  })
+
+ test('images to zoom and applies single custom class option', async () => {
+ const image = document.createElement('img')
+ root.appendChild(image)
+
+ const options = { class: 'custom-class' }
+ const zoom = mediumZoom('img', options)
+ await zoom.open()
+ jest.runAllTimers()
+
+ expect(document.querySelector('.custom-class')).toBeTruthy()
+ expect(zoom.getImages()).toEqual([image])
+ })
+
+ test('images to zoom and applies multiple custom classes option', async () => {
+ const image = document.createElement('img')
+ root.appendChild(image)
+
+ const options = {
+ class: ['custom-class-1', 'custom-class-2', 'custom-class-3'],
+ }
+ const zoom = mediumZoom('img', options)
+ await zoom.open()
+ jest.runAllTimers()
+
+ expect(document.querySelector('.custom-class-1')).toBeTruthy()
+ expect(document.querySelector('.custom-class-2')).toBeTruthy()
+ expect(document.querySelector('.custom-class-3')).toBeTruthy()
+ expect(zoom.getImages()).toEqual([image])
+ })
  })
  })
 })
@@ -699,6 +736,7 @@ describe('getOptions()', () => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  })
  })
 
@@ -711,6 +749,7 @@ describe('getOptions()', () => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  })
  })
 })

src/medium-zoom.d.ts

@@ -35,6 +35,13 @@ export interface ZoomOptions {
  * @default null
  */
  template?: string | HTMLTemplateElement
+
+ /**
+ * The css class add to the zoomed image.
+ *
+ * @default null
+ */
+ class?: string | Array<T>
 }
 
 export interface ZoomContainer {

src/medium-zoom.js

@@ -337,6 +337,15 @@ const mediumZoom = (selector, options = {}) => {
  active.original.classList.add('medium-zoom-image--hidden')
  active.zoomed.classList.add('medium-zoom-image--opened')
 
+ if (Array.isArray(zoomOptions.class)) {
+ active.zoomed.classList.add(...zoomOptions.class)
+ } else if (
+ typeof zoomOptions.class === 'string' ||
+ zoomOptions.class instanceof String
+ ) {
+ active.zoomed.classList.add(zoomOptions.class)
+ }
+
  active.zoomed.addEventListener('click', close)
  active.zoomed.addEventListener('transitionend', _handleOpenEnd)
 
@@ -418,6 +427,16 @@ const mediumZoom = (selector, options = {}) => {
  }
  document.body.removeChild(overlay)
  active.zoomed.classList.remove('medium-zoom-image--opened')
+
+ if (Array.isArray(zoomOptions.class)) {
+ active.zoomed.classList.remove(...zoomOptions.class)
+ } else if (
+ typeof zoomOptions.class === 'string' ||
+ zoomOptions.class instanceof String
+ ) {
+ active.zoomed.classList.remove(zoomOptions.class)
+ }
+
  if (active.template) {
  document.body.removeChild(active.template)
  }
@@ -511,6 +530,7 @@ const mediumZoom = (selector, options = {}) => {
  scrollOffset: 40,
  container: null,
  template: null,
+ class: null,
  ...zoomOptions,
  }