-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
199 lines (144 loc) · 9.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Progressive Share Button - Demo Page</title>
<script type="module" src="demo-page-assets/demo.ts"></script>
</head>
<body>
<div class=" max-w-screen-lg mx-auto p-6 py-16 prose">
<h1 class="text-blue-800 text-4xl font-bold ">Progressive Share Button</h1>
<h2>About this demo page</h2>
<p>
This page demonstrates how to use the <a href="https://github.com/johnfmorton/progressive-share-button">Progressive Share Button</a> web component. The component is an easy way to add a share button to a web page using the OS native share options by using the <a href="https://w3c.github.io/web-share/">Web Share API</a>. The “progressive” portion of the name refers to how the component deals with browser support for the API. The button displays the OS specific share button if the browser supports the Web Share API. It will simply not display and throw no errors when support is lacking.</p>
<p>Read about support on the <a href="https://caniuse.com/web-share">Can I Use page for the Web Share API</a>.</p>
<p id="supported">
</p>
<hr>
<h2 class="text-2xl font-bold pt-4">Basic usage</h2>
<p>The most basic usage is using no attributes. This makes the component share the URL of the current page.</p>
<pre><progressive-share-button /></pre>
<p><progressive-share-button /></p>
<hr>
<p>You can specify the URL and the title as demonstrated in the next example.</p>
<pre><progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=0 /></pre>
<p><progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=0 /></p>
<hr>
<h2 class="text-2xl font-bold pt-4">Debugging</h2>
<p>The following is the same as the basic example above, but with <b>debug mode enabled</b>. Debug mode will display the button even if the browser does not support the Web Share API. (If you are on Chrome on a Mac, this will be the only instance of the share button you will see on this page.) <span class="bg-yellow">Because the following button has debug on, `debug=1`, clicking the share icon will not activate the share dialog box but instead will console.log the data that will be shared.</span></p>
<pre class="whitespace-pre-line">
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 />
</pre>
<p>Debug and show the share icon as determined by the component and its best guess at your operating system: <progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 id="debug-example" /></p>
<pre><progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="ios" id="debug-example-ios" /></p></pre>
<p>Debug and show the iOS/Mac share icon: <progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="ios" id="debug-example-ios" /></p>
<pre><progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="android" id="debug-example-android" /></pre>
<p>Debug and show the Android share icon: <progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="android" id="debug-example-android" /></p>
<pre><progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 os="windows" id="debug-example-windows" /></pre>
<p>Debug and show the Windows / default share icon: <progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" os="windows" debug=1 id="debug-example-windows" /></p>
<p>The following shows the bounding box in neon green for each icon to help you see the icons and their size relation to each other.</p>
<div class="mb-6">
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 style='background-color: greenyellow;' os="ios"></progressive-share-button>
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 style='background-color: greenyellow;' os="android" /></progressive-share-button>
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" title="Visit the Progressive Share Button homepage" debug=1 style='background-color: greenyellow;' os="windows" /></progressive-share-button>
</div>
<hr>
<h2 class="text-2xl font-bold pt-4">Smart-share</h2>
<p>The following example uses the <b>“smart-share”</b> feature which will concatenate the title, text and URL into a single string and then share that string. This helps deal with some inconsistent implementations in the Web Share API.</p>
<pre class="whitespace-pre-line">
<progressive-share-button title="Progressive Share Button" text="Check out this cool web component that creates a share button that will only be displayed if the browser supports the Web Share API." url="https://github.com/johnfmorton/progressive-share-button" smart-share=1 icon-size="20" debug=0 class="example-1" />
<style>
progressive-share-button.example-1::part(shareButton) {
background-color: blueviolet;
border-radius: 5px;
padding: 0.45rem 0.75rem 0.75rem;
}
progressive-share-button.example-1:hover::part(shareButton) {
background-color: blue;
}
progressive-share-button.example-1::part(shareIcon) {
color: white;
}
progressive-share-button.example-1:hover::part(shareIcon) {
color: orange;
}
</style>
</pre>
<p>
<progressive-share-button title="Progressive Share Button" text="Check out this cool web component that creates a share button that will only be displayed if the browser supports the Web Share API." url="https://github.com/johnfmorton/progressive-share-button" smart-share=1 icon-size="20" debug=0 class="example-1"></progressive-share-button>
</p>
<hr>
<h2 class="text-2xl font-bold pt-4">Customizing the button style</h2>
<p>The following two examples demonstrate overriding the icon built into the component by placing content, the text "Share this link," in the slot inside the component.</p>
<p>The first shows how to use the ::part attribute to style the `shareButton` in the web component to make the button look like a regular link.</p>
<pre class="whitespace-pre-line">
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" class="text-share-example-1" debug=0><b class="text-blue-600">Share this link</b></progressive-share-button>
<style>
progressive-share-button.text-share-example-1::part(shareButton) {
font-size: 1rem;
text-decoration: underline;
color: blue;
}
</style>
</pre>
<p><progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" class="text-share-example-1" debug=0>Share this link</progressive-share-button></p>
<hr>
<p>The second example shows how to use the ::part attribute to style the `shareButton` in the web component to make the button look like red button.</p>
<pre class="whitespace-pre-line">
<progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" class="text-share-example-2" debug=0><b class="text-blue-600">Share this link</b></progressive-share-button>
<style>
progressive-share-button.text-share-example-2::part(shareButton) {
background: red;
color: white;
font-size: 0.75rem;
border-radius: 1rem;
border: 1px solid black;
padding: 0.25rem 0.75rem;
}
</style>
</pre>
<p><progressive-share-button url="https://github.com/johnfmorton/progressive-share-button" class="text-share-example-2" debug=0>Share this link</progressive-share-button></p>
<hr>
<!--
Example of how to use the progressive-share-button web component with a custom name
<p>Custom Share Text Example 2: <progressive-share-button-custom-name url="https://github.com/johnfmorton/progressive-share-button" class="text-share-example-2" debug=0></progressive-share-button-custom-name></p>
<hr>
-->
<style>
.supported {
background-color: greenyellow;
padding: 1rem;
border-radius: 5px;
}
.not-supported {
background-color: #B72911;
color: white;
padding: 1rem;
border-radius: 5px;
}
</style>
<script>
const supported = document.getElementById('supported');
if (typeof navigator.share === 'function') {
console.log(
'The Web Share API is supported. Set the message for the demo page.'
)
supported?.classList.add('supported');
if (supported) {
debugger;
supported.innerHTML = 'The Web Share API is supported in your browser. You should see the all of the share button examples.';
}
} else {
console.log(
'The Web Share API is not supported. Set the message for the demo page.'
)
supported?.classList.add('not-supported');
if (supported) {
supported.innerHTML = 'Unfortunately, the Web Share API is not supported in your browser. You will only see the share button examples that have the debug attribute set to 1.';
}
}
</script>
</div>
</body>
</html>