progressive-share-button 1.0.0-alpha.5 → 1.0.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
# Progressive Share Button
|
|
2
2
|
|
|
3
|
-
The _Progressive Share Button_ web component is a simple way to add a share button to your web page that will show the user the OS native share options using the [Web Share API](https://w3c.github.io/web-share/). The "progressive" part of the name comes from the fact that the component will only display the share button if the browser supports the Web Share API. If the browser does not support the Web Share API, the component will not display anything
|
|
3
|
+
The _Progressive Share Button_ web component is a simple way to add a share button to your web page that will show the user the OS native share options using the [Web Share API](https://w3c.github.io/web-share/). The "progressive" part of the name comes from the fact that the component will only display the share button if the browser supports the Web Share API. **If the browser does not support the Web Share API, the component will not display anything.**
|
|
4
4
|
|
|
5
5
|
The web component is a wrapper around the [Web Share API](https://w3c.github.io/web-share/) that attempts to display a share icon appropriate to the user's device with icons that will be recognizable to iOS/Mac, Android and Windows. If the device type can't be determined, the component will display a Windows share icon.
|
|
6
6
|
|
|
7
7
|
## Basic Usage
|
|
8
8
|
|
|
9
|
-
The most basic usage of the component is to
|
|
9
|
+
The most basic usage of the component is to use no attributes. The component will share the current page's URL.
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
|
|
12
|
+
<progressive-share-button />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
You may also pass the URL to be shared. The component will share the URL that has been specified.
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<progressive-share-button url="https://example.com" />
|
|
13
19
|
```
|
|
14
20
|
|
|
15
21
|
This will render one of the following, depending on the device and browser. This example shows the Windows sharing icon, the Android sharing icon, and the iOS sharing icon.
|
|
@@ -47,7 +53,7 @@ If you want to customize the component name, you can import the element class di
|
|
|
47
53
|
|
|
48
54
|
```javascript
|
|
49
55
|
import { ProgressiveShareButtonElement } from 'progressive-share-button';
|
|
50
|
-
//
|
|
56
|
+
// Initialize the component
|
|
51
57
|
customElements.define('my-share-button', ProgressiveShareButtonElement);
|
|
52
58
|
|
|
53
59
|
```
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
class u extends HTMLElement {
|
|
2
2
|
constructor() {
|
|
3
3
|
super(), this.attachShadow({ mode: "open" }), this.iconSize = () => {
|
|
4
|
-
const
|
|
5
|
-
return o(
|
|
4
|
+
const s = this.getAttribute("icon-size");
|
|
5
|
+
return o(s) ? s + "px" : s || 24 + "px";
|
|
6
6
|
};
|
|
7
|
-
function o(
|
|
8
|
-
return /^-?\d+$/.test(
|
|
7
|
+
function o(s) {
|
|
8
|
+
return /^-?\d+$/.test(s);
|
|
9
9
|
}
|
|
10
10
|
typeof navigator.share == "function" || a(this.getAttribute("debug")) ? this.shadowRoot && (this.shadowRoot.innerHTML = `
|
|
11
11
|
<style>
|
|
@@ -35,18 +35,18 @@ class u extends HTMLElement {
|
|
|
35
35
|
</button>`, this.addEventListener("click", this.share)) : console.warn("ProgressiveShareButton disabled due to lack of Web Share API support on this browser.");
|
|
36
36
|
}
|
|
37
37
|
share() {
|
|
38
|
-
const o = a(this.getAttribute("debug")),
|
|
39
|
-
let
|
|
40
|
-
n && (
|
|
41
|
-
text: `${
|
|
42
|
-
});
|
|
38
|
+
const o = a(this.getAttribute("debug")), s = a(this.getAttribute("smart-share")), n = this.getAttribute("url");
|
|
39
|
+
let r = this.getAttribute("text"), i = this.getAttribute("title"), e = {};
|
|
40
|
+
n && (e.url = n), r && (e.text = r), i && (e.title = i), s && (i && i.slice(-1) !== "." && (i = i + "."), r && r.slice(-1) !== "." && (r = r + "."), e = {
|
|
41
|
+
text: `${i ? i + " " : ""}${r ? r + " " : ""}${n || ""}`
|
|
42
|
+
}), !e.url && !e.text && !e.title && (e.url = window.location.href);
|
|
43
43
|
let c = new CustomEvent("progressive-share-success", {
|
|
44
44
|
bubbles: !0,
|
|
45
45
|
cancelable: !1,
|
|
46
46
|
composed: !0,
|
|
47
|
-
detail:
|
|
47
|
+
detail: e
|
|
48
48
|
});
|
|
49
|
-
navigator.share ? o == 1 ? console.debug("data to be shared",
|
|
49
|
+
navigator.share ? o == 1 ? console.debug("data to be shared", e) : navigator.share(e).then(() => {
|
|
50
50
|
this.dispatchEvent(c);
|
|
51
51
|
}).catch((l) => {
|
|
52
52
|
let h = new CustomEvent(
|
|
@@ -59,10 +59,10 @@ class u extends HTMLElement {
|
|
|
59
59
|
}
|
|
60
60
|
);
|
|
61
61
|
this.dispatchEvent(h);
|
|
62
|
-
}) : console.debug("data to be shared",
|
|
62
|
+
}) : console.debug("data to be shared", e);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
function
|
|
65
|
+
function f() {
|
|
66
66
|
return typeof navigator.share == "function" ? console.log(
|
|
67
67
|
"ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
|
|
68
68
|
) : console.log(
|
|
@@ -73,8 +73,8 @@ function b() {
|
|
|
73
73
|
), !0;
|
|
74
74
|
}
|
|
75
75
|
const d = '<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>', v = '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>', g = '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>', p = () => {
|
|
76
|
-
const
|
|
77
|
-
return /iPhone|iPad|iPod/.test(
|
|
76
|
+
const t = navigator.userAgent;
|
|
77
|
+
return /iPhone|iPad|iPod/.test(t) ? "iOS" : /Android/.test(t) ? "Android" : /Windows/.test(t) ? "Windows" : /Mac/.test(t) ? "Mac" : "Unknown";
|
|
78
78
|
}, w = () => {
|
|
79
79
|
switch (p()) {
|
|
80
80
|
case "iOS":
|
|
@@ -88,9 +88,9 @@ const d = '<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0
|
|
|
88
88
|
return g;
|
|
89
89
|
}
|
|
90
90
|
};
|
|
91
|
-
function a(
|
|
91
|
+
function a(t) {
|
|
92
92
|
var o;
|
|
93
|
-
switch ((o =
|
|
93
|
+
switch ((o = t == null ? void 0 : t.toLowerCase()) == null ? void 0 : o.trim()) {
|
|
94
94
|
case "true":
|
|
95
95
|
case "1":
|
|
96
96
|
return !0;
|
|
@@ -100,10 +100,10 @@ function a(e) {
|
|
|
100
100
|
case void 0:
|
|
101
101
|
return !1;
|
|
102
102
|
default:
|
|
103
|
-
return JSON.parse(
|
|
103
|
+
return JSON.parse(t);
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
export {
|
|
107
107
|
u as ProgressiveShareButtonElement,
|
|
108
|
-
|
|
108
|
+
f as default
|
|
109
109
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o["progressive-share-button"]={}))})(this,function(o){"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.iconSize=()=>{const
|
|
1
|
+
(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o["progressive-share-button"]={}))})(this,function(o){"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.iconSize=()=>{const s=this.getAttribute("icon-size");return a(s)?s+"px":s||24+"px"};function a(s){return/^-?\d+$/.test(s)}typeof navigator.share=="function"||l(this.getAttribute("debug"))?this.shadowRoot&&(this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
4
|
display: inline-block;
|
|
@@ -23,4 +23,4 @@
|
|
|
23
23
|
<slot>
|
|
24
24
|
${p()}
|
|
25
25
|
</slot>
|
|
26
|
-
</button>`,this.addEventListener("click",this.share)):console.warn("ProgressiveShareButton disabled due to lack of Web Share API support on this browser.")}share(){const a=l(this.getAttribute("debug")),
|
|
26
|
+
</button>`,this.addEventListener("click",this.share)):console.warn("ProgressiveShareButton disabled due to lack of Web Share API support on this browser.")}share(){const a=l(this.getAttribute("debug")),s=l(this.getAttribute("smart-share")),c=this.getAttribute("url");let i=this.getAttribute("text"),r=this.getAttribute("title"),e={};c&&(e.url=c),i&&(e.text=i),r&&(e.title=r),s&&(r&&r.slice(-1)!=="."&&(r=r+"."),i&&i.slice(-1)!=="."&&(i=i+"."),e={text:`${r?r+" ":""}${i?i+" ":""}${c||""}`}),!e.url&&!e.text&&!e.title&&(e.url=window.location.href);let f=new CustomEvent("progressive-share-success",{bubbles:!0,cancelable:!1,composed:!0,detail:e});navigator.share?a==1?console.debug("data to be shared",e):navigator.share(e).then(()=>{this.dispatchEvent(f)}).catch(w=>{let b=new CustomEvent("progressive-share-fail",{bubbles:!0,cancelable:!1,composed:!0,detail:w});this.dispatchEvent(b)}):console.debug("data to be shared",e)}}function h(){return typeof navigator.share=="function"?console.log("ProgressiveShareButton support initialized. <progressive-share-success /> element now available"):console.log("ProgressiveShareButton support initialized. This browser does not have Web Share API support support."),customElements.define("progressive-share-button",n),!0}const u='<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>',d='<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>',v='<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>',g=()=>{const t=navigator.userAgent;return/iPhone|iPad|iPod/.test(t)?"iOS":/Android/.test(t)?"Android":/Windows/.test(t)?"Windows":/Mac/.test(t)?"Mac":"Unknown"},p=()=>{switch(g()){case"iOS":case"Mac":return u;case"Android":return d;case"Windows":case"Unknown":default:return v}};function l(t){var a;switch((a=t==null?void 0:t.toLowerCase())==null?void 0:a.trim()){case"true":case"1":return!0;case"false":case"0":case null:case void 0:return!1;default:return JSON.parse(t)}}o.ProgressiveShareButtonElement=n,o.default=h,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|