From 526e1fec0dc208b513ea92900a508365d351f12b Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Thu, 26 Mar 2020 22:45:42 +0100 Subject: [PATCH] Add OK --- README.md | 3 ++- docs/index.html | 5 ++++- src/index.ts | 1 + src/style.scss | 8 ++++++++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dd8d032..7d3ea70 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,7 @@ classes match the names of social networks:
+ @@ -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 diff --git a/docs/index.html b/docs/index.html index c4c242c..a397dd6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -64,6 +64,7 @@ style="text-align: center"> + @@ -130,6 +131,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>
@@ -139,6 +141,7 @@
             

                 
                 
+                
                 
                 
                 
@@ -174,7 +177,7 @@
             

 
             
    
-                
  • add data-media to a Pinterest 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
    • 
             

diff --git a/src/index.ts b/src/index.ts
index 00d95d0..495ae4b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -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}` : ''}`,
diff --git a/src/style.scss b/src/style.scss
index 96274ba..1912696 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -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;