Skip to content
This repository has been archived by the owner on Jul 24, 2023. It is now read-only.

Commit

Permalink
feat(ShareWidget): ui, share per mail and fix clipboard shortcuts
Browse files Browse the repository at this point in the history 
double click link icon (chain) & cmd/strg+click work again with new execCommand api
small ui adjustemts
title of link modal now closer to input
show long url checkbox now in between title & close x and gray colored
prefix link input with label
short url now default
  • Loading branch information
@CanRau
CanRau committed Oct 6, 2018
1 parent 985f4d4 commit 0fdc977
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 33 deletions.
94 changes: 63 additions & 31 deletions src/components/ShareWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import styled from 'react-emotion'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { colors, media } from '@/theme'
import { faLink, faTimes } from '@fortawesome/free-solid-svg-icons'
import { faLink, faTimes, faEnvelope } from '@fortawesome/free-solid-svg-icons'
import {
faFacebookSquare,
faTwitterSquare,
Expand Down Expand Up @@ -47,7 +47,13 @@ const LinkWrapper = styled.div`
padding: 0 0.8rem;
`

const LinkLabel = styled.span`
white-space: nowrap;
color: ${colors.gray};
`

const InvisibleInput = styled.input`
margin-left: 0.7rem;
background-color: transparent;
border: none;
width: 100%;
Expand All @@ -66,7 +72,7 @@ const LinkModalHeader = styled.header`
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.55rem;
margin-bottom: 0.5rem;
`
const LinkModalTitle = styled.h3`
margin: 0;
Expand All @@ -76,51 +82,54 @@ const Label = styled.label`
display: flex;
align-items: center;
justify-content: flex-end;
color: ${colors.gray};
`

const Checkbox = styled.input`
margin-right: 0.5rem;
`

/**
* TODO: improve onDubleClick
* if we improve onDoubleClick
* https://gist.github.com/MoOx/12726d85a3343d84ee3c
* https://stackoverflow.com/questions/49187412/handle-react-ondoubleclick-and-single-onclick-for-same-element
*/
class ShareWidget extends Component {
state = {
linkModalOpen: false,
showShortLink: false,
showFullUrl: false,
}

linkInputRef = React.createRef()

getLink = () =>
this.props.siteUrl +
(this.state.showShortLink
? this.props.post.fields.slug_short
: this.props.post.fields.url)
(this.state.showFullUrl
? this.props.post.fields.url
: this.props.post.fields.slug_short)

onLinkModalButtonClick = ({ metaKey }) =>
metaKey ? this.copyShortLink() : this.toggleLinkModal()
metaKey ? this.copyToClipboard() : this.toggleLinkModal()

toggleLinkModal = () =>
this.setState({ linkModalOpen: !this.state.linkModalOpen })

copyShortLink = () =>
this.setState({ showShortLink: true }, this.copyToClipboard)

toggleLink = () => this.setState({ showShortLink: !this.state.showShortLink })
toggleLink = () => this.setState({ showFullUrl: !this.state.showFullUrl })

onClickLinkInput = () => this.linkInputRef.current.select()

copyToClipboard = () => {
/* globals document */
const shareUrlInput = document.getElementById(`share-url`)
shareUrlInput.focus()
shareUrlInput.select()

let shareUrlInput = document.getElementById(`share-url`)
try {
if (!shareUrlInput) {
shareUrlInput = document.createElement(`textarea`)
shareUrlInput.value = this.getLink()
document.getElementById(`sharewidget`).appendChild(shareUrlInput)
}
shareUrlInput.focus()
shareUrlInput.select()

if (document.execCommand(`copy`)) {
toast.success(this.props.shareUrlSuccessLabel)
} else {
Expand All @@ -129,23 +138,27 @@ class ShareWidget extends Component {
} catch (err) {
toast.error(this.props.shareUrlErrorLabel)
}
shareUrlInput.remove()
}

render() {
const { linkModalOpen } = this.state
const { linkModalOpen, showFullUrl } = this.state
const {
label,
getShortUrlLabel,
getFullUrlLabel,
copyLabel,
linkLabelShort,
linkLabelFull,
post,
siteUrl,
...props
} = this.props
const { title, tweet_id, lang } = post.frontmatter
const link = siteUrl + post.fields.url
const shortLink = siteUrl + post.fields.slug_short

return (
<Container {...props}>
<Container id="sharewidget" {...props}>
{label && <Title>{label}</Title>}

<ContainerInner>
Expand All @@ -171,12 +184,12 @@ class ShareWidget extends Component {
>
<a
href={
post.frontmatter.tweet_id
tweet_id
? `https://twitter.com/intent/retweet?tweet_id=${encodeURIComponent(
post.frontmatter.tweet_id
tweet_id
)}`
: `http://twitter.com/share?text=${encodeURIComponent(
post.frontmatter.title
title
)}&url=${encodeURIComponent(shortLink)}`
}
target="_blank"
Expand All @@ -191,7 +204,7 @@ class ShareWidget extends Component {
<a
href={`https://plus.google.com/share?url=${encodeURIComponent(
link
)}&hl=${encodeURIComponent(post.frontmatter.lang)}`}
)}&hl=${encodeURIComponent(lang)}`}
target="_blank"
rel="noopener noreferrer"
>
Expand All @@ -206,13 +219,27 @@ class ShareWidget extends Component {
<a
href={`https://telegram.me/share/url?url=${encodeURIComponent(
link
)}&text=${encodeURIComponent(post.frontmatter.title)}`}
)}&text=${encodeURIComponent(title)}`}
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faTelegramPlane} size="lg" />
</a>
</div>
<div
css={{
'& svg': { color: colors.brands.telegram, margin: `1rem` },
}}
>
<a
href={`mailto:?body=${encodeURIComponent(
link
)}&subject=${encodeURIComponent(title)}`}
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faEnvelope} size="lg" />
</a>
</div>

<div
css={{
Expand All @@ -221,7 +248,7 @@ class ShareWidget extends Component {
>
<Button
onClick={this.onLinkModalButtonClick}
onDoubleClick={this.copyShortLink}
onDoubleClick={this.copyToClipboard}
>
<FontAwesomeIcon icon={faLink} size="lg" />
</Button>
Expand All @@ -232,6 +259,10 @@ class ShareWidget extends Component {
<LinkModal>
<LinkModalHeader>
<LinkModalTitle>{label}</LinkModalTitle>
<Label>
<Checkbox type="checkbox" onClick={this.toggleLink} />
<span>{getFullUrlLabel}</span>
</Label>
<FontAwesomeIcon
icon={faTimes}
onClick={this.toggleLinkModal}
Expand All @@ -242,20 +273,19 @@ class ShareWidget extends Component {
/>
</LinkModalHeader>
<LinkWrapper>
<LinkLabel>
{showFullUrl ? linkLabelFull : linkLabelShort}
</LinkLabel>
<InvisibleInput
id="share-url"
type="text"
value={this.state.showShortLink ? shortLink : link}
value={showFullUrl ? link : shortLink}
readOnly
onClick={this.onClickLinkInput}
innerRef={this.linkInputRef}
/>
<Button onClick={this.copyToClipboard}>{copyLabel}</Button>
</LinkWrapper>
<Label>
<Checkbox type="checkbox" onClick={this.toggleLink} />
<span>{getShortUrlLabel}</span>
</Label>
</LinkModal>
)}
</Container>
Expand All @@ -265,8 +295,10 @@ class ShareWidget extends Component {

ShareWidget.propTypes = {
label: PropTypes.string,
getShortUrlLabel: PropTypes.string,
getFullUrlLabel: PropTypes.string,
copyLabel: PropTypes.string,
linkLabelShort: PropTypes.string,
linkLabelFull: PropTypes.string,
shareUrlSuccessLabel: PropTypes.string,
shareUrlErrorLabel: PropTypes.string,
post: PropTypes.object,
Expand Down
8 changes: 6 additions & 2 deletions src/templates/BlogPost.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,10 @@ const BlogPost = props => {
label={BlogPost.frontmatter.shareLabel}
shareUrlSuccessLabel={BlogPost.frontmatter.shareUrl.success}
shareUrlErrorLabel={BlogPost.frontmatter.shareUrl.error}
getShortUrlLabel={BlogPost.frontmatter.shareUrl.getShortUrlLabel}
getFullUrlLabel={BlogPost.frontmatter.shareUrl.getFullUrlLabel}
copyLabel={BlogPost.frontmatter.shareUrl.copyLabel}
linkLabelShort={BlogPost.frontmatter.shareUrl.linkLabelShort}
linkLabelFull={BlogPost.frontmatter.shareUrl.linkLabelFull}
post={post}
siteUrl={props.data.site.siteMetadata.siteUrl}
css={{
Expand Down Expand Up @@ -204,9 +206,11 @@ export const query = graphql`
shareLabel
shareUrl {
copyLabel
linkLabelShort
linkLabelFull
success
error
getShortUrlLabel
getFullUrlLabel
}
relatedArticlesLabel
SupportWidget {
Expand Down

0 comments on commit 0fdc977

Please sign in to comment.