Re-position 'highlightElement' on window resize

[loboulet]

Create a method called setPositionForHighlightElement.

• This method is called in createHighlightOverlay to set the default position of the highlighted element.
• We also call this method within a run.debounce on resize of the window to make sure the highlighted item is always at the same place and follows the viewport width.

Relates to #16

[Boubalou]

LGTM 👍

[RobbieTheWagner]

Thanks @loboulet looks good! Would you mind writing a small test to cover this functionality please? 😃

[loboulet]

How would you like to test this functionality? The only case we can cover is to detect if the method is called on resize right?

[RobbieTheWagner]

Yeah, I would probably test that it is called on resize and also test that the css is set correctly and the position of the highlightElement changes.

[RobbieTheWagner]

Also, just curious, why do you need the copyStyles functionality @loboulet? I found I only needed it in very rare circumstances, and the normal highlight usually worked, without copying all the styles.

[RobbieTheWagner]

@loboulet if you don't have time to write tests, I may be able to help. I'm just pretty swamped with other stuff right now.

[loboulet]

Hey, sorry I was out of town.

Also, just curious, why do you need the copyStyles functionality @loboulet?

I have to highlight icons in the layout and I want them above the overlay

if you don't have time to write tests, I may be able to help.

Yeah I could use some help. I have a lot on my plate right now too

[RobbieTheWagner]

@loboulet no worries.

So just using modal and setting styles on the highlighted element with the highlightClass did not work for you? The demo app just uses those options and copyStyles is only needed for cases where that won't work for some reason.

Just wanted to ensure the docs were clear enough on this and you weren't using copyStyles unless you really needed to.

I'll go ahead and merge these PRs and test them myself later then.

[loboulet]

Yeah everything seems clear to me.

• I used copyStyles because I wanted the icon in my complex component to be above the overlay;
• I could have used the highlightClass, but it was adding the class only on the icon and the possibility to go back to the parent were limited in my case;
• I also tried to attach the parent and add the highlightClass but it gives me headache working with the CSS to only show what I wanted :\ .

[RobbieTheWagner]

Okay, just wanted to make sure it was necessary for your case. Sounds like it is. Thanks again for the PRs!

[loboulet]

No problem :)