Item completion should be representative of visited items

[kirsty-hames]

Subject of the issue

Since progressive item completion was introduced, Narrative progress displays as partially complete before the component is in view or interacted with. See screen shot of PLP drawer below on first entering a topic.

Expected behaviour

Narrative has multiple layout options available with different completion criteria (in view or interaction). Item completion should be dependant on the following for each layout:

Default: Selecting .narrative__controls (for desktop) or .narrative__strapline-btn (for mobile).

_hasNavigationInTextArea: Selecting .narrative__controls.

_isTextBelowImage and _isMobileTextBelowImage: Selecting .narrative__controls or each item display text being in view.

_isStackedOnMobile: Each item display text being in view.

Actual behaviour

Regardless of layout, the first item is always complete (before in view or interaction).

[oliverfoster]

I don't think it's ever had inview stuff in it. It would be good to add that to at least the first item. It should not set _isVisited: true until the item has been seen despite _isActive being true.

on TextBelowimage:

adapt-contrib-narrative/js/NarrativeView.js

Lines 69 to 74 in c350f76

	onItemsActiveChange(item, _isActive) {
	if (!_isActive) return;
	if (this.isTextBelowImage()) {
	item.toggleVisited(true);
	}

on moving to a new slide:

adapt-contrib-narrative/js/NarrativeView.js

Lines 219 to 221 in c350f76

	if (this.isLargeMode()) {
	item.toggleVisited(true);
	}

when the popup is opened:

adapt-contrib-narrative/js/NarrativeView.js

Lines 301 to 310 in c350f76

	openPopup() {
	const currentItem = this.model.getActiveItem();
	notify.popup({
	title: currentItem.get('title'),
	body: currentItem.get('body')
	});
	Adapt.on('popup:opened', function() {
	// Set the visited attribute for small and medium screen devices
	currentItem.toggleVisited(true);

I think the first two need fixing with inview. The last one is fine.