feat: implement Web Share API (#991)

fixes #990
This commit is contained in:
Nolan Lawson 2019-02-14 21:26:28 -08:00 committed by GitHub
parent a97600d4a2
commit 1b9d3b1cd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 4 deletions

View File

@ -43,5 +43,6 @@ module.exports = [
{ id: 'fa-angle-left', src: 'src/thirdparty/font-awesome-svg-png/white/svg/angle-left.svg' }, { id: 'fa-angle-left', src: 'src/thirdparty/font-awesome-svg-png/white/svg/angle-left.svg' },
{ id: 'fa-angle-right', src: 'src/thirdparty/font-awesome-svg-png/white/svg/angle-right.svg' }, { id: 'fa-angle-right', src: 'src/thirdparty/font-awesome-svg-png/white/svg/angle-right.svg' },
{ id: 'fa-search-minus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-minus.svg' }, { id: 'fa-search-minus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-minus.svg' },
{ id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' } { id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' },
{ id: 'fa-share-square-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/share-square-o.svg' }
] ]

View File

@ -0,0 +1,14 @@
import { toast } from '../_components/toast/toast'
import { statusHtmlToPlainText } from '../_utils/statusHtmlToPlainText'
export async function shareStatus (status) {
try {
await navigator.share({
title: status.spoiler_text || undefined,
text: statusHtmlToPlainText(status.content, status.mentions),
url: status.url
})
} catch (e) {
toast.say(`Unable to share: ` + (e.message || ''))
}
}

View File

@ -21,9 +21,13 @@ import { setStatusPinnedOrUnpinned } from '../../../_actions/pin'
import { setConversationMuted } from '../../../_actions/muteConversation' import { setConversationMuted } from '../../../_actions/muteConversation'
import { copyText } from '../../../_actions/copyText' import { copyText } from '../../../_actions/copyText'
import { deleteAndRedraft } from '../../../_actions/deleteAndRedraft' import { deleteAndRedraft } from '../../../_actions/deleteAndRedraft'
import { shareStatus } from '../../../_actions/share'
export default { export default {
oncreate, oncreate,
data: () => ({
supportsWebShare: process.browser && typeof navigator.share === 'function'
}),
computed: { computed: {
relationship: ({ $currentAccountRelationship }) => $currentAccountRelationship, relationship: ({ $currentAccountRelationship }) => $currentAccountRelationship,
account: ({ $currentAccountProfile }) => $currentAccountProfile, account: ({ $currentAccountProfile }) => $currentAccountProfile,
@ -75,17 +79,18 @@ export default {
mutingConversation: ({ status }) => !!status.muted, mutingConversation: ({ status }) => !!status.muted,
muteConversationLabel: ({ mutingConversation }) => mutingConversation ? `Unmute conversation` : `Mute conversation`, muteConversationLabel: ({ mutingConversation }) => mutingConversation ? `Unmute conversation` : `Mute conversation`,
muteConversationIcon: ({ mutingConversation }) => mutingConversation ? '#fa-volume-up' : '#fa-volume-off', muteConversationIcon: ({ mutingConversation }) => mutingConversation ? '#fa-volume-up' : '#fa-volume-off',
isPublicOrUnlisted: ({ visibility }) => visibility === 'public' || visibility === 'unlisted',
items: ({ items: ({
blockLabel, blocking, blockIcon, muteLabel, muteIcon, followLabel, followIcon, blockLabel, blocking, blockIcon, muteLabel, muteIcon, followLabel, followIcon,
following, followRequested, pinLabel, isUser, visibility, mentionsUser, mutingConversation, following, followRequested, pinLabel, isUser, visibility, mentionsUser, mutingConversation,
muteConversationLabel, muteConversationIcon muteConversationLabel, muteConversationIcon, supportsWebShare, isPublicOrUnlisted
}) => ([ }) => ([
isUser && { isUser && {
key: 'delete', key: 'delete',
label: 'Delete', label: 'Delete',
icon: '#fa-trash' icon: '#fa-trash'
}, },
visibility !== 'private' && visibility !== 'direct' && isUser && { isPublicOrUnlisted && isUser && {
key: 'pin', key: 'pin',
label: pinLabel, label: pinLabel,
icon: '#fa-thumb-tack' icon: '#fa-thumb-tack'
@ -115,7 +120,12 @@ export default {
label: 'Delete and redraft', label: 'Delete and redraft',
icon: '#fa-pencil' icon: '#fa-pencil'
}, },
{ isPublicOrUnlisted && supportsWebShare && {
key: 'share',
label: 'Share toot',
icon: '#fa-share-square-o'
},
isPublicOrUnlisted && {
key: 'copy', key: 'copy',
label: 'Copy link to toot', label: 'Copy link to toot',
icon: '#fa-link' icon: '#fa-link'
@ -148,6 +158,8 @@ export default {
return this.onMuteConversationClicked() return this.onMuteConversationClicked()
case 'redraft': case 'redraft':
return this.onRedraft() return this.onRedraft()
case 'share':
return this.onShare()
} }
}, },
async onDeleteClicked () { async onDeleteClicked () {
@ -190,6 +202,11 @@ export default {
let { status } = this.get() let { status } = this.get()
await deleteAndRedraft(status) await deleteAndRedraft(status)
this.close() this.close()
},
async onShare () {
let { status } = this.get()
await shareStatus(status)
this.close()
} }
} }
} }