You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
326 lines
7.8 KiB
326 lines
7.8 KiB
<template> |
|
<button |
|
class="share-button share-button--evernote" |
|
type="button" |
|
:url="url" |
|
:description="description" |
|
:btnText="btnText" |
|
:modalWidth="modalWidth" |
|
:modalHeight="modalHeight" |
|
:hasIcon="hasIcon" |
|
:isBlank="isBlank" |
|
@click="openShareWindow" |
|
> |
|
<icon iconName="Evernote" class="share-button__icon" v-if="hasIcon === true"> |
|
<path |
|
d="M7.692 5.445c0 .239-.02.637-.256.895-.257.24-.652.259-.888.259H4.022c-.73 0-1.165 0-1.46.04-.159.02-.356.1-.455.14-.04.019-.04 0-.02-.02L7.85.848c.02-.02.04-.02.02.02-.04.099-.118.298-.138.457-.04.298-.04.736-.04 1.472v2.647zm5.348 17.869c-.67-.438-1.026-1.015-1.164-1.373a2.924 2.924 0 0 1-.217-1.095 3.007 3.007 0 0 1 3-3.004c.493 0 .888.398.888.895a.88.88 0 0 1-.454.776c-.099.06-.237.1-.336.12-.098.02-.473.06-.65.218-.198.16-.356.418-.356.697 0 .298.118.577.316.776.355.358.829.557 1.342.557a2.436 2.436 0 0 0 2.427-2.447c0-1.214-.809-2.289-1.875-2.766-.158-.08-.414-.14-.651-.2a8.04 8.04 0 0 0-.592-.099c-.829-.1-2.901-.756-3.04-2.606 0 0-.611 2.785-1.835 3.541-.118.06-.276.12-.454.16-.177.04-.374.06-.434.06-1.993.119-4.105-.518-5.565-2.03 0 0-.987-.816-1.5-3.104-.118-.558-.355-1.553-.493-2.488-.06-.338-.08-.597-.099-.836 0-.975.592-1.631 1.342-1.73h4.026c.69 0 1.086-.18 1.342-.419.336-.318.415-.776.415-1.313v-4.08-.118C8.52.669 9.173.052 10.139.052h.474c.197 0 .434.02.651.04.158.02.296.06.533.12 1.204.298 1.46 1.532 1.46 1.532s2.27.398 3.415.597c1.085.199 3.77.378 4.282 3.104 1.204 6.487.474 12.775.415 12.775-.849 6.129-5.901 5.83-5.901 5.83a4.1 4.1 0 0 1-2.428-.736zm4.54-13.034c-.652-.06-1.204.2-1.402.697-.04.1-.079.219-.059.278.02.06.06.08.099.1.237.12.631.179 1.204.239.572.06.967.1 1.223.06.04 0 .08-.02.119-.08.04-.06.02-.18.02-.279-.06-.537-.553-.935-1.204-1.015z" |
|
/> |
|
</icon> |
|
<span class="share-button__text" v-if="btnText">{{btnText}}</span> |
|
</button> |
|
</template> |
|
|
|
<script> |
|
import Icon from "./icon/Icon.vue"; |
|
import { |
|
getDocumentHref, |
|
getDocumentTitle, |
|
eventEmit, |
|
createWindow |
|
} from "../helpers"; |
|
|
|
export default { |
|
name: "EvernoteShareButton", |
|
components: { Icon }, |
|
props: { |
|
url: { type: String, default: getDocumentHref }, |
|
description: { type: String, default: getDocumentTitle }, |
|
btnText: { type: String, default: "Evernote" }, |
|
modalWidth: { type: Number, default: 500 }, |
|
modalHeight: { type: Number, default: 500 }, |
|
hasIcon: { type: Boolean, default: true }, |
|
isBlank: { type: Boolean, default: true } |
|
}, |
|
methods: { |
|
openShareWindow() { |
|
eventEmit(this, "onShare", { name: "Evernote" }); |
|
const configWindow = createWindow( |
|
this.$props.modalWidth, |
|
this.$props.modalHeight |
|
); |
|
const url = `https://www.evernote.com/clip.action?url=${encodeURIComponent( |
|
this.$props.url |
|
)}&title=${encodeURIComponent(this.$props.description)}`; |
|
|
|
return this.$props.isBlank |
|
? window.open(url, "_blank") |
|
: window.open(url, "Share this", configWindow); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
$main-color: hsla(136, 100%, 33%, 1); |
|
$focus-color: hsla(136, 94%, 58%, 0.4); |
|
$hover-color: hsla(136, 100%, 33%, 0.9); |
|
$painted-color: hsla(135, 77%, 23%, 1); |
|
|
|
.share-button * { |
|
box-sizing: border-box; |
|
} |
|
|
|
.share-button { |
|
display: inline-block; |
|
min-width: 42px; |
|
min-height: 42px; |
|
padding: 10px 8px; |
|
margin: 4px; |
|
color: #fff; |
|
background-color: $main-color; |
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, |
|
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", |
|
"Segoe UI Symbol"; |
|
font-weight: 400; |
|
vertical-align: top; |
|
user-select: none; |
|
border: none; |
|
border-radius: 4px; |
|
box-shadow: none; |
|
text-rendering: auto; |
|
text-indent: 0px; |
|
text-align: center; |
|
letter-spacing: normal; |
|
word-spacing: normal; |
|
text-shadow: none; |
|
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, |
|
border-color 0.3s ease-in-out; |
|
|
|
&:disabled { |
|
opacity: 0.9; |
|
} |
|
|
|
&:focus { |
|
outline: none; |
|
box-shadow: 0 0 0 3px $focus-color; |
|
} |
|
|
|
&:hover { |
|
background-color: $hover-color; |
|
} |
|
|
|
&:not(:disabled):not(.disabled) { |
|
cursor: pointer; |
|
} |
|
|
|
&:last-child { |
|
margin-right: 0; |
|
} |
|
|
|
&__icon { |
|
display: inline-block; |
|
padding: 0; |
|
margin: 0 7px; |
|
font-size: 0; |
|
vertical-align: middle; |
|
|
|
path { |
|
fill: #fff; |
|
} |
|
|
|
&:last-child { |
|
margin: 0; |
|
} |
|
} |
|
|
|
&__text { |
|
display: inline-block; |
|
margin: 0 7px; |
|
font-size: 16px; |
|
vertical-align: middle; |
|
} |
|
|
|
&__counter { |
|
display: inline-block; |
|
padding: 3px 10px; |
|
margin-left: 4px; |
|
font-size: 12px; |
|
border-left: 1px solid #fff; |
|
vertical-align: middle; |
|
} |
|
|
|
&--circle { |
|
min-width: 42px; |
|
min-height: 42px; |
|
padding: 10px; |
|
border-radius: 42px; |
|
} |
|
|
|
&--outline { |
|
background-color: transparent; |
|
border: 1px solid; |
|
background-color: transparent; |
|
border-color: $main-color; |
|
|
|
.share-button__text { |
|
color: $main-color; |
|
} |
|
|
|
.share-button__icon path { |
|
fill: $main-color; |
|
} |
|
|
|
.share-button__counter { |
|
color: $hover-color; |
|
border-color: $hover-color; |
|
} |
|
|
|
&:hover { |
|
background-color: transparent; |
|
border-color: $hover-color; |
|
|
|
.share-button__text { |
|
color: $main-color; |
|
} |
|
|
|
.share-button__icon path { |
|
fill: $hover-color; |
|
} |
|
} |
|
} |
|
|
|
&--painted { |
|
position: relative; |
|
min-width: 42px; |
|
min-height: 42px; |
|
padding: 15px; |
|
margin-bottom: 30px; |
|
border-radius: 42px; |
|
background-color: transparent; |
|
border: 3px solid; |
|
border-color: $painted-color; |
|
|
|
&::before { |
|
content: ""; |
|
z-index: -1; |
|
position: absolute; |
|
top: -1.5px; |
|
left: -1.5px; |
|
display: block; |
|
width: calc(100% + 3px); |
|
height: calc(100% + 3px); |
|
background-color: $main-color; |
|
border-radius: 50%; |
|
transform: translate3d(3px, 2px, 0); |
|
transition: transform 0.2s ease-in-out; |
|
} |
|
|
|
.share-button__icon { |
|
width: 30px; |
|
height: 30px; |
|
margin: 0; |
|
} |
|
|
|
.share-button__text { |
|
display: none; |
|
} |
|
|
|
.share-button__counter { |
|
position: absolute; |
|
bottom: -30px; |
|
right: -7px; |
|
margin: 0; |
|
padding: 4px 10px; |
|
border: 3px solid; |
|
font-size: 8px; |
|
border-radius: 15px; |
|
color: #fff; |
|
border-color: $painted-color; |
|
|
|
&::before { |
|
content: ""; |
|
z-index: -1; |
|
position: absolute; |
|
top: -1.65px; |
|
left: -1.5px; |
|
display: block; |
|
width: calc(100% + 3px); |
|
height: calc(100% + 3px); |
|
border-radius: 15px; |
|
transform: translate3d(-3px, 1.5px, 0); |
|
transition: transform 0.2s ease-in-out; |
|
background-color: $main-color; |
|
} |
|
} |
|
|
|
&:hover { |
|
&::before { |
|
transform: translate3d(0, 0, 0); |
|
} |
|
|
|
.share-button__counter::before { |
|
transform: translate3d(0px, 0px, 0); |
|
} |
|
} |
|
|
|
&:focus { |
|
&::before { |
|
transform: translate3d(0, 0, 0); |
|
} |
|
|
|
.share-button__counter::before { |
|
transform: translate3d(0px, 0px, 0); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.share-button { |
|
min-width: 38px; |
|
min-height: 38px; |
|
padding: 8px 8px; |
|
margin: 2px; |
|
|
|
&__icon { |
|
width: 18px; |
|
height: 18px; |
|
margin: 0 4px; |
|
} |
|
|
|
&__text { |
|
margin: 0 4px; |
|
font-size: 14px; |
|
} |
|
|
|
&--circle { |
|
border-radius: 38px; |
|
} |
|
|
|
&--painted { |
|
min-width: 48px; |
|
min-height: 48px; |
|
margin: 4px 4px 20px 4px; |
|
|
|
&::before { |
|
transform: translate3d(2.5px, 1.5px, 0); |
|
} |
|
|
|
.share-button__icon { |
|
width: 20px; |
|
height: 20px; |
|
} |
|
|
|
.share-button__counter { |
|
bottom: -24px; |
|
right: -8px; |
|
padding: 2px 7px; |
|
|
|
&::before { |
|
transform: translate3d(-2px, 1.75px, 0); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|