-
Notifications
You must be signed in to change notification settings - Fork 0
/
Sharing.vue
122 lines (120 loc) · 9.26 KB
/
Sharing.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
<div class="kiranime-social-sharing">
<template v-for="n in networks">
<a
:href="n.url"
:key="n.name"
class="inline-flex justify-evenly items-center text-xl sharing-social"
:class="'icon-' + n.name"
target="popup"
>
<span class="social-name">{{ n.name }}</span>
<span v-html="n.icon"></span>
</a>
</template>
</div>
</template>
<script>
export default {
props: ['url', 'title', 'description', 'media'],
data() {
return {
networks: [
{
name: 'facebook',
icon: `<svg viewBox="0 0 155.139 155.139"><path d="M89.584 155.14v-70.76h23.742l3.562-27.585H89.584v-17.61c0-7.984 2.208-13.425 13.67-13.425l14.595-.006V1.08C115.325.752 106.66 0 96.577 0 75.52 0 61.104 12.853 61.104 36.452v20.34H37.3v27.585h23.814v70.76h28.48z"/></svg>`,
url: `https://www.facebook.com/sharer/sharer.php?u=${this.url}&title=${this.title}&description=${this.description}`,
},
{
name: 'twitter',
icon: `<svg viewBox="0 0 512 512"><path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"/></svg>`,
url: `https://twitter.com/intent/tweet?text=${this.title}&url=${this.url}`,
},
{
name: 'whatsapp',
icon: `<svg viewBox="-23 -21 682 682.66669"><path d="M544.38672 93.007812C484.51172 33.0625 404.882812.0351562 320.05078 0 145.246094 0 2.98047 142.26172 2.910156 317.11328c-.023437 55.89453 14.578125 110.45703 42.332032 158.55078L.25 640l168.121094-44.101562c46.324218 25.26953 98.476562 38.585937 151.55078 38.601562h.132813c174.785156 0 317.066406-142.273438 317.132812-317.132812.035156-84.742188-32.921875-164.41797-92.80078-224.359376zM320.05078 580.941406h-.109375c-47.296875-.01953-93.683594-12.730468-134.160156-36.742187l-9.621094-5.714844L76.39453 564.65625l26.628907-97.26953-6.269532-9.972657c-26.386718-41.96875-40.320312-90.476562-40.296875-140.28125C56.51172 171.80078 174.76172 53.5625 320.15625 53.5625c70.40625.023438 136.589844 27.476562 186.35547 77.30078s77.15625 116.05078 77.132812 186.484375c-.0625 145.34375-118.304687 263.59375-263.59375 263.59375zM464.63672 383.523438c-7.921875-3.96875-46.882813-23.132813-54.148438-25.78125-7.257812-2.644532-12.546875-3.960938-17.82422 3.96875-5.285156 7.929687-20.46875 25.78125-25.09375 31.066406s-9.242187 5.953125-17.167968 1.984375-33.457032-12.335938-63.726563-39.33203c-23.554687-21.01172-39.45703-46.960938-44.08203-54.890626-4.617188-7.9375-.039062-11.8125 3.476562-16.171874 8.578126-10.652344 17.16797-21.820313 19.808594-27.10547s1.320313-9.91797-.664062-13.882813c-1.976563-3.964844-17.82422-42.96875-24.425782-58.839844-6.4375-15.445312-12.964843-13.359374-17.83203-13.601562-4.617187-.23047-9.902343-.277344-15.1875-.277344s-13.867187 1.98047-21.132812 9.91797-27.73047 27.101563-27.73047 66.10547 28.39453 76.683594 32.35547 81.972656 55.878906 85.328125 135.367187 119.648438c18.90625 8.171874 33.664063 13.042968 45.175782 16.695312 18.984374 6.03125 36.253906 5.179688 49.910156 3.140625 15.226562-2.277344 46.878906-19.171875 53.48828-37.679687 6.601563-18.51172 6.601563-34.375 4.617187-37.683594-1.976562-3.304688-7.261718-5.285156-15.183593-9.253906zm0 0" fill-rule="evenodd"/></svg>`,
url: `https://api.whatsapp.com/send?text=${this.title}%0D%0A${this.url}%0D%0A${this.description}`,
},
{
name: 'line',
icon: `<svg viewBox="0 0 236.271 236.271"><path d="M118.136 5.265C52.996 5.265 0 49.4 0 103.647c0 52.985 46.003 95.193 107.008 98.178 4.137.2 7.655-2.987 7.858-7.124s-2.987-7.655-7.125-7.858C54.87 184.256 15 148.5 15 103.647c0-45.977 46.267-83.383 103.136-83.383s103.136 37.405 103.136 83.383c0 42.787-54.628 89.23-108.6 112.994-3.8 1.67-5.5 6.096-3.84 9.886 1.236 2.808 3.985 4.48 6.868 4.48 1 0 2.036-.205 3.02-.638 28.936-12.743 57.466-31.556 78.277-51.616 25.7-24.764 39.268-50.734 39.268-75.105.005-54.248-52.99-98.383-118.13-98.383zM60.082 79.668c-1.2-1.485-2.84-2.276-4.765-2.276s-3.564.806-4.747 2.33c-1.084 1.4-1.6 3.338-1.6 5.902v39.135c0 2.742.563 4.74 1.723 6.1 1.232 1.457 3.14 2.196 5.67 2.196H77.62c2.016 0 3.6-.595 4.735-1.77 1.114-1.134 1.687-2.626 1.687-4.416 0-1.732-.587-3.263-1.698-4.427-1.12-1.2-2.715-1.835-4.725-1.835h-15.86V85.624c0-2.618-.55-4.566-1.676-5.956zm33.674-2.276c-1.904 0-3.54.803-4.73 2.324-1.083 1.386-1.633 3.374-1.633 5.9v40.04c0 2.584.547 4.528 1.67 5.94 1.18 1.52 2.808 2.33 4.7 2.33 1.922 0 3.575-.8 4.778-2.312 1.114-1.413 1.677-3.417 1.677-5.96v-40.04c0-2.56-.567-4.563-1.685-5.95-1.2-1.494-2.86-2.28-4.77-2.28zm25.87 26.57l12.767 22.9.03.053.902 1.493.537.886c.602.973 1.195 1.75 1.824 2.392.744.768 1.535 1.327 2.4 1.704.934.38 1.88.56 2.93.56 2.518 0 6.742-1.13 6.742-8.694v-39.96c0-2.43-.483-4.268-1.48-5.615-1.1-1.492-2.703-2.277-4.608-2.277-1.858 0-3.424.786-4.53 2.272-.997 1.375-1.475 3.207-1.475 5.62v22.62l-13.188-23.328-.678-1.245-.687-1.262c-.56-.988-1.057-1.73-1.54-2.297-.574-.703-1.27-1.275-2.07-1.7-.833-.454-1.8-.68-2.97-.68-1.463 0-2.82.47-4.034 1.395-1.17.875-2.03 2.038-2.54 3.444l-.018.053c-.384 1.16-.57 2.65-.57 4.555v39.213c0 2.32.502 4.2 1.5 5.556.01.014.02.027.03.04 1.144 1.5 2.733 2.3 4.597 2.3 1.835 0 3.4-.783 4.55-2.265 1.044-1.36 1.572-3.25 1.572-5.622v-22.1zm65.66-13.782c1.958 0 3.498-.572 4.575-1.7 1.046-1.1 1.575-2.538 1.575-4.276 0-1.726-.532-3.154-1.58-4.245-1.06-1.127-2.6-1.707-4.57-1.707h-23.262c-1.556 0-2.903.294-4.005.875-1.22.66-2.117 1.686-2.68 3.06-.478 1.162-.7 2.595-.7 4.378v38.193c0 2.745.57 4.746 1.743 6.118 1.215 1.448 3.12 2.2 5.653 2.2h23.94c1.96 0 3.507-.6 4.6-1.757 1.05-1.136 1.58-2.575 1.58-4.288 0-1.77-.528-3.237-1.568-4.363-1.122-1.18-2.667-1.767-4.6-1.767H167.44v-10.467h16.262c1.962 0 3.482-.586 4.52-1.743 1-1.1 1.488-2.5 1.488-4.162 0-1.686-.518-3.086-1.538-4.163-1.013-1.1-2.525-1.685-4.47-1.685H167.44v-8.49h17.842z"/></svg>`,
url: `http://line.me/R/msg/text/?${this.title}%0D%0A${this.url}%0D%0A${this.description}`,
},
{
name: 'tumblr',
icon: `<svg viewBox="0 0 24 24"><path d="M19 22.594l-1.175-3.425c-.458.214-1.327.4-1.968.42h-.09c-1.863 0-2.228-1.37-2.244-2.37v-7.47h4.9V6.114H13.54V0H9.965c-.06 0-.162.05-.176.18C9.587 2.052 8.69 5.335 5 6.648v3.1h2.456v7.842c0 2.655 1.97 6.41 7.148 6.41l-.01-.002h.18c1.786-.03 3.783-.768 4.226-1.404z"/></svg>`,
url: `https://www.tumblr.com/share/link?url=${this.url}&name=${this.title}&description=${this.description}`,
},
{
name: 'pinterest',
icon: `<svg viewBox="0 0 511.977 511.977"><path d="M262.948 0C122.628 0 48.004 89.92 48.004 187.968c0 45.472 25.408 102.176 66.08 120.16 6.176 2.784 9.536 1.6 10.912-4.128 1.216-4.352 6.56-25.312 9.152-35.2.8-3.168.384-5.92-2.176-8.896-13.504-15.616-24.224-44.064-24.224-70.752 0-68.384 54.368-134.784 146.88-134.784 80 0 135.968 51.968 135.968 126.304 0 84-44.448 142.112-102.208 142.112-31.968 0-55.776-25.088-48.224-56.128 9.12-36.96 27.008-76.704 27.008-103.36 0-23.904-13.504-43.68-41.088-43.68-32.544 0-58.944 32.224-58.944 75.488 0 27.488 9.728 46.048 9.728 46.048l-38.176 154.336c-10.112 41.12 1.376 107.712 2.368 113.44.608 3.168 4.16 4.16 6.144 1.568 3.168-4.16 42.08-59.68 52.992-99.808l20.256-73.92c10.72 19.36 41.664 35.584 74.624 35.584 98.048 0 168.896-86.176 168.896-193.12C463.62 76.704 375.876 0 262.948 0z"/></svg>`,
url: `https://pinterest.com/pin/create/button/?url=${this.url}&media=${this.media}&description=${this.title}`,
},
],
window: ``,
}
},
}
</script>
<style lang="scss">
$hover: #fff;
$facebook: #3b5998;
$twitter: #1da1f2;
$whatsapp: #25d366;
$line: #00c300;
$tumblr: #35465c;
$pinterest: #bd081c;
.icon-facebook {
border: 2px solid $facebook;
background-color: $facebook;
}
.icon-twitter {
border: 2px solid $twitter;
background-color: $twitter;
}
.icon-whatsapp {
border: 2px solid $whatsapp;
background-color: $whatsapp;
}
.icon-line {
border: 2px solid $line;
background-color: $line;
}
.icon-tumblr {
border: 2px solid $tumblr;
background-color: $tumblr;
}
.icon-pinterest {
border: 2px solid $pinterest;
background-color: $pinterest;
}
.kiranime-social-sharing {
@apply w-full grid gap-1 justify-items-auto items-center;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.sharing-social {
justify-content: center;
gap: 0.5rem;
border-radius: 2px;
padding: 0.3rem 0.6rem;
svg {
@apply w-5 ml-2;
fill: #fff;
}
}
@media (min-width: 1024px) {
.sharing-social {
width: 10rem;
justify-content: flex-end;
&:hover {
@apply transform translate-x-24 duration-300 ease-in;
}
}
.kiranime-social-sharing {
@apply flex gap-1 flex-col justify-start items-end fixed left-0 transform transition-all duration-300 ease-in;
top: 50%;
width: auto;
--transform-translate-x: -7.5rem;
}
}
</style>