progressive-share-button 1.0.0-alpha.2 → 1.0.0-alpha.4
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 +3 -3
- package/dist/progressive-share-button.es.js +49 -50
- package/dist/progressive-share-button.umd.js +26 -27
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -34,16 +34,16 @@ npm install progressive-share-button
|
|
|
34
34
|
|
|
35
35
|
main.js, if installed with npm
|
|
36
36
|
```javascript
|
|
37
|
-
import
|
|
37
|
+
import ProgressiveShareButton from 'progressive-share-button';
|
|
38
38
|
customElements.define('progressive-share-button', ProgressiveShareButton);
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
### CDN
|
|
42
42
|
|
|
43
|
-
You can also use the component directly from a CDN. The component is available on [unpkg](https://unpkg.com/progressive-share-button)
|
|
43
|
+
~~Not Tested: You can also use the component directly from a CDN. The component is available on [unpkg](https://unpkg.com/progressive-share-button).~~
|
|
44
44
|
|
|
45
45
|
```html
|
|
46
|
-
|
|
46
|
+
<!-- script src="https://unpkg.com/progressive-share-button"></script --!>
|
|
47
47
|
```
|
|
48
48
|
|
|
49
49
|
## Customizing the Component
|
|
@@ -2,55 +2,54 @@ class p extends HTMLElement {
|
|
|
2
2
|
constructor() {
|
|
3
3
|
super(), this.attachShadow({ mode: "open" }), this.iconSize = () => {
|
|
4
4
|
const e = this.getAttribute("icon-size");
|
|
5
|
-
return
|
|
5
|
+
return o(e) ? e + "px" : e || 24 + "px";
|
|
6
6
|
};
|
|
7
|
-
function
|
|
7
|
+
function o(e) {
|
|
8
8
|
return /^-?\d+$/.test(e);
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
<style>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</style>
|
|
31
|
-
<button part="shareButton">
|
|
32
|
-
<slot>
|
|
33
|
-
${w()}
|
|
34
|
-
</slot>
|
|
35
|
-
</button
|
|
36
|
-
`, this.addEventListener("click", this.share));
|
|
10
|
+
typeof navigator.share == "function" || n(this.getAttribute("debug")) ? this.shadowRoot && (this.shadowRoot.innerHTML = `
|
|
11
|
+
<style>
|
|
12
|
+
:host {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
}
|
|
16
|
+
svg {
|
|
17
|
+
width: ${this.iconSize()};
|
|
18
|
+
height: ${this.iconSize()};
|
|
19
|
+
fill: currentColor;
|
|
20
|
+
vertical-align: bottom;
|
|
21
|
+
}
|
|
22
|
+
button {
|
|
23
|
+
all: unset;
|
|
24
|
+
padding: 1px 2px 1px 2px;
|
|
25
|
+
margin: 0;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
}
|
|
28
|
+
:host(:hover) {
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
<button part="shareButton">
|
|
32
|
+
<slot>
|
|
33
|
+
${w()}
|
|
34
|
+
</slot>
|
|
35
|
+
</button>`, this.addEventListener("click", this.share)) : console.log("navigator.share not supported");
|
|
37
36
|
}
|
|
38
37
|
share() {
|
|
39
|
-
const
|
|
40
|
-
let s = this.getAttribute("text"),
|
|
41
|
-
|
|
42
|
-
text: `${
|
|
38
|
+
const o = n(this.getAttribute("debug")), e = n(this.getAttribute("smart-share")), c = this.getAttribute("url");
|
|
39
|
+
let s = this.getAttribute("text"), i = this.getAttribute("title"), r = {};
|
|
40
|
+
c && (r.url = c), s && (r.text = s), i && (r.title = i), e && (i && i.slice(-1) !== "." && (i = i + "."), s && s.slice(-1) !== "." && (s = s + "."), r = {
|
|
41
|
+
text: `${i ? i + " " : ""}${s ? s + " " : ""}${c || ""}`
|
|
43
42
|
});
|
|
44
|
-
let
|
|
43
|
+
let a = new CustomEvent("progressive-share-success", {
|
|
45
44
|
bubbles: !0,
|
|
46
45
|
cancelable: !1,
|
|
47
46
|
composed: !0,
|
|
48
|
-
detail:
|
|
47
|
+
detail: r
|
|
49
48
|
});
|
|
50
|
-
navigator.share ?
|
|
51
|
-
this.dispatchEvent(
|
|
49
|
+
navigator.share ? o == 1 ? console.debug("data to be shared", r) : navigator.share(r).then(() => {
|
|
50
|
+
this.dispatchEvent(a);
|
|
52
51
|
}).catch((l) => {
|
|
53
|
-
let
|
|
52
|
+
let h = new CustomEvent(
|
|
54
53
|
"progressive-share-fail",
|
|
55
54
|
{
|
|
56
55
|
bubbles: !0,
|
|
@@ -59,29 +58,29 @@ ${w()}
|
|
|
59
58
|
detail: l
|
|
60
59
|
}
|
|
61
60
|
);
|
|
62
|
-
this.dispatchEvent(
|
|
63
|
-
}) : console.debug("data to be shared",
|
|
61
|
+
this.dispatchEvent(h);
|
|
62
|
+
}) : console.debug("data to be shared", r);
|
|
64
63
|
}
|
|
65
64
|
}
|
|
66
|
-
const
|
|
65
|
+
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 = () => {
|
|
67
66
|
const t = navigator.userAgent;
|
|
68
|
-
return /iPhone|iPad|iPod/.test(t) ? "iOS" : /Android/.test(t) ? "Android" : /
|
|
69
|
-
}, w = (
|
|
67
|
+
return /iPhone|iPad|iPod/.test(t) ? "iOS" : /Android/.test(t) ? "Android" : /Windows/.test(t) ? "Windows" : /Mac/.test(t) ? "Mac" : "Unknown";
|
|
68
|
+
}, w = () => {
|
|
70
69
|
switch (g()) {
|
|
71
70
|
case "iOS":
|
|
72
71
|
case "Mac":
|
|
73
|
-
return
|
|
72
|
+
return u;
|
|
74
73
|
case "Android":
|
|
75
|
-
return
|
|
74
|
+
return d;
|
|
76
75
|
case "Windows":
|
|
77
|
-
|
|
76
|
+
case "Unknown":
|
|
78
77
|
default:
|
|
79
|
-
return
|
|
78
|
+
return v;
|
|
80
79
|
}
|
|
81
80
|
};
|
|
82
|
-
function
|
|
83
|
-
var
|
|
84
|
-
switch ((
|
|
81
|
+
function n(t) {
|
|
82
|
+
var o;
|
|
83
|
+
switch ((o = t == null ? void 0 : t.toLowerCase()) == null ? void 0 : o.trim()) {
|
|
85
84
|
case "true":
|
|
86
85
|
case "1":
|
|
87
86
|
return !0;
|
|
@@ -1,27 +1,26 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
<style>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</style>
|
|
22
|
-
<button part="shareButton">
|
|
23
|
-
<slot>
|
|
24
|
-
${v()}
|
|
25
|
-
</slot>
|
|
26
|
-
</button>
|
|
27
|
-
`,this.addEventListener("click",this.share))}share(){const n=h(this.getAttribute("debug")),t=h(this.getAttribute("smart-share")),a=this.getAttribute("url");let s=this.getAttribute("text"),i=this.getAttribute("title"),r={};a&&(r.url=a),s&&(r.text=s),i&&(r.title=i),t&&(i&&i.slice(-1)!=="."&&(i=i+"."),s&&s.slice(-1)!=="."&&(s=s+"."),r={text:`${i?i+" ":""}${s?s+" ":""}${a||""}`});let g=new CustomEvent("progressive-share-success",{bubbles:!0,cancelable:!1,composed:!0,detail:r});navigator.share?n==1?console.debug("data to be shared",r):navigator.share(r).then(()=>{this.dispatchEvent(g)}).catch(p=>{let f=new CustomEvent("progressive-share-fail",{bubbles:!0,cancelable:!1,composed:!0,detail:p});this.dispatchEvent(f)}):console.debug("data to be shared",r)}}const c=()=>'<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>',u=()=>'<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>',l=()=>'<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>',d=()=>{const e=navigator.userAgent;return/iPhone|iPad|iPod/.test(e)?"iOS":/Android/.test(e)?"Android":/_whichIcon/.test(e)?"Windows":/Mac/.test(e)?"Mac":"Unknown"},v=e=>{switch(d()){case"iOS":case"Mac":return c();case"Android":return u();case"Windows":return l();default:return l()}};function h(e){var n;switch((n=e==null?void 0:e.toLowerCase())==null?void 0:n.trim()){case"true":case"1":return!0;case"false":case"0":case null:case void 0:return!1;default:return JSON.parse(e)}}return o});
|
|
1
|
+
(function(n,c){typeof exports=="object"&&typeof module<"u"?module.exports=c():typeof define=="function"&&define.amd?define(c):(n=typeof globalThis<"u"?globalThis:n||self,n["progressive-share-button"]=c())})(this,function(){"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.iconSize=()=>{const t=this.getAttribute("icon-size");return o(t)?t+"px":t||24+"px"};function o(t){return/^-?\d+$/.test(t)}typeof navigator.share=="function"||h(this.getAttribute("debug"))?this.shadowRoot&&(this.shadowRoot.innerHTML=`
|
|
2
|
+
<style>
|
|
3
|
+
:host {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
}
|
|
7
|
+
svg {
|
|
8
|
+
width: ${this.iconSize()};
|
|
9
|
+
height: ${this.iconSize()};
|
|
10
|
+
fill: currentColor;
|
|
11
|
+
vertical-align: bottom;
|
|
12
|
+
}
|
|
13
|
+
button {
|
|
14
|
+
all: unset;
|
|
15
|
+
padding: 1px 2px 1px 2px;
|
|
16
|
+
margin: 0;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
:host(:hover) {
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
22
|
+
<button part="shareButton">
|
|
23
|
+
<slot>
|
|
24
|
+
${v()}
|
|
25
|
+
</slot>
|
|
26
|
+
</button>`,this.addEventListener("click",this.share)):console.log("navigator.share not supported")}share(){const o=h(this.getAttribute("debug")),t=h(this.getAttribute("smart-share")),a=this.getAttribute("url");let s=this.getAttribute("text"),i=this.getAttribute("title"),r={};a&&(r.url=a),s&&(r.text=s),i&&(r.title=i),t&&(i&&i.slice(-1)!=="."&&(i=i+"."),s&&s.slice(-1)!=="."&&(s=s+"."),r={text:`${i?i+" ":""}${s?s+" ":""}${a||""}`});let g=new CustomEvent("progressive-share-success",{bubbles:!0,cancelable:!1,composed:!0,detail:r});navigator.share?o==1?console.debug("data to be shared",r):navigator.share(r).then(()=>{this.dispatchEvent(g)}).catch(p=>{let f=new CustomEvent("progressive-share-fail",{bubbles:!0,cancelable:!1,composed:!0,detail:p});this.dispatchEvent(f)}):console.debug("data to be shared",r)}}const c='<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>',l='<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>',u='<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>',d=()=>{const e=navigator.userAgent;return/iPhone|iPad|iPod/.test(e)?"iOS":/Android/.test(e)?"Android":/Windows/.test(e)?"Windows":/Mac/.test(e)?"Mac":"Unknown"},v=()=>{switch(d()){case"iOS":case"Mac":return c;case"Android":return l;case"Windows":case"Unknown":default:return u}};function h(e){var o;switch((o=e==null?void 0:e.toLowerCase())==null?void 0:o.trim()){case"true":case"1":return!0;case"false":case"0":case null:case void 0:return!1;default:return JSON.parse(e)}}return n});
|