Alexandrshy
6 years ago
21 changed files with 626 additions and 190 deletions
@ -0,0 +1,68 @@
|
||||
<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: function() { |
||||
eventEmit(this, { 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> |
||||
@ -0,0 +1,68 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--facebook" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareDescription="shareDescription" |
||||
:shareTitle="shareTitle" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="Facebook" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path |
||||
d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0" |
||||
/> |
||||
</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: "FacebookShareButton", |
||||
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: "Facebook" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow: function() { |
||||
eventEmit(this, { name: "Facebook" }); |
||||
const configWindow = createWindow(); |
||||
const url = `https://www.facebook.com/sharer/sharer.php?u=${ |
||||
this.$props.shareUrl |
||||
}`; |
||||
|
||||
return this.$props.isBlank |
||||
? window.open(url, "__blank") |
||||
: window.open(url, "Share this", configWindow); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
@import "../style/index.css"; |
||||
@import "../style/facebookButton.css"; |
||||
</style> |
||||
@ -0,0 +1,68 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--linkedIn" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareDescription="shareDescription" |
||||
:shareTitle="shareTitle" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="LinkedIn" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path |
||||
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" |
||||
/> |
||||
</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: "LinkedInShareButton", |
||||
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: "LinkedIn" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow: function() { |
||||
eventEmit(this, { name: "LinkedIn" }); |
||||
const configWindow = createWindow(); |
||||
const url = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent( |
||||
this.$props.shareUrl |
||||
)}`; |
||||
|
||||
return this.$props.isBlank |
||||
? window.open(url, "__blank") |
||||
: window.open(url, "Share this", configWindow); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
@import "../style/index.css"; |
||||
@import "../style/linkedInButton.css"; |
||||
</style> |
||||
@ -1,43 +1,42 @@
|
||||
/* blogger */ |
||||
/* Blogger */ |
||||
.share-button--blogger { |
||||
background-color: hsla(195, 100%, 46%, 1); |
||||
background-color: hsla(14, 100%, 57%, 1); |
||||
} |
||||
|
||||
.share-button--blogger:focus { |
||||
box-shadow: 0 0 0 3px hsla(195, 94%, 71%, 0.4); |
||||
box-shadow: 0 0 0 3px hsla(14, 94%, 82%, 0.4); |
||||
} |
||||
|
||||
.share-button--blogger:hover { |
||||
background-color: hsla(195, 100%, 46%, 0.9); |
||||
background-color: hsla(14, 100%, 57%, 0.9); |
||||
} |
||||
|
||||
.share-button--blogger .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
/* Circle */ |
||||
.share-button--blogger.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsl(195, 100%, 46%, 1); |
||||
border-color: hsl(14, 100%, 57%, 1); |
||||
} |
||||
|
||||
.share-button--blogger.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(195, 100%, 46%, 0.9); |
||||
border-color: hsla(14, 100%, 57%, 0.9); |
||||
} |
||||
|
||||
.share-button--blogger.share-button--outline .share-button__text { |
||||
color: hsla(195, 100%, 46%, 1); |
||||
color: hsla(14, 100%, 57%, 1); |
||||
} |
||||
|
||||
.share-button--blogger.share-button--outline:hover .share-button__text { |
||||
color: hsla(195, 100%, 46%, 0.9); |
||||
color: hsla(14, 100%, 57%, 0.9); |
||||
} |
||||
|
||||
.share-button--blogger.share-button--outline .share-button__icon path { |
||||
fill: hsla(195, 100%, 46%, 1); |
||||
fill: hsla(14, 100%, 57%, 1); |
||||
} |
||||
|
||||
.share-button--blogger.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(195, 100%, 46%, 0.9); |
||||
fill: hsla(14, 100%, 57%, 0.9); |
||||
} |
||||
|
||||
@ -0,0 +1,42 @@
|
||||
/* Evernote */ |
||||
.share-button--evernote { |
||||
background-color: hsla(136, 100%, 33%, 1); |
||||
} |
||||
|
||||
.share-button--evernote:focus { |
||||
box-shadow: 0 0 0 3px hsla(136, 94%, 58%, 0.4); |
||||
} |
||||
|
||||
.share-button--evernote:hover { |
||||
background-color: hsla(136, 100%, 33%, 0.9); |
||||
} |
||||
|
||||
.share-button--evernote .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--evernote.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsl(136, 100%, 33%, 1); |
||||
} |
||||
|
||||
.share-button--evernote.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(136, 100%, 33%, 0.9); |
||||
} |
||||
|
||||
.share-button--evernote.share-button--outline .share-button__text { |
||||
color: hsla(136, 100%, 33%, 1); |
||||
} |
||||
|
||||
.share-button--evernote.share-button--outline:hover .share-button__text { |
||||
color: hsla(136, 100%, 33%, 0.9); |
||||
} |
||||
|
||||
.share-button--evernote.share-button--outline .share-button__icon path { |
||||
fill: hsla(136, 100%, 33%, 1); |
||||
} |
||||
|
||||
.share-button--evernote.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(136, 100%, 33%, 0.9); |
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
/* Facebook */ |
||||
.share-button--facebook { |
||||
background-color: hsla(221, 44%, 41%, 1); |
||||
} |
||||
|
||||
.share-button--facebook:focus { |
||||
box-shadow: 0 0 0 3px hsla(221, 38%, 66%, 0.4); |
||||
} |
||||
|
||||
.share-button--facebook:hover { |
||||
background-color: hsla(221, 44%, 41%, 0.9); |
||||
} |
||||
|
||||
.share-button--facebook .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--facebook.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsl(221, 44%, 41%, 1); |
||||
} |
||||
|
||||
.share-button--facebook.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(221, 44%, 41%, 0.9); |
||||
} |
||||
|
||||
.share-button--facebook.share-button--outline .share-button__text { |
||||
color: hsla(221, 44%, 41%, 1); |
||||
} |
||||
|
||||
.share-button--facebook.share-button--outline:hover .share-button__text { |
||||
color: hsla(221, 44%, 41%, 0.9); |
||||
} |
||||
|
||||
.share-button--facebook.share-button--outline .share-button__icon path { |
||||
fill: hsla(221, 44%, 41%, 1); |
||||
} |
||||
|
||||
.share-button--facebook.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(221, 44%, 41%, 0.9); |
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
/* LinkedIn */ |
||||
.share-button--linkedIn { |
||||
background-color: hsla(201, 100%, 35%, 1); |
||||
} |
||||
|
||||
.share-button--linkedIn:focus { |
||||
box-shadow: 0 0 0 3px hsla(201, 94%, 60%, 0.4); |
||||
} |
||||
|
||||
.share-button--linkedIn:hover { |
||||
background-color: hsla(201, 100%, 35%, 0.9); |
||||
} |
||||
|
||||
.share-button--linkedIn .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--linkedIn.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsl(201, 100%, 35%, 1); |
||||
} |
||||
|
||||
.share-button--linkedIn.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(201, 100%, 35%, 0.9); |
||||
} |
||||
|
||||
.share-button--linkedIn.share-button--outline .share-button__text { |
||||
color: hsla(201, 100%, 35%, 1); |
||||
} |
||||
|
||||
.share-button--linkedIn.share-button--outline:hover .share-button__text { |
||||
color: hsla(201, 100%, 35%, 0.9); |
||||
} |
||||
|
||||
.share-button--linkedIn.share-button--outline .share-button__icon path { |
||||
fill: hsla(201, 100%, 35%, 1); |
||||
} |
||||
|
||||
.share-button--linkedIn.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(201, 100%, 35%, 0.9); |
||||
} |
||||
Loading…
Reference in new issue