Help needed for div height

[TuntematonSotilas]

Hello,
I would like to get a div a height so I do this :

fn get_height(el: &web_sys::Node) -> i32 {	
    let html_el = seed::to_html_el(&el);	
    let h = html_el.client_height();	
    log!("test {:?}", h);	
    h	
}

Wich works.
But then I would like to use this function on an update message
(for example a message that is lauched on mounting the component)
How to do this ?

Tanks for your help

[David-OConnor]

Could you tag your element with an id?

fn get_height(id: &str) -> i32 {	
    let html_el = seed::document().get_element_by_id("my_el").unwrap();
    let h = html_el.client_height();	
    log!("test {:?}", h);	
    h	
}

This worked for me.

[TuntematonSotilas]

OK thanks I didn't know that.

The problem is :
In my lib.rs I use the router
And to fetch datas in my componenent for the first mount of the component
I use this :

 Msg::ChangePage(page_id) => {
            model.page_id = page_id;
            match page_id {
                2 => {
                    pictures::update(pictures::Msg::FetchIds, &mut model.pictures, &mut orders.proxy(Msg::Pictures));
                },
                _ => ()
             };
        }

And then in the event Msg::FetchIds, I would like to use the get_height function
But my problem is that the component is not already mounted I think , and I can't access the DOM ?

[MartinKavik]

What does your (picture?) component look like?
Can you use onload event (https://www.w3schools.com/jsref/event_onload.asp)?

[TuntematonSotilas]

I tried this :

simple_ev(Ev::Load, Msg::Load),

But with no success

[MartinKavik]

Could you provide more context please? Create a gist with the working example or send link to your project. I can't help you without more info.

[TuntematonSotilas]

Yes of course source is here :
https://github.com/TuntematonSotilas/album

[MartinKavik]

I tried this :
simple_ev(Ev::Load, Msg::Load),
But with no success

Open the link from my previous comment (https://www.w3schools.com/jsref/event_onload.asp) - only a few elements support event load.
I don't know if it's possible to find out if child element is loaded but maybe something like MutationObserver would be useful - but I think that load handler on img elements is enough / better solution. See my PR for example.

[TuntematonSotilas]

My need is to get the height of the div :

div![class!("picture__list"),

And only then call the LoadSomePics => wich actually truncate the pics to 20 ,
but then i would like to LoadSomePics in consideration of the height of the div

[MartinKavik]

You can wait until all imgs are loaded and then get picture__list's height.

[MartinKavik]

And if you want to get initial picture__list's height:

• you can probably use something like:

orders
  .force_render_now()
  .send_msg(Msg::GetPictureListHeight)

• or observe document root with MutationObserver and wait until you see picture__list in added_nodes.
• or write custom element that fires load event
• or write / find a custom element for the whole dynamic image loading with IntersectionObserver - see tutorial ; this solution will be probably the cleanest and reusable - your Seed application will contain mainly business logic and DOM reading / editing will be encapsulated in custom element.

[TuntematonSotilas]

Yes ! force_render_now is exactly the solution I wanted => works fine
Thanks a lot

[MartinKavik]

@David-OConnor Just an idea before I forget:
We can merge:

orders
  .force_render_now()
  .send_msg(Msg::GetPictureListHeight)

To something cleaner like:

orders.on_next_render(Msg::DomRendered)

[David-OConnor]

Agree - helper fns like that are nice.