Adapt Learning Community: Component trigger inview before page load

Hi,

I'm using adapt framework version 2 with a custom theme, in some specifics lessons that have graphic in the first block and text component in the second block, the text block is set as completed before the block is inview and even before the "pageView:ready" event is triggered, I deeply checked the execution of events and I found that inview cause this issue, it is triggered before the block is visible and before the pageView is ready.

I updated the inview file with the latest version but the problem still there, I also upgraded the framework to the latest version (version 3), same result.

I applied this fix in the inview file :
```

var Adapt = require('coreJS/adapt');

Adapt.once("pageView:ready", function () {

//attach event handlers

$(window).on({

"touchmove scroll mousedown keydown": loop.start,

"resize": wndw.resize

});

$(measurements.featureDetect);

wndw.resize();

});

```
This solves the problem, but is a coupling (requiring adapt in the inview file). Could you please recommend me a better implementation of this solution or if you have any other suggestion?

Thanks.

What browser is this happening in? It's just I'm working on a v3.2.2 course at the moment that has a page where the first few blocks all contain text/graphic/blank components and I'm not seeing this issue in IE11, FF or Chrome...

Show parent | Reply

I'm using Chrome, like I said the issue is very specific with a custom theme and many blocks.

In vanilla Theme, the problem is not visible because of the header size (and padding top and buttom) BUT the TOP of text component (second block) is inview

Show parent | Reply

That's very odd, unfortunately one of those problems that's a bit hard to debug without direct access.

It might help you to know that you can actually pause and unpause inview using $.inview.lock('lock-name') and $.inview.unlock('lock-name') - you can see an example of this in the media component here.

Hopefully you can use that functionality to build an extension (or just add some code to the .js in your theme) that changes the behaviour of inview without you needing to amend inview directly.

If you are able to share a build with us someone might be able to take a look to find out why exactly inview isn't working when used with your theme.

Show parent | Reply

Adapt_framework.zip

Thanks for your reply,

I'm not authorized to share the theme or the content, but I simulated the issue with the default configuration in the attached file (Adapt_framework.zip).

Please use Chrome and window size: 1920 x 978 (IMPORTANT)

Run npm install, grunt dev and grunt server

Once the page ready, DONT SCROLL, use dev Tools to inspect the second block, you will see it completed but it should not until you scroll down.

Show parent | Reply