gatsby-remark-images-medium-zoom - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

gatsby-browser.js

@@ -11,3 +11,3 @@ import mediumZoom from 'medium-zoom'
   zIndex: 999,
-  excludedSelector: null,
+  excludedSelector: null
 }
@@ -32,3 +32,3 @@
       .map(({ name }) => name === FIRST_CONTENTFUL_PAINT)
-      .forEach(callback),
+      .forEach(callback)
   )
@@ -54,4 +54,5 @@
     .medium-zoom--opened > .medium-zoom-overlay,
-    .medium-zoom--opened > .medium-zoom-image {
-      z-index: ${zIndex};
+    .medium-zoom--opened > .medium-zoom-image,
+	  img.medium-zoom-image--opened {
+      z-index: ${zIndex}
     }
@@ -64,25 +65,30 @@ `
 
-function applyZoomEffect({ excludedSelector, ...options }) {
+function applyZoomEffect({ excludedSelector, includedSelector, ...options }) {
   const imagesSelector = excludedSelector
     ? `${imageClass}:not(${excludedSelector})`
     : imageClass
-  const images = Array.from(document.querySelectorAll(imagesSelector)).map(
-    el => {
+
+  let imageElements = Array.from(document.querySelectorAll(imagesSelector))
+  if (includedSelector) {
+    const includedEls = Array.from(document.querySelectorAll(includedSelector))
+    imageElements = imageElements.concat(includedEls)
+  }
+  const images = imageElements
+    .filter(el => !el.classList.contains('medium-zoom-image'))
+    .map(el => {
       function onImageLoad() {
         const originalTransition = el.style.transition
-
         el.style.transition = `${originalTransition}, ${TRANSITION_EFFECT}`
-        el.removeEventListener("load", onImageLoad)
+        el.removeEventListener('load', onImageLoad)
       }
-      el.addEventListener("load", onImageLoad)
+      el.addEventListener('load', onImageLoad)
       el.setAttribute('tabIndex', 0)
-      el.addEventListener('keydown', (e) => {
+      el.addEventListener('keydown', e => {
         if (e.key === ' ' || e.key === 'Enter') {
-          e.preventDefault();
-          el.click();
+          e.preventDefault()
+          el.click()
         }
       })
       return el
-    }
-  )
+    })
 
@@ -89,0 +95,0 @@ if (images.length > 0) {

package.json

 {
   "name": "gatsby-remark-images-medium-zoom",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "medium-zoom plugin for gatsby",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -8,3 +8,3 @@ <div align="center">
 <p>
-  <img src="https://img.shields.io/badge/version-1.2.1-blue.svg?cacheSeconds=2592000" />
+  <img src="https://img.shields.io/badge/version-1.4.0-blue.svg?cacheSeconds=2592000" />
   <a href="https://twitter.com/JbeeLjyhanll">
@@ -76,5 +76,6 @@ <img alt="Twitter: JbeeLjyhanll" src="https://img.shields.io/twitter/follow/JbeeLjyhanll.svg?style=social" target="_blank" />
 
-| Property           | Type                                  | Default  | Description                                            |
-| ------------------ | ------------------------------------- | -------- | ------------------------------------------------------ |
-| `excludedSelector` | `string`                              | `null`   | The selector of excluded images to zoom in             |
+| Property           | Type     | Default | Description                                                                                          |
+| ------------------ | -------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `excludedSelector` | `string` | `null`  | The selector of excluded images to zoom in                                                           |
+| `includedSelector` | `string` | `null`  | The selector of included images to zoom in on in addition to the ones parsed by gatsby-remark-images |
 
@@ -81,0 +82,0 @@ ## Author

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

256093

increased by0.2%

Lines of code

93

increased by6.9%

Number of lines in readme file

96

increased by1.05%

No dependency changes