progressive-share-button 1.0.0-alpha.7 → 1.0.0-alpha.9

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/CHANGELOG.md CHANGED
@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [1.0.0-alpha.9] - 2021-03-01
9
+
10
+ ### Added
11
+
12
+ - Added typescript types for the `ProgressiveShareButton` class and default function.
13
+
14
+ ### Changed
15
+
16
+ - Changed: (breaking change) the import statement no longer initialized the web component on import. On some builds using typescript, the button would not be initialized without using the imported function. Now, after import, you must call the init function to initialize the web component, like `ProgressButton.init()`.
17
+ - Changed: (breaking change) the `ProgressiveShareButtonElement` class is now exported as `ProgressiveShareButtonClass`.
18
+
19
+ ### Fixed
20
+
21
+ - Fixed: The demo page has some incorrect class names in the example code. These have been corrected.
22
+
23
+
24
+ ## [1.0.0-alpha.8] - 2023-02-27
25
+
26
+ ### Changed
27
+
28
+ - Turned off minification for production builds because module will be ultimately be bundled with the application using the module and minification will be handled by the application's build process.
29
+
8
30
  ## [1.0.0-alpha.7] - 2023-02-27
9
31
 
10
32
  ### Added
package/README.md CHANGED
@@ -43,6 +43,8 @@ main.js, if installed with npm
43
43
  ```javascript
44
44
  // Import the component, which is the default export, so no curly braces are needed.
45
45
  import ProgressiveShareButton from 'progressive-share-button';
46
+ // Initialize the component
47
+ ProgressiveShareButton.init();
46
48
  ```
47
49
 
48
50
  ### Customizing the component name
@@ -51,9 +53,9 @@ If you want to customize the component name, you can import the element class di
51
53
 
52
54
 
53
55
  ```javascript
54
- import { ProgressiveShareButtonElement } from 'progressive-share-button';
56
+ import { ProgressiveShareButtonClass } from 'progressive-share-button';
55
57
  // Initialize the component
56
- customElements.define('my-share-button', ProgressiveShareButtonElement);
58
+ customElements.define('my-share-button', ProgressiveShareButtonClass);
57
59
 
58
60
  ```
59
61
 
@@ -229,7 +231,7 @@ There are two custom event emitted by the component: `progressive-share-success`
229
231
  // example of listening for the custom events
230
232
  document.addEventListener('progressive-share-success', (e) => {
231
233
  // e.detail contains the share data that was shared
232
- console.log('The progressive-share event was heard.', e.detail);
234
+ console.log('The progressive-share-success event was heard.', e.detail);
233
235
  });
234
236
  document.addEventListener('progressive-share-fail', (e) => {
235
237
  // e.detail contains the error message
@@ -1,13 +1,30 @@
1
- class u extends HTMLElement {
1
+ var __defProp = Object.defineProperty;
2
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
+ var __publicField = (obj, key, value) => {
4
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
+ return value;
6
+ };
7
+ class ProgressiveShareButtonClass extends HTMLElement {
2
8
  constructor() {
3
- super(), this.attachShadow({ mode: "open" }), this.iconSize = () => {
4
- const s = this.getAttribute("icon-size") ?? "";
5
- return o(s) ? s + "px" : s || 24 + "px";
9
+ super();
10
+ __publicField(this, "iconSize");
11
+ this.attachShadow({ mode: "open" });
12
+ this.iconSize = () => {
13
+ const size = this.getAttribute("icon-size") ?? "";
14
+ if (_isNumeric(size)) {
15
+ return size + "px";
16
+ } else if (size) {
17
+ return size;
18
+ } else {
19
+ return 24 + "px";
20
+ }
6
21
  };
7
- function o(s) {
8
- return /^-?\d+$/.test(s);
22
+ function _isNumeric(value) {
23
+ return /^-?\d+$/.test(value);
9
24
  }
10
- typeof navigator.share == "function" || a(this.getAttribute("debug")) ? this.shadowRoot && (this.shadowRoot.innerHTML = `
25
+ if (typeof navigator.share === "function" || _getBoolean(this.getAttribute("debug"))) {
26
+ if (this.shadowRoot) {
27
+ this.shadowRoot.innerHTML = `
11
28
  <style>
12
29
  :host {
13
30
  display: inline-block;
@@ -30,84 +47,144 @@ class u extends HTMLElement {
30
47
  </style>
31
48
  <button part="shareButton">
32
49
  <slot>
33
- ${f()}
50
+ ${_whichIcon()}
34
51
  </slot>
35
- </button>`, this.addEventListener("click", this.share)) : console.warn("ProgressiveShareButton disabled due to lack of Web Share API support on this browser.");
52
+ </button>`;
53
+ this.addEventListener("click", this.share);
54
+ }
55
+ } else {
56
+ console.warn(
57
+ "ProgressiveShareButton disabled due to lack of Web Share API support on this browser."
58
+ );
59
+ }
36
60
  }
37
61
  share() {
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"), t = {};
40
- n && (t.url = n), r && (t.text = r), i && (t.title = i), s && (i && i.slice(-1) !== "." && (i = i + "."), r && r.slice(-1) !== "." && (r = r + "."), t = {
41
- text: `${i ? i + " " : ""}${r ? r + " " : ""}${n || ""}`
42
- }), !t.url && !t.text && !t.title && (t.url = window.location.href);
43
- let c = new CustomEvent("progressive-share-success", {
44
- bubbles: !0,
45
- cancelable: !1,
46
- composed: !0,
47
- detail: t
62
+ const debug = _getBoolean(this.getAttribute("debug"));
63
+ const smartShare = _getBoolean(this.getAttribute("smart-share"));
64
+ const url = this.getAttribute("url");
65
+ let text = this.getAttribute("text");
66
+ let title = this.getAttribute("title");
67
+ let data = {};
68
+ if (url) {
69
+ data.url = url;
70
+ }
71
+ if (text) {
72
+ data.text = text;
73
+ }
74
+ if (title) {
75
+ data.title = title;
76
+ }
77
+ if (smartShare) {
78
+ if (title && title.slice(-1) !== ".") {
79
+ title = title + ".";
80
+ }
81
+ if (text && text.slice(-1) !== ".") {
82
+ text = text + ".";
83
+ }
84
+ data = {
85
+ text: `${title ? title + " " : ""}${text ? text + " " : ""}${url ? url : ""}`
86
+ };
87
+ }
88
+ if (!data.url && !data.text && !data.title) {
89
+ data.url = window.location.href;
90
+ }
91
+ let shareEvent = new CustomEvent("progressive-share-success", {
92
+ bubbles: true,
93
+ cancelable: false,
94
+ composed: true,
95
+ detail: data
48
96
  });
49
- navigator.share ? o == 1 ? console.debug("data to be shared", t) : navigator.share(t).then(() => {
50
- this.dispatchEvent(c);
51
- }).catch((l) => {
52
- let h = new CustomEvent(
53
- "progressive-share-fail",
54
- {
55
- bubbles: !0,
56
- cancelable: !1,
57
- composed: !0,
58
- detail: l
59
- }
60
- );
61
- this.dispatchEvent(h);
62
- }) : console.debug("data to be shared", t);
97
+ if (navigator.share) {
98
+ if (debug == 1) {
99
+ console.debug("data to be shared", data);
100
+ } else {
101
+ navigator.share(data).then(() => {
102
+ this.dispatchEvent(shareEvent);
103
+ }).catch((e) => {
104
+ let shareEventFail = new CustomEvent(
105
+ "progressive-share-fail",
106
+ {
107
+ bubbles: true,
108
+ cancelable: false,
109
+ composed: true,
110
+ detail: e
111
+ }
112
+ );
113
+ this.dispatchEvent(shareEventFail);
114
+ });
115
+ }
116
+ } else {
117
+ console.debug("data to be shared", data);
118
+ }
63
119
  }
64
120
  }
65
- function d() {
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(
121
+ function init() {
122
+ if (typeof navigator.share === "function") {
123
+ console.log(
124
+ "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
125
+ );
126
+ } else {
127
+ console.log(
128
+ "ProgressiveShareButton support initialized. This browser does not have Web Share API support support."
129
+ );
130
+ }
131
+ customElements.define(
71
132
  "progressive-share-button",
72
- u
73
- ), !0;
133
+ ProgressiveShareButtonClass
134
+ );
135
+ return true;
74
136
  }
75
- const v = '<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>', g = '<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>', p = '<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>', w = () => {
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";
78
- }, f = () => {
79
- switch (w()) {
137
+ const main = {
138
+ init
139
+ };
140
+ const iosShareIcon = '<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>';
141
+ const androidShareIcon = '<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>';
142
+ const winShareIcon = '<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>';
143
+ const _guessOs = () => {
144
+ const userAgent = navigator.userAgent;
145
+ if (/iPhone|iPad|iPod/.test(userAgent)) {
146
+ return "iOS";
147
+ } else if (/Android/.test(userAgent)) {
148
+ return "Android";
149
+ } else if (/Windows/.test(userAgent)) {
150
+ return "Windows";
151
+ } else if (/Mac/.test(userAgent)) {
152
+ return "Mac";
153
+ } else {
154
+ return "Unknown";
155
+ }
156
+ };
157
+ const _whichIcon = () => {
158
+ const os = _guessOs();
159
+ switch (os) {
80
160
  case "iOS":
81
161
  case "Mac":
82
- return v;
162
+ return iosShareIcon;
83
163
  case "Android":
84
- return g;
164
+ return androidShareIcon;
85
165
  case "Windows":
86
166
  case "Unknown":
87
167
  default:
88
- return p;
168
+ return winShareIcon;
89
169
  }
90
170
  };
91
- function a(e) {
92
- var o;
93
- if (!e)
94
- return !1;
95
- switch ((o = e == null ? void 0 : e.toLowerCase()) == null ? void 0 : o.trim()) {
171
+ function _getBoolean(stringValue) {
172
+ var _a;
173
+ if (!stringValue) {
174
+ return false;
175
+ }
176
+ switch ((_a = stringValue == null ? void 0 : stringValue.toLowerCase()) == null ? void 0 : _a.trim()) {
96
177
  case "true":
97
178
  case "1":
98
- return !0;
179
+ return true;
99
180
  case "false":
100
181
  case "0":
101
- return !1;
182
+ return false;
102
183
  default:
103
- return JSON.parse(e);
184
+ return JSON.parse(stringValue);
104
185
  }
105
186
  }
106
- const b = (() => {
107
- d();
108
- })();
109
187
  export {
110
- d as ProgressiveShareButton,
111
- u as ProgressiveShareButtonElement,
112
- b as default
188
+ ProgressiveShareButtonClass,
189
+ main as default
113
190
  };
@@ -1,4 +1,34 @@
1
- (function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s["progressive-share-button"]={}))})(this,function(s){"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.iconSize=()=>{const i=this.getAttribute("icon-size")??"";return a(i)?i+"px":i||24+"px"};function a(i){return/^-?\d+$/.test(i)}typeof navigator.share=="function"||l(this.getAttribute("debug"))?this.shadowRoot&&(this.shadowRoot.innerHTML=`
1
+ (function(global, factory) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["progressive-share-button"] = {}));
3
+ })(this, function(exports2) {
4
+ "use strict";var __defProp = Object.defineProperty;
5
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
+ var __publicField = (obj, key, value) => {
7
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
8
+ return value;
9
+ };
10
+
11
+ class ProgressiveShareButtonClass extends HTMLElement {
12
+ constructor() {
13
+ super();
14
+ __publicField(this, "iconSize");
15
+ this.attachShadow({ mode: "open" });
16
+ this.iconSize = () => {
17
+ const size = this.getAttribute("icon-size") ?? "";
18
+ if (_isNumeric(size)) {
19
+ return size + "px";
20
+ } else if (size) {
21
+ return size;
22
+ } else {
23
+ return 24 + "px";
24
+ }
25
+ };
26
+ function _isNumeric(value) {
27
+ return /^-?\d+$/.test(value);
28
+ }
29
+ if (typeof navigator.share === "function" || _getBoolean(this.getAttribute("debug"))) {
30
+ if (this.shadowRoot) {
31
+ this.shadowRoot.innerHTML = `
2
32
  <style>
3
33
  :host {
4
34
  display: inline-block;
@@ -21,6 +51,144 @@
21
51
  </style>
22
52
  <button part="shareButton">
23
53
  <slot>
24
- ${f()}
54
+ ${_whichIcon()}
25
55
  </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")),i=l(this.getAttribute("smart-share")),c=this.getAttribute("url");let r=this.getAttribute("text"),o=this.getAttribute("title"),t={};c&&(t.url=c),r&&(t.text=r),o&&(t.title=o),i&&(o&&o.slice(-1)!=="."&&(o=o+"."),r&&r.slice(-1)!=="."&&(r=r+"."),t={text:`${o?o+" ":""}${r?r+" ":""}${c||""}`}),!t.url&&!t.text&&!t.title&&(t.url=window.location.href);let w=new CustomEvent("progressive-share-success",{bubbles:!0,cancelable:!1,composed:!0,detail:t});navigator.share?a==1?console.debug("data to be shared",t):navigator.share(t).then(()=>{this.dispatchEvent(w)}).catch(b=>{let m=new CustomEvent("progressive-share-fail",{bubbles:!0,cancelable:!1,composed:!0,detail:b});this.dispatchEvent(m)}):console.debug("data to be shared",t)}}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"},f=()=>{switch(g()){case"iOS":case"Mac":return u;case"Android":return d;case"Windows":case"Unknown":default:return v}};function l(e){var a;if(!e)return!1;switch((a=e==null?void 0:e.toLowerCase())==null?void 0:a.trim()){case"true":case"1":return!0;case"false":case"0":return!1;default:return JSON.parse(e)}}const p=(()=>{h()})();s.ProgressiveShareButton=h,s.ProgressiveShareButtonElement=n,s.default=p,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
56
+ </button>`;
57
+ this.addEventListener("click", this.share);
58
+ }
59
+ } else {
60
+ console.warn(
61
+ "ProgressiveShareButton disabled due to lack of Web Share API support on this browser."
62
+ );
63
+ }
64
+ }
65
+ share() {
66
+ const debug = _getBoolean(this.getAttribute("debug"));
67
+ const smartShare = _getBoolean(this.getAttribute("smart-share"));
68
+ const url = this.getAttribute("url");
69
+ let text = this.getAttribute("text");
70
+ let title = this.getAttribute("title");
71
+ let data = {};
72
+ if (url) {
73
+ data.url = url;
74
+ }
75
+ if (text) {
76
+ data.text = text;
77
+ }
78
+ if (title) {
79
+ data.title = title;
80
+ }
81
+ if (smartShare) {
82
+ if (title && title.slice(-1) !== ".") {
83
+ title = title + ".";
84
+ }
85
+ if (text && text.slice(-1) !== ".") {
86
+ text = text + ".";
87
+ }
88
+ data = {
89
+ text: `${title ? title + " " : ""}${text ? text + " " : ""}${url ? url : ""}`
90
+ };
91
+ }
92
+ if (!data.url && !data.text && !data.title) {
93
+ data.url = window.location.href;
94
+ }
95
+ let shareEvent = new CustomEvent("progressive-share-success", {
96
+ bubbles: true,
97
+ cancelable: false,
98
+ composed: true,
99
+ detail: data
100
+ });
101
+ if (navigator.share) {
102
+ if (debug == 1) {
103
+ console.debug("data to be shared", data);
104
+ } else {
105
+ navigator.share(data).then(() => {
106
+ this.dispatchEvent(shareEvent);
107
+ }).catch((e) => {
108
+ let shareEventFail = new CustomEvent(
109
+ "progressive-share-fail",
110
+ {
111
+ bubbles: true,
112
+ cancelable: false,
113
+ composed: true,
114
+ detail: e
115
+ }
116
+ );
117
+ this.dispatchEvent(shareEventFail);
118
+ });
119
+ }
120
+ } else {
121
+ console.debug("data to be shared", data);
122
+ }
123
+ }
124
+ }
125
+ function init() {
126
+ if (typeof navigator.share === "function") {
127
+ console.log(
128
+ "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
129
+ );
130
+ } else {
131
+ console.log(
132
+ "ProgressiveShareButton support initialized. This browser does not have Web Share API support support."
133
+ );
134
+ }
135
+ customElements.define(
136
+ "progressive-share-button",
137
+ ProgressiveShareButtonClass
138
+ );
139
+ return true;
140
+ }
141
+ const main = {
142
+ init
143
+ };
144
+ const iosShareIcon = '<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>';
145
+ const androidShareIcon = '<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>';
146
+ const winShareIcon = '<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>';
147
+ const _guessOs = () => {
148
+ const userAgent = navigator.userAgent;
149
+ if (/iPhone|iPad|iPod/.test(userAgent)) {
150
+ return "iOS";
151
+ } else if (/Android/.test(userAgent)) {
152
+ return "Android";
153
+ } else if (/Windows/.test(userAgent)) {
154
+ return "Windows";
155
+ } else if (/Mac/.test(userAgent)) {
156
+ return "Mac";
157
+ } else {
158
+ return "Unknown";
159
+ }
160
+ };
161
+ const _whichIcon = () => {
162
+ const os = _guessOs();
163
+ switch (os) {
164
+ case "iOS":
165
+ case "Mac":
166
+ return iosShareIcon;
167
+ case "Android":
168
+ return androidShareIcon;
169
+ case "Windows":
170
+ case "Unknown":
171
+ default:
172
+ return winShareIcon;
173
+ }
174
+ };
175
+ function _getBoolean(stringValue) {
176
+ var _a;
177
+ if (!stringValue) {
178
+ return false;
179
+ }
180
+ switch ((_a = stringValue == null ? void 0 : stringValue.toLowerCase()) == null ? void 0 : _a.trim()) {
181
+ case "true":
182
+ case "1":
183
+ return true;
184
+ case "false":
185
+ case "0":
186
+ return false;
187
+ default:
188
+ return JSON.parse(stringValue);
189
+ }
190
+ }
191
+ exports2.ProgressiveShareButtonClass = ProgressiveShareButtonClass;
192
+ exports2.default = main;
193
+ Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
194
+ });
package/package.json CHANGED
@@ -1,38 +1,40 @@
1
1
  {
2
- "name": "progressive-share-button",
3
- "version": "1.0.0-alpha.7",
4
- "description": "A web componet that creates a OS-native share button.",
5
- "files": [
6
- "dist"
7
- ],
8
- "main": "./dist/progressive-share-button.umd.js",
9
- "repository": {
10
- "type": "git",
11
- "url": "https://github.com/johnfmorton/progressive-share-button"
12
- },
13
- "module": "./es/progressive-share-button.es.js",
14
- "exports": {
15
- ".": {
16
- "import": "./dist/progressive-share-button.es.js",
17
- "require": "./dist/progressive-share-button.umd.js"
2
+ "name": "progressive-share-button",
3
+ "version": "1.0.0-alpha.9",
4
+ "description": "A web componet that creates a OS-native share button.",
5
+ "files": [
6
+ "dist"
7
+ ],
8
+ "main": "./dist/progressive-share-button.umd.js",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/johnfmorton/progressive-share-button"
12
+ },
13
+ "module": "./es/progressive-share-button.es.js",
14
+ "unpkg": "./dist/progressive-share-button.umd.js",
15
+ "types": "./@types/progressive-share-button.d.ts",
16
+ "exports": {
17
+ ".": {
18
+ "import": "./dist/progressive-share-button.es.js",
19
+ "require": "./dist/progressive-share-button.umd.js"
20
+ }
21
+ },
22
+ "scripts": {
23
+ "dev": "vite --host 0.0.0.0 --port 8888",
24
+ "build": "vite build",
25
+ "preview": "vite preview",
26
+ "test": "echo \"Error: no test specified\" && exit 1"
27
+ },
28
+ "keywords": [
29
+ "share",
30
+ "button",
31
+ "progressive",
32
+ "web-components",
33
+ "web-share-api"
34
+ ],
35
+ "author": "John F. Morton <john@johnfmorton.com> (https://supergeekery.com)",
36
+ "license": "MIT",
37
+ "devDependencies": {
38
+ "vite": "^4.1.3"
18
39
  }
19
- },
20
- "scripts": {
21
- "dev": "vite --host 0.0.0.0 --port 8888",
22
- "build": "vite build",
23
- "preview": "vite preview",
24
- "test": "echo \"Error: no test specified\" && exit 1"
25
- },
26
- "keywords": [
27
- "share",
28
- "button",
29
- "progressive",
30
- "web-components",
31
- "web-share-api"
32
- ],
33
- "author": "John F. Morton <john@johnfmorton.com> (https://supergeekery.com)",
34
- "license": "MIT",
35
- "devDependencies": {
36
- "vite": "^4.1.3"
37
- }
38
40
  }