diff --git a/.eslintignore b/.eslintignore index 779c3b5..98e8165 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ /gatsby-browser.js +/gatsby-node.js diff --git a/.gitignore b/.gitignore index 2fb9ee2..af2fe04 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ package-lock.json yarn.lock /gatsby-browser.js +/gatsby-node.js diff --git a/.prettierignore b/.prettierignore index 45f61f3..3225b38 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,3 +3,4 @@ coverage dist /gatsby-browser.js +/gatsby-node.js diff --git a/README.md b/README.md index 2b79f39..ad2e7e7 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,6 @@ [![Build Status][build-badge]][build] -[![Code Coverage][coverage-badge]][coverage] [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] @@ -62,10 +61,13 @@ module.exports = { { resolve: `gatsby-plugin-pinterest`, options: { - // Set to true to hide the text and display only a round P button - round: false, // default - // Set to true to display a bigger button - tall: true, // default + // If you just want to use the default, you can set this to `true`, defaults to `false` + saveButton: { + // Set to true to hide the text and display only a round P button + round: false, // default + // Set to true to display a bigger button + tall: true, // default + }, }, }, diff --git a/package.json b/package.json index bdd1d6e..10d1b58 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "homepage": "https://github.com/robinmetral/gatsby-plugin-pinterest#readme", "files": [ "gatsby-browser.js", + "gatsby-node.js", "index.js" ], "scripts": { diff --git a/src/gatsby-browser.js b/src/gatsby-browser.js index db8c723..6a3678d 100644 --- a/src/gatsby-browser.js +++ b/src/gatsby-browser.js @@ -1,18 +1,22 @@ -const injectPinterestScript = (tall, round) => { +const injectPinterestScript = ({ saveButton = false }) => { const addJS = () => { const script = document.createElement("script"); script.async = true; script.defer = true; script.src = "https://assets.pinterest.com/js/pinit.js"; - script.setAttribute("data-pin-hover", "true"); + if (Boolean(saveButton)) { + script.setAttribute("data-pin-hover", "true"); - if (tall) { - script.setAttribute("data-pin-tall", "true"); - } + const { round = false, tall = true } = + typeof saveButton === "boolean" ? {} : saveButton; + if (round) { + script.setAttribute("data-pin-round", "true"); + } - if (round) { - script.setAttribute("data-pin-round", "true"); + if (tall) { + script.setAttribute("data-pin-tall", "true"); + } } document.getElementsByTagName("head")[0].appendChild(script); @@ -23,10 +27,17 @@ const injectPinterestScript = (tall, round) => { let injectedPinterestScript = false; -exports.onRouteUpdate = (args, { tall = true, round = false } = {}) => { - if (document.querySelector("[data-pin-do]") !== null) { +exports.onRouteUpdate = (args, pluginOptions = {}) => { + const querySelectors = [ + "[data-pin-do]", + Boolean(pluginOptions.saveButton) ? "img" : "", + ] + .filter(Boolean) + .join(","); + + if (document.querySelector(querySelectors) !== null) { if (!injectedPinterestScript) { - injectPinterestScript(tall, round); + injectPinterestScript(pluginOptions); injectedPinterestScript = true; } diff --git a/src/gatsby-node.js b/src/gatsby-node.js new file mode 100644 index 0000000..c644175 --- /dev/null +++ b/src/gatsby-node.js @@ -0,0 +1,8 @@ +const deprecationWarning = `[gatsby-plugin-pinterest] From now on, you can use the 'saveButton' option to show Pinterest's save button on images. +See https://github.com/robinmetral/gatsby-plugin-pinterest#usage`; + +exports.onPreInit = ({ reporter }, { round, tall } = {}) => { + if (round || tall) { + reporter.warn(deprecationWarning); + } +};