issue/7 Project improvements

cgkineo · Apr 6, 2022 · a40b729 · a40b729
2 parents f3f0e30 + a4ad8d7
commit a40b729
Show file tree

Hide file tree

Showing 24 changed files with 496 additions and 1,083 deletions.
diff --git a/js/Block.js b/js/Block.js
@@ -3,13 +3,11 @@ import Models from './Models';
 import Navigation from './Navigation';
 import Config from './Config';
 import Views from './Views';
+import Snap from './Snap';
+import State from './State';
 
 export default class Block extends Backbone.Controller {
 
-  initialize({ controller }) {
-    this._controller = controller;
-  }
-
   addEvents() {
     this.listenTo(Adapt, {
       'view:addChild': this.onAddChildView,
@@ -27,7 +25,7 @@ export default class Block extends Backbone.Controller {
   }
 
   onAddChildView(e) {
-    if (!Views.isScrollSnap(e.target)) return;
+    if (!Views.isScrollSnapActive) return;
     const model = e.model;
     if (Models.isComponent(model)) return;
     if (!Models.shouldStopRendering(model)) return;
@@ -38,10 +36,11 @@ export default class Block extends Backbone.Controller {
    * @todo Investigate why some branching views are calling this twice
    */
   onChildAdded(view) {
-    if (!Views.isScrollSnap(view)) return;
+    if (!Views.isScrollSnapActive) return;
     Models.updateLocking();
     const model = view.model;
     if (!Models.isBlock(model)) return;
+    if (Navigation.getModelConfig(model)?._isEnabled) view.$el.addClass('has-navigation');
     if (!Models.isAutoScrollOnInteractionComplete(model)) return;
     this.stopListening(model, 'change:_isInteractionComplete', this.onBlockInteractionComplete);
     this.listenTo(model, 'change:_isInteractionComplete', this.onBlockInteractionComplete);
@@ -54,24 +53,29 @@ export default class Block extends Backbone.Controller {
       return;
     }
     // defer as next child hasn't always been added by the time this triggers
-    _.defer(() => this._controller.snapDown());
+    _.defer(() => Snap.down());
   }
 
   onChildComplete(e) {
     if (Adapt.notify.stack.length > 0) {
       this.listenToOnce(Adapt, 'notify:closed', () => this.onChildComplete(e));
       return;
     }
+    const childModel = e.target;
+    if (State.isTrickleEnabled) {
+      const trickleButton = childModel.getChildren().findWhere({ _component: 'trickle-button' });
+      trickleButton?.setCompletionStatus();
+    }
     Models.updateLocking();
     // defer as next child hasn't always been added by the time this triggers
     _.defer(async() => {
-      const model = e.target;
-      if (!Models.isBlock(model)) return;
-      let stepLockBlock = Models.blocks.find(Models.isBlockStepLocked);
-      if (!stepLockBlock) stepLockBlock = Models.blocks[this.lastIndex];
-      if (stepLockBlock) {
-        await Views.page.renderTo(stepLockBlock.get('_id'));
+      if (!Models.isBlock(childModel)) return;
+      let targetBlockIndex = Models.stepLockedBlockIndex;
+      if (targetBlockIndex < 0) {
+        targetBlockIndex = Models.lastIndex;
       }
+      Config.log('renderTo', Models.blocks[targetBlockIndex].get('_id'));
+      await Views.page.renderTo(Models.blocks[targetBlockIndex].get('_id'));
       Navigation.update();
       Adapt.trigger('scrollsnap:change:locking');
     });

diff --git a/js/Classes.js b/js/Classes.js
@@ -6,7 +6,7 @@ export default class Classes {
   static addHtmlClasses() {
     const $html = $('html');
     $html.addClass('scrollSnap');
-    if (Config.useNavigationOffset === false) $html.addClass('no-navigation-offset');
+    if (!Config.useNavigationOffset) $html.addClass('no-navigation-offset');
   }
 
   static removeHtmlClasses() {

diff --git a/js/Config.js b/js/Config.js
@@ -1,4 +1,5 @@
 import Adapt from 'core/js/adapt';
+import State, { USER_PREF_SCROLLSNAP } from './State';
 
 export default class Config extends Backbone.Controller {
 
@@ -11,15 +12,15 @@ export default class Config extends Backbone.Controller {
   }
 
   static get canUseScrollSnap() {
-    return Adapt.device.screenSize === 'large';
+    return Adapt.device.screenSize === 'large' && State.userPreference === USER_PREF_SCROLLSNAP;
   }
 
   static get isSwipeEnabled() {
-    return this.global._isSwipeEnabled ?? false;
+    return this.global._isSwipeEnabled ?? true;
   }
 
   static get useNavigationOffset() {
-    return this.global._useNavigationOffet;
+    return this.global._useNavigationOffset ?? true;
   }
 
   static getScrollDuration(directionType, config = this.global) {
@@ -30,4 +31,9 @@ export default class Config extends Backbone.Controller {
     return model?.get('_scrollSnap');
   }
 
+  static log() {
+    const args = _.toArray(arguments);
+    console.log('%cscrollsnap ' + args.join(' '), 'background: #f2c75c; color: #003b49; border-radius:5px; padding:2px;');
+  }
+
 }
diff --git a/js/Device.js b/js/Device.js
@@ -2,6 +2,7 @@ import Adapt from 'core/js/adapt';
 import Classes from './Classes';
 import Config from './Config';
 import Navigation from './Navigation';
+import Snap from './Snap';
 import State from './State';
 import Views from './Views';
 
@@ -37,19 +38,23 @@ export default class Device extends Backbone.Controller {
   }
 
   onDeviceResize(screenSize) {
+    if (!State.isScrollSnapViewRendered) return;
     const isFullscreen = !!document.fullscreenElement;
     const isFullscreenResize = this._isFullscreenChange;
     this._isFullscreenChange = false;
     if (!Config.canUseScrollSnap || isFullscreen || isFullscreenResize) return;
-    this._controller.scrollToId(State.locationId, 0, true);
+    Snap.toId(State.locationId, 0, true);
   }
 
   onDeviceChanged(screenSize) {
-    Classes.updateHtmlClasses();
-    Navigation.update();
-    if (!Config.canUseScrollSnap) Views.setLocationId();
-    this.controller.addEvents();
-    this.onDeviceResize(screenSize);
+    if (State.isScrollSnapViewRendered) {
+      Classes.updateHtmlClasses();
+      Navigation.update();
+      if (!Config.canUseScrollSnap) Views.setLocationId();
+      this._controller.addEvents();
+      this.onDeviceResize(screenSize);
+    }
+    Views.checkRenderType();
   }
 
 }
diff --git a/js/Focus.js b/js/Focus.js
@@ -1,11 +1,11 @@
 import Models from './Models';
+import Snap from './Snap';
 import State from './State';
 
 export default class Focus extends Backbone.Controller {
 
-  initialize({ controller }) {
+  initialize() {
     _.bindAll(this, 'onFocusIn');
-    this._controller = controller;
   }
 
   addEvents() {
@@ -23,7 +23,7 @@ export default class Focus extends Backbone.Controller {
     const model = Models.blocks.find(block => block.get('_id') === blockId);
     if (State.currentModel === model) return;
     State.currentModel = model;
-    this._controller.scrollToId(blockId);
+    Snap.toId(blockId);
   }
 
 }
diff --git a/js/Keyboard.js b/js/Keyboard.js
@@ -1,8 +1,9 @@
+import Snap from './Snap';
+
 export default class Keyboard extends Backbone.Controller {
 
-  initialize({ controller }) {
+  initialize() {
     _.bindAll(this, 'onKeyDown');
-    this._controller = controller;
   }
 
   addEvents() {
@@ -21,21 +22,21 @@ export default class Keyboard extends Backbone.Controller {
       case 'PageUp':
       case 33:
       // case 38:
-        this._controller.snapUp();
+        Snap.up();
         break;
       // case 'ArrowDown':
       case 'PageDown':
       case 34:
       // case 40:
-        this._controller.snapDown();
+        Snap.down();
         break;
       case 'End':
       case 35:
-        this._controller.snapToLimit();
+        Snap.toLimit();
         break;
       case 'Home':
       case 36:
-        this._controller.snapToStart();
+        Snap.toStart();
     }
   }
 

diff --git a/js/Models.js b/js/Models.js
@@ -21,10 +21,15 @@ export default class Models {
   }
 
   static get stepLockedBlockIndex() {
-    return this.blocks.findIndex(this.isBlockStepLocked.bind(this));
+    const index = this.blocks.findIndex(this.isBlockStepLocked.bind(this));
+    return State.isTrickleEnabled
+      ? index - 1
+      : index;
   }
 
   static isBlockStepLocked(block) {
+    if (State.isTrickleKilled) return false;
+    if (State.isTrickleEnabled) return block.get('_isLocked');
     return !block.get('_isOptional') && !block.get('_isComplete');
   }
 
@@ -69,12 +74,15 @@ export default class Models {
   }
 
   static get isCurrentStepLocked() {
-    const index = this.currentIndex;
+    const index = State.isTrickleEnabled
+      ? this.currentIndex + 1
+      : this.currentIndex;
     const block = this.blocks[index];
     return this.isBlockStepLocked(block);
   }
 
   static updateLocking() {
+    if (State.isTrickleEnabled) return;
     const stepLockedBlockIndex = this.stepLockedBlockIndex;
     this.blocks.forEach((model, index) => {
       const isLocked = stepLockedBlockIndex >= 0 && (index > stepLockedBlockIndex);
@@ -83,8 +91,14 @@ export default class Models {
   }
 
   static shouldStopRendering(model) {
+    if (State.isTrickleEnabled) {
+      const articlesAndBlocks = this.articlesAndBlocks;
+      const stepLockIndex = articlesAndBlocks.findIndex(m => m.get('_isLocked'));
+      const childViewIndex = articlesAndBlocks.indexOf(model);
+      return (stepLockIndex >= 0 && (childViewIndex >= stepLockIndex));
+    }
     const articlesAndBlocks = this.articlesAndBlocks;
-    const stepLockIndex = articlesAndBlocks.findIndex(m => Models.isBlock(m) && Models.isBlockStepLocked(m));
+    const stepLockIndex = articlesAndBlocks.findIndex(m => this.isBlock(m) && this.isBlockStepLocked(m));
     const childViewIndex = articlesAndBlocks.indexOf(model);
     return (stepLockIndex >= 0 && (childViewIndex > stepLockIndex));
   }

diff --git a/js/Navigation.js b/js/Navigation.js
@@ -6,17 +6,33 @@ import State from './State';
 
 export default class Navigation extends Backbone.Controller {
 
-  static add() {
+  static add({ Snap }) {
     const model = State.currentModel;
     const config = this.getModelConfig(model);
-    this._view = new NavigationView({ model: new Backbone.Model(config) });
+    this._view = new NavigationView({ model: new Backbone.Model(config), Snap });
     Views.page.$el.find('.page__inner').append(this._view.$el);
   }
+
   static remove() {
+    if (!this._view) return;
     this._view.remove();
     this._view = null;
   }
 
+  static show() {
+    if (!this._view) return;
+    this._view.model.set({
+      _isVisible: true
+    });
+  }
+
+  static hide() {
+    if (!this._view) return;
+    this._view.model.set({
+      _isVisible: false
+    });
+  }
+
   static update() {
     if (!this._view) return;
     const model = State.currentModel;

diff --git a/js/NavigationView.js b/js/NavigationView.js
@@ -1,7 +1,6 @@
 import Navigation from './navigation.jsx';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Adapt from 'core/js/adapt';
 
 export default class NavigationView extends Backbone.View {
 
@@ -17,8 +16,9 @@ export default class NavigationView extends Backbone.View {
     };
   }
 
-  initialize() {
-    this.listenTo(this.model, 'all', this.changed);
+  initialize({ Snap }) {
+    this.Snap = Snap;
+    this.listenTo(this.model, 'change', this.changed);
     this.render();
   }
 
@@ -35,15 +35,15 @@ export default class NavigationView extends Backbone.View {
   }
 
   onPreviousClick() {
-    Adapt.scrollsnap.previous();
+    this.Snap.previous();
   }
 
   onNextClick() {
-    Adapt.scrollsnap.next();
+    this.Snap.next();
   }
 
   onLastClick() {
-    Adapt.scrollsnap.first();
+    this.Snap.first();
   }
 
 }