Whatsapp and Telegram links

5 files changed, 133 insertions, 0 deletions

diff --git a/src/facebook.rs b/src/facebook.rs
index 10a5ff8..06bad4e 100644
--- a/src/facebook.rs
+++ b/src/facebook.rs
@@ -15,6 +15,7 @@ pub fn icon(color: &str) -> Node<Msg> {
     result
 }
 
+// https://developers.facebook.com/docs/plugins/share-button#
 pub fn link(url: &str) -> Node<Msg> {
     let facebook_url = format!(
         "https://www.facebook.com/sharer/sharer.php?u={}",
diff --git a/src/lib.rs b/src/lib.rs
index 1429fe9..ba8bff1 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -7,7 +7,9 @@ use structform::StructForm;
 mod facebook;
 mod form;
 mod links;
+mod telegram;
 mod twitter;
+mod whatsapp;
 
 fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
     Model::default()
@@ -25,6 +27,8 @@ struct ShareLinksOptions {
     url: String,
     facebook: bool,
     twitter: bool,
+    whatsapp: bool,
+    telegram: bool,
 }
 
 #[derive(Default, StructForm)]
@@ -33,6 +37,8 @@ struct ShareLinksOptionsForm {
     url: FormTextInput<String>,
     facebook: FormCheckboxInput<bool>,
     twitter: FormCheckboxInput<bool>,
+    whatsapp: FormCheckboxInput<bool>,
+    telegram: FormCheckboxInput<bool>,
 }
 
 pub enum Msg {
@@ -53,6 +59,8 @@ fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
                     let option_links = vec![
                         options.facebook.then(|| facebook::link(&options.url)),
                         options.twitter.then(|| twitter::link(&options.url)),
+                        options.whatsapp.then(|| whatsapp::link(&options.url)),
+                        options.telegram.then(|| telegram::link(&options.url)),
                     ];
                     model.links = option_links.into_iter().flatten().collect()
                 }
@@ -164,6 +172,44 @@ fn view(model: &Model) -> Node<Msg> {
                         input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Twitter, (!is_checked).to_string()))
                     ]
                 },
+            ],
+            div![
+                label![
+                    attrs! {
+                        At::For => "whatsapp",
+                    },
+                    "Whatsapp"
+                ],
+                {
+                    let is_checked = model.form.whatsapp.input == "true";
+                    input![
+                        attrs!{
+                            At::Name => "whatsapp",
+                            At::Type => "checkbox",
+                            At::Checked => is_checked.as_at_value(),
+                        },
+                        input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Whatsapp, (!is_checked).to_string()))
+                    ]
+                },
+            ],
+            div![
+                label![
+                    attrs! {
+                        At::For => "telegram",
+                    },
+                    "Telegram"
+                ],
+                {
+                    let is_checked = model.form.telegram.input == "true";
+                    input![
+                        attrs!{
+                            At::Name => "telegram",
+                            At::Type => "checkbox",
+                            At::Checked => is_checked.as_at_value(),
+                        },
+                        input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Telegram, (!is_checked).to_string()))
+                    ]
+                },
             ]
         ],
         (!model.links.is_empty()).then(|| nodes![
diff --git a/src/telegram.rs b/src/telegram.rs
new file mode 100644
index 0000000..1d08583
--- /dev/null
+++ b/src/telegram.rs
@@ -0,0 +1,44 @@
+use crate::{
+    links::{LINK_REL, SMALL_SHARING_FONT},
+    Msg,
+};
+use seed::{prelude::*, *};
+
+const TELEGRAM_BLUE: &'static str = "#29a9ec";
+
+pub fn icon(color: &str) -> Node<Msg> {
+    let mut result = Node::from_html(
+        r##"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/></svg>"##,
+    ).into_iter().next().unwrap();
+    result.add_style("height", "11px");
+    result.add_style("fill", color);
+    result
+}
+
+// https://core.telegram.org/widgets/share
+pub fn link(url: &str) -> Node<Msg> {
+    let telegram_url = format!(
+        "https://t.me/share/url?url={}",
+        Url::encode_uri_component(url)
+    );
+    let telegram_link = a![
+        attrs! {
+            At::Href => telegram_url,
+            At::Target => "_blank",
+            At::Rel => LINK_REL,
+        },
+        style! {
+            St::Display => "inline-block",
+            St::TextDecoration => "none",
+            St::Background => TELEGRAM_BLUE,
+            St::Color => "white",
+            St::Font => SMALL_SHARING_FONT,
+            St::Padding => "4px 7px",
+            St::BorderRadius => "3px",
+        },
+        icon("white"),
+        " ",
+        span!["Share"]
+    ];
+    telegram_link
+}
diff --git a/src/twitter.rs b/src/twitter.rs
index 0948637..8c1c012 100644
--- a/src/twitter.rs
+++ b/src/twitter.rs
@@ -15,6 +15,7 @@ pub fn icon(color: &str) -> Node<Msg> {
     result
 }
 
+// https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent
 pub fn link(url: &str) -> Node<Msg> {
     let twitter_url = format!(
         "https://twitter.com/intent/tweet?url={}",
diff --git a/src/whatsapp.rs b/src/whatsapp.rs
new file mode 100644
index 0000000..fc63039
--- /dev/null
+++ b/src/whatsapp.rs
@@ -0,0 +1,41 @@
+use crate::{
+    links::{LINK_REL, SMALL_SHARING_FONT},
+    Msg,
+};
+use seed::{prelude::*, *};
+
+const WHATSAPP_GREEN: &'static str = "#00e676";
+
+pub fn icon(color: &str) -> Node<Msg> {
+    let mut result = Node::from_html(
+        r##"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>"##,
+    ).into_iter().next().unwrap();
+    result.add_style("height", "11px");
+    result.add_style("fill", color);
+    result
+}
+
+// https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/?lang=en
+pub fn link(url: &str) -> Node<Msg> {
+    let whatsapp_url = format!("https://wa.me?text={}", Url::encode_uri_component(url));
+    let whatsapp_link = a![
+        attrs! {
+            At::Href => whatsapp_url,
+            At::Target => "_blank",
+            At::Rel => LINK_REL,
+        },
+        style! {
+            St::Display => "inline-block",
+            St::TextDecoration => "none",
+            St::Background => WHATSAPP_GREEN,
+            St::Color => "white",
+            St::Font => SMALL_SHARING_FONT,
+            St::Padding => "4px 7px",
+            St::BorderRadius => "3px",
+        },
+        icon("white"),
+        " ",
+        span!["Share"]
+    ];
+    whatsapp_link
+}