ItemsComponentModel #179

lc-thomasberger · 2018-02-07T17:19:29Z

use ItemsComponentModel
improve animation performance

use transform (no layout trashing)
use css transition

get index from item rather then introduce a new method in model

calcualte width only once use transform rather than margin for better performance

lc-thomasberger · 2018-02-08T09:24:02Z

requires these changes in the Framework

moloko · 2018-02-16T12:31:31Z

js/narrativeView.js

+        },
+
+        preRender: function() {
+            this.listenTo(Adapt, 'device:changed', this.reRender, this);


would you mind changing this to the 'object style' while you're here? i.e.

this.listenTo(Adapt, { 'device:changed': this.reRender, 'device:resize': this.resizeControl, 'device:changed': this.reRender });

moloko · 2018-02-16T12:33:13Z

js/narrativeView.js

+        },
+
+        prepareHotgraphicModel: function() {
+            const model = this.model;


I'm afraid const and let stop the minification process from running (see adaptlearning/adapt_framework#1966) so have to be dropped :-(

damn, I really like const and let. Will update!

moloko · 2018-02-16T12:33:54Z

js/narrativeView.js

+        prepareHotgraphicModel: function() {
+            const model = this.model;
+            model.resetActiveItems();
+            model.set('_isPopupOpen', false);


could you use the object style of model.set here?

moloko

just a couple of minor syntactical things which you can ignore if you want!

moloko · 2018-03-19T11:30:27Z

js/narrativeView.js

+        calculateWidths: function() {
+            var itemCount = this.model.get('_items').length;
+            this.model.set('_totalWidth', 100 * itemCount);
+            this.model.set('_itemWidth', 100 / itemCount);


opportunity to set via single statement eg:

this.model.set({ '_totalWidth': 100 * itemCount, '_itemWidth': 100 / itemCount });

moloko · 2018-03-19T11:49:45Z

js/narrativeView.js

+        },
+
+        closeNotify: function() {
+            this.evaluateCompletion()


missing semi-colon

oliverfoster · 2018-03-21T10:19:51Z

js/narrativeView.js

+            }
+        },
+
+        prefixHelper: function(elm, prop, val) {


prefixing is no longer required for the transform property
https://caniuse.com/#search=transform

lc-thomasberger · 2018-03-21T15:37:27Z

js/narrativeView.js

+                    this.$('.narrative-strapline-title').a11y_focus();
+                }
+            }
+        },


Return early?

if (this._isInitial) return;

As a property of the view I think it would benefit from being declared (and set) formally at the top of the code e.g.

var NarrativeView = ComponentView.extend({ _isInitial: true, events: {

I would also be tempted to give it a more descriptive name (or add an explanatory comment to the declaration) as its purpose isn't 100% clear

lc-thomasberger · 2018-03-21T15:37:18Z

less/narrative.less

+        .narrative-strapline-header-inner {
+            transition: transform 400ms ease-in-out;
+        }
+    }
 }




oliverfoster · 2018-03-21T10:41:55Z

js/narrativeView.js

+                    this.setCompletionStatus();
+                }
+            }
+        },


Can you remove some of the nesting?

inview: function(event, visible, visiblePartX, visiblePartY) { if (!visible) return; if (visiblePartY === 'top') { this._isVisibleTop = true; } else if (visiblePartY === 'bottom') { this._isVisibleBottom = true; } else { this._isVisibleTop = true; this._isVisibleBottom = true; } var wasAllInview = (this._isVisibleTop && this._isVisibleBottom); if (!wasAllInview) return; this.$('.component-inner').off('inview'); this.setCompletionStatus(); },

oliverfoster · 2018-03-21T10:47:19Z

js/narrativeView.js

+                    this.$('.narrative-control-right').removeClass('narrative-hidden');
+                }
+            }
+        },


Can you remove some of the nesting?

evaluateNavigation: function() { var active = this.model.getActiveItem(); if (!active) return; var currentStage = active.get('_index'); var itemCount = this.model.get('_items').length; if (currentStage == 0) { this.$('.narrative-controls').addClass('narrative-hidden'); if (itemCount > 1) { this.$('.narrative-control-right').removeClass('narrative-hidden'); } return; } this.$('.narrative-control-left').removeClass('narrative-hidden'); var isAtEnd = (currentStage == itemCount - 1); this.$('.narrative-control-right').toggleClass('narrative-hidden', isAtEnd); },

tomgreenfield · 2018-05-29T09:14:56Z

Is there meant to be a visited state?

…b-narrative into items

lc-thomasberger · 2018-05-30T07:51:29Z

@tomgreenfield done

chucklorenz · 2018-05-30T16:43:44Z

.narrative-item-title appears in narrative.less, but I cannot find it in narrative.hbs. Is it supposed to be .narrative-content-title?

jamesrea83 · 2018-06-05T11:32:00Z

js/narrativeView.js

+            var currentStage = active.get('_index');
+            var itemCount = this.model.get('_children').length;
+
+            if (currentStage == 0) {


Should use === here

moloko · 2018-06-05T11:37:42Z

also just to check whether this PR will require a fix for adaptlearning/adapt_framework#2100

tomgreenfield

Thanks for the PR! Have done a first pass on the code.

tomgreenfield · 2018-06-05T15:45:29Z

js/narrativeView.js

+
+        postRender: function() {
+            this.renderState();
+            this.$('.narrative-slider').imageready(_.bind(function() {


Can become

this.$('.narrative-slider').imageready(this.setReadyStatus.bind(this));

tomgreenfield · 2018-06-05T15:48:05Z

js/narrativeView.js

+
+        setupNarrative: function() {
+            this.setDeviceSize();
+            if (!this.model.has('_children') || !this.model.get('_children').length) return;


Since we use _children on line 89, it would make sense to cache here:

var items = this.model.get('_children'); if (!items || !items.length) return;

tomgreenfield · 2018-06-05T15:52:54Z

js/narrativeView.js

+        moveSliderToIndex: function(itemIndex, shouldAnimate) {
+            var invert = (Adapt.config.get('_defaultDirection') === 'ltr') ? 1 : -1;
+
+            var offset = 100 / this.model.get('_children').length * itemIndex * -1 * invert;


_itemWidth is set on the model at line 105; is it possible to use this?

tomgreenfield · 2018-06-05T15:54:02Z

js/narrativeView.js

+            var index = this.model.getActiveItem().get('_index');
+            if (this.model.get('_isDesktop')) {
+                if (!this._isInitial) {
+                    this.$('.narrative-content-item').eq(index).a11y_focus();


Please switch from eq() to using data-index attributes.

tomgreenfield · 2018-06-05T15:56:28Z

js/narrativeView.js

+                item.toggleVisited(true);
+            }
+
+            this.$('.narrative-progress:visible').removeClass('selected').eq(index).addClass('selected');


Please filter() by data-index instead of eq().

tomgreenfield · 2018-06-05T15:57:22Z

js/narrativeView.js

+
+            this.$('.narrative-progress:visible').removeClass('selected').eq(index).addClass('selected');
+            this.$('.narrative-slider-graphic').children('.controls').a11y_cntrl_enabled(false);
+            this.$('.narrative-slider-graphic').eq(index).children('.controls').a11y_cntrl_enabled(true);


Please cache this.$('.narrative-slider-graphic') and switch to using data-index.

tomgreenfield · 2018-06-05T15:58:25Z

js/narrativeView.js

+            this.$('.narrative-slider-graphic').children('.controls').a11y_cntrl_enabled(false);
+            this.$('.narrative-slider-graphic').eq(index).children('.controls').a11y_cntrl_enabled(true);
+            this.$('.narrative-content-item').addClass('narrative-hidden').a11y_on(false).eq(index).removeClass('narrative-hidden').a11y_on(true);
+            this.$('.narrative-strapline-title').a11y_cntrl_enabled(false).eq(index).a11y_cntrl_enabled(true);


Some more eq()s to be replaced here.

tomgreenfield · 2018-06-05T16:01:13Z

js/narrativeView.js

+            this.setDeviceSize();
+            if (!this.model.has('_children') || !this.model.get('_children').length) return;
+
+            this.model.set('_active', true);


Query: is this definitely suitable as a model attribute?

tomgreenfield · 2018-06-05T16:05:40Z

js/narrativeView.js

+
+        evaluateNavigation: function() {
+            var active = this.model.getActiveItem();
+            if (!active) return;


Is this check needed here?

Since resizeControl() already checks for an active item, should we just move the call to evaluateNavigation() to sit after the check in there?

Had to add a check for #2100 9b89d5a

moloko

just two suggestions, looks good

moloko · 2018-06-18T17:20:35Z

js/narrativeView.js

+            if (Adapt.config.get('_disableAnimation')) {
+                this.onTransitionEnd();
+            } else {
+                $sliderElm.on('transitionend', this.onTransitionEnd);


if you changed this to

$sliderElm.one('transitionend', this.onTransitionEnd.bind(this));

then L32 and L185-L187 can all be deleted

moloko · 2018-06-18T17:21:12Z

js/narrativeView.js

+
+        setupEventListeners: function() {
+            if (this.model.get('_setCompletionOn') === 'inview') {
+                this.$('.component-widget').on('inview', _.bind(this.inview, this));


can be changed to:

this.$('.component-widget').on('inview', this.inview.bind(this));

moloko · 2018-06-18T17:31:19Z

FYI tested in FF and IE11, checked that:

_hasNavigationInTextArea: true
_setCompletionOn: "inview"
graphic attribution

all work OK

moloko · 2018-06-18T17:33:56Z

js/narrativeView.js

+
+            if ($(event.currentTarget).hasClass('narrative-control-right')) {
+                stage++;
+                this.model.setActiveItem(stage);


could just do this.model.setActiveItem(++stage); making line above redundant (and similar for L271-272)

moloko · 2018-06-18T17:39:19Z

js/narrativeView.js

+                stage--;
+                this.model.setActiveItem(stage);
+            }
+            stage = (stage + numberOfItems) % numberOfItems;


this line needs dealing with... I think it can just go now??

IIRC from the time I tried to figure out what this did it 'normalises' the value of stage i.e. if it somehow got set to -2 then it would 'translate' that to 3. Talk about an excellent example of a bit code that could really have used a comment..!

moloko · 2018-06-18T17:49:45Z

js/narrativeView.js

+        moveSliderToIndex: function(itemIndex, shouldAnimate) {
+            var invert = (Adapt.config.get('_defaultDirection') === 'ltr') ? 1 : -1;
+
+            var offset = this.model.get('_itemWidth') * itemIndex * -1 * invert;


I think the * -1 here is redundant if you flip the values from the line above? or indeed only multiple by -1 if direction is 'ltr', losing the need for invert completely?

(caveat: I'm really bad at maths so do check this)

It is this in a more condensed way:

var offset; if (Adapt.config.get('_defaultDirection') === 'ltr') { offset = offset = this.model.get('_itemWidth') * itemIndex * -1; } else { offset = this.model.get('_itemWidth') * itemIndex; }

@moloko, are you suggesting something like the below?

var offset = this.model.get('_itemWidth') * itemIndex; if (Adapt.config.get('_defaultDirection') === 'ltr') { offset *= -1; }

@tomgreenfield yes - I think that would have exactly the same effect?

although I think it should be "multiply by -1 if direction is ltr"...

@lc-thomasberger as per @tomgreenfield 's code above - should work the same and avoids the need for else

moloko

sorry last few things

moloko · 2018-06-19T11:04:00Z

js/narrativeView.js

@@ -265,13 +264,11 @@ define([
            var numberOfItems = this.model.get('_children').length;

            if ($(event.currentTarget).hasClass('narrative-control-right')) {
-                stage++;
-                this.model.setActiveItem(stage);
+                this.model.setActiveItem(stage+=1);


could you change to this.model.setActiveItem(++stage);? the pre-increment operator is pretty standard JS

moloko · 2018-06-19T11:04:12Z

js/narrativeView.js

            } else if ($(event.currentTarget).hasClass('narrative-control-left')) {
-                stage--;
-                this.model.setActiveItem(stage);
+                this.model.setActiveItem(stage-=1);


could you change to this.model.setActiveItem(--stage);? the pre-decrement operator is pretty standard JS

moloko · 2018-06-19T11:05:13Z

js/narrativeView.js

            }
-            stage = (stage + numberOfItems) % numberOfItems;
+            stage = this.clamp(stage, 0, numberOfItems);


I really think you can delete this line as stage is a local variable and this is the last line of the function

moloko · 2018-06-19T11:05:35Z

js/narrativeView.js

-            _.bindAll(this, 'onTransitionEnd');
+        },
+
+        clamp: function(number, min, max) {


this function isn't needed

tomgreenfield · 2018-06-19T11:39:26Z

js/narrativeView.js

+
+        onProgressClicked: function(event) {
+            event && event.preventDefault();
+            var clickedIndex = $(event.target).index();


Please switch to .data('index').

tomgreenfield · 2018-06-19T11:41:18Z

js/narrativeView.js

+            ComponentView.prototype.remove.apply(this, arguments);
+        },
+
+        getSlideDirection: function() {


Unused function?

tomgreenfield · 2018-06-19T11:42:20Z

js/narrativeView.js

+            this.$('.narrative-control-left').removeClass('narrative-hidden');
+
+            var idAtEnd = (currentStage === itemCount - 1);
+            this.$('.narrative-control-right').toggleClass('narrative-hidden', idAtEnd);


Can we use a variable for both limits to get rid of the nested if statements?

var isAtStart = currentStage === 0; var isAtEnd = currentStage === itemCount - 1; this.$('.narrative-control-left').toggleClass('narrative-hidden', isAtStart); this.$('.narrative-control-right').toggleClass('narrative-hidden', isAtEnd);

tomgreenfield · 2018-06-19T13:36:30Z

js/narrativeView.js

+                this.model.set('_isDesktop', true);
+            } else {
+                this.$el.addClass('mobile').removeClass('desktop');
+                this.model.set('_isDesktop', false)


We can ditch the ambiguous desktop and mobile classes if you wanted and style using the existing .size-large class.

This function could then become:

this.model.set('_isDesktop', Adapt.device.screenSize === 'large');

tomgreenfield · 2018-06-19T13:39:35Z

js/narrativeView.js

+                    this.$('.narrative-strapline-title').a11y_focus();
+                }
+            }
+        },


Return early?

if (this._isInitial) return;

moloko · 2018-06-19T17:23:29Z

js/narrativeView.js

+            var items = this.model.get('_children');
+            if (!items || !items.length) return;
+
+            this._active = true;


as with _isInitial I think _activeshould be declared properly at the top of the file together with a comment. Might be worth checking it's even still needed and not just unnecessarily copied from the old version?

use size-* classes to style

moloko · 2018-06-20T15:15:54Z

Sorry @lc-thomasberger but it looks like something's gone a bit wrong with the _hasNavigationInTextArea layout following that last set of updates:

lc-thomasberger · 2018-06-20T15:35:03Z

@moloko it is this line in the theme https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/less/src/narrative.less#L44

moloko · 2018-06-21T17:29:04Z

@lc-thomasberger OK so from what I can see it's this which is overriding this in the theme.

For reference, this is how it how it looks in the current version of narrative when "_hasNavigationInTextArea": true:

(As I recall, it was decided that we'd have the .narrative-controls beneath the .narrative-indicators so that you could fit more narrative items in when using this layout)

So I think all that needs to be done is to remove these lines and we're then back to the same layout we have currently.

change to narrative.less has caused a regression in the _hasNavigationInTextArea layout

lc-thomasberger added 5 commits February 2, 2018 17:59

remove maintainer comment

2ef1a03

split into model and view

7233489

set stage on change event for active item in collection

6e2e9fc

get index from item rather then introduce a new method in model

remove NarrativeModel

34c5aff

refactor animation

99c9c5f

calcualte width only once use transform rather than margin for better performance

lc-thomasberger mentioned this pull request Feb 7, 2018

Items model #170

Closed

rename method to setActiveItem

0796892

moloko reviewed Feb 16, 2018

View reviewed changes

updated to add review

c472ee1

moloko approved these changes Mar 19, 2018

View reviewed changes

added review

a29859a

moloko approved these changes Mar 20, 2018

View reviewed changes

chetan-hajare approved these changes Mar 21, 2018

View reviewed changes

oliverfoster requested changes Mar 21, 2018

View reviewed changes

oliverfoster reviewed Mar 21, 2018

View reviewed changes

added review

80c870b

moloko approved these changes Mar 21, 2018

View reviewed changes

switch to _children, tranisition strapline-header

7b9c9fb

oliverfoster approved these changes May 29, 2018

View reviewed changes

Merge branch 'master' into items

d56ea09

lc-thomasberger added 2 commits May 30, 2018 09:49

handle visited state

11078e7

Merge branch 'items' of https://github.com/adaptlearning/adapt-contri…

4cbe8ca

…b-narrative into items

jamesrea83 reviewed Jun 5, 2018

View reviewed changes

lc-thomasberger added 4 commits June 5, 2018 15:53

use

b2c479b

resolve conflict

29ec474

fix #2100

9b89d5a

remove .narrative-item-title rules

3cb171c

tomgreenfield reviewed Jun 6, 2018

View reviewed changes

added review

cc5b804

moloko approved these changes Jun 18, 2018

View reviewed changes

moloko reviewed Jun 18, 2018

View reviewed changes

add review

afdac59

moloko reviewed Jun 19, 2018

View reviewed changes

update

60f9ea6

tomgreenfield reviewed Jun 19, 2018

View reviewed changes

moloko reviewed Jun 19, 2018

View reviewed changes

add review

7b69b76

use size-* classes to style

tomgreenfield approved these changes Jun 20, 2018

View reviewed changes

oliverfoster approved these changes Jun 20, 2018

View reviewed changes

update _isInitial

e4806b0

moloko previously approved these changes Jun 21, 2018

View reviewed changes

fix styling for _hasNavigationInTextArea option

585b5ea

moloko approved these changes Jun 26, 2018

View reviewed changes

moloko merged commit 2627c8b into master Jun 26, 2018

moloko deleted the items branch June 26, 2018 08:51

ItemsComponentModel #179

ItemsComponentModel #179

Conversation

lc-thomasberger commented Feb 7, 2018 • edited Loading

lc-thomasberger commented Feb 8, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moloko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliverfoster Mar 21, 2018 • edited Loading

Choose a reason for hiding this comment

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomgreenfield commented May 29, 2018

lc-thomasberger commented May 30, 2018

chucklorenz commented May 30, 2018

jamesrea83 Jun 5, 2018 • edited Loading

Choose a reason for hiding this comment

moloko commented Jun 5, 2018

tomgreenfield left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomgreenfield Jun 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moloko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moloko commented Jun 18, 2018 • edited Loading

Choose a reason for hiding this comment

moloko Jun 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomgreenfield Jun 19, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moloko Jun 19, 2018 • edited Loading

Choose a reason for hiding this comment

moloko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moloko Jun 19, 2018 • edited Loading

Choose a reason for hiding this comment

moloko commented Jun 20, 2018

lc-thomasberger commented Jun 20, 2018

moloko commented Jun 21, 2018

lc-thomasberger commented Feb 7, 2018 •

edited

Loading

oliverfoster Mar 21, 2018 •

edited

Loading

jamesrea83 Jun 5, 2018 •

edited

Loading

tomgreenfield Jun 5, 2018 •

edited

Loading

moloko commented Jun 18, 2018 •

edited

Loading

moloko Jun 18, 2018 •

edited

Loading

tomgreenfield Jun 19, 2018 •

edited

Loading

moloko Jun 19, 2018 •

edited

Loading

moloko Jun 19, 2018 •

edited

Loading