[yew-devel] [PATCH yew-comp/yew-widget-toolkit 0/4] Enable RTL text direction for relevant languages

[yew-devel] [PATCH yew-comp/yew-widget-toolkit 0/4] Enable RTL text direction for relevant languages

[Dominik Csapak]

This series automatically enables rtl text direction for languages where
this is usual, when the LanguagueSwitcher is used.

proxmox-yew-widget-toolkit:

Dominik Csapak (3):
  state: language: add text direction setting
  widget: rtl switcher: refactor setting rtl direction
  widget: language selector: automatically set text direction from
    language

 src/state/language.rs           | 31 ++++++++++++++++---
 src/state/mod.rs                |  3 +-
 src/widget/language_selector.rs | 18 ++++++++++-
 src/widget/rtl_switcher.rs      | 55 +++++++++++++++++++++++----------
 4 files changed, 85 insertions(+), 22 deletions(-)


proxmox-yew-comp:

Dominik Csapak (1):
  languages: add text direction information where necessary

 src/lib.rs | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)


Summary over all repositories:
  5 files changed, 90 insertions(+), 26 deletions(-)

-- 
Generated by git-murpp 0.8.1


_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 1/3] state: language: add text direction setting

[Dominik Csapak]

Languages can have a text direction that is not left-to-right (LTR), so
add that setting to the LanguageInfo. Expose it only via a builder style
method, since most languages don't need this.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/state/language.rs | 24 ++++++++++++++++++++----
 src/state/mod.rs      |  1 +
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/state/language.rs b/src/state/language.rs
index 182dcc9..3848731 100644
--- a/src/state/language.rs
+++ b/src/state/language.rs
@@ -8,12 +8,21 @@ use crate::props::ExtractPrimaryKey;
 
 use super::{PersistentState, SharedState, SharedStateObserver};
 
+/// The text direction, default is LTR
+#[derive(Default, Debug, Copy, Clone, PartialEq, Eq)]
+pub enum TextDirection {
+    #[default]
+    Ltr,
+    Rtl,
+}
+
 #[derive(Clone, PartialEq, Debug)]
 pub struct LanguageInfo {
-    pub lang: String,            // id (de, en, ...)
-    pub text: String,            // Language name (native).
-    pub english_text: String,    // English language name.
-    pub translated_text: String, // Translated language name.
+    pub lang: String,             // id (de, en, ...)
+    pub text: String,             // Language name (native).
+    pub english_text: String,     // English language name.
+    pub translated_text: String,  // Translated language name.
+    pub direction: TextDirection, // Text direction of the language
 }
 
 impl LanguageInfo {
@@ -28,8 +37,15 @@ impl LanguageInfo {
             text: text.into(),
             translated_text: gettext(&english_text),
             english_text,
+            direction: Default::default(),
         }
     }
+
+    /// Builder style method to set the text direction
+    pub fn direction(mut self, direction: TextDirection) -> Self {
+        self.direction = direction;
+        self
+    }
 }
 
 impl ExtractPrimaryKey for LanguageInfo {
diff --git a/src/state/mod.rs b/src/state/mod.rs
index 4cd37a0..ff91faa 100644
--- a/src/state/mod.rs
+++ b/src/state/mod.rs
@@ -40,6 +40,7 @@ pub use theme::{
 mod language;
 pub use language::{
     get_available_languages, set_available_languages, Language, LanguageInfo, LanguageObserver,
+    TextDirection,
 };
 
 use crate::props::StorageLocation;
-- 
2.47.3



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 2/3] widget: rtl switcher: refactor setting rtl direction

[Dominik Csapak]

we want to use that from the language selector too, so refactor this.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/rtl_switcher.rs | 55 +++++++++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/widget/rtl_switcher.rs b/src/widget/rtl_switcher.rs
index 2400dd7..8c18bbd 100644
--- a/src/widget/rtl_switcher.rs
+++ b/src/widget/rtl_switcher.rs
@@ -1,8 +1,13 @@
+use anyhow::format_err;
+
 use pwt_macros::widget;
 use yew::{Classes, Component, Properties};
 
 use super::form::Checkbox;
-use crate::props::{FieldBuilder, WidgetBuilder};
+use crate::{
+    props::{FieldBuilder, WidgetBuilder},
+    state::TextDirection,
+};
 
 /// A checkbox to switch between Left-to-Right and Right-to-Left layouts
 #[widget(pwt=crate, comp=PwtRtlSwitcher, @input, @element)]
@@ -51,25 +56,23 @@ impl Component for PwtRtlSwitcher {
     fn update(&mut self, _ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ToggleRtl => {
-                let elements = gloo_utils::document().get_elements_by_tag_name("html");
-                if let Some(html) = elements.get_with_index(0) {
-                    if self.rtl {
-                        if let Err(err) = html.remove_attribute("dir") {
-                            log::error!("could not remove dir attribute: {:?}", err);
-                            return false;
-                        }
-                        self.rtl = false;
-                    } else {
-                        if let Err(err) = html.set_attribute("dir", "rtl") {
-                            log::error!("could not set dir attribute: {:?}", err);
-                            return false;
-                        }
-                        self.rtl = true;
+                let direction = if self.rtl {
+                    TextDirection::Ltr
+                } else {
+                    TextDirection::Rtl
+                };
+                match set_text_direction(direction) {
+                    Err(err) => {
+                        log::error!("{err}");
+                        false
+                    }
+                    Ok(()) => {
+                        self.rtl = !self.rtl;
+                        true
                     }
                 }
             }
         }
-        true
     }
 
     fn create(_ctx: &yew::Context<Self>) -> Self {
@@ -94,3 +97,23 @@ impl Component for PwtRtlSwitcher {
             .into()
     }
 }
+
+/// Sets the global text direction on the root HTML element (if possible).
+/// Otherwise returns an error.
+pub fn set_text_direction(direction: TextDirection) -> Result<(), anyhow::Error> {
+    let elements = gloo_utils::document().get_elements_by_tag_name("html");
+    let html = elements
+        .get_with_index(0)
+        .ok_or_else(|| format_err!("no html element found"))?;
+    match direction {
+        TextDirection::Ltr => {
+            html.remove_attribute("dir")
+                .map_err(|err| format_err!("could not remove dir attribute: {err:?}"))?;
+        }
+        TextDirection::Rtl => {
+            html.set_attribute("dir", "rtl")
+                .map_err(|err| format_err!("could not set dir attribute: {err:?}"))?;
+        }
+    }
+    Ok(())
+}
-- 
2.47.3



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 3/3] widget: language selector: automatically set text direction from language

[Dominik Csapak]

on first render and when changing the language.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/state/language.rs           |  7 +++++++
 src/state/mod.rs                |  4 ++--
 src/widget/language_selector.rs | 18 +++++++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/state/language.rs b/src/state/language.rs
index 3848731..5621a80 100644
--- a/src/state/language.rs
+++ b/src/state/language.rs
@@ -76,6 +76,13 @@ pub fn get_available_languages() -> Vec<LanguageInfo> {
         .collect()
 }
 
+/// Get [`LanguageInfo`] by its short name.
+pub fn get_language_info(lang: &str) -> Option<LanguageInfo> {
+    get_available_languages()
+        .into_iter()
+        .find(|info| info.lang == lang)
+}
+
 // this `thread_local!` definition should be fine as this crate is essentially WASM only where
 // besides web workers and similar ways to spawn futures, there is only one thread. if this
 // assumption changes, this will need to be adapted.
diff --git a/src/state/mod.rs b/src/state/mod.rs
index ff91faa..5a3ffc5 100644
--- a/src/state/mod.rs
+++ b/src/state/mod.rs
@@ -39,8 +39,8 @@ pub use theme::{
 
 mod language;
 pub use language::{
-    get_available_languages, set_available_languages, Language, LanguageInfo, LanguageObserver,
-    TextDirection,
+    get_available_languages, get_language_info, set_available_languages, Language, LanguageInfo,
+    LanguageObserver, TextDirection,
 };
 
 use crate::props::StorageLocation;
diff --git a/src/widget/language_selector.rs b/src/widget/language_selector.rs
index 588cfab..9697915 100644
--- a/src/widget/language_selector.rs
+++ b/src/widget/language_selector.rs
@@ -1,6 +1,7 @@
 use std::rc::Rc;
 
-use crate::state::{Selection, Store};
+use crate::state::{get_current_language_info, get_language_info, Selection, Store};
+use crate::widget::rtl_switcher::set_text_direction;
 use yew::html::IntoEventCallback;
 use yew::virtual_dom::{Key, VComp, VNode};
 
@@ -122,6 +123,11 @@ impl Component for PwtLanguageSelector {
                 } else {
                     Language::store(lang);
                 }
+                if let Some(info) = get_language_info(&self.lang) {
+                    if let Err(err) = set_text_direction(info.direction) {
+                        log::error!("could not set text direction: {err}");
+                    }
+                }
                 true
             }
         }
@@ -163,6 +169,16 @@ impl Component for PwtLanguageSelector {
             })
             .into()
     }
+
+    fn rendered(&mut self, _ctx: &Context<Self>, first_render: bool) {
+        if first_render {
+            if let Some(info) = get_language_info(&self.lang) {
+                if let Err(err) = set_text_direction(info.direction) {
+                    log::error!("could not set text direction: {err}");
+                }
+            }
+        }
+    }
 }
 
 impl From<LanguageSelector> for VNode {
-- 
2.47.3



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-comp 1/1] languages: add text direction information where necessary

[Dominik Csapak]

we have 3 languages that are RTL (right-to-left):
* Aarabic
* Persian (Farsi)
* Hebrew

so set the RTL direction there.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/lib.rs | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib.rs b/src/lib.rs
index c884167..ca34e67 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -206,7 +206,7 @@ mod xtermjs;
 pub use xtermjs::{ConsoleType, ProxmoxXTermJs, XTermJs};
 
 use pwt::gettext_noop;
-use pwt::state::LanguageInfo;
+use pwt::state::{LanguageInfo, TextDirection};
 
 // Bindgen javascript code from js-helper-module.js
 
@@ -261,7 +261,7 @@ pub fn load_csrf_token() -> Option<String> {
 /// All Proxmox products should support those languages.
 pub fn available_language_list() -> Vec<LanguageInfo> {
     vec![
-        LanguageInfo::new("ar", "العربية", gettext_noop("Arabic")),
+        LanguageInfo::new("ar", "العربية", gettext_noop("Arabic")).direction(TextDirection::Rtl),
         LanguageInfo::new("bg", "Български", gettext_noop("Bulgarian")),
         LanguageInfo::new("ca", "Català", gettext_noop("Catalan")),
         LanguageInfo::new("cs", "Czech", gettext_noop("Czech")),
@@ -270,9 +270,10 @@ pub fn available_language_list() -> Vec<LanguageInfo> {
         LanguageInfo::new("en", "English", gettext_noop("English")),
         LanguageInfo::new("es", "Español", gettext_noop("Spanish")),
         LanguageInfo::new("eu", "Euskera (Basque)", gettext_noop("Euskera (Basque)")),
-        LanguageInfo::new("fa", "فارسی", gettext_noop("Persian (Farsi)")),
+        LanguageInfo::new("fa", "فارسی", gettext_noop("Persian (Farsi)"))
+            .direction(TextDirection::Rtl),
         LanguageInfo::new("fr", "Français", gettext_noop("French")),
-        LanguageInfo::new("he", "עברית", gettext_noop("Hebrew")),
+        LanguageInfo::new("he", "עברית", gettext_noop("Hebrew")).direction(TextDirection::Rtl),
         LanguageInfo::new("hr", "Hrvatski", gettext_noop("Croatian")),
         LanguageInfo::new("it", "Italiano", gettext_noop("Italian")),
         LanguageInfo::new("ja", "日本語", gettext_noop("Japanese")),
-- 
2.47.3



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] superseded: [PATCH yew-comp/yew-widget-toolkit 0/4] Enable RTL text direction for relevant languages

[Dominik Csapak]

superseded by v2:
https://lore.proxmox.com/yew-devel/20250912084732.1053980-1-d.csapak@proxmox.com/T/#t


_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel