mirror of https://gitlab.com/curben/blog
fix(js): only show share button if web share API is supported
This commit is contained in:
parent
aebe6637a9
commit
adb9d92218
|
@ -10,7 +10,7 @@
|
|||
<% } else { %>
|
||||
<h1 class="<%= class_name %>" itemprop="headline name"><%= post.title %>
|
||||
<%/* Share button */%>
|
||||
<a class="share-button" id="share-click">
|
||||
<a id="share-button">
|
||||
<svg viewBox="0 50 1635 1635">
|
||||
<title>Share post</title>
|
||||
<desc>Share icon</desc>
|
||||
|
|
|
@ -721,21 +721,27 @@ svg#share:hover {
|
|||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* hide share button by default
|
||||
unhide (via JS) if Web Share API is supported */
|
||||
.article-title a#share-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article .article-entry a.headerlink svg,
|
||||
.article-title a.share-button svg {
|
||||
.article-title a#share-button svg {
|
||||
height: 0.75em;
|
||||
}
|
||||
|
||||
/* don't underline permalink and share icons */
|
||||
.article .article-entry a.headerlink,
|
||||
.article-title a.share-button {
|
||||
.article-title a#share-button {
|
||||
border-bottom: none;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
/* underline permalink and share icons when hover */
|
||||
.article .article-entry a.headerlink:hover,
|
||||
.article-title a.share-button:hover {
|
||||
.article-title a#share-button:hover {
|
||||
border-bottom: 1px solid var(--link-underline);
|
||||
}
|
||||
|
||||
|
|
|
@ -29,7 +29,12 @@ document.addEventListener('click', (evt) => {
|
|||
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
|
||||
// Only available on supporting browsers and HTTPS
|
||||
if (navigator.share && document.location.protocol === 'https:') {
|
||||
document.getElementById('share-click').addEventListener('click', async () => {
|
||||
const shareBtn = document.getElementById('share-button')
|
||||
|
||||
// Unhide share-button if supported
|
||||
shareBtn.style.display = 'initial'
|
||||
|
||||
shareBtn.addEventListener('click', async () => {
|
||||
const query = (selector) => {
|
||||
return document.querySelector(selector)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue