<html>
<head>
<title>Web Share API Usage - RJM Programming - July, 2022 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share</title>
</head>
<body>
<style>
input { background-color: yellow; }
input[type=button] { background-color: orange; }
button { background-color: lightgreen; }
</style>
<h2>Web Share API Usage</h2>
<h3>RJM Programming - July, 2022</h3>
<h4>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share' href='//developer.mozilla.org/en-US/docs/Web/API/Navigator/share'>https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share</a></h4><br>
<!--p><button>Share MDN!</button></p>
<p class="result"></p>
<script type='text/javascript'>

const shareData = {
title: 'MDN',
text: 'Learn web development on MDN!',
url: 'https://developer.mozilla.org'
}

const btn = document.querySelector('button');
const resultPara = document.querySelector('.result');

// Share must be triggered by "user activation"
btn.addEventListener('click', async () => {
try {
await navigator.share(shareData)
resultPara.textContent = 'MDN shared successfully'
} catch(err) {
resultPara.textContent = 'Error: ' + err
}
});
</script>

<div>
<label for="shareurl"><input type=button onclick='shareurl();' value="Share URL Link"></input>: </label>
<input title='Suffix by hashtag 1 is text and hashtag 2 is title' style='width:45%;' type=url value='' placeholder='https://www.rjmprogramming.com.au/ITblog/#RJM Programming Blog#IT Blog' id=shareurl ondblclick="this.value=this.placeholder;"></input><br><br><span> ... and/or ... </span><br><br>
<label for="files"><input type=button onclick="document.getElementById('share').click();" value="Share media or document files"></input>: </label>
<input id="files" type="file" accept="image/*,video/*,audio/*,application/*,text/*" multiple>
</div><br><br>
<button id="share" type="button">Share your media or documents or link!</button>
<output id="output"></output>
<script type='text/javascript'>
var shareData = {
title: 'IT Blog',
text: 'RJM Programming Blog',
url: 'https://www.rjmprogramming.com.au/ITblog/'
}
const input = document.getElementById('files')
const output = document.getElementById('output')

document.getElementById('share').addEventListener('click', async () => {
const files = input.files

if (files.length === 0) {
shareurl();
output.textContent = 'No files selected.'
return
}

// feature detecting navigator.canShare() also implies
// the same for the navigator.share()
if (!navigator.canShare) {
output.textContent = `Your browser doesn't support the Web Share API.`
return
}

if (navigator.canShare({ files })) {
try {
await navigator.share({
files,
title: 'Media or documants',
text: 'Take a look at media or documents below' + String.fromCharCode(10) + String.fromCharCode(10)
})
output.textContent = 'Shared!'
} catch (error) {
output.textContent = `Error: ${error.message}`
}
} else {
output.textContent = `Your system doesn't support sharing these files.`
}
});

async function shareurl() {
if (document.getElementById('shareurl').value == '') {
document.getElementById('shareurl').value=document.getElementById('shareurl').placeholder;
}
if (document.getElementById('shareurl').value.trim() != '') {
var hs=document.getElementById('shareurl').value.split('#');
shareData.url=hs[0];
shareData.text='Url';
shareData.title='Url';
if (hs.length > 1) {
shareData.text=decodeURIComponent(hs[1]);
shareData.title=decodeURIComponent(hs[1]);
}
if (hs.length > 2) {
shareData.title=decodeURIComponent(hs[2]);
}
}

try {
await navigator.share(shareData)
document.getElementById('output').textContent = shareData.text + ' shared successfully'
} catch(err) {
document.getElementById('output').textContent = 'Error: ' + err
}

}
</script>
</body>
</html>