issue/2714 Decoupled menu, page, article, block and component

grunt/config/babel.js

@@ -1,22 +1,51 @@
 module.exports = {
-  options: {
-    sourceMap: true,
-    inputSourceMap: true,
-    sourceType: 'script',
-    minified: true,
-    comments: false,
-    presets: [
-      [
-        '@babel/preset-env',
-        {
-          "targets": {
-            "ie": "11"
+  compile: {
+    options: {
+      inputSourceMap: false,
+      sourceType: 'script',
+      minified: true,
+      comments: false,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            "targets": {
+              "ie": "11"
+            }
           }
-        }
+        ]
       ]
-    ]
+    },
+    files: [{
+      "expand": true,
+      "cwd": "<%= tempdir %>",
+      "src": [
+        "adapt.min.js"
+      ],
+      "dest": "<%= outputdir %>adapt/js/",
+      "ext": ".min.js"
+    }]
   },
-  dist: {
+  dev: {
+    options: {
+      sourceMap: true,
+      inputSourceMap: true,
+      sourceType: 'script',
+      retainLines: true,
+      minified: false,
+      compact: false,
+      comments: true,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            "targets": {
+              "ie": "11"
+            }
+          }
+        ]
+      ]
+    },
     files: [{
       "expand": true,
       "cwd": "<%= tempdir %>",
@@ -27,4 +56,4 @@ module.exports = {
       "ext": ".min.js"
     }]
   }
-};
+};

grunt/config/watch.js

@@ -17,8 +17,8 @@ module.exports = {
     tasks: ['handlebars', 'javascript:dev']
   },
   courseJson: {
-    files: ['<%= sourcedir %>course/**/*.<%= jsonext %>'],
-    tasks: ['jsonlint', 'check-json', 'newer:copy:courseJson', 'schema-defaults']
+    files: ['<%= sourcedir %>course/**/*.<%= jsonext %>', '<%= outputdir %>course/*/language_data_manifest.js'],
+    tasks: ['language-data-manifests', 'jsonlint', 'check-json', 'newer:copy:courseJson', 'schema-defaults']
   },
   courseAssets: {
     files: ['<%= sourcedir %>course/<%=languages%>/*', '!<%= sourcedir %>course/<%=languages%>/*.<%= jsonext %>'],

grunt/tasks/build.js

@@ -9,10 +9,11 @@ module.exports = function(grunt) {
     'build-config',
     'copy',
     'schema-defaults',
+    'language-data-manifests',
     'handlebars',
     'tracking-insert',
     'javascript:compile',
-    'babel',
+    'babel:compile',
     'clean:dist',
     'less:compile',
     'replace',

grunt/tasks/dev.js

@@ -8,10 +8,11 @@ module.exports = function(grunt) {
     'build-config',
     'copy',
     'schema-defaults',
+    'language-data-manifests',
     'handlebars',
     'tracking-insert',
     'javascript:dev',
-    'babel',
+    'babel:dev',
     'less:dev',
     'replace',
     'scripts:adaptpostbuild',

grunt/tasks/diff.js

@@ -8,10 +8,11 @@ module.exports = function(grunt) {
     'build-config',
     'copy',
     'schema-defaults',
+    'language-data-manifests',
     'newer:handlebars:compile',
     'tracking-insert',
     'newer:javascript:dev',
-    'babel',
+    'babel:dev',
     'newer:less:dev',
     'replace',
     'scripts:adaptpostbuild',

grunt/tasks/language-data-manifests.js

@@ -0,0 +1,7 @@
+module.exports = function(grunt) {
+  const Helpers = require('../helpers')(grunt);
+  grunt.registerTask('language-data-manifests', 'Creates a manifest for each set of language data files', function() {
+    const languages = Helpers.getFramework({ useOutputData: true }).getData().languages;
+    languages.forEach(language => language.saveManifest());
+  });
+};

grunt/tasks/server-build.js

@@ -9,10 +9,11 @@ module.exports = function(grunt) {
       '_log-vars',
       'build-config',
       'copy',
+      'language-data-manifests',
       'less:' + requireMode,
       'handlebars',
       'javascript:' + requireMode,
-      'babel',
+      'babel:' + requireMode,
       'replace',
       'scripts:adaptpostbuild',
       'clean:temp'

src/core/js/adapt.js

@@ -8,7 +8,7 @@ define([
     initialize() {
       this.loadScript = window.__loadScript;
       this.location = {};
-      this.componentStore = {};
+      this.store = {};
       this.setupWait();
     }
 
@@ -28,6 +28,14 @@ define([
       };
     }
 
+    /**
+     * @deprecated since v6.0.0 - please use `Adapt.store` instead
+     */
+    get componentStore() {
+      this.log && this.log.deprecated('Adapt.componentStore, please use Adapt.store instead');
+      return this.store;
+    }
+
     init() {
       this.addDirection();
       this.disableAnimation();
@@ -148,39 +156,149 @@ define([
     scrollTo() {}
 
     /**
-     * Used to register components with the Adapt 'component store'
-     * @param {string} name The name of the component to be registered
+     * Used to register models and views with `Adapt.store`
+     * @param {string|Array} name The name(s) of the model/view to be registered
      * @param {object} object Object containing properties `model` and `view` or (legacy) an object representing the view
      */
     register(name, object) {
-      if (this.componentStore[name]) {
-        throw Error('The component "' + name + '" already exists in your project');
+      if (name instanceof Array) {
+        // if an array is passed, iterate by recursive call
+        name.forEach(name => this.register(name, object));
+        return object;
+      }
+
+      if (name.split(' ').length > 1) {
+        // if name with spaces is passed, split and pass as array
+        this.register(name.split(' '), object);
+        return object;
+      }
+
+      if ((!object.view && !object.model) || object instanceof Backbone.View) {
+        this.log && this.log.deprecated('View-only registrations are no longer supported');
+        object = { view: object };
+      }
+
+      if (object.view && !object.view.template) {
+        object.view.template = name;
+      }
+
+      const isModelSetAndInvalid = (object.model &&
+        !(object.model.prototype instanceof Backbone.Model) &&
+        !(object.model instanceof Function));
+      if (isModelSetAndInvalid) {
+        throw new Error('The registered model is not a Backbone.Model or Function');
       }
 
-      if (object.view) {
-        // use view+model object
-        if (!object.view.template) object.view.template = name;
-      } else {
-        // use view object
-        if (!object.template) object.template = name;
+      const isViewSetAndInvalid = (object.view &&
+        !(object.view.prototype instanceof Backbone.View) &&
+        !(object.view instanceof Function));
+      if (isViewSetAndInvalid) {
+        throw new Error('The registered view is not a Backbone.View or Function');
       }
 
-      this.componentStore[name] = object;
+      this.store[name] = Object.assign({}, this.store[name], object);
 
       return object;
     }
 
     /**
-     * Fetches a component view class from the componentStore. For a usage example, see either HotGraphic or Narrative
-     * @param {string} name The name of the componentView you want to fetch e.g. `"hotgraphic"`
-     * @returns {ComponentView} Reference to the view class
+     * Parses a view class name.
+     * @param {string|Backbone.Model|Backbone.View|object} nameModelViewOrData The name of the view class you want to fetch e.g. `"hotgraphic"` or its model or its json data
+     */
+    getViewName(nameModelViewOrData) {
+      if (typeof nameModelViewOrData === 'string') {
+        return nameModelViewOrData;
+      }
+      if (nameModelViewOrData instanceof Backbone.Model) {
+        nameModelViewOrData = nameModelViewOrData.toJSON();
+      }
+      if (nameModelViewOrData instanceof Backbone.View) {
+        let foundName;
+        _.find(this.store, (entry, name) => {
+          if (!entry || !entry.view) return;
+          if (!(nameModelViewOrData instanceof entry.view)) return;
+          foundName = name;
+          return true;
+        });
+        return foundName;
+      }
+      if (nameModelViewOrData instanceof Object) {
+        const names = [
+          typeof nameModelViewOrData._view === 'string' && nameModelViewOrData._view,
+          typeof nameModelViewOrData._component === 'string' && nameModelViewOrData._component,
+          typeof nameModelViewOrData._type === 'string' && nameModelViewOrData._type
+        ].filter(Boolean);
+        if (names.length) {
+          // find first fitting view name
+          const name = names.find(name => this.store[name] && this.store[name].view);
+          return name || names.pop(); // return last available if none found
+        }
+      }
+      throw new Error('Cannot derive view class name from input');
+    }
+
+    /**
+     * Fetches a view class from the store. For a usage example, see either HotGraphic or Narrative
+     * @param {string|Backbone.Model|Backbone.View|object} nameModelViewOrData The name of the view class you want to fetch e.g. `"hotgraphic"` or its model or its json data
+     * @returns {Backbone.View} Reference to the view class
+     */
+    getViewClass(nameModelViewOrData) {
+      const name = this.getViewName(nameModelViewOrData);
+      const object = this.store[name];
+      if (!object) {
+        this.log.warnOnce(`A view for '${name}' isn't registered in your project`);
+        return;
+      }
+      const isBackboneView = (object.view && object.view.prototype instanceof Backbone.View);
+      if (!isBackboneView && object.view instanceof Function) {
+        return object.view();
+      }
+      return object.view;
+    }
+
+    /**
+     * Parses a model class name.
+     * @param {string|Backbone.Model|object} name The name of the model you want to fetch e.g. `"hotgraphic"`, the model to process or its json data
+     */
+    getModelName(nameModelOrData) {
+      if (typeof nameModelOrData === 'string') {
+        return nameModelOrData;
+      }
+      if (nameModelOrData instanceof Backbone.Model) {
+        nameModelOrData = nameModelOrData.toJSON();
+      }
+      if (nameModelOrData instanceof Object) {
+        const names = [
+          typeof nameModelOrData._model === 'string' && nameModelOrData._model,
+          typeof nameModelOrData._component === 'string' && nameModelOrData._component,
+          typeof nameModelOrData._type === 'string' && nameModelOrData._type
+        ].filter(Boolean);
+        if (names.length) {
+          // find first fitting model name
+          const name = names.find(name => this.store[name] && this.store[name].model);
+          return name || names.pop(); // return last available if none found
+        }
+      }
+      throw new Error('Cannot derive model class name from input');
+    }
+
+    /**
+     * Fetches a model class from the store. For a usage example, see either HotGraphic or Narrative
+     * @param {string|Backbone.Model|object} name The name of the model you want to fetch e.g. `"hotgraphic"` or its json data
+     * @returns {Backbone.Model} Reference to the view class
      */
-    getViewClass(name) {
-      const object = this.componentStore[name];
+    getModelClass(nameModelOrData) {
+      const name = this.getModelName(nameModelOrData);
+      const object = this.store[name];
       if (!object) {
-        throw Error('The component "' + name + '" doesn\'t exist in your project');
+        this.log.warnOnce(`A model for '${name}' isn't registered in your project`);
+        return;
+      }
+      const isBackboneModel = (object.model && object.model.prototype instanceof Backbone.Model);
+      if (!isBackboneModel && object.model instanceof Function) {
+        return object.model();
       }
-      return object.view || object;
+      return object.model;
     }
 
     /**
@@ -242,28 +360,13 @@ define([
      * Trickle uses this function to determine where it should scrollTo after it unlocks
      */
     parseRelativeString(relativeString) {
-      if (relativeString[0] === '@') {
-        relativeString = relativeString.substr(1);
-      }
-
-      let type = relativeString.match(/(component|block|article|page|menu)/);
-      if (!type) {
-        this.log.error('Adapt.parseRelativeString() could not match relative type', relativeString);
-        return;
-      }
-      type = type[0];
-
-      const offset = parseInt(relativeString.substr(type.length).trim() || 0);
-      if (isNaN(offset)) {
-        this.log.error('Adapt.parseRelativeString() could not parse relative offset', relativeString);
-        return;
-      }
-
+      const splitIndex = relativeString.search(/[ +\-\d]{1}/);
+      const type = relativeString.slice(0, splitIndex).replace(/^@/, '');
+      const offset = parseInt(relativeString.slice(splitIndex).trim() || 0);
       return {
         type: type,
         offset: offset
       };
-
     }
 
     addDirection() {

src/core/js/app.js

@@ -10,6 +10,7 @@ require([
   'core/js/notify',
   'core/js/router',
   'core/js/models/lockingModel',
+  'core/js/mpabc',
   'core/js/helpers',
   'core/js/scrolling',
   'core/js/headings',

src/core/js/collections/adaptCollection.js

@@ -5,13 +5,7 @@ define([
   class AdaptCollection extends Backbone.Collection {
 
     initialize(models, options) {
-      this.url = options.url;
       this.once('reset', this.loadedData, this);
-      if (!this.url) return;
-      this.fetch({
-        reset: true,
-        error: () => console.error('ERROR: unable to load file ' + this.url)
-      });
     }
 
     loadedData() {