Restored LinkedIn sharer with limited functionality (fixes #37)

changelog.md

@@ -1,3 +1,7 @@
+# 1.3.1
+
+* Restored LinkedIn sharer with limited functionality (issue #37)
+
 # 1.3.0
 
 * Refactored build process, added sourcemaps (issue #32)
@@ -7,8 +11,8 @@
 
 # 1.2.2
 
-* Removed `target="_blank"` to email sharer (issue #13)
-* Added `!default` modifier to SCSS variable definitions (issue #14)
+* Removed `target="_blank"` to email sharer (issue #12)
+* Added `!default` modifier to SCSS variable definitions (issue #13)
 
 # 1.2.1
 

readme.md

@@ -175,9 +175,19 @@ Twitter  | `dist/sharers/twitter.js`   | `twitter`   | `ShareThisViaTwitter`
 Facebook | `dist/sharers/facebook.js`  | `facebook`  | `ShareThisViaFacebook`
 Reddit   | `dist/sharers/reddit.js`    | `reddit`    | `ShareThisViaReddit`
 Email    | `dist/sharers/email.js`     | `email`     | `ShareThisViaEmail`
+LinkedIn (*see note below!) | `dist/sharers/linked-in.js`     | `linked-in`     | `ShareThisViaLinkedIn`
 
 You can find a couple more on the [presentation page](https://maxart2501.github.io/share-this/) of the library.
 
+**Note about the LinkedIn sharer**: LinkedIn doesn't allow sharing a site with a custom title/snippet of text. Therefore ShareThis would fail
+to bring any value relatively to other sharing methods. The sharer is kept for backwards compatibility only. The following warning will appear
+in the console the first time the sharer is rendered:
+
+> LinkedIn doesn't allow sharing links with custom titles anymore, so the main point of ShareThis
+> (sharing a portion of text) couldn't be accomplished. You're encouraged to share your URLs with other,
+> more conventional means, like the official LinkedIn share plugin. See
+> https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin
+
 
 ## Developer friendly
 
@@ -228,8 +238,10 @@ voice synthesis"), so you might want to show *both* native and custom sharing in
 
 ## To do
 
+* Name change ([issue](https://github.com/MaxArt2501/share-this/issues/38))
 * More test coverage
 * Support for JSX in sharers' `render` method
+* Move the sharers from the library to separate packages ([issue](https://github.com/MaxArt2501/share-this/issues/39))
 
 
 ## License

src/sharers/linked-in.js

@@ -0,0 +1,37 @@
+let shownWarning = false;
+
+export function render(_text, _rawText, refUrl) {
+    if (!shownWarning) {
+        shownWarning = true;
+        console.warn("LinkedIn doesn't allow sharing links with custom titles anymore, so the main point of ShareThis "
+            + "(sharing a portion of text) couldn't be accomplished. You're encouraged to share your URLs with other, "
+            + "more conventional means, like the official LinkedIn share plugin. See "
+            + "https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin");
+    }
+    const url = this.getShareUrl(refUrl);
+
+    return `<a href="${url}" target="_blank" rel="noopener nofollow noreferrer">`
+        + "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">"
+            + "<path d=\"M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964"
+                + "-1.424 1.96v3.778h-2.37V6H8.51v1.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 "
+                + "2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758"
+                + ".614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377z"
+                + "m1.188 8.68H2.37V6h2.376v7.635z\" fill=\"currentcolor\"/>"
+        + "</svg></a>";
+}
+
+export function getShareUrl(refUrl) {
+    return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(refUrl)}`;
+}
+
+export function action(event, item) {
+    event.preventDefault();
+    const popup = item.ownerDocument.defaultView.open(
+        item.firstChild.href,
+        "share_via_linked_in",
+        "height=440,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,width=640"
+    );
+    popup.opener = null;
+}
+
+export const name = "linked-in";

test/sharers/linked-in.js

@@ -0,0 +1,100 @@
+/* eslint-disable consistent-return, no-undef, no-unused-expressions */
+import { parse } from "url";
+
+import chai, { expect } from "chai";
+import { stub, match } from "sinon";
+import sinonChai from "sinon-chai";
+import { JSDOM } from "jsdom";
+
+import * as linkedInSharer from "../../src/sharers/linked-in";
+
+chai.use(sinonChai);
+
+describe("LinkedIn sharer", () => {
+    it("must have name 'linked-in'", () => {
+        expect(linkedInSharer.name).to.equal("linked-in");
+    });
+
+    it("must render a link to LinkedIn", () => {
+        const html = linkedInSharer.render("", "", "path/to/whatever");
+        const { window } = new JSDOM(html);
+        const anchor = window.document.querySelector("a[href^='https://www.linkedin.com/']");
+        expect(anchor).to.not.be.null;
+    });
+
+    describe("`getShareUrl` method", () => {
+        it("must have a `getShareUrl` helper method", () => {
+            expect(typeof linkedInSharer.getShareUrl).to.equal("function");
+        });
+
+        it("must have a `url` parameter in the sharing URL", () => {
+            const shareUrl = linkedInSharer.getShareUrl("path/to/whatever");
+            const parsed = parse(shareUrl, true);
+            expect(parsed.query).to.eql({ url: "path/to/whatever" });
+        });
+    });
+
+    describe("`action` method", () => {
+        it("must have a `action` method", () => {
+            expect(typeof linkedInSharer.action).to.equal("function");
+        });
+
+        it("must prevent the event's default", () => {
+            const html = linkedInSharer.render("", "", "path/to/whatever");
+            const { window } = new JSDOM(html);
+            const event = new window.Event("click");
+            const preventStub = stub(event, "preventDefault");
+            stub(window, "open").returns({});
+
+            linkedInSharer.action(event, window.document.body);
+            expect(preventStub.called).to.be.true;
+        });
+
+        it("must open a new window", () => {
+            const html = linkedInSharer.render("", "", "path/to/whatever");
+            const { window } = new JSDOM(html);
+            const event = new window.Event("click");
+            const openStub = stub(window, "open");
+            openStub.returns({});
+
+            linkedInSharer.action(event, window.document.body);
+            expect(openStub.calledOnce).to.be.true;
+        });
+
+        it("must open a new window named \"share_via_linked_in\"", () => {
+            const html = linkedInSharer.render("", "", "path/to/whatever");
+            const { window } = new JSDOM(html);
+            const event = new window.Event("click");
+            const openStub = stub(window, "open");
+            openStub.returns({});
+
+            linkedInSharer.action(event, window.document.body);
+            expect(openStub).to.have.been.calledWith(match.any, "share_via_linked_in", match.any);
+        });
+
+        it("must open a new window with the link provided by `getShareUrl`", () => {
+            const html = linkedInSharer.render("", "", "path/to/whatever");
+            const { window } = new JSDOM(html);
+            const event = new window.Event("click");
+            const openStub = stub(window, "open");
+            openStub.returns({});
+
+            const url = linkedInSharer.getShareUrl("path/to/whatever");
+
+            linkedInSharer.action(event, window.document.body);
+            expect(openStub).to.have.been.calledWith(url, match.any, match.any);
+        });
+
+        it("must nullify the popup's `opener` property", () => {
+            const html = linkedInSharer.render("", "", "path/to/whatever");
+            const { window } = new JSDOM(html);
+            const event = new window.Event("click");
+            const openStub = stub(window, "open");
+            const popup = {};
+            openStub.returns(popup);
+
+            linkedInSharer.action(event, window.document.body);
+            expect(popup.opener).to.be.null;
+        });
+    });
+});