Alexandrshy
6 years ago
12 changed files with 224 additions and 26 deletions
@ -1,33 +1,61 @@
|
||||
<template> |
||||
<button class="share-button" :class="className" @click="openShareWindow"> |
||||
<i class="share-button__icon">123</i> |
||||
<button |
||||
class="share-button share-button--twitter" |
||||
type="button" |
||||
:class="className" |
||||
:pageUrl="pageUrl" |
||||
:shareText="shareText" |
||||
:btnText="btnText" |
||||
:hasIcon="hasIcon" |
||||
:isBlank="isBlank" |
||||
@click="openShareWindow" |
||||
> |
||||
<icon iconName="Twitter" class="share-button__icon" v-if="hasIcon === true"> |
||||
<path |
||||
d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" |
||||
/> |
||||
</icon> |
||||
<span class="share-button__text" v-if="btnText">{{btnText}}</span> |
||||
</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getDocumentHref, eventEmit } from "../helpers"; |
||||
import Icon from "./icon/Icon.vue"; |
||||
import { |
||||
getDocumentHref, |
||||
getDocumentTitle, |
||||
eventEmit, |
||||
createWindow |
||||
} from "../helpers"; |
||||
|
||||
export default { |
||||
name: "twitter-button", |
||||
components: { Icon }, |
||||
props: { |
||||
className: { type: String }, |
||||
pageUrl: { type: String, deflate: getDocumentHref }, |
||||
shareText: { type: String, default: getDocumentTitle }, |
||||
btnText: { type: String, default: "Twitter" }, |
||||
hasIcon: { type: Boolean, default: true } |
||||
hasIcon: { type: Boolean, default: true }, |
||||
isBlank: { type: Boolean, default: true } |
||||
}, |
||||
methods: { |
||||
openShareWindow: function() { |
||||
console.log(eventEmit(this, { name: "qwee" })); |
||||
const url = |
||||
"https://twitter.com/share?url=https://vuejs.org/&text=Super-test"; |
||||
// return window.open(url, "__blank"); |
||||
return window.open( |
||||
url, |
||||
"Share this", |
||||
"width=500,height=700,left=100,top=200,toolbar=no,menubar=no,scrollbars=no" |
||||
); |
||||
eventEmit(this, { name: "Twitter" }); |
||||
const configWindow = createWindow(); |
||||
const url = `https://twitter.com/share?url=${this.$props.pageUrl}&text=${ |
||||
this.$props.shareText |
||||
}`; |
||||
|
||||
return this.$props.isBlank |
||||
? window.open(url, "__blank") |
||||
: window.open(url, "Share this", configWindow); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
@import "../style/index.css"; |
||||
@import "../style/twitterButton.css"; |
||||
</style> |
||||
|
||||
@ -0,0 +1,23 @@
|
||||
<template> |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
:width="width" |
||||
:height="height" |
||||
:viewBox="`0 0 24 24`" |
||||
:aria-labelledby="iconName" |
||||
role="presentation" |
||||
> |
||||
<title lang="en">{{ iconName }} icon</title> |
||||
<slot></slot> |
||||
</svg> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
iconName: { type: String }, |
||||
width: { type: [Number, String], default: 20 }, |
||||
height: { type: [Number, String], default: 20 } |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,13 @@
|
||||
/** |
||||
* Create a sharing window. |
||||
* |
||||
* @param {number} width - Window width. |
||||
* @param {number} height - Window height. |
||||
* @param {string} params - Other window options. |
||||
* @returns {string} - Configuration string. |
||||
*/ |
||||
export const createWindow = (width = 500, height = 500, params = "") => { |
||||
const left = screen.width / 2 - width / 2; |
||||
const top = screen.height / 2 - height / 2; |
||||
return `width=${width},height=${height},left=${left},top=${top},${params}`; |
||||
}; |
||||
@ -0,0 +1,11 @@
|
||||
/** |
||||
* Get href for page. |
||||
* |
||||
* @returns {string} - Page href. |
||||
*/ |
||||
export const getDocumentHref = () => document.location.href; |
||||
|
||||
/** |
||||
* Get title for page. |
||||
*/ |
||||
export const getDocumentTitle = () => document.title; |
||||
@ -1,6 +0,0 @@
|
||||
/** |
||||
* Get href for page. |
||||
* |
||||
* @returns {string} - page href. |
||||
*/ |
||||
export const getDocumentHref = () => document.location.href; |
||||
@ -1,2 +1,3 @@
|
||||
export { getDocumentHref } from "./href.js"; |
||||
export { getDocumentHref, getDocumentTitle } from "./documentData.js"; |
||||
export { eventEmit } from "./event"; |
||||
export { createWindow } from "./createWindow"; |
||||
|
||||
@ -0,0 +1,79 @@
|
||||
/* Base */ |
||||
.button-social * { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.share-button { |
||||
display: inline-block; |
||||
min-height: 42px; |
||||
padding: 10px 12px; |
||||
margin: 4px; |
||||
color: #fff; |
||||
background-color: #fff; |
||||
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; |
||||
} |
||||
|
||||
.share-button:disabled { |
||||
opacity: 0.9; |
||||
} |
||||
|
||||
.share-button:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
.share-button:not(:disabled):not(.disabled) { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.share-button:last-child { |
||||
margin-right: 0; |
||||
} |
||||
|
||||
.share-button__icon { |
||||
display: inline-block; |
||||
margin: 0 7px; |
||||
padding: 0; |
||||
font-size: 0; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.share-button__icon:last-child { |
||||
margin: 0; |
||||
} |
||||
|
||||
.share-button__text { |
||||
display: inline-block; |
||||
margin: 0 7px; |
||||
font-size: 16px; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
/* Circle */ |
||||
.share-button--circle { |
||||
min-width: 42px; |
||||
min-height: 42px; |
||||
padding: 10px; |
||||
border-radius: 42px; |
||||
} |
||||
|
||||
/* Circle */ |
||||
.share-button--outline { |
||||
background-color: transparent; |
||||
border: 1px solid; |
||||
} |
||||
@ -0,0 +1,43 @@
|
||||
/* Twitter */ |
||||
.share-button--twitter { |
||||
background-color: hsla(203, 88%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--twitter:focus { |
||||
box-shadow: 0 0 0 3px hsla(203, 82%, 78%, 0.4); |
||||
} |
||||
|
||||
.share-button--twitter:hover { |
||||
background-color: hsla(203, 89%, 53%, 0.9); |
||||
} |
||||
|
||||
.share-button--twitter .share-button__icon path { |
||||
fill: #fff; |
||||
} |
||||
|
||||
/* Circle */ |
||||
.share-button--twitter.share-button--outline { |
||||
background-color: transparent; |
||||
border-color: hsla(203, 89%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--twitter.share-button--outline:hover { |
||||
background-color: transparent; |
||||
border-color: hsla(203, 89%, 53%, 0.9); |
||||
} |
||||
|
||||
.share-button--twitter.share-button--outline .share-button__text { |
||||
color: hsla(203, 89%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--twitter.share-button--outline:hover .share-button__text { |
||||
color: hsla(203, 89%, 53%, 0.9); |
||||
} |
||||
|
||||
.share-button--twitter.share-button--outline .share-button__icon path { |
||||
fill: hsla(203, 89%, 53%, 1); |
||||
} |
||||
|
||||
.share-button--twitter.share-button--outline:hover .share-button__icon path { |
||||
fill: hsla(203, 89%, 53%, 0.9); |
||||
} |
||||
Loading…
Reference in new issue