Skip to content

Commit 56793c4

Browse files
nfreearnfreear
committed
fix: Fixes and enhancements to MySharingWidgetElement (#63)
1 parent 8e647b7 commit 56793c4

3 files changed

Lines changed: 80 additions & 24 deletions

File tree

‎demo/my-loom-embed.html‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<html lang="en">
33
<meta charset="utf-8">
44

5+
<meta name="description" content="Some media embeds ...">
6+
57
<style>
68
body {
79
margin: auto;
@@ -30,29 +32,49 @@
3032
border: 1px outset #444;
3133
transition: all 250ms;
3234
}
35+
36+
[ data-ready = true ] > my-busy-spinner {
37+
display: none;
38+
}
39+
40+
X_my-open-badge {
41+
border: 1px solid silver;
42+
border-radius: .7rem;
43+
display: block;
44+
padding: 1rem;
45+
}
46+
47+
X_my-open-badge::part(img) {
48+
display: block;
49+
margin: 1rem auto;
50+
}
3351
</style>
3452

3553
<title>Media embeds</title>
3654

3755
<h1>Media embeds</h1>
3856

57+
<my-sharing-widget></my-sharing-widget>
58+
3959
<h2>my-loom-embed</h2>
4060

4161
<p>
4262
<my-loom-embed debug="true">
4363
<a href="https://www.loom.com/share/96f6324c0ff94509be60cc47931ab3ef?sid=328ef299-30d9-4fe4-8e0e-62c03c5cffab"
4464
>Loom: Refreshing my blog — April 2025</a>
65+
<my-busy-spinner> Loading video… </my-busy-spinner>
4566
</my-loom-embed>
4667
</p>
4768

4869
<h2>my-transcript</h2>
4970

5071
<my-transcript
5172
open
52-
embed-origin="https://www.loom.com"
73+
embed-origin="https://www.loom.com/x#"
5374
href="./data/test-video.vtt"
5475
X_href="https://nfreear.github.io/elements/demo/data/test-video.vtt"
5576
>
77+
<my-busy-spinner>Loading transcript…</my-busy-spinner>
5678
</my-transcript>
5779

5880
<!-- <p>
@@ -67,21 +89,43 @@ <h2>my-youtube-embed</h2>
6789
<p>
6890
<my-youtube-embed>
6991
<a href="https://youtu.be/M7lc1UVf-VE">YouTube Developers Live: Embedded Web Player Customization</a>
92+
<my-busy-spinner> Loading video… </my-busy-spinner>
7093
</my-youtube-embed>
7194
</p>
7295

96+
<p>
97+
<my-open-badge border add-style image-size="8">
98+
<a href="https://www.credly.com/badges/cfc2c32c-6d52-4278-8444-ce87e8aabd5b">CPWA badge</a>
99+
</my-open-badge>
100+
</p>
101+
73102

74103
<script type="importmap"> {
75104
"imports": {
76105
"my-elements": "../i.js"
77106
},
78107
"myElements": {
79-
"use": [ "my-loom-embed", "my-youtube-embed", "my-transcript" ]
108+
"use": [ "my-loom-embed", "my-youtube-embed", "my-transcript", "my-sharing-widget", "my-open-badge" ]
80109
}
81110
} </script>
82111

83-
<script type="module">
112+
<script type="X__module">
84113
import 'my-elements';
85114
</script>
86115

116+
<script type="module">
117+
import {
118+
defineMyElements,
119+
MyLoomEmbedElement, MyYoutubeEmbedElement, MyTranscriptElement
120+
, MySharingWidgetElement
121+
, MyOpenBadgeElement
122+
} from '../index.js';
123+
124+
defineMyElements([
125+
MyLoomEmbedElement, MyYoutubeEmbedElement, MyTranscriptElement
126+
, MySharingWidgetElement
127+
, MyOpenBadgeElement
128+
]);
129+
</script>
130+
87131
</html>

‎index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export { MyCodepenEmbedElement } from './src/components/MyCodepenEmbedElement.js
2828
export { MyTranscriptElement } from './src/components/MyTranscriptElement.js';
2929
export { MyGtagElement } from './src/components/MyGtagElement.js';
3030
export { MyOpenBadgeElement } from './src/components/MyOpenBadgeElement.js';
31+
export { MySharingWidgetElement } from './src/components/MySharingWidgetElement.js';
3132
export { MyZoomElement } from './src/components/MyZoomElement.js';
3233

3334
export { MyMinElement } from './src/MyMinElement.js';

‎src/components/MySharingWidgetElement.js‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,47 +21,56 @@ export class MySharingWidgetElement extends HTMLElement {
2121
return this.getAttribute('button-label') || 'Share';
2222
}
2323

24-
get descElement () {
24+
get cancelMessage () {
25+
return this.getAttribute('cancel-message') || 'Share was cancelled.';
26+
}
27+
28+
get #descElement () {
2529
const ELEM = document.querySelector(this.descSelector);
2630
console.assert(ELEM, 'Description <meta> element not found');
2731
return ELEM;
2832
}
2933

30-
get linkElement () {
34+
get #linkElement () {
3135
return document.querySelector(this.urlSelector);
3236
}
3337

3438
connectedCallback () {
3539
if (!this._supportsShareApi) {
3640
console.warn('Web Share API not supported');
37-
return;
41+
// Was: return;
3842
}
39-
const formElem = this._createElements();
43+
const formElem = this.#createElements();
4044

4145
const shadowRoot = this.attachShadow({ mode: 'open' });
4246
shadowRoot.appendChild(formElem);
4347

44-
formElem.addEventListener('submit', (ev) => this._onSubmitEvent(ev));
48+
formElem.addEventListener('submit', (ev) => this.#onSubmitEvent(ev));
4549

46-
console.debug('my-sharing-widget', this);
50+
console.debug('my-sharing-widget', [this]);
4751
}
4852

49-
async _onSubmitEvent (ev) {
53+
async #onSubmitEvent (ev) {
5054
ev.preventDefault();
51-
const shareForm = ev.target;
52-
console.debug('Share:', this._shareData, shareForm, ev);
55+
console.debug('Share:', this.#shareData, this.#formElements, ev);
5356
try {
54-
await navigator.share(this._shareData);
55-
shareForm.elements.output.value = 'Shared successfully';
56-
shareForm.dataset.shared = true;
57+
await navigator.share(this.#shareData);
58+
this.#formElements.output.value = 'Shared successfully';
59+
this.dataset.shared = true;
5760
} catch (err) {
58-
shareForm.elements.output.value = `Error: ${err}`;
59-
shareForm.dataset.shared = false;
60-
console.error(`Error: ${err}`, err);
61+
if (err.name === 'AbortError') {
62+
this.#formElements.output.value = this.cancelMessage;
63+
} else {
64+
this.#formElements.output.value = `Error: ${err}`;
65+
}
66+
this.dataset.shared = false;
67+
this.dataset.error = err;
68+
console.error('Error:', err);
69+
console.dir(err);
6170
}
6271
}
6372

64-
_createElements () {
73+
#createElements () {
6574
const formElem = document.createElement('form');
6675
const buttonElem = document.createElement('button');
6776
const outputElem = document.createElement('output');
@@ -74,16 +83,18 @@ export class MySharingWidgetElement extends HTMLElement {
7483
return formElem;
7584
}
7685

77-
get _shareData () {
86+
get #formElements () { return this.shadowRoot.querySelector('form').elements; }
87+
88+
get #shareData () {
7889
return {
7990
title: document.title,
80-
text: this.descElement ? this.descElement.getAttribute('content') : null,
81-
url: this.linkElement ? this.linkElement.href : location.href
91+
text: this.#descElement ? this.#descElement.getAttribute('content') : null,
92+
url: this.#linkElement ? this.#linkElement.href : location.href
8293
};
8394
}
8495

85-
get _supportsShareApi () {
86-
return typeof navigator.share === 'function' && navigator.canShare;
96+
get #supportsShareApi () {
97+
return typeof navigator.share === 'function'; // && navigator.canShare;
8798
}
8899
}
89100

0 commit comments

Comments
 (0)