Respec: ReSpec button UI obscures the W3C logo

[anssiko]

Great work on the UI enhancements in ReSpec 6.0!

One minor thing I observed: using certain screen width the ReSpec button is on top of the W3C logo, obscuring it (well, one might argue this is a feature, not a bug ;-)).

[marcoscaceres]

Unfortunately, not much I can do there :(

[anssiko]

Intersection Observer could help. Might look into this in the future.

[marcoscaceres]

Thought the same thing just as I clicked closed. Might be an excuse to learn the API.

On 19 Oct. 2016, at 11:12 pm, Anssi Kostiainen [email protected] wrote:

Intersection Observer could help. Might look into this in the future.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or mute the thread.

[yatri1609]

@marcoscaceres Can I work on this?

[marcoscaceres]

@yatri1609 go for it!

[yatri1609]

Thanks @marcoscaceres I'll send a PR by tonight

[yatri1609]

@marcoscaceres Is it necessary to you intersection observer as it can be easily done by simple and less complex js code?

[marcoscaceres]

I’m open to suggestions. Try whatever you think is best and we can evaluate together.

[yatri1609]

@marcoscaceres I'm really confused with the code in ui.js file could you just give me a brief insight so that I could get a bit more clear. I have read about the implementation of the Intersection Observer API. Could you just throw a light on the path I need to take?

[marcoscaceres]

Sure! Find me on Slack later today and we can go through it quickly.

[marcoscaceres]

Unfortunately, intersection observers turned out to be the wrong tool for the job. We don’t have a sane way yet on the web platform to detect if two elements are overlapping 😭 closing as wont fix.

[yatri1609]

@marcoscaceres

`
var is_colliding = function( $div1, $div2 ) {

// Div 1 data

var d1_offset = $div1.offset();

var d1_height = $div1.outerHeight( true );

var d1_width = $div1.outerWidth( true );

var d1_distance_from_top = d1_offset.top + d1_height;

var d1_distance_from_left = d1_offset.left + d1_width;

// Div 2 data

var d2_offset = $div2.offset();

var d2_height = $div2.outerHeight( true );

var d2_width = $div2.outerWidth( true );

var d2_distance_from_top = d2_offset.top + d2_height;

var d2_distance_from_left = d2_offset.left + d2_width;

var not_colliding = ( d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left );

// Return whether it IS colliding

return ! not_colliding;

};`

Can we do something like this ?

[marcoscaceres]

We could, but we'd have to run it continuously (or when we intersect .logos). So it would just burn battery/CPU cycles for something that's just a gimmick.

I'd rather wait until we have hit testing support on the web platform. Then we can offload real intersection to the browser.