progressive-share-button 1.0.0-alpha.4 → 1.0.0-alpha.5
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
|
@@ -26,7 +26,7 @@ _Progressive Share Button_ does not support the sharing of files.
|
|
|
26
26
|
|
|
27
27
|
## Installation as a module
|
|
28
28
|
|
|
29
|
-
Run the following command to install it.
|
|
29
|
+
The component is available as an [npm](https://www.npmjs.com/package/progressive-share-button) module. Run the following command to install it.
|
|
30
30
|
|
|
31
31
|
```bash
|
|
32
32
|
npm install progressive-share-button
|
|
@@ -34,11 +34,25 @@ npm install progressive-share-button
|
|
|
34
34
|
|
|
35
35
|
main.js, if installed with npm
|
|
36
36
|
```javascript
|
|
37
|
+
// Import the component, which is the default export, so no curly braces are needed.
|
|
37
38
|
import ProgressiveShareButton from 'progressive-share-button';
|
|
38
|
-
|
|
39
|
+
// Initialie the component
|
|
40
|
+
ProgressiveShareButton();
|
|
39
41
|
```
|
|
40
42
|
|
|
41
|
-
###
|
|
43
|
+
### Customizing the component name
|
|
44
|
+
|
|
45
|
+
If you want to customize the component name, you can import the element class directly and register it with a different name. Take note of the curly braces used in the import statement. This is a [named import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Importing_specific_features).
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
```javascript
|
|
49
|
+
import { ProgressiveShareButtonElement } from 'progressive-share-button';
|
|
50
|
+
// Initialie the component
|
|
51
|
+
customElements.define('my-share-button', ProgressiveShareButtonElement);
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### CDN - not tested yet
|
|
42
56
|
|
|
43
57
|
~~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
58
|
|
|
@@ -46,6 +60,12 @@ customElements.define('progressive-share-button', ProgressiveShareButton);
|
|
|
46
60
|
<!-- script src="https://unpkg.com/progressive-share-button"></script --!>
|
|
47
61
|
```
|
|
48
62
|
|
|
63
|
+
## Typescript support
|
|
64
|
+
|
|
65
|
+
WIP: ~~~The component is written in Typescript and includes a type definition file. If you are using Typescript, you can import the component directly into your project.~~~
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
49
69
|
## Customizing the Component
|
|
50
70
|
|
|
51
71
|
The component accepts the following attributes:
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
class
|
|
1
|
+
class u extends HTMLElement {
|
|
2
2
|
constructor() {
|
|
3
3
|
super(), this.attachShadow({ mode: "open" }), this.iconSize = () => {
|
|
4
|
-
const
|
|
5
|
-
return o(
|
|
4
|
+
const t = this.getAttribute("icon-size");
|
|
5
|
+
return o(t) ? t + "px" : t || 24 + "px";
|
|
6
6
|
};
|
|
7
|
-
function o(
|
|
8
|
-
return /^-?\d+$/.test(
|
|
7
|
+
function o(t) {
|
|
8
|
+
return /^-?\d+$/.test(t);
|
|
9
9
|
}
|
|
10
|
-
typeof navigator.share == "function" ||
|
|
10
|
+
typeof navigator.share == "function" || a(this.getAttribute("debug")) ? this.shadowRoot && (this.shadowRoot.innerHTML = `
|
|
11
11
|
<style>
|
|
12
12
|
:host {
|
|
13
13
|
display: inline-block;
|
|
@@ -32,22 +32,22 @@ class p extends HTMLElement {
|
|
|
32
32
|
<slot>
|
|
33
33
|
${w()}
|
|
34
34
|
</slot>
|
|
35
|
-
</button>`, this.addEventListener("click", this.share)) : console.
|
|
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 =
|
|
39
|
-
let s = this.getAttribute("text"),
|
|
40
|
-
|
|
41
|
-
text: `${
|
|
38
|
+
const o = a(this.getAttribute("debug")), t = a(this.getAttribute("smart-share")), n = this.getAttribute("url");
|
|
39
|
+
let s = this.getAttribute("text"), r = this.getAttribute("title"), i = {};
|
|
40
|
+
n && (i.url = n), s && (i.text = s), r && (i.title = r), t && (r && r.slice(-1) !== "." && (r = r + "."), s && s.slice(-1) !== "." && (s = s + "."), i = {
|
|
41
|
+
text: `${r ? r + " " : ""}${s ? s + " " : ""}${n || ""}`
|
|
42
42
|
});
|
|
43
|
-
let
|
|
43
|
+
let c = new CustomEvent("progressive-share-success", {
|
|
44
44
|
bubbles: !0,
|
|
45
45
|
cancelable: !1,
|
|
46
46
|
composed: !0,
|
|
47
|
-
detail:
|
|
47
|
+
detail: i
|
|
48
48
|
});
|
|
49
|
-
navigator.share ? o == 1 ? console.debug("data to be shared",
|
|
50
|
-
this.dispatchEvent(
|
|
49
|
+
navigator.share ? o == 1 ? console.debug("data to be shared", i) : navigator.share(i).then(() => {
|
|
50
|
+
this.dispatchEvent(c);
|
|
51
51
|
}).catch((l) => {
|
|
52
52
|
let h = new CustomEvent(
|
|
53
53
|
"progressive-share-fail",
|
|
@@ -59,28 +59,38 @@ class p 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", i);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
function b() {
|
|
66
|
+
return typeof navigator.share == "function" ? console.log(
|
|
67
|
+
"ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
|
|
68
|
+
) : console.log(
|
|
69
|
+
"ProgressiveShareButton support initialized. This browser does not have Web Share API support support."
|
|
70
|
+
), customElements.define(
|
|
71
|
+
"progressive-share-button",
|
|
72
|
+
u
|
|
73
|
+
), !0;
|
|
74
|
+
}
|
|
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 e = navigator.userAgent;
|
|
77
|
+
return /iPhone|iPad|iPod/.test(e) ? "iOS" : /Android/.test(e) ? "Android" : /Windows/.test(e) ? "Windows" : /Mac/.test(e) ? "Mac" : "Unknown";
|
|
68
78
|
}, w = () => {
|
|
69
|
-
switch (
|
|
79
|
+
switch (p()) {
|
|
70
80
|
case "iOS":
|
|
71
81
|
case "Mac":
|
|
72
|
-
return u;
|
|
73
|
-
case "Android":
|
|
74
82
|
return d;
|
|
83
|
+
case "Android":
|
|
84
|
+
return v;
|
|
75
85
|
case "Windows":
|
|
76
86
|
case "Unknown":
|
|
77
87
|
default:
|
|
78
|
-
return
|
|
88
|
+
return g;
|
|
79
89
|
}
|
|
80
90
|
};
|
|
81
|
-
function
|
|
91
|
+
function a(e) {
|
|
82
92
|
var o;
|
|
83
|
-
switch ((o =
|
|
93
|
+
switch ((o = e == null ? void 0 : e.toLowerCase()) == null ? void 0 : o.trim()) {
|
|
84
94
|
case "true":
|
|
85
95
|
case "1":
|
|
86
96
|
return !0;
|
|
@@ -90,9 +100,10 @@ function n(t) {
|
|
|
90
100
|
case void 0:
|
|
91
101
|
return !1;
|
|
92
102
|
default:
|
|
93
|
-
return JSON.parse(
|
|
103
|
+
return JSON.parse(e);
|
|
94
104
|
}
|
|
95
105
|
}
|
|
96
106
|
export {
|
|
97
|
-
|
|
107
|
+
u as ProgressiveShareButtonElement,
|
|
108
|
+
b as default
|
|
98
109
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(n
|
|
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 t=this.getAttribute("icon-size");return a(t)?t+"px":t||24+"px"};function a(t){return/^-?\d+$/.test(t)}typeof navigator.share=="function"||l(this.getAttribute("debug"))?this.shadowRoot&&(this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
4
|
display: inline-block;
|
|
@@ -21,6 +21,6 @@
|
|
|
21
21
|
</style>
|
|
22
22
|
<button part="shareButton">
|
|
23
23
|
<slot>
|
|
24
|
-
${
|
|
24
|
+
${p()}
|
|
25
25
|
</slot>
|
|
26
|
-
</button>`,this.addEventListener("click",this.share)):console.
|
|
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")),t=l(this.getAttribute("smart-share")),c=this.getAttribute("url");let s=this.getAttribute("text"),i=this.getAttribute("title"),r={};c&&(r.url=c),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+" ":""}${c||""}`});let f=new CustomEvent("progressive-share-success",{bubbles:!0,cancelable:!1,composed:!0,detail:r});navigator.share?a==1?console.debug("data to be shared",r):navigator.share(r).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",r)}}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 e=navigator.userAgent;return/iPhone|iPad|iPod/.test(e)?"iOS":/Android/.test(e)?"Android":/Windows/.test(e)?"Windows":/Mac/.test(e)?"Mac":"Unknown"},p=()=>{switch(g()){case"iOS":case"Mac":return u;case"Android":return d;case"Windows":case"Unknown":default:return v}};function l(e){var a;switch((a=e==null?void 0:e.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(e)}}o.ProgressiveShareButtonElement=n,o.default=h,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|