Alexandrshy
6 years ago
55 changed files with 1792 additions and 53 deletions
@ -0,0 +1,75 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--email" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareTitle="shareTitle" |
||||
:shareDescription="shareDescription" |
||||
:sharePic="sharePic" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon |
||||
iconName="Email" |
||||
class="share-button__icon" |
||||
viewBoxWidth="620" |
||||
viewBoxHeight="620" |
||||
v-if="hasIcon === true" |
||||
> |
||||
<path |
||||
d="M612,156.232c0-13.065-5.16-24.885-13.393-33.897c-0.137-0.179-0.168-0.39-0.316-0.57 c-0.137-0.158-0.327-0.222-0.475-0.369c-9.361-9.794-22.553-15.988-37.243-15.988H51.437c-14.69,0-27.882,6.194-37.264,15.988 c-0.137,0.147-0.338,0.211-0.475,0.38c-0.148,0.169-0.179,0.39-0.316,0.57C5.161,131.358,0,143.167,0,156.232v299.546 c0,13.382,5.372,25.486,13.962,34.573c0.169,0.189,0.222,0.422,0.412,0.602c0.063,0.063,0.137,0.073,0.201,0.137 c9.361,9.541,22.394,15.514,36.863,15.514h509.136c14.469,0,27.513-5.983,36.863-15.523c0.063-0.054,0.137-0.074,0.2-0.127 c0.18-0.169,0.232-0.401,0.401-0.581c8.601-9.086,13.973-21.201,13.973-34.594V156.232H612z M411.687,290.175l176.368-146.238 c1.73,3.757,2.754,7.904,2.754,12.294v299.546c0,3.969-0.823,7.736-2.248,11.208L411.687,290.175z M560.573,126.355 c4.443,0,8.633,1.013,12.442,2.723l-267.01,221.378L38.995,129.078c3.81-1.709,8-2.723,12.442-2.723H560.573z M23.45,466.976 c-1.425-3.461-2.248-7.239-2.248-11.208V156.232c0-4.39,1.024-8.538,2.754-12.294l176.368,146.238L23.45,466.976z M51.437,485.645c-4.896,0-9.456-1.267-13.55-3.313l178.731-178.658l82.58,68.471c1.963,1.636,4.39,2.459,6.807,2.459 c2.417,0,4.844-0.823,6.807-2.459l82.58-68.471l178.731,178.658c-4.095,2.047-8.653,3.313-13.551,3.313H51.437z" |
||||
/> |
||||
</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: "EmailShareButton", |
||||
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: "Email" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow() { |
||||
eventEmit(this, "onShare", { name: "Email" }); |
||||
const configWindow = createWindow(); |
||||
const url = `mailto:?subject=Share%20Link&body=${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/emailButton.css"; |
||||
</style> |
||||
@ -0,0 +1,69 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--facebookMessenger" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareDescription="shareDescription" |
||||
:shareTitle="shareTitle" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="FacebookMessenger" 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: "FacebookMessengerShareButton", |
||||
components: { Icon }, |
||||
props: { |
||||
appID: { type: String }, |
||||
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: "FacebookMessenger" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow() { |
||||
eventEmit(this, "onShare", { name: "FacebookMessenger" }); |
||||
const configWindow = createWindow(); |
||||
const url = `fb-messenger://share/?link=${encodeURIComponent( |
||||
this.$props.shareUrl |
||||
)}&app_id=${this.$props.appID}`; |
||||
|
||||
return this.$props.isBlank |
||||
? window.open(url, "__blank") |
||||
: window.open(url, "Share this", configWindow); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
@import "../style/index.css"; |
||||
@import "../style/facebookMessengerButton.css"; |
||||
</style> |
||||
@ -0,0 +1,69 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--hatena" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareTitle="shareTitle" |
||||
:shareDescription="shareDescription" |
||||
:sharePic="sharePic" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="Hatena" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path |
||||
d="M20.47 0C22.42 0 24 1.58 24 3.53v16.94c0 1.95-1.58 3.53-3.53 3.53H3.53C1.58 24 0 22.42 0 20.47V3.53C0 1.58 1.58 0 3.53 0h16.94zm-3.705 14.47c-.78 0-1.41.63-1.41 1.41s.63 1.414 1.41 1.414 1.41-.645 1.41-1.425-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12.526-.084.976-.222 1.32-.412.45-.232.78-.564 1.02-.99s.36-.915.36-1.48c0-.78-.21-1.403-.63-1.87-.42-.48-.99-.734-1.74-.794.66-.18 1.156-.45 1.456-.81.315-.344.465-.824.465-1.424 0-.48-.103-.885-.3-1.26-.21-.36-.493-.645-.883-.87-.345-.195-.735-.315-1.215-.405-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185c.705 0 1.185.088 1.44.262.27.18.39.495.39.93 0 .405-.135.69-.42.855-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08c.71 0 1.185.08 1.432.24.245.16.367.435.367.83 0 .38-.13.646-.39.804-.265.154-.747.232-1.452.232h-.57V9.08h.615z" |
||||
/> |
||||
</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: "HatenaShareButton", |
||||
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: "Hatena" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow() { |
||||
eventEmit(this, "onShare", { name: "Hatena" }); |
||||
const configWindow = createWindow(); |
||||
const url = `http://b.hatena.ne.jp/bookmarklet?url=${encodeURIComponent( |
||||
this.$props.shareUrl |
||||
)}&btitle=${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/hatenaButton.css"; |
||||
</style> |
||||
@ -0,0 +1,69 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--instapaper" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareTitle="shareTitle" |
||||
:shareDescription="shareDescription" |
||||
:sharePic="sharePic" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="Instapaper" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path |
||||
d="M14.766 20.259c0 1.819.271 2.089 2.934 2.292V24H6.301v-1.449c2.666-.203 2.934-.473 2.934-2.292V3.708c0-1.784-.27-2.089-2.934-2.292V0h11.398v1.416c-2.662.203-2.934.506-2.934 2.292v16.551z" |
||||
/> |
||||
</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: "InstapaperShareButton", |
||||
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: "Instapaper" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow() { |
||||
eventEmit(this, "onShare", { name: "Instapaper" }); |
||||
const configWindow = createWindow(); |
||||
const url = `https://www.instapaper.com/edit?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/instapaperButton.css"; |
||||
</style> |
||||
@ -0,0 +1,71 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--telegram" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareTitle="shareTitle" |
||||
:shareDescription="shareDescription" |
||||
:sharePic="sharePic" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="Telegram" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path d="M9.028 20.837c-.714 0-.593-.271-.839-.949l-2.103-6.92L22.263 3.37"/> |
||||
<path d="M9.028 20.837c.552 0 .795-.252 1.105-.553l2.941-2.857-3.671-2.214"/> |
||||
<path |
||||
d="M9.403 15.213l8.89 6.568c1.015.56 1.748.271 2-.942l3.62-17.053c.372-1.487-.564-2.159-1.534-1.72L1.125 10.263c-1.45.582-1.443 1.392-.264 1.753l5.455 1.7L18.94 5.753c.595-.36 1.143-.167.694.232" |
||||
/> |
||||
</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: "TelegramShareButton", |
||||
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: "Telegram" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow() { |
||||
eventEmit(this, "onShare", { name: "Telegram" }); |
||||
const configWindow = createWindow(); |
||||
const url = `https://telegram.me/share/url?url=${encodeURIComponent( |
||||
this.$props.shareUrl |
||||
)}&text=${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/telegramButton.css"; |
||||
</style> |
||||
@ -0,0 +1,81 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--viber" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareTitle="shareTitle" |
||||
:shareDescription="shareDescription" |
||||
:sharePic="sharePic" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="Viber" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path |
||||
d="M252.47-252.87c-16.57-15.24-83.48-63.82-232.54-64.48 0 0-175.79-10.6-261.47 68.01-47.7 47.7-64.49 117.49-66.25 204.05-1.77 86.57-4.07 248.75 152.29 292.74l.15.04-.1 67.1s-.98 27.18 16.89 32.72c21.64 6.72 34.34-13.94 55-36.19 11.35-12.22 27-30.17 38.8-43.89 106.94 8.96 189.18-11.57 198.51-14.6 21.6-7.03 143.77-22.67 163.64-184.85 20.5-167.21-9.94-272.95-64.92-320.65M270.58 55.7c-16.8 135.42-115.85 143.97-134.12 149.83-7.77 2.5-80.02 20.47-170.84 14.54 0 0-67.68 81.64-88.8 102.88-3.31 3.32-7.19 4.66-9.78 4.03-3.64-.9-4.65-5.2-4.6-11.5.06-9 .57-111.52.57-111.52-.1-.03-.07-.02-.02 0-132.23-36.75-124.52-174.8-123.03-247.09 1.5-72.28 15.08-131.51 55.43-171.34 72.48-65.65 221.79-55.84 221.79-55.84 126.08.55 186.51 38.52 200.52 51.24 46.51 39.83 70.22 135.14 52.88 274.76" |
||||
/> |
||||
<path |
||||
d="M20.81 2.34c-.6-.55-3-2.3-8.37-2.32 0 0-6.33-.38-9.42 2.45C1.3 4.18.7 6.7.63 9.82.57 12.93.5 18.77 6.13 20.36v2.42s-.04.97.6 1.17c.79.25 1.24-.5 1.99-1.3l1.4-1.58c3.85.32 6.8-.42 7.14-.53.78-.25 5.18-.81 5.9-6.65.74-6.03-.36-9.83-2.34-11.55m.65 11.11c-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.15.52 0 0-2.44 2.94-3.2 3.7-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.02c-4.77-1.32-4.49-6.3-4.44-8.9.06-2.6.55-4.73 2-6.17 2.61-2.36 7.99-2 7.99-2 4.54.01 6.71 1.38 7.22 1.84 1.67 1.43 2.53 4.86 1.9 9.9" |
||||
/> |
||||
<path |
||||
d="M14.65 9.98a.3.3 0 0 1-.3-.29c-.06-1.03-.54-1.53-1.53-1.58a.3.3 0 0 1 .03-.61c1.3.07 2.03.82 2.1 2.16a.3.3 0 0 1-.29.32h-.01" |
||||
/> |
||||
<path |
||||
d="M16.2 10.5a.3.3 0 0 1-.3-.3 3.5 3.5 0 0 0-.9-2.57 3.78 3.78 0 0 0-2.65-1.15.3.3 0 1 1 .04-.6c1.3.09 2.32.54 3.05 1.34s1.1 1.8 1.07 2.99a.3.3 0 0 1-.3.3" |
||||
/> |
||||
<path |
||||
d="M17.8 11.13a.3.3 0 0 1-.3-.3c-.02-1.86-.55-3.28-1.64-4.34a5.63 5.63 0 0 0-4.03-1.59.3.3 0 0 1-.3-.3c0-.17.14-.3.3-.3 1.77 0 3.27.6 4.46 1.76a6.45 6.45 0 0 1 1.81 4.76.3.3 0 0 1-.3.3zM12.9 13.74s.42.04.65-.24l.45-.57c.21-.28.73-.45 1.24-.17a13.63 13.63 0 0 1 2.15 1.54c.33.28.41.69.18 1.12v.01c-.23.41-.54.8-.93 1.15a1.84 1.84 0 0 1-1.1.47c-.13 0-.26-.02-.4-.06v-.01c-.48-.14-1.28-.48-2.6-1.2a15.6 15.6 0 0 1-3.18-2.33l-.03-.03-.03-.03-.04-.03-.03-.04a15.38 15.38 0 0 1-2.32-3.17 13.72 13.72 0 0 1-1.2-2.6l-.02-.01A1.24 1.24 0 0 1 5.64 7c.04-.31.19-.63.46-.95.36-.4.74-.7 1.15-.94h.01c.43-.23.84-.15 1.12.18a13.52 13.52 0 0 1 1.54 2.15c.29.51.1 1.03-.17 1.25l-.56.45c-.29.22-.25.65-.25.65s.83 3.16 3.95 3.96" |
||||
/> |
||||
</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: "ViberShareButton", |
||||
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: "Viber" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow() { |
||||
eventEmit(this, "onShare", { name: "Viber" }); |
||||
const configWindow = createWindow(); |
||||
const url = `viber://forward?text=${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/viberButton.css"; |
||||
</style> |
||||
@ -0,0 +1,69 @@
|
||||
<template> |
||||
<button |
||||
class="share-button share-button--whatsApp" |
||||
type="button" |
||||
:class="className" |
||||
:shareUrl="shareUrl" |
||||
:shareTitle="shareTitle" |
||||
:shareDescription="shareDescription" |
||||
:sharePic="sharePic" |
||||
:btnText="btnText" |
||||
:windowWidth="windowWidth" |
||||
:windowHeight="windowHeight" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="WhatsApp" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path |
||||
d="M17.498 14.382c-.301-.15-1.767-.867-2.04-.966-.273-.101-.473-.15-.673.15-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.174-.3-.019-.465.13-.615.136-.135.301-.345.451-.523.146-.181.194-.301.297-.496.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.172-.015-.371-.015-.571-.015-.2 0-.523.074-.797.359-.273.3-1.045 1.02-1.045 2.475s1.07 2.865 1.219 3.075c.149.195 2.105 3.195 5.1 4.485.714.3 1.27.48 1.704.629.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345m-5.446 7.443h-.016c-1.77 0-3.524-.48-5.055-1.38l-.36-.214-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-5.445 4.455-9.885 9.942-9.885 2.654 0 5.145 1.035 7.021 2.91 1.875 1.859 2.909 4.35 2.909 6.99-.004 5.444-4.46 9.885-9.935 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411" |
||||
/> |
||||
</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: "WhatsAppShareButton", |
||||
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: "WhatsApp" }, |
||||
windowWidth: { type: Number }, |
||||
windowHeight: { type: Number }, |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow() { |
||||
eventEmit(this, "onShare", { name: "WhatsApp" }); |
||||
const configWindow = createWindow(); |
||||
const url = `whatsapp://send?text=${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/whatsAppButton.css"; |
||||
</style> |
||||
@ -0,0 +1,9 @@
|
||||
/** |
||||
* Get random number. |
||||
* |
||||
* @param {number} min - Lower possible number. |
||||
* @param {number} max - Largest possible number. |
||||
* @returns {number} - Random number. |
||||
*/ |
||||
export const getRandomNumber = (min = 1, max = 9000) => |
||||
Math.floor(Math.random() * (max - min + 1) + min); |
||||
@ -0,0 +1,20 @@
|
||||
/** |
||||
* Format the number in a short record. |
||||
* |
||||
* @param {number} number - Initial number. |
||||
* @param {number} digits - The number of digits to appear after the decimal point. |
||||
* @returns {number|string} - Formatted number. |
||||
*/ |
||||
export const getShortNumber = (number, digits = 0) => { |
||||
const units = ["k", "m", "g", "t", "p", "e", "z", "y"]; |
||||
|
||||
for (let index = units.length - 1; index >= 0; index--) { |
||||
const decimal = Math.pow(1000, index + 1); |
||||
|
||||
if (number <= -decimal || number >= decimal) { |
||||
return `${Number(number / decimal).toFixed(digits)}${units[index]}`; |
||||
} |
||||
} |
||||
|
||||
return number; |
||||
}; |
||||
@ -1,3 +1,5 @@
|
||||
export { getDocumentHref, getDocumentTitle } from "./documentData.js"; |
||||
export { eventEmit } from "./event"; |
||||
export { createWindow } from "./createWindow"; |
||||
export { getRandomNumber } from "./getRandomNumber"; |
||||
export { getShortNumber } from "./getShortNumber"; |
||||
|
||||
@ -0,0 +1,51 @@
|
||||
/* Email */ |
||||
.share-button--email { |
||||
background-color: hsla(194, 77%, 56%, 1); |
||||
} |
||||
|
||||
.share-button--email:focus { |
||||
box-shadow: 0 0 0 3px hsla(194, 77%, 81%, 0.4); |
||||
} |
||||
|
||||
.share-button--email:hover { |
||||
background-color: hsla(194, 77%, 56%, 0.9); |
||||
} |
||||
|
||||
.share-button--email .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--email.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsla(194, 77%, 56%, 1); |
||||
} |
||||
|
||||
.share-button--email.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(194, 77%, 56%, 0.9); |
||||
} |
||||
|
||||
.share-button--email.share-button--outline .share-button__text { |
||||
color: hsla(194, 77%, 56%, 1); |
||||
} |
||||
|
||||
.share-button--email.share-button--outline:hover .share-button__text { |
||||
color: hsla(194, 77%, 56%, 0.9); |
||||
} |
||||
|
||||
.share-button--email.share-button--outline .share-button__icon path { |
||||
fill: hsla(194, 77%, 56%, 1); |
||||
} |
||||
|
||||
.share-button--email.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(194, 77%, 56%, 0.9); |
||||
} |
||||
|
||||
.share-button--email.share-button--painted { |
||||
background-color: transparent; |
||||
border-color: hsla(193, 54%, 46%, 1); |
||||
} |
||||
|
||||
.share-button--email.share-button--painted::before { |
||||
background-color: hsla(194, 77%, 56%, 1); |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
/* 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); |
||||
} |
||||
|
||||
.share-button--facebook.share-button--painted { |
||||
background-color: transparent; |
||||
border-color: hsla(220, 21%, 31%, 1); |
||||
} |
||||
|
||||
.share-button--facebook.share-button--painted::before { |
||||
background-color: hsla(221, 44%, 41%, 1); |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
/* Hatena */ |
||||
.share-button--hatena { |
||||
background-color: hsla(196, 100%, 44%, 1); |
||||
} |
||||
|
||||
.share-button--hatena:focus { |
||||
box-shadow: 0 0 0 3px hsla(196, 94%, 69%, 0.4); |
||||
} |
||||
|
||||
.share-button--hatena:hover { |
||||
background-color: hsla(196, 100%, 44%, 0.9); |
||||
} |
||||
|
||||
.share-button--hatena .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--hatena.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsla(196, 100%, 44%, 1); |
||||
} |
||||
|
||||
.share-button--hatena.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(196, 100%, 44%, 0.9); |
||||
} |
||||
|
||||
.share-button--hatena.share-button--outline .share-button__text { |
||||
color: hsla(196, 100%, 44%, 1); |
||||
} |
||||
|
||||
.share-button--hatena.share-button--outline:hover .share-button__text { |
||||
color: hsla(196, 100%, 44%, 0.9); |
||||
} |
||||
|
||||
.share-button--hatena.share-button--outline .share-button__icon path { |
||||
fill: hsla(196, 100%, 44%, 1); |
||||
} |
||||
|
||||
.share-button--hatena.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(196, 100%, 44%, 0.9); |
||||
} |
||||
|
||||
.share-button--hatena.share-button--painted { |
||||
background-color: transparent; |
||||
border-color: hsla(195, 77%, 34%, 1); |
||||
} |
||||
|
||||
.share-button--hatena.share-button--painted::before { |
||||
background-color: hsla(196, 100%, 44%, 1); |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
/* Instapaper */ |
||||
.share-button--instapaper { |
||||
background-color: hsla(0, 0%, 12%, 1); |
||||
} |
||||
|
||||
.share-button--instapaper:focus { |
||||
box-shadow: 0 0 0 3px hsla(0, 0%, 37%, 0.4); |
||||
} |
||||
|
||||
.share-button--instapaper:hover { |
||||
background-color: hsla(0, 0%, 12%, 0.9); |
||||
} |
||||
|
||||
.share-button--instapaper .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsla(0, 0%, 12%, 1); |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(0, 0%, 12%, 0.9); |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--outline .share-button__text { |
||||
color: hsla(0, 0%, 12%, 1); |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--outline:hover .share-button__text { |
||||
color: hsla(0, 0%, 12%, 0.9); |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--outline .share-button__icon path { |
||||
fill: hsla(0, 0%, 12%, 1); |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(0, 0%, 12%, 0.9); |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--painted { |
||||
background-color: transparent; |
||||
border-color: hsla(0, 0%, 0%, 1); |
||||
} |
||||
|
||||
.share-button--instapaper.share-button--painted::before { |
||||
background-color: hsla(0, 0%, 12%, 1); |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
/* Telegram */ |
||||
.share-button--telegram { |
||||
background-color: hsla(200, 74%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--telegram:focus { |
||||
box-shadow: 0 0 0 3px hsla(200, 68%, 78%, 0.4); |
||||
} |
||||
|
||||
.share-button--telegram:hover { |
||||
background-color: hsla(200, 74%, 53%, 0.9); |
||||
} |
||||
|
||||
.share-button--telegram .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--telegram.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsla(200, 74%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--telegram.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(200, 74%, 53%, 0.9); |
||||
} |
||||
|
||||
.share-button--telegram.share-button--outline .share-button__text { |
||||
color: hsla(200, 74%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--telegram.share-button--outline:hover .share-button__text { |
||||
color: hsla(200, 74%, 53%, 0.9); |
||||
} |
||||
|
||||
.share-button--telegram.share-button--outline .share-button__icon path { |
||||
fill: hsla(200, 74%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--telegram.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(200, 74%, 53%, 0.9); |
||||
} |
||||
|
||||
.share-button--telegram.share-button--painted { |
||||
background-color: transparent; |
||||
border-color: hsla(199, 51%, 43%, 1); |
||||
} |
||||
|
||||
.share-button--telegram.share-button--painted::before { |
||||
background-color: hsla(200, 74%, 53%, 1); |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
/* Viber */ |
||||
.share-button--viber { |
||||
background-color: hsla(248, 33%, 52%, 1); |
||||
} |
||||
|
||||
.share-button--viber:focus { |
||||
box-shadow: 0 0 0 3px hsla(248, 27%, 77%, 0.4); |
||||
} |
||||
|
||||
.share-button--viber:hover { |
||||
background-color: hsla(248, 33%, 52%, 0.9); |
||||
} |
||||
|
||||
.share-button--viber .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--viber.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsla(248, 33%, 52%, 1); |
||||
} |
||||
|
||||
.share-button--viber.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(248, 33%, 52%, 0.9); |
||||
} |
||||
|
||||
.share-button--viber.share-button--outline .share-button__text { |
||||
color: hsla(248, 33%, 52%, 1); |
||||
} |
||||
|
||||
.share-button--viber.share-button--outline:hover .share-button__text { |
||||
color: hsla(248, 33%, 52%, 0.9); |
||||
} |
||||
|
||||
.share-button--viber.share-button--outline .share-button__icon path { |
||||
fill: hsla(248, 33%, 52%, 1); |
||||
} |
||||
|
||||
.share-button--viber.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(248, 33%, 52%, 0.9); |
||||
} |
||||
|
||||
.share-button--viber.share-button--painted { |
||||
background-color: transparent; |
||||
border-color: hsla(247, 10%, 42%, 1); |
||||
} |
||||
|
||||
.share-button--viber.share-button--painted::before { |
||||
background-color: hsla(248, 33%, 52%, 1); |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
/* WhatsApp */ |
||||
.share-button--whatsApp { |
||||
background-color: hsla(142, 70%, 49%, 1); |
||||
} |
||||
|
||||
.share-button--whatsApp:focus { |
||||
box-shadow: 0 0 0 3px hsla(142, 64%, 74%, 0.4); |
||||
} |
||||
|
||||
.share-button--whatsApp:hover { |
||||
background-color: hsla(142, 70%, 49%, 0.9); |
||||
} |
||||
|
||||
.share-button--whatsApp .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsla(142, 70%, 49%, 1); |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(142, 70%, 49%, 0.9); |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--outline .share-button__text { |
||||
color: hsla(142, 70%, 49%, 1); |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--outline:hover .share-button__text { |
||||
color: hsla(142, 70%, 49%, 0.9); |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--outline .share-button__icon path { |
||||
fill: hsla(142, 70%, 49%, 1); |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(142, 70%, 49%, 0.9); |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--painted { |
||||
background-color: transparent; |
||||
border-color: hsla(141, 47%, 39%, 1); |
||||
} |
||||
|
||||
.share-button--whatsApp.share-button--painted::before { |
||||
background-color: hsla(142, 70%, 49%, 1); |
||||
} |
||||
Loading…
Reference in new issue