New: Introduce Menus as Pages

js/models/ComponentMenuModel.js

@@ -0,0 +1,35 @@
+import ComponentModel from 'core/js/models/componentModel';
+import data from '../data';
+
+class ComponentMenuModel extends ComponentModel {
+
+  setupModel() {
+    this.setupChildListeners();
+    this.init();
+    _.defer(() => {
+      this.checkCompletionStatus();
+      this.checkInteractionCompletionStatus();
+      this.checkLocking();
+      this.checkVisitedStatus();
+      this.setupTrackables();
+    });
+  }
+
+  getChildren() {
+    if (this._childrenCollection) {
+      return this._childrenCollection;
+    }
+
+    const parentContentObject = this.findAncestor('contentobject');
+    const id = parentContentObject.get('_id');
+    // Look up child by _parentId from data
+    const children = data.filter(model => model.get('_parentId') === id && model.isTypeGroup('contentobject'));
+    const childrenCollection = new Backbone.Collection(children);
+
+    this.setChildren(childrenCollection);
+    return this._childrenCollection;
+  }
+
+}
+
+export default ComponentMenuModel;

js/models/adaptModel.js

@@ -443,17 +443,32 @@ export default class AdaptModel extends LockingModel {
    * Such that the tree:
    *  { a1: { b1: [ c1, c2 ], b2: [ c3, c4 ] }, a2: { b3: [ c5, c6 ] } }
    *
-   * will become the array (parent first = false):
+   * will become the array (isParentFirst = false):
    *  [ c1, c2, b1, c3, c4, b2, a1, c5, c6, b3, a2 ]
    *
-   * or (parent first = true):
+   * or (isParentFirst = true):
    *  [ a1, b1, c1, c2, b2, c3, c4, a2, b3, c5, c6 ]
    *
    * This is useful when sequential operations are performed on the menu/page/article/block/component hierarchy.
-   * @param {boolean} [isParentFirst]
+   * @param {boolean|object} [options]
+   * @param {Object} [options.isParentFirst]
+   * @param {Object} [options.filter]
    * @return {array}
    */
-  getAllDescendantModels(isParentFirst) {
+  getAllDescendantModels(options = {}) {
+    let isParentFirst = false;
+    let filter = null;
+    if (typeof options === 'object') {
+      // New arguments
+      ({
+        isParentFirst = isParentFirst,
+        filter = filter
+      } = options);
+    } else {
+      // Old arguments, options is a boolean describing isParentFirst
+      isParentFirst = Boolean(options);
+      options = { isParentFirst };
+    }
 
     const descendants = [];
 
@@ -465,12 +480,14 @@ export default class AdaptModel extends LockingModel {
 
     children.models.forEach(child => {
 
+      if (options.filter?.(child) === false) return;
+
       if (!child.hasManagedChildren) {
         descendants.push(child);
         return;
       }
 
-      const subDescendants = child.getAllDescendantModels(isParentFirst);
+      const subDescendants = child.getAllDescendantModels(options);
       if (isParentFirst === true) {
         descendants.push(child);
       }

js/mpabc.js

@@ -1,5 +1,6 @@
 import Adapt from 'core/js/adapt';
 import wait from 'core/js/wait';
+import components from './components';
 import Data from 'core/js/data';
 import AdaptSubsetCollection from 'core/js/collections/adaptSubsetCollection';
 import ContentObjectModel from 'core/js/models/contentObjectModel';
@@ -10,14 +11,15 @@ import ComponentModel from 'core/js/models/componentModel';
 import 'core/js/models/courseModel';
 import 'core/js/models/menuModel';
 import 'core/js/models/pageModel';
-import 'core/js/views/pageView';
+import PageView from 'core/js/views/pageView';
 import 'core/js/views/articleView';
 import 'core/js/views/blockView';
 
 class MPABC extends Backbone.Controller {
 
   initialize() {
     // Example of how to cause the data loader to wait for another module to setup
+    this.listenTo(Adapt, 'configModel:loadCourseData', this.onConfigLoaded);
     this.listenTo(Data, {
       loading: this.waitForDataLoaded,
       loaded: this.onDataLoaded
@@ -30,6 +32,11 @@ class MPABC extends Backbone.Controller {
     wait.begin();
   }
 
+  onConfigLoaded() {
+    if (!Adapt.config.get('_isPageMenu')) return;
+    components.register('course menu', { view: PageView });
+  }
+
   onDataLoaded() {
     // Tell the data loader that we have finished
     wait.end();

js/router.js

@@ -201,12 +201,13 @@ class Router extends Backbone.Router {
       return;
     }
 
-    if (!isMenu) {
-      // checkIfResetOnRevisit where exists on descendant models before render
-      _.invoke(model.getAllDescendantModels(), 'checkIfResetOnRevisit');
-      // wait for completion to settle
-      await Adapt.deferUntilCompletionChecked();
-    }
+    // checkIfResetOnRevisit on descendant page children models before render
+    const pageDescendants = model.getAllDescendantModels({
+      filter: model => !model.isTypeGroup('contentobject')
+    });
+    _.invoke(pageDescendants, 'checkIfResetOnRevisit');
+    // wait for completion to settle
+    await Adapt.deferUntilCompletionChecked();
 
     this.$wrapper.append(new ViewClass({ model }).$el);
 

js/views/ComponentMenuView.js

@@ -0,0 +1,24 @@
+import ComponentView from 'core/js/views/componentView';
+import MenuItemView from './menuItemView';
+
+class ComponentMenuView extends ComponentView {
+
+  async postRender() {
+    await this.addChildren();
+  }
+
+}
+
+Object.assign(ComponentMenuView, {
+  /**
+   * TODO:
+   * child view here should not be fixed to the MenuItemView
+   * menus may currently rely on this
+   */
+  childContainer: '.js-children',
+  childView: MenuItemView,
+  type: 'component',
+  template: 'menu'
+});
+
+export default ComponentMenuView;

js/views/adaptView.js

@@ -138,6 +138,16 @@ class AdaptView extends Backbone.View {
     });
   }
 
+  /**
+   * Generate an array of models to render.
+   * This defaults to available non-contentobject children models.
+   *
+   * @returns {[Backbone.Model]}
+   */
+  get childrenToAdd() {
+    return this.model.getAvailableChildModels().filter(model => !model.isTypeGroup('contentobject'));
+  }
+
   /**
    * Add children and descendant views, first-child-first. Wait until all possible
    * views are added before resolving asynchronously.
@@ -152,7 +162,7 @@ class AdaptView extends Backbone.View {
     // Iterate through existing available children and/or request new children
     // if required and allowed
     while (true) {
-      const models = this.model.getAvailableChildModels();
+      const models = this.childrenToAdd;
       const event = this._getAddChildEvent(models[this.nthChild]);
       if (!event) {
         break;

js/views/menuView.js

@@ -1,7 +1,19 @@
 import ContentObjectView from 'core/js/views/contentObjectView';
 import MenuItemView from 'core/js/views/menuItemView';
+import logging from '../logging';
 
-class MenuView extends ContentObjectView {}
+class MenuView extends ContentObjectView {
+
+  initialize(...args) {
+    super.initialize(...args);
+    const immediatePageDescendents = this.model.getAllDescendantModels({
+      filter: model => !model.isTypeGroup('contentobject')
+    });
+    if (!immediatePageDescendents.length) return;
+    logging.warn('Classic menu has children which are not contentobjects, use config.json:_isPageMenu = true');
+  }
+
+}
 
 Object.assign(MenuView, {
   /**

schema/config.schema.json

@@ -62,6 +62,12 @@
         }
       }
     },
+    "_isPageMenu": {
+      "type": "boolean",
+      "title": "Allow components on menus",
+      "description": "EXPERIMENTAL: If enabled, menus will be rendered as pages by default. Not supported in the AAT.",
+      "default": false
+    },
     "_defaultLanguage": {
       "type": "string",
       "title": "Default language code",