From 74cc657f5852e55f73a74d7b5110b917946aed7c Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Sat, 4 Apr 2020 13:05:48 -0700 Subject: [PATCH] Remove the local version of the image scale plugin --- gatsby-config.js | 2 +- package-lock.json | 6 +- package.json | 2 +- .../gatsby-browser.js | 107 ------------------ plugins/gatsby-image-svg-version/index.js | 1 - .../package-lock.json | 29 ----- plugins/gatsby-image-svg-version/package.json | 14 --- 7 files changed, 5 insertions(+), 156 deletions(-) delete mode 100644 plugins/gatsby-image-svg-version/gatsby-browser.js delete mode 100644 plugins/gatsby-image-svg-version/index.js delete mode 100644 plugins/gatsby-image-svg-version/package-lock.json delete mode 100644 plugins/gatsby-image-svg-version/package.json diff --git a/gatsby-config.js b/gatsby-config.js index 467fd004..a262fb83 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -84,7 +84,7 @@ module.exports = { } }, { - resolve: `gatsby-image-svg-version`, + resolve: `gatsby-remark-images-medium-zoom`, options: { includedSelector: '[src$=".svg"]' } diff --git a/package-lock.json b/package-lock.json index f611d369..473de138 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19893,9 +19893,9 @@ } }, "gatsby-remark-images-medium-zoom": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/gatsby-remark-images-medium-zoom/-/gatsby-remark-images-medium-zoom-1.4.0.tgz", - "integrity": "sha512-JKLRiF5AOTxZvohDuCRzWQj4r80vFm69S1RGBclfD6IXF/nmb0PxMRHSObn/IwSQUb5vLQ3MSxTYfVdEO5j/0A==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/gatsby-remark-images-medium-zoom/-/gatsby-remark-images-medium-zoom-1.5.0.tgz", + "integrity": "sha512-8pLVwh8kdTSNE1YHKc4bMEW9h7HKBO12/omAvPxg+/L0nQtqG3DVx5xccRnBSICjK6WQf2XXy6XoMtyGOgZnJQ==", "requires": { "medium-zoom": "^1.0.4" } diff --git a/package.json b/package.json index 3d3f16a4..b5d5f448 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "gatsby-remark-copy-linked-files": "^2.2.1", "gatsby-remark-external-links": "0.0.4", "gatsby-remark-images": "^3.2.1", - "gatsby-remark-images-medium-zoom": "^1.4.0", + "gatsby-remark-images-medium-zoom": "^1.5.0", "gatsby-remark-prismjs": "^3.4.1", "gatsby-remark-responsive-iframe": "^2.3.1", "gatsby-remark-series": "^1.0.3", diff --git a/plugins/gatsby-image-svg-version/gatsby-browser.js b/plugins/gatsby-image-svg-version/gatsby-browser.js deleted file mode 100644 index d8838d94..00000000 --- a/plugins/gatsby-image-svg-version/gatsby-browser.js +++ /dev/null @@ -1,107 +0,0 @@ -/** - * Replace with gatsby-remark-images-medium-zoom once the following PRs are merged: - * https://github.com/JaeYeopHan/gatsby-remark-images-medium-zoom/pull/9/files - * https://github.com/JaeYeopHan/gatsby-remark-images-medium-zoom/pull/8 - */ -import mediumZoom from "medium-zoom"; - -// @see https://github.com/francoischalifour/medium-zoom#options -const defaultOptions = { - margin: 24, - background: "#fff", - scrollOffset: 40, - container: null, - template: null, - zIndex: 999, - excludedSelector: null -}; - -// @see https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/constants.js#L1 -const imageClass = ".gatsby-resp-image-image"; - -const FIRST_CONTENTFUL_PAINT = "first-contentful-paint"; -const ZOOM_STYLE_ID = "medium-zoom-styles"; -const TRANSITION_EFFECT = "opacity 0.5s, transform .3s cubic-bezier(.2,0,.2,1)"; - -function onFCP(callback) { - if (!window.performance) { - return; - } - - const po = new PerformanceObserver(list => - list - .getEntries() - .filter(({ entryType }) => entryType === "paint") - .map(({ name }) => name === FIRST_CONTENTFUL_PAINT) - .forEach(callback) - ); - - try { - po.observe({ entryTypes: ["measure", "paint"] }); - } catch (e) { - console.error(e); - po.disconnect(); - } -} - -function injectStyles(options) { - const styleTag = document.querySelector(`#${ZOOM_STYLE_ID}`); - if (styleTag) { - return; - } - - const { zIndex } = options; - const node = document.createElement("style"); - const styles = ` - .medium-zoom--opened > .medium-zoom-overlay, - .medium-zoom--opened > .medium-zoom-image, - img.medium-zoom-image--opened { - z-index: ${zIndex}; - } - `; - node.id = ZOOM_STYLE_ID; - node.innerHTML = styles; - document.head.appendChild(node); -} - -function applyZoomEffect({ excludedSelector, includedSelector, ...options }) { - const imagesSelector = excludedSelector - ? `${imageClass}:not(${excludedSelector})` - : imageClass; - 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.addEventListener("load", onImageLoad); - el.setAttribute("tabIndex", 0); - el.addEventListener("keydown", e => { - if (e.key === " " || e.key === "Enter") { - e.preventDefault(); - el.click(); - } - }); - return el; - }); - - if (images.length > 0) { - mediumZoom(images, options); - } -} - -export const onRouteUpdate = (_, pluginOptions) => { - const options = { ...defaultOptions, ...pluginOptions }; - injectStyles(options); - - onFCP(() => applyZoomEffect(options)); - applyZoomEffect(options); -}; diff --git a/plugins/gatsby-image-svg-version/index.js b/plugins/gatsby-image-svg-version/index.js deleted file mode 100644 index 48d27739..00000000 --- a/plugins/gatsby-image-svg-version/index.js +++ /dev/null @@ -1 +0,0 @@ -//noop diff --git a/plugins/gatsby-image-svg-version/package-lock.json b/plugins/gatsby-image-svg-version/package-lock.json deleted file mode 100644 index e4cbb8fe..00000000 --- a/plugins/gatsby-image-svg-version/package-lock.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "gatsby-plugin-remarked-count-inline-code", - "version": "0.0.1", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "unist-util-is": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz", - "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==" - }, - "unist-util-visit": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", - "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", - "requires": { - "unist-util-visit-parents": "^2.0.0" - } - }, - "unist-util-visit-parents": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", - "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", - "requires": { - "unist-util-is": "^3.0.0" - } - } - } -} diff --git a/plugins/gatsby-image-svg-version/package.json b/plugins/gatsby-image-svg-version/package.json deleted file mode 100644 index 49089f6b..00000000 --- a/plugins/gatsby-image-svg-version/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "gatsby-image-svg-version", - "version": "0.0.1", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "license": "MIT", - "dependencies": { - "unist-util-visit": "^1.4.0", - "medium-zoom": "^1.0.4" - } -}