curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(js): only show share button if web share API is supported

This commit is contained in:
MDLeom 2020-04-22 11:38:30 +01:00
parent aebe6637a9
commit adb9d92218
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
3 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/chameleon/layout/_partial/post/title.ejs
View File

@ -10,7 +10,7 @@
<% } else { %> <% } else { %>
<h1 class="<%= class_name %>" itemprop="headline name"><%= post.title %> <h1 class="<%= class_name %>" itemprop="headline name"><%= post.title %>
<%/* Share button */%> <%/* Share button */%>
<a class="share-button" id="share-click"> <a id="share-button">
<svg viewBox="0 50 1635 1635"> <svg viewBox="0 50 1635 1635">
<title>Share post</title> <title>Share post</title>
<desc>Share icon</desc> <desc>Share icon</desc>

12
themes/chameleon/source/css/chameleon.css
View File

@ -721,21 +721,27 @@ svg#share:hover {
fill: currentColor; 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 .article-entry a.headerlink svg,
.article-title a.share-button svg { .article-title a#share-button svg {
height: 0.75em; height: 0.75em;
} }
/* don't underline permalink and share icons */ /* don't underline permalink and share icons */
.article .article-entry a.headerlink, .article .article-entry a.headerlink,
.article-title a.share-button { .article-title a#share-button {
border-bottom: none; border-bottom: none;
margin-left: 0.5em; margin-left: 0.5em;
} }
/* underline permalink and share icons when hover */ /* underline permalink and share icons when hover */
.article .article-entry a.headerlink: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); border-bottom: 1px solid var(--link-underline);
} }

7
themes/chameleon/source/js/chameleon.js
View File

@ -29,7 +29,12 @@ document.addEventListener('click', (evt) => {
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
// Only available on supporting browsers and HTTPS // Only available on supporting browsers and HTTPS
if (navigator.share && document.location.protocol === '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) => { const query = (selector) => {
return document.querySelector(selector) return document.querySelector(selector)
} }