From 94fdb902b7284f4a4cdbb4c26eb501b63278666d Mon Sep 17 00:00:00 2001 From: sam Date: Thu, 11 Mar 2021 08:30:09 +0000 Subject: [PATCH 1/5] add instruction highlighting for interaction error --- js/narrativeView.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/js/narrativeView.js b/js/narrativeView.js index 8497fdc..041a5ce 100644 --- a/js/narrativeView.js +++ b/js/narrativeView.js @@ -280,6 +280,7 @@ define([ evaluateCompletion() { if (this.model.areAllItemsCompleted()) { this.trigger('allItems'); + this.$('.narrative__instruction-inner').removeClass('interaction-error'); } } @@ -301,11 +302,23 @@ define([ let index = this.model.getActiveItem().get('_index'); $btn.data('direction') === 'right' ? index++ : index--; this.model.setActiveItem(index); + if (this.model.get('_setCompletionOn') === 'allItems') { + const prevItem = this.model.getItem(index - 1); + if (!prevItem.get('_isVisited')) { + this.$('.narrative__instruction-inner').addClass('interaction-error'); + } + } } onProgressClicked(event) { const index = $(event.target).data('index'); this.model.setActiveItem(index); + if (this.model.get('_setCompletionOn') === 'allItems') { + const prevItem = this.model.getItem(index - 1); + if (!prevItem.get('_isVisited')) { + this.$('.narrative__instruction-inner').addClass('interaction-error'); + } + } } setupEventListeners() { @@ -313,7 +326,6 @@ define([ this.setupInviewCompletion('.component__widget'); } } - } NarrativeView.template = 'narrative'; From 0ef53d6db6184bcb4d481dc9a3210fc9332a2c3c Mon Sep 17 00:00:00 2001 From: Sam Howell Date: Sat, 13 Mar 2021 17:09:46 +0000 Subject: [PATCH 2/5] make separate method; add early returns --- js/narrativeView.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/js/narrativeView.js b/js/narrativeView.js index 041a5ce..99fb60e 100644 --- a/js/narrativeView.js +++ b/js/narrativeView.js @@ -233,6 +233,7 @@ define([ this.evaluateNavigation(); this.evaluateCompletion(); + this.evaluateInteraction(); this.moveSliderToIndex(index); } @@ -302,22 +303,20 @@ define([ let index = this.model.getActiveItem().get('_index'); $btn.data('direction') === 'right' ? index++ : index--; this.model.setActiveItem(index); - if (this.model.get('_setCompletionOn') === 'allItems') { - const prevItem = this.model.getItem(index - 1); - if (!prevItem.get('_isVisited')) { - this.$('.narrative__instruction-inner').addClass('interaction-error'); - } - } } onProgressClicked(event) { const index = $(event.target).data('index'); this.model.setActiveItem(index); - if (this.model.get('_setCompletionOn') === 'allItems') { - const prevItem = this.model.getItem(index - 1); - if (!prevItem.get('_isVisited')) { - this.$('.narrative__instruction-inner').addClass('interaction-error'); - } + } + + evaluateInteraction() { + if (this.model.get('_isComplete')) return; + const index = this.model.getActiveItem().get('_index'); + const prevItem = this.model.getItem(index - 1); + if (!prevItem >= 1) return; + if (!prevItem.get('_isVisited')) { + this.$('.narrative__instruction-inner').addClass('interaction-error'); } } From ad939e05aa3a53ac1196b724f5e9504722e4cd78 Mon Sep 17 00:00:00 2001 From: Sam Howell Date: Tue, 16 Mar 2021 21:00:26 +0000 Subject: [PATCH 3/5] change method name, improve completion test --- js/narrativeView.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/js/narrativeView.js b/js/narrativeView.js index 99fb60e..4622e6c 100644 --- a/js/narrativeView.js +++ b/js/narrativeView.js @@ -233,7 +233,7 @@ define([ this.evaluateNavigation(); this.evaluateCompletion(); - this.evaluateInteraction(); + this.shouldShowInstructionError(); this.moveSliderToIndex(index); } @@ -310,14 +310,12 @@ define([ this.model.setActiveItem(index); } - evaluateInteraction() { - if (this.model.get('_isComplete')) return; - const index = this.model.getActiveItem().get('_index'); - const prevItem = this.model.getItem(index - 1); - if (!prevItem >= 1) return; - if (!prevItem.get('_isVisited')) { - this.$('.narrative__instruction-inner').addClass('interaction-error'); - } + // In mobile view, highlight instruction if user navigates to another + // item before completing, in case the strapline is missed + shouldShowInstructionError() { + const prevItemIndex = this.model.getActiveItem().get('_index') - 1; + if (prevItemIndex < 0 || this.model.getItem(prevItemIndex).get('_isVisited')) return; + this.$('.narrative__instruction-inner').addClass('instruction-error'); } setupEventListeners() { From 12aa1ca282cfadde0555f99d793b841b18c8191a Mon Sep 17 00:00:00 2001 From: Sam Howell Date: Tue, 16 Mar 2021 21:18:27 +0000 Subject: [PATCH 4/5] update class name --- js/narrativeView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/narrativeView.js b/js/narrativeView.js index 4622e6c..408b2ff 100644 --- a/js/narrativeView.js +++ b/js/narrativeView.js @@ -281,7 +281,7 @@ define([ evaluateCompletion() { if (this.model.areAllItemsCompleted()) { this.trigger('allItems'); - this.$('.narrative__instruction-inner').removeClass('interaction-error'); + this.$('.narrative__instruction-inner').removeClass('instruction-error'); } } From 427858882b976d858c518a2189407b643514c94e Mon Sep 17 00:00:00 2001 From: Sam Howell <72963894+5amm@users.noreply.github.com> Date: Wed, 17 Mar 2021 07:22:09 +0000 Subject: [PATCH 5/5] add linked method comment Co-authored-by: Matt Leathes --- js/narrativeView.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/narrativeView.js b/js/narrativeView.js index 408b2ff..6ca1900 100644 --- a/js/narrativeView.js +++ b/js/narrativeView.js @@ -310,8 +310,10 @@ define([ this.model.setActiveItem(index); } - // In mobile view, highlight instruction if user navigates to another - // item before completing, in case the strapline is missed + /** + * In mobile view, highlight instruction if user navigates to another + * item before completing, in case the strapline is missed + */ shouldShowInstructionError() { const prevItemIndex = this.model.getActiveItem().get('_index') - 1; if (prevItemIndex < 0 || this.model.getItem(prevItemIndex).get('_isVisited')) return;