From c932d06f03d7c9d9a80ad39cd71d8d11fa266a47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Sun, 1 Mar 2020 08:01:06 +0100
Subject: [PATCH] feat: disable save button by default (#9)

Closes #4
Closes #5

BREAKING CHANGE: The Pinterest Save button isn't enabled by default anymore. Use the `saveButton` option to add it.
---
 .eslintignore         |  1 +
 .gitignore            |  1 +
 .prettierignore       |  1 +
 README.md             | 12 +++++++-----
 package.json          |  1 +
 src/gatsby-browser.js | 31 +++++++++++++++++++++----------
 src/gatsby-node.js    |  8 ++++++++
 7 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 src/gatsby-node.js

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 @@
 
 <!-- prettier-ignore-start -->
 [![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);
+  }
+};