|
|
|
|
<template>
|
|
|
|
|
<button
|
|
|
|
|
class="share-button share-button--evernote"
|
|
|
|
|
type="button"
|
|
|
|
|
:class="className"
|
|
|
|
|
:shareUrl="shareUrl"
|
|
|
|
|
:shareDescription="shareDescription"
|
|
|
|
|
:shareTitle="shareTitle"
|
|
|
|
|
:btnText="btnText"
|
|
|
|
|
:windowWidth="windowWidth"
|
|
|
|
|
:windowHeight="windowHeight"
|
|
|
|
|
: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: {
|
|
|
|
|
className: { type: String },
|
|
|
|
|
shareUrl: { type: String, default: getDocumentHref },
|
|
|
|
|
shareTitle: { type: String, default: "" },
|
|
|
|
|
shareDescription: { type: String, default: getDocumentTitle },
|
|
|
|
|
sharePic: { type: String, default: "" },
|
|
|
|
|
btnText: { type: String, default: "Evernote" },
|
|
|
|
|
windowWidth: { type: Number },
|
|
|
|
|
windowHeight: { type: Number },
|
|
|
|
|
hasIcon: { type: Boolean, default: true },
|
|
|
|
|
isBlank: { type: Boolean, default: true }
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
openShareWindow() {
|
|
|
|
|
eventEmit(this, "onShare", { name: "Evernote" });
|
|
|
|
|
const configWindow = createWindow();
|
|
|
|
|
const url = `https://www.evernote.com/clip.action?url=${encodeURIComponent(
|
|
|
|
|
this.$props.shareUrl
|
|
|
|
|
)}&title=${encodeURIComponent(this.$props.shareDescription)}`;
|
|
|
|
|
|
|
|
|
|
return this.$props.isBlank
|
|
|
|
|
? window.open(url, "__blank")
|
|
|
|
|
: window.open(url, "Share this", configWindow);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
@import "../style/index.css";
|
|
|
|
|
@import "../style/evernoteButton.css";
|
|
|
|
|
</style>
|
