earnestma
/
shareon
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add OK

pull/3/head
Nikita Karamov 2020-03-26 22:45:42 +01:00
parent 75d29cfa88
commit 526e1fec0d
4 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -46,6 +46,7 @@ classes match the names of social networks:
<div class="shareon">
<a class="facebook"></a>
<a class="messenger"></a>
<a class="odnoklassniki"></a>
<a class="pinterest"></a>
<a class="telegram"></a>
<a class="twitter"></a>
@ -70,7 +71,7 @@ on the whole container or on the specific buttons:
Apart from the URL and title, some networks support extra parameters:
- add `data-media` to a Pinterest or VK button to customize the pinned picture
- add `data-media` to an Odnoklassniki, Pinterest or VK button to customize the pinned picture
- add `data-text` to a WhatsApp or Telegram button to add custom message text
- add `data-via` to a Twitter button to mention a user

5
docs/index.html
View File

@ -64,6 +64,7 @@
style="text-align: center">
<a class="facebook"></a>
<a class="messenger"></a>
<a class="odnoklassniki"></a>
<a class="pinterest"></a>
<a class="telegram"></a>
<a class="twitter"></a>
@ -130,6 +131,7 @@
<pre><code>&lt;div class="shareon"&gt;
&lt;a class="facebook"&gt;&lt;/a&gt;
&lt;a class="messenger"&gt;&lt;/a&gt;
&lt;a class="odnoklassniki"&gt;&lt;/a&gt;
&lt;a class="pinterest"&gt;&lt;/a&gt;
&lt;a class="telegram"&gt;&lt;/a&gt;
&lt;a class="twitter"&gt;&lt;/a&gt;
@ -139,6 +141,7 @@
<div class="shareon">
<a class="facebook"></a>
<a class="messenger"></a>
<a class="odnoklassniki"></a>
<a class="pinterest"></a>
<a class="telegram"></a>
<a class="twitter"></a>
@ -174,7 +177,7 @@
</p>
<ul>
<li>add <code>data-media</code> to a Pinterest button to customize the pinned picture</li>
<li>add <code>data-media</code> to an Odnoklassniki, Pinterest or VK button to customize the pinned picture</li>
<li>add <code>data-text</code> to a WhatsApp or Telegram button to add custom message text</li>
<li>add <code>data-via</code> to a Twitter button to mention a user</li>
</ul>

1
src/index.ts
View File

@ -15,6 +15,7 @@ type UrlBuilder = (data: PublishPreset) => string;
const NETWORKS: { [name: string]: UrlBuilder } = {
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
messenger: (d) => `https://www.facebook.com/dialog/send?app_id=3619024578167617&link=${d.url}&redirect_uri=${d.url}`,
odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.extra.media ? `&imageUrl=${d.extra.media}` : ''}`,
pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.extra.media ? `&media=${d.extra.media}` : ''}`,
telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.extra.text ? `&text=${d.extra.text}` : ''}`,
twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.extra.via ? `&via=${d.extra.via}` : ''}`,

8
src/style.scss
View File

@ -82,6 +82,14 @@ $width: $button-size - 2*$padding-hor;
}
}
&.odnoklassniki {
background-color: #EE8208;
&::before {
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.505 17.44a11.599 11.599 0 003.6-1.49 1.816 1.816 0 00-1.935-3.073 7.866 7.866 0 01-8.34 0 1.814 1.814 0 00-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 00.567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 006 23.439l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406a1.815 1.815 0 002.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 006.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0012 12.389zm0-8.757a2.566 2.566 0 010 5.13 2.569 2.569 0 01-2.565-2.564A2.57 2.57 0 0112 3.63z'/%3E%3C/svg%3E");
}
}
&.pinterest {
background-color: #e60023;