Notifying Parent Component of style changes of elements inside of a ChildComponent

What is the general method to approach notifying a parent component of style changes in an element which is in a child component?

In my app we have a few components. The relevant ones are,

• RootContainer

  1. Is what it’s named, a container from which we manipulate all the rest of the child/sibling components in our app.

• LoadingPage

  1. This component displays a gif which is an animation of the company logo and then hides itself, after 2.5 seconds (when the gif ends) by setting the display style to none of loading-page-container using setTimeout in hide_handler. Just to be clear LoadingPage.hbs looks like:

      <div id="loading-page-container"{{did-insert this.hide_handler}}>
         <div id="loading-page-animoji-container">
            <picture id="loading-page-animoji">
               <source srcset="assets/images/loading-page-animoji-large.gif" media="(min-width:768px)">
               <source srcset="assets/images/loading-page-animoji-small.gif" media="(min-width: 320px)">
               <img src="assets/images/loading-page-animoji-small.gif" alt="PROBLEM">
            </picture>
        </div>
      </div>
     

• NavigationBar

  1. Contains Links For home, about, contact us etc.

The structure of RootContainer.hbs is :

<div id="root-container">
  <LoadingPage @timeout=3000 />  
  <NavigationBar />
  <Component1 />
  <Component2 />
  .
  .
  .
</div>

I’d like to render NavigationBar only after the LoadingPage hides itself. With something along the lines of:

<div id="root-container">
  <LoadingPage @timeout=3000 />  
  {{#if LoadingPageIsHidden }}
     <NavigationBar />
     <Component1 />
     <Component2 />
     .
     .
     .
  {{/if}}

</div>    

• Since we hide LoadingPage by setting the display style to none of loading-page-container, I thought I could use a MutationObserver similar to This because there isn’t really event handling for changes in element attributes.

• I thought about using tracked variables but they only seem to work in conjuction with an event processed by an action.

• Alternatively could this problem be solved by using ember models? From what I understand templates are notified of changes to the model without me setting up observers/(event _handlers + listeners)

Sorry this was a bit long-winded suffice it to say, how would you implement LoadingPageIsHidden?

2 posts - 2 participants

Read full topic