diff options
-rw-r--r-- | css/style.css | 14 | ||||
-rw-r--r-- | src/form.rs | 27 | ||||
-rw-r--r-- | src/lib.rs | 105 |
3 files changed, 64 insertions, 82 deletions
diff --git a/css/style.css b/css/style.css index 29b62e3..e27406f 100644 --- a/css/style.css +++ b/css/style.css @@ -16,6 +16,10 @@ h1 { font-size: 24pt; } +h2 { + margin-top: 30px; +} + header > h1 { margin-bottom: 0; text-align: center; @@ -30,9 +34,13 @@ p { } label { - min-width: 200px; - display: inline-block; - margin-bottom: 5px; + display: block; + margin: 5px 0; +} + +select, input[type="text"] { + display: block; + min-width: 300px; } pre { diff --git a/src/form.rs b/src/form.rs index e424a28..16e9d61 100644 --- a/src/form.rs +++ b/src/form.rs @@ -1,4 +1,5 @@ -use crate::links::TemplatingEngine; +use crate::{links::TemplatingEngine, Msg}; +use seed::{prelude::*, *}; use structform::{derive_form_input, impl_text_input_with_stringops, ParseAndFormat, ParseError}; derive_form_input! {FormTextInput} @@ -30,3 +31,27 @@ impl ParseAndFormat<TemplatingEngine> for FormSelectInput<TemplatingEngine> { value.to_string() } } + +pub fn checkbox( + name: &str, + input_value: &str, + label: &str, + on_input: impl Fn(bool) -> Msg + Clone + 'static, +) -> Node<Msg> { + let is_checked = input_value == "true"; + div![label![ + attrs! { + At::For => name, + }, + input![ + attrs! { + At::Id => name, + At::Name => name, + At::Type => "checkbox", + At::Checked => is_checked.as_at_value(), + }, + input_ev(Ev::Input, move |_| on_input(!is_checked)) + ], + label + ],] +} @@ -142,6 +142,7 @@ fn view(model: &Model) -> Node<Msg> { select![ attrs! { At::Name => "template_engine", + At::Id => "template_engine", }, TemplatingEngine::all().into_iter().map(|engine| { let engine_str = engine.to_string(); @@ -154,7 +155,7 @@ fn view(model: &Model) -> Node<Msg> { ] }), - input_ev(Ev::Input, |val| Msg::Input(ShareLinksOptionsFormField::TemplateEngine, val) ) + input_ev(Ev::Input, |val| Msg::Input(ShareLinksOptionsFormField::TemplateEngine, val)) ], ], div![ @@ -166,13 +167,14 @@ fn view(model: &Model) -> Node<Msg> { Ok(TemplatingEngine::None) | Err(_) => "URL to Share", Ok(TemplatingEngine::Jekyll) => "Jekyll Expression for URL to Share", Ok(TemplatingEngine::Other) => "Template Expression for URL to Share", - } - + } ], input![ attrs! { At::Name => "url", + At::Id => "url", At::Value => model.form.url.input, + At::Type => "text", At::Placeholder => match model.form.template_engine.value { Ok(TemplatingEngine::None) => "https://example.com", Ok(TemplatingEngine::Jekyll) => "page.url | absolute_url", @@ -182,83 +184,30 @@ fn view(model: &Model) -> Node<Msg> { }, input_ev(Ev::Input, |val| Msg::Input(ShareLinksOptionsFormField::Url, val) ) ], - ], - div![ - label![ - attrs! { - At::For => "facebook", - }, - "Facebook" - ], - { - let is_checked = model.form.facebook.input == "true"; - input![ - attrs!{ - At::Name => "facebook", - At::Type => "checkbox", - At::Checked => is_checked.as_at_value(), - }, - input_ev(Ev::Input, move |_| Msg::Input(ShareLinksOptionsFormField::Facebook, (!is_checked).to_string())) - ] - }, - ], - div![ - label![ - attrs! { - At::For => "twitter", - }, - "Twitter" - ], - { - let is_checked = model.form.twitter.input == "true"; - input![ - attrs!{ - At::Name => "twitter", - At::Type => "checkbox", - At::Checked => is_checked.as_at_value(), - }, - 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())) - ] + match model.form.template_engine.value { + Ok(TemplatingEngine::None) | Err(_) => empty![], + Ok(TemplatingEngine::Jekyll) => small![ + "This can be just a variable name, or a variable being passed to a filter (like ", + code!["page.url | absolute_url"], + ". Do not include {{ liquid tags }}." + ], + Ok(TemplatingEngine::Other) => small![ + "This expression needs to contain all templating engine markup, and must also do ", + a![ + attrs! { + At::Href => "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent", + At::Target => "_blank" + }, + "URI encoding" + ], + " on the URL" + ], }, ], - 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())) - ] - }, - ] + checkbox("facebook", &model.form.facebook.input, "Facebook", |val| Msg::Input(ShareLinksOptionsFormField::Facebook, val.to_string())), + checkbox("twitter", &model.form.twitter.input, "Twitter", |val| Msg::Input(ShareLinksOptionsFormField::Twitter, val.to_string())), + checkbox("whatsapp", &model.form.whatsapp.input, "Whatsapp", |val| Msg::Input(ShareLinksOptionsFormField::Whatsapp, val.to_string())), + checkbox("telegram", &model.form.telegram.input, "Telegram", |val| Msg::Input(ShareLinksOptionsFormField::Telegram, val.to_string())), ], (!model.links.is_empty()).then(|| nodes![ h2!["Here's Your Social Sharing Links"], |