progressive-share-button 1.0.0-alpha.3 → 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.
|
@@ -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
|
|
38
|
+
const o = n(this.getAttribute("debug")), e = n(this.getAttribute("smart-share")), c = this.getAttribute("url");
|
|
40
39
|
let s = this.getAttribute("text"), i = this.getAttribute("title"), r = {};
|
|
41
|
-
|
|
42
|
-
text: `${i ? i + " " : ""}${s ? s + " " : ""}${
|
|
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
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(this.iconSize())}
|
|
|
59
58
|
detail: l
|
|
60
59
|
}
|
|
61
60
|
);
|
|
62
|
-
this.dispatchEvent(
|
|
61
|
+
this.dispatchEvent(h);
|
|
63
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
81
|
function n(t) {
|
|
83
|
-
var
|
|
84
|
-
switch ((
|
|
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(f=>{let p=new CustomEvent("progressive-share-fail",{bubbles:!0,cancelable:!1,composed:!0,detail:f});this.dispatchEvent(p)}):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});
|