sharelinks - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

dist/Sharelinks.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Sharelinks=e():t.Sharelinks=e()}(this,(function(){return function(){"use strict";var t={};function e(t,e){const i=`data-${t}`;if(e.hasAttribute(i))return e.getAttribute(i)}let i=[{name:"whatsapp",href:"whatsapp://send?text=%URL%",width:null,height:null,sameWindow:!0},{name:"facebook",href:"https://www.facebook.com/sharer/sharer.php?u=%URL%",width:400,height:500},{name:"twitter",href:"https://twitter.com/intent/tweet?text=%TITLE%+-+%URL%",width:540,height:260},{name:"pinterest",href:"http://pinterest.com/pin/create/button/?url=%URL%&description=%TITLE%&media=%IMAGE%",width:520,height:570},{name:"tumblr",href:"http://www.tumblr.com/share/link?url=%URL%",width:500,height:500},{name:"linkedin",href:"https://www.linkedin.com/sharing/share-offsite/?url=%URL%",width:520,height:570}];return t.default=class{constructor(t,e){e&&"platforms"in e&&i.push(...e.platforms),this.listenClick(t)}makeLink(t,e,i,n){return t.href.replace("%URL%",encodeURIComponent(e).replace(/%20/g,"+")).replace("%TITLE%",encodeURIComponent(i).replace(/%20/g,"+")).replace("%IMAGE%",encodeURIComponent(n).replace(/%20/g,"+"))}listenClick(t){document.querySelectorAll(t).forEach((t=>{t.addEventListener("click",this.onClick)}))}findImage(t){if(e("image",t))return e("image",t);const i=document.querySelector('meta[property="og:image"]');return i?i.getAttribute("content"):void 0}onClick(t){if(1==t.which){t.preventDefault();const n=t.target,r=i.find((t=>t.name===n.dataset.platform)),o=n.getAttribute("href")||window.location.href;if(void 0===r)throw"Sharelinks Error: Invalid data-platform: "+e("platform",n);const a=e("width",n)||r.width,h=e("height",n)||r.height,l=this.makeLink(r,o,e("title",n)||document.title,this.findImage(n)),c=new CustomEvent("share-link-clicked",{detail:{platform:n.dataset.platform,url:e("url",n)||window.location.href}});n.dispatchEvent(c),"sameWindow"in r&&r.sameWindow?window.location.href=l:window.open(l,"","status=yes, width="+a+", height="+h)}}},t.default}()}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Sharelinks=e():t.Sharelinks=e()}(this,(function(){return function(){"use strict";var t={};function e(t,e,i){return void 0===e.dataset[t]?i:e.dataset[t]}function i(t){return encodeURIComponent(t).replaceAll(/%20/g,"+")}let n=[{name:"whatsapp",href:"whatsapp://send?text=%URL%",width:null,height:null,sameWindow:!0},{name:"facebook",href:"https://www.facebook.com/sharer/sharer.php?u=%URL%",width:400,height:500},{name:"twitter",href:"https://twitter.com/intent/tweet?text=%TITLE%+-+%URL%",width:540,height:260},{name:"pinterest",href:"http://pinterest.com/pin/create/button/?url=%URL%&description=%TITLE%&media=%IMAGE%",width:520,height:570},{name:"tumblr",href:"http://www.tumblr.com/share/link?url=%URL%",width:500,height:500},{name:"linkedin",href:"https://www.linkedin.com/sharing/share-offsite/?url=%URL%",width:520,height:570}];return t.default=class{constructor(t,e={}){n.push(...e.platforms??[]),this.options=e,document.querySelectorAll(t).forEach((t=>{t.addEventListener("click",this.onClick.bind(this))}))}makeLink(t,e,n,r){return t.href.replaceAll("%URL%",i(e)).replaceAll("%TITLE%",i(n)).replaceAll("%IMAGE%",i(r))}findImage(t){if(e("image",t))return e("image",t);const i=document.querySelector('meta[property="og:image"]');return i?i.getAttribute("content"):void 0}onClick(t){if(1!==t.which)return;t.preventDefault();const i=t.target,r=n.find((t=>t.name===e("platform",i)));if(void 0===r)throw"Sharelinks Error: Invalid data-platform: "+e("platform",i);const o=e("url",i,window.location.href),a=e("width",i,r.width),h=e("height",i,r.height),l=this.makeLink(r,o,e("title",i,document.title),this.findImage(i));"function"==typeof this.options.callback&&this.options.callback({platform:i.dataset.platform,url:o}),r.sameWindow?window.location.href=l:window.open(l,"","status=yes, width="+a+", height="+h).opener=null}},t.default}()}));

index.js

 import Sharelinks from './Sharelinks.js';
 
-// const sharelinks = new Sharelinks('.share', {
-//   // Add extra plaform.
-//   platforms: [
-//     {
-//       name: 'whatsapp',
-//       href: 'whatsapp://send?text=%URL%',
-//       width: null,
-//       height: null,
-//       sameWindow: true
-//     }
-//   ]
-// })
+new Sharelinks('.share', {
+  // Add an extra platform
+  platforms: [
+    {
+      name: 'my-custom-platform',
+      href: 'https://example.com/share?u=%URL%&title=%TITLE%&image=%IMAGE%',
+      width: 400,
+      height: 500
+    }
+  ],
 
-new Sharelinks('.share');
-
-const links = document.querySelectorAll('.share');
-
-links.forEach((item) => {
-  item.addEventListener('share-link-clicked', (e) => {
+  // Define a callback for when a link is clicked
+  callback: (e) => {
     console.log('Link Shared!');
-    console.info('Platform', e.detail.platform);
-    console.info('Url', e.detail.url);
-  });
+    console.info('Platform', e.platform);
+    console.info('Url', e.url);
+  }
 });

package.json

 {
   "name": "sharelinks",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "repository": "[e-mail]/mrchimp/sharelinks",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -5,3 +5,3 @@ # Sharelinks.js
 
-Roughly 5kb footprint when minimised.
+Roughly 1.9kb footprint when minimised.
 
@@ -42,14 +42,25 @@ Supported platforms:
 
-With an event:
+Provide a callback for when a link is clicked:
 
 ```javascript
-import Sharelinks from './Sharelinks.js';
+const sharelinks = new Sharelinks('.share', {
+    callback: e => {
+        console.log('Link Shared');
+        console.info('Platform', e.platform);
+        console.info('Url', e.url);
+    }
+);
+```
 
-const sharelinks = new Sharelinks('.share');
+Add a custom platform
 
-sharelinks.on('share-link-clicked', e => {
-    console.log('Link Shared');
-    console.info('Platform', e.platform);
-    console.info('Url', e.url);
-});
+```javascript
+const sharelinks = new Sharelinks('.share', {
+    platforms: [
+        name: 'mycustomsite',
+        href: 'https://example.com/share?u=%URL%&title=%TITLE%&image=%IMAGE%',
+        width: 400,
+        height: 500,
+    ],
+};
 ```
@@ -89,5 +100,5 @@
 
-# A note about usability
+# A note about accessibility
 
-To increase usability, Sharelinks will replace the `href` attribute of the selected links so that opening links in a new window will work. However If you want the links to work without javascript then you should manually populate the `href` attribute. You can find the URLs easily at the top of Sharelinks.js - just replace `%URL%` and `%TITLE%` with url-encoded versions of the url and title of the page you wish to share.
+To increase accessibility, Sharelinks will replace the `href` attribute of the selected links so that opening links in a new window will work. However If you want the links to work without javascript then you should manually populate the `href` attribute. You can find the URLs easily at the top of Sharelinks.js - just replace `%URL%` and `%TITLE%` with url-encoded versions of the url and title of the page you wish to share.
 
@@ -94,0 +105,0 @@ # Development

Sharelinks.js

@@ -5,13 +5,16 @@ /**
  * @param {Element} element
+ * @param {String} default_val
  */
-function getAttributeValue(suffix, element) {
-  const attribute = `data-${suffix}`;
-
-  if (!element.hasAttribute(attribute)) {
-    return;
+function dataAttr(suffix, element, default_val) {
+  if (typeof element.dataset[suffix] === 'undefined') {
+    return default_val;
   }
 
-  return element.getAttribute(attribute);
+  return element.dataset[suffix];
 }
 
+function urlify(value) {
+  return encodeURIComponent(value).replaceAll(/%20/g, '+');
+}
+
 let platforms = [
@@ -59,8 +62,11 @@ {
 class Sharelinks {
-  constructor(selector, options) {
-    if (options && 'platforms' in options) {
-      platforms.push(...options.platforms);
-    }
+  constructor(selector, options = {}) {
+    platforms.push(...(options.platforms ?? []));
 
-    this.listenClick(selector);
+    this.options = options;
+
+    // Listen for clicks
+    document.querySelectorAll(selector).forEach((link) => {
+      link.addEventListener('click', this.onClick.bind(this));
+    });
   }
@@ -70,16 +76,10 @@
     return platform.href
-      .replace('%URL%', encodeURIComponent(url).replace(/%20/g, '+'))
-      .replace('%TITLE%', encodeURIComponent(title).replace(/%20/g, '+'))
-      .replace('%IMAGE%', encodeURIComponent(image).replace(/%20/g, '+'));
+      .replaceAll('%URL%', urlify(url))
+      .replaceAll('%TITLE%', urlify(title))
+      .replaceAll('%IMAGE%', urlify(image));
   }
 
-  listenClick(selector) {
-    document.querySelectorAll(selector).forEach((link) => {
-      link.addEventListener('click', this.onClick);
-    });
-  }
-
   findImage(elem) {
-    if (getAttributeValue('image', elem)) {
-      return getAttributeValue('image', elem);
+    if (dataAttr('image', elem)) {
+      return dataAttr('image', elem);
     }
@@ -96,46 +96,48 @@
     // Left click only! Don't hijack middle click!
-    if (e.which == 1) {
-      e.preventDefault();
+    if (e.which !== 1) {
+      return;
+    }
 
-      const elem = e.target;
-      const platform = platforms.find((platform) => {
-        return platform.name === elem.dataset.platform;
-      });
-      const url = elem.getAttribute('href') || window.location.href;
+    e.preventDefault();
 
-      if (typeof platform === 'undefined') {
-        throw (
-          'Sharelinks Error: Invalid data-platform: ' +
-          getAttributeValue('platform', elem)
-        );
-      }
+    const elem = e.target;
+    const platform = platforms.find((platform) => {
+      return platform.name === dataAttr('platform', elem);
+    });
 
-      const width = getAttributeValue('width', elem) || platform.width;
-      const height = getAttributeValue('height', elem) || platform.height;
-      const href = this.makeLink(
-        platform,
-        url,
-        getAttributeValue('title', elem) || document.title,
-        this.findImage(elem)
+    if (typeof platform === 'undefined') {
+      throw (
+        'Sharelinks Error: Invalid data-platform: ' + dataAttr('platform', elem)
       );
-      const event = new CustomEvent('share-link-clicked', {
-        detail: {
-          platform: elem.dataset.platform,
-          url: getAttributeValue('url', elem) || window.location.href
-        }
-      });
+    }
 
-      elem.dispatchEvent(event);
+    const url = dataAttr('url', elem, window.location.href);
+    const width = dataAttr('width', elem, platform.width);
+    const height = dataAttr('height', elem, platform.height);
+    const href = this.makeLink(
+      platform,
+      url,
+      dataAttr('title', elem, document.title),
+      this.findImage(elem)
+    );
 
-      if ('sameWindow' in platform && platform.sameWindow) {
-        window.location.href = href; // Same window
-      } else {
-        window.open(
-          // New window
-          href,
-          '',
-          'status=yes, width=' + width + ', height=' + height
-        );
-      }
+    if (typeof this.options.callback === 'function') {
+      this.options.callback({
+        platform: elem.dataset.platform,
+        url: url
+      });
     }
+
+    if (platform.sameWindow) {
+      window.location.href = href;
+    } else {
+      const new_window = window.open(
+        href,
+        '',
+        'status=yes, width=' + width + ', height=' + height
+      );
+      // Prevent referer bug.
+      // See https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
+      new_window.opener = null;
+    }
   }
@@ -142,0 +144,0 @@ }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

121

increased by10%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

12371

decreased by-0.4%

Lines of code

160

decreased by-1.84%

No dependency changes