├── LICENSE
├── README.md
├── demo.html
├── package.json
└── webcare-webshare.js


/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2024 Zach Leatherman
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # `<webcare-webshare>` Web Component
 2 | 
 3 | A web component that uses the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) to share a web site, falling back (on Desktop usually) to Copy to Clipboard.
 4 | 
 5 | * [Demo](https://zachleat.github.io/webcare-webshare/demo.html)
 6 | 	* In use on the registration flow for [`conf.11ty.dev`](https://conf.11ty.dev/).
 7 | * [Blog post](https://www.zachleat.com/web/webcare-webshare/)
 8 | *  Inspired by [_How to let the user share the website they are on_—Thomas Steiner (web.dev)](https://web.dev/patterns/web-apps/share/)
 9 | 
10 | 
11 | 
12 | ## Features
13 | 
14 | * Defaults to copy URL when Web Share API is not available.
15 | * Optionally override with your own copy-able content.
16 | * Custom button text when Web Share API is not available.
17 | 
18 | ## Installation
19 | 
20 | You can install via `npm` ([`@zachleat/webcare-webshare`](https://www.npmjs.com/package/@zachleat/webcare-webshare)) or download the `webcare-webshare.js` JavaScript file manually.
21 | 
22 | ```shell
23 | npm install @zachleat/webcare-webshare --save
24 | ```
25 | 
26 | Add `webcare-webshare.js` to your site’s JavaScript assets.
27 | 
28 | ## Usage
29 | 
30 | Use `share-text` and `share-url` per the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API). The button is un-disabled when initialized.
31 | 
32 | ```html
33 | <webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/">
34 | 	<button disabled>Share your ticket!</button>
35 | </webcare-webshare>
36 | ```
37 | 
38 | ### Custom button text when Web Share API not available.
39 | 
40 | _Copy to clipboard_ workflow only. Use the `label-copy` (Before) and `label-after-copy` (After) attributes.
41 | 
42 | ```html
43 | <webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" label-copy="📋 Copy your ticket URL" label-after-copy="✅ Copied to Clipboard">
44 | 	<button disabled>Share your ticket!</button>
45 | </webcare-webshare>
46 | ```
47 | 
48 | ### Set custom share content for copying.
49 | 
50 | _Copy to clipboard_ workflow only. Use `copy-text` to override `share-url` as the default content that is copied when using Copy to Clipboard.
51 | 
52 | ```html
53 | <webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" copy-text="Go to https://conf.11ty.dev/">
54 | 	<button disabled>Share your ticket!</button>
55 | </webcare-webshare>
56 | ```
57 | 
58 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 		<meta name="description" content="">
 7 | 		<title>&lt;webcare-webshare&gt; Web Component</title>
 8 | 		<style>
 9 | 		/* Demo styles */
10 | 		body {
11 | 			font-family: system-ui, sans-serif;
12 | 		}
13 | 
14 | 		button {
15 | 			border-radius: .5em;
16 | 			padding: .25em;
17 | 			font-size: 1.5em;
18 | 			line-height: 1;
19 | 		}
20 | 		</style>
21 | 		<script type="module" src="webcare-webshare.js"></script>
22 | 	</head>
23 | 	<body>
24 | 		<header>
25 | 			<h1>&lt;webcare-webshare&gt;  Web Component</h1>
26 | 		</header>
27 | 		<main>
28 | 			<p><a href="https://github.com/zachleat/webcare-webshare">Back to the Source Code</a></p>
29 | 			<h2>Stock</h2>
30 | 			<p>Prefers the Web Share API, falls back to a copy to clipboard feature when unavailable.</p>
31 | 			<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/">
32 | 				<button disabled>Share your ticket!</button>
33 | 			</webcare-webshare>
34 | 			<h2>Custom button text for Clipboard (before and after)</h2>
35 | 			<p>Set custom text on the button when the Web Share API is not available.</p>
36 | 			<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" label-copy="📋 Copy your ticket URL" label-after-copy="✅ Copied to Clipboard">
37 | 				<button disabled>Share your ticket!</button>
38 | 			</webcare-webshare>
39 | 			<h2>Custom content for Clipboard</h2>
40 | 			<p>Override <code>share-url</code> as the default content that is copied when using Copy to Clipboard.</p>
41 | 			<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" copy-text="Go to https://conf.11ty.dev/">
42 | 				<button disabled>Share your ticket!</button>
43 | 			</webcare-webshare>
44 | 		</main>
45 | 	</body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@zachleat/webcare-webshare",
 3 |   "version": "1.0.3",
 4 |   "description": "Web component to use the Web Share API, with a fallback to copy to the clipboard.",
 5 |   "main": "webcare-webshare.js",
 6 |   "publishConfig": {
 7 |     "access": "public"
 8 |   },
 9 |   "scripts": {
10 |     "start": "npx http-server ."
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/zachleat/webcare-webshare.git"
15 |   },
16 |   "author": {
17 |     "name": "Zach Leatherman",
18 |     "email": "zachleatherman@gmail.com",
19 |     "url": "https://zachleat.com/"
20 |   },
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/zachleat/webcare-webshare/issues"
24 |   },
25 |   "homepage": "https://github.com/zachleat/webcare-webshare#readme"
26 | }
27 | 


--------------------------------------------------------------------------------
/webcare-webshare.js:
--------------------------------------------------------------------------------
  1 | // Inspired by https://web.dev/patterns/web-apps/share/
  2 | class WebcareWebshare extends HTMLElement {
  3 | 	static tagName = "webcare-webshare";
  4 | 
  5 | 	static register(tagName, registry) {
  6 | 		if(!registry && ("customElements" in globalThis)) {
  7 | 			registry = globalThis.customElements;
  8 | 		}
  9 | 
 10 | 		registry?.define(tagName || this.tagName, this);
 11 | 	}
 12 | 
 13 | 	static attr = {
 14 | 		text: "share-text",
 15 | 		url: "share-url",
 16 | 		copyContent: "copy-text", // optional, defaults to url
 17 | 		labelCopy: "label-copy",
 18 | 		labelAfterCopied: "label-after-copy",
 19 | 	}
 20 | 
 21 | 	get text() {
 22 | 		return this.getAttribute(WebcareWebshare.attr.text) || document.title;
 23 | 	}
 24 | 
 25 | 	get url() {
 26 | 		if(this.hasAttribute(WebcareWebshare.attr.url)) {
 27 | 			return this.getAttribute(WebcareWebshare.attr.url);
 28 | 		}
 29 | 
 30 | 		let canonical = document.querySelector('link[rel="canonical"]');
 31 | 		return canonical?.href || location.href;
 32 | 	}
 33 | 
 34 | 	get copyLabel() {
 35 | 		return this.getAttribute(WebcareWebshare.attr.labelAfterCopied) || "Copied.";
 36 | 	}
 37 | 
 38 | 	get copyContent() {
 39 | 		return this.getAttribute(WebcareWebshare.attr.copyContent) || this.url;
 40 | 	}
 41 | 
 42 | 	canShare() {
 43 | 		return "share" in navigator;
 44 | 	}
 45 | 
 46 | 	connectedCallback() {
 47 | 		if(this.shadowRoot) {
 48 | 			return;
 49 | 		}
 50 | 
 51 | 		let shadowroot = this.attachShadow({ mode: "open" });
 52 | 		let slot = document.createElement("slot");
 53 | 		shadowroot.appendChild(slot);
 54 | 
 55 | 		this.button = this.querySelector("button");
 56 | 		this.button?.removeAttribute("disabled");
 57 | 		let copyLabel = this.getAttribute(WebcareWebshare.attr.labelCopy);
 58 | 		if(this.button && !this.canShare() && copyLabel) {
 59 | 			this.button.innerText = copyLabel;
 60 | 		}
 61 | 		this.button?.addEventListener("click", () => {
 62 | 			this.share();
 63 | 		});
 64 | 	}
 65 | 
 66 | 	async copyToClipboard() {
 67 | 		if(!("clipboard" in navigator)) {
 68 | 			return;
 69 | 		}
 70 | 
 71 | 		await navigator.clipboard.writeText(this.copyContent);
 72 | 
 73 | 		if(this.button) {
 74 | 			this.button.textContent = this.copyLabel;
 75 | 		}
 76 | 	}
 77 | 
 78 | 	async share() {
 79 | 		// Feature detection to see if the Web Share API is supported.
 80 | 		if (!this.canShare()) {
 81 | 			await this.copyToClipboard();
 82 | 			return;
 83 | 		}
 84 | 
 85 | 		try {
 86 | 			await navigator.share({
 87 | 				url: this.url,
 88 | 				text: this.text,
 89 | 				title: this.text,
 90 | 			});
 91 | 			return;
 92 | 		} catch (err) {
 93 | 			// If the user cancels, an `AbortError` is thrown.
 94 | 			if (err.name !== "AbortError") {
 95 | 				console.error(err.name, err.message);
 96 | 			}
 97 | 		}
 98 | 	}
 99 | }
100 | 
101 | WebcareWebshare.register();
102 | 
103 | export { WebcareWebshare }
104 | 


--------------------------------------------------------------------------------