progressive-share-button 1.0.1 → 1.0.3
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,23 @@ 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.3] - 2023-11-17
|
|
9
|
+
|
|
10
|
+
## Added
|
|
11
|
+
|
|
12
|
+
- Added documentation for using the Progressive Share Button with the unpkg CDN.
|
|
13
|
+
|
|
14
|
+
## [1.0.2] - 2023-11-17
|
|
15
|
+
|
|
16
|
+
## Added
|
|
17
|
+
|
|
18
|
+
- A new attribute has been added to the component called `os`. This option allows you to force the button to use a specific operating system icon. The default is `auto` which will use the operating system of the device that the button is being displayed on. The other options are `ios`, `android`, and `windows`. Setting this option is useful during development when combined with the `debug` option to force the button to use a specific icon set regardless of the device the button is being viewed on. For production, leaving it unset or set to `auto` will provide the best user experience for end users.
|
|
19
|
+
|
|
20
|
+
### Fixed
|
|
21
|
+
|
|
22
|
+
- The share icons between iOS, Android and Windows had different line widths. The icons have been remade to have the same line widths to provide a more consistent look across platforms.
|
|
23
|
+
- Fixed a typo in a console log message.
|
|
24
|
+
|
|
8
25
|
## [1.0.1] - 2023-04-10
|
|
9
26
|
|
|
10
27
|
### Fixed
|
package/README.md
CHANGED
|
@@ -66,12 +66,17 @@ customElements.define('my-share-button', ProgressiveShareButtonClass);
|
|
|
66
66
|
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
### CDN
|
|
69
|
+
### CDN
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
You can also use the component directly from a CDN. The component is available on [unpkg](https://unpkg.com/progressive-share-button). The following example shows how to use the component from unpkg. Note the use of `?module` at the end of the URL in the import statement.
|
|
72
72
|
|
|
73
73
|
```html
|
|
74
|
-
|
|
74
|
+
<script type="module">
|
|
75
|
+
import { ProgressiveShareButton } from 'https://unpkg.com/progressive-share-button?module';
|
|
76
|
+
// Initialize the component
|
|
77
|
+
ProgressiveShareButton();
|
|
78
|
+
</script>
|
|
79
|
+
<progressive-share-button title="Hello World!" url="https://example.com" debug="true"></progressive-share-button>
|
|
75
80
|
```
|
|
76
81
|
|
|
77
82
|
## Typescript support
|
|
@@ -87,9 +92,11 @@ The component accepts the following attributes:
|
|
|
87
92
|
| title | string | null | The title of the page to be shared. |
|
|
88
93
|
| text | string | null | The text string to be shared. |
|
|
89
94
|
| url | string | null | The URL to be shared. |
|
|
90
|
-
| smart-share | boolean | false | Accepts 0
|
|
91
|
-
| icon-size | string or int | 24 | The size of the SVG share icon. The icon is rendered in a square. If an integer is passed, the component assumes the value is given in pixels, 24 becomes
|
|
92
|
-
|
|
|
95
|
+
| smart-share | boolean | false | Accepts `0`, `false`, `1`, or `true`. If `true`, the component concatenate the `title`, `text`, and `url` into a single string. See the [_Why use smart-share_](#why-use-the-smart-share-feature) section below for more information. |
|
|
96
|
+
| icon-size | string or int | 24 | The size of the SVG share icon. The icon is rendered in a square. If an integer is passed, the component assumes the value is given in pixels, `24` becomes `24px`, but you may also pass a string with a valid CSS size, like `1rem`. |
|
|
97
|
+
| os | string or null | auto | Set to `android`, `ios`, or `windows` to override the automatic detection of the user's operating system. This setting is useful during development with the `debug` option. For production, leaving it unset or set to `auto` will provide the best user experience for end users. |
|
|
98
|
+
| debug | boolean | false | Accepts `0`, `false`, `1`, or `true`. If `true` is passed, the share icon will be displayed even if the Web Share API is not supported in the browser. The share behavior will *not* open the share dialog but, but instead will pass the data to be shared to the console for debugging. No custom events will be fired. |
|
|
99
|
+
|
|
93
100
|
## Styling
|
|
94
101
|
|
|
95
102
|
The component uses the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate the styles. This means that the styles are not inherited by the parent page. To style the component, you must use the [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element. There are two parts that can be styled: `shareButton` and `shareIcon`.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: progressive-share-button
|
|
3
|
-
* version: v1.0.
|
|
3
|
+
* version: v1.0.3
|
|
4
4
|
* description: A web componet that creates a OS-native share button.
|
|
5
5
|
* author: John F. Morton <john@johnfmorton.com> (https://supergeekery.com)
|
|
6
6
|
* repository: https://github.com/johnfmorton/progressive-share-button
|
|
@@ -15,6 +15,7 @@ class ProgressiveShareButtonClass extends HTMLElement {
|
|
|
15
15
|
constructor() {
|
|
16
16
|
super();
|
|
17
17
|
__publicField(this, "iconSize");
|
|
18
|
+
__publicField(this, "osOverride");
|
|
18
19
|
this.attachShadow({ mode: "open" });
|
|
19
20
|
this.iconSize = () => {
|
|
20
21
|
const size = this.getAttribute("icon-size") ?? "";
|
|
@@ -26,6 +27,14 @@ class ProgressiveShareButtonClass extends HTMLElement {
|
|
|
26
27
|
return "24px";
|
|
27
28
|
}
|
|
28
29
|
};
|
|
30
|
+
this.osOverride = () => {
|
|
31
|
+
const os = this.getAttribute("os") ?? "";
|
|
32
|
+
if (os) {
|
|
33
|
+
return os;
|
|
34
|
+
} else {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
};
|
|
29
38
|
function _isNumeric(value) {
|
|
30
39
|
return /^-?\d+$/.test(value);
|
|
31
40
|
}
|
|
@@ -54,7 +63,7 @@ class ProgressiveShareButtonClass extends HTMLElement {
|
|
|
54
63
|
</style>
|
|
55
64
|
<button part="shareButton">
|
|
56
65
|
<slot>
|
|
57
|
-
${_whichIcon()}
|
|
66
|
+
${_whichIcon(this.osOverride())}
|
|
58
67
|
</slot>
|
|
59
68
|
</button>`;
|
|
60
69
|
this.addEventListener("click", this.share);
|
|
@@ -132,7 +141,7 @@ const ProgressiveShareButton = () => {
|
|
|
132
141
|
);
|
|
133
142
|
} else {
|
|
134
143
|
console.log(
|
|
135
|
-
"ProgressiveShareButton support initialized. This browser does not have Web Share API support
|
|
144
|
+
"ProgressiveShareButton support initialized. This browser does not have Web Share API support."
|
|
136
145
|
);
|
|
137
146
|
}
|
|
138
147
|
customElements.define(
|
|
@@ -141,9 +150,9 @@ const ProgressiveShareButton = () => {
|
|
|
141
150
|
);
|
|
142
151
|
return true;
|
|
143
152
|
};
|
|
144
|
-
const
|
|
145
|
-
const
|
|
146
|
-
const winShareIcon = '<svg
|
|
153
|
+
const androidShareIcon = '<svg part="shareIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><path d="m78,74.75c-4.9,0-9.3,2.13-12.36,5.49l-24.05-13.5c1.06-2.19,1.67-4.64,1.67-7.24s-.58-4.91-1.58-7.06l25.06-14.09c2.98,2.72,6.93,4.4,11.27,4.4,9.24,0,16.75-7.51,16.75-16.75s-7.51-16.75-16.75-16.75-16.75,7.51-16.75,16.75c0,2.89.73,5.61,2.03,7.98l-24.73,13.91c-3.05-3.16-7.32-5.14-12.04-5.14-9.24,0-16.75,7.51-16.75,16.75s7.51,16.75,16.75,16.75c4.66,0,8.87-1.91,11.91-4.99l24.22,13.6c-.88,2.04-1.38,4.28-1.38,6.64,0,9.24,7.51,16.75,16.75,16.75s16.75-7.51,16.75-16.75-7.51-16.75-16.75-16.75Zm0-60c6.2,0,11.25,5.05,11.25,11.25s-5.05,11.25-11.25,11.25-11.25-5.05-11.25-11.25,5.05-11.25,11.25-11.25Zm-51.5,56c-6.2,0-11.25-5.05-11.25-11.25s5.05-11.25,11.25-11.25,11.25,5.05,11.25,11.25-5.05,11.25-11.25,11.25Zm51.5,32c-6.2,0-11.25-5.05-11.25-11.25s5.05-11.25,11.25-11.25,11.25,5.05,11.25,11.25-5.05,11.25-11.25,11.25Z"/></svg>';
|
|
154
|
+
const iosShareIcon = '<svg part="shareIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m92.32,34.13h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H24.43c-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.28h-20.74c-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.32h.01Z" style="stroke-width:0px;"/><path d="m55.73,9.56v69.21h5.28V9.56l13.6,10.04,3.17-4.23L58.37.98l-19.41,14.4,3.17,4.23,13.6-10.04h0Z" /></svg>';
|
|
155
|
+
const winShareIcon = '<svg part="shareIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" class="icon"><title>Share icon</title><desc>Square with arrow coming out to the right</desc><polygon points="91.23 109.42 6.46 109.42 6.46 38.04 12.46 38.04 12.46 103.42 85.23 103.42 85.23 93.05 91.23 93.05 91.23 109.42" style="stroke-width:0px;"/><path d="m79.5,86.98v-20.93c-7.62.28-28.89,2.31-46.16,15.73l-5.47,4.25.64-6.9c4-43.17,39.92-47.46,50.99-47.74V10.1l37.95,38.49-37.95,38.39Zm.62-49.64c-8.39,0-38.1,2.39-44.67,35.65,21.84-13.77,46.06-13.01,47.17-12.97l2.88.11v12.24l23.52-23.79-23.52-23.86v12.92l-3.23-.24c-.21-.01-.97-.06-2.15-.06Z" /></svg>';
|
|
147
156
|
const _guessOs = () => {
|
|
148
157
|
const userAgent = navigator.userAgent;
|
|
149
158
|
if (/iPhone|iPad|iPod/.test(userAgent)) {
|
|
@@ -158,15 +167,21 @@ const _guessOs = () => {
|
|
|
158
167
|
return "Unknown";
|
|
159
168
|
}
|
|
160
169
|
};
|
|
161
|
-
const _whichIcon = () => {
|
|
162
|
-
|
|
170
|
+
const _whichIcon = (osOverride) => {
|
|
171
|
+
let os = osOverride;
|
|
172
|
+
if (osOverride === null || osOverride === "default" || osOverride === "auto") {
|
|
173
|
+
os = _guessOs();
|
|
174
|
+
}
|
|
163
175
|
switch (os) {
|
|
164
176
|
case "iOS":
|
|
177
|
+
case "ios":
|
|
165
178
|
case "Mac":
|
|
166
179
|
return iosShareIcon;
|
|
167
180
|
case "Android":
|
|
181
|
+
case "android":
|
|
168
182
|
return androidShareIcon;
|
|
169
183
|
case "Windows":
|
|
184
|
+
case "windows":
|
|
170
185
|
case "Unknown":
|
|
171
186
|
default:
|
|
172
187
|
return winShareIcon;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: progressive-share-button
|
|
3
|
-
* version: v1.0.
|
|
3
|
+
* version: v1.0.3
|
|
4
4
|
* description: A web componet that creates a OS-native share button.
|
|
5
5
|
* author: John F. Morton <john@johnfmorton.com> (https://supergeekery.com)
|
|
6
6
|
* repository: https://github.com/johnfmorton/progressive-share-button
|
|
@@ -19,6 +19,7 @@ var __publicField = (obj, key, value) => {
|
|
|
19
19
|
constructor() {
|
|
20
20
|
super();
|
|
21
21
|
__publicField(this, "iconSize");
|
|
22
|
+
__publicField(this, "osOverride");
|
|
22
23
|
this.attachShadow({ mode: "open" });
|
|
23
24
|
this.iconSize = () => {
|
|
24
25
|
const size = this.getAttribute("icon-size") ?? "";
|
|
@@ -30,6 +31,14 @@ var __publicField = (obj, key, value) => {
|
|
|
30
31
|
return "24px";
|
|
31
32
|
}
|
|
32
33
|
};
|
|
34
|
+
this.osOverride = () => {
|
|
35
|
+
const os = this.getAttribute("os") ?? "";
|
|
36
|
+
if (os) {
|
|
37
|
+
return os;
|
|
38
|
+
} else {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
33
42
|
function _isNumeric(value) {
|
|
34
43
|
return /^-?\d+$/.test(value);
|
|
35
44
|
}
|
|
@@ -58,7 +67,7 @@ var __publicField = (obj, key, value) => {
|
|
|
58
67
|
</style>
|
|
59
68
|
<button part="shareButton">
|
|
60
69
|
<slot>
|
|
61
|
-
${_whichIcon()}
|
|
70
|
+
${_whichIcon(this.osOverride())}
|
|
62
71
|
</slot>
|
|
63
72
|
</button>`;
|
|
64
73
|
this.addEventListener("click", this.share);
|
|
@@ -136,7 +145,7 @@ var __publicField = (obj, key, value) => {
|
|
|
136
145
|
);
|
|
137
146
|
} else {
|
|
138
147
|
console.log(
|
|
139
|
-
"ProgressiveShareButton support initialized. This browser does not have Web Share API support
|
|
148
|
+
"ProgressiveShareButton support initialized. This browser does not have Web Share API support."
|
|
140
149
|
);
|
|
141
150
|
}
|
|
142
151
|
customElements.define(
|
|
@@ -145,9 +154,9 @@ var __publicField = (obj, key, value) => {
|
|
|
145
154
|
);
|
|
146
155
|
return true;
|
|
147
156
|
};
|
|
148
|
-
const
|
|
149
|
-
const
|
|
150
|
-
const winShareIcon = '<svg
|
|
157
|
+
const androidShareIcon = '<svg part="shareIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><path d="m78,74.75c-4.9,0-9.3,2.13-12.36,5.49l-24.05-13.5c1.06-2.19,1.67-4.64,1.67-7.24s-.58-4.91-1.58-7.06l25.06-14.09c2.98,2.72,6.93,4.4,11.27,4.4,9.24,0,16.75-7.51,16.75-16.75s-7.51-16.75-16.75-16.75-16.75,7.51-16.75,16.75c0,2.89.73,5.61,2.03,7.98l-24.73,13.91c-3.05-3.16-7.32-5.14-12.04-5.14-9.24,0-16.75,7.51-16.75,16.75s7.51,16.75,16.75,16.75c4.66,0,8.87-1.91,11.91-4.99l24.22,13.6c-.88,2.04-1.38,4.28-1.38,6.64,0,9.24,7.51,16.75,16.75,16.75s16.75-7.51,16.75-16.75-7.51-16.75-16.75-16.75Zm0-60c6.2,0,11.25,5.05,11.25,11.25s-5.05,11.25-11.25,11.25-11.25-5.05-11.25-11.25,5.05-11.25,11.25-11.25Zm-51.5,56c-6.2,0-11.25-5.05-11.25-11.25s5.05-11.25,11.25-11.25,11.25,5.05,11.25,11.25-5.05,11.25-11.25,11.25Zm51.5,32c-6.2,0-11.25-5.05-11.25-11.25s5.05-11.25,11.25-11.25,11.25,5.05,11.25,11.25-5.05,11.25-11.25,11.25Z"/></svg>';
|
|
158
|
+
const iosShareIcon = '<svg part="shareIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m92.32,34.13h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H24.43c-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.28h-20.74c-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.32h.01Z" style="stroke-width:0px;"/><path d="m55.73,9.56v69.21h5.28V9.56l13.6,10.04,3.17-4.23L58.37.98l-19.41,14.4,3.17,4.23,13.6-10.04h0Z" /></svg>';
|
|
159
|
+
const winShareIcon = '<svg part="shareIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" class="icon"><title>Share icon</title><desc>Square with arrow coming out to the right</desc><polygon points="91.23 109.42 6.46 109.42 6.46 38.04 12.46 38.04 12.46 103.42 85.23 103.42 85.23 93.05 91.23 93.05 91.23 109.42" style="stroke-width:0px;"/><path d="m79.5,86.98v-20.93c-7.62.28-28.89,2.31-46.16,15.73l-5.47,4.25.64-6.9c4-43.17,39.92-47.46,50.99-47.74V10.1l37.95,38.49-37.95,38.39Zm.62-49.64c-8.39,0-38.1,2.39-44.67,35.65,21.84-13.77,46.06-13.01,47.17-12.97l2.88.11v12.24l23.52-23.79-23.52-23.86v12.92l-3.23-.24c-.21-.01-.97-.06-2.15-.06Z" /></svg>';
|
|
151
160
|
const _guessOs = () => {
|
|
152
161
|
const userAgent = navigator.userAgent;
|
|
153
162
|
if (/iPhone|iPad|iPod/.test(userAgent)) {
|
|
@@ -162,15 +171,21 @@ var __publicField = (obj, key, value) => {
|
|
|
162
171
|
return "Unknown";
|
|
163
172
|
}
|
|
164
173
|
};
|
|
165
|
-
const _whichIcon = () => {
|
|
166
|
-
|
|
174
|
+
const _whichIcon = (osOverride) => {
|
|
175
|
+
let os = osOverride;
|
|
176
|
+
if (osOverride === null || osOverride === "default" || osOverride === "auto") {
|
|
177
|
+
os = _guessOs();
|
|
178
|
+
}
|
|
167
179
|
switch (os) {
|
|
168
180
|
case "iOS":
|
|
181
|
+
case "ios":
|
|
169
182
|
case "Mac":
|
|
170
183
|
return iosShareIcon;
|
|
171
184
|
case "Android":
|
|
185
|
+
case "android":
|
|
172
186
|
return androidShareIcon;
|
|
173
187
|
case "Windows":
|
|
188
|
+
case "windows":
|
|
174
189
|
case "Unknown":
|
|
175
190
|
default:
|
|
176
191
|
return winShareIcon;
|