issue/2589 Added navigation item management

[oliverfoster]

#2589

This is the first step in allowing us to sort out the DOM order of items in the navigation bar. There will need to be a way of applying order and layout overrides for items from the JSON in the future.

Added

• API for creating navigation items
  • Left, middle, right containers
  • Sort order
  • Flex styling

Test

Clone the course and switch to the correct branches

git clone https://github.com/adaptlearning/adapt_framework 2589
cd 2589
git checkout issue/2589
adapt devinstall && npm install
cd src/extensions/adapt-contrib-pageLevelProgress
git checkout issue/2589
cd ../../../
grunt dev

In the console.

The following should place back and drawer in the middle of the navigation bar:

var Adapt = require('core/js/adapt');
Adapt.navigation.items.find(function(item) { return item.model.get('_name') === 'back' }).model.set('_layout', 'middle');
Adapt.navigation.items.find(function(item) { return item.model.get('_name') === 'drawer' }).model.set('_layout', 'middle');

Then switch their order:

var Adapt = require('core/js/adapt');
Adapt.navigation.items.find(function(item) { return item.model.get('_name') === 'back' }).model.set('_order', '1');
Adapt.navigation.items.find(function(item) { return item.model.get('_name') === 'drawer' }).model.set('_order', '0');

Add an new item to the navigation bar:

require([
  'core/js/adapt',
  'core/js/models/navigationItemModel',
  'core/js/views/navigationItemView'
], function(Adapt, NavigationItemModel, NavigationItemView) {

  const navigationItem = new NavigationItemView({
    model: new NavigationItemModel({
      _name: 'customItemName',
      _order: 500,
      _layout: 'middle'
    }),
  });
  navigationItem.$el.append('CUSTOM ITEM');

  Adapt.navigation.add(navigationItem);
  Adapt.once('remove', () => {
    // remove when changing contentObject
    Adapt.navigation.remove(navigationItem);
  });

});

Move the custom item to the left:

var Adapt = require('core/js/adapt');
Adapt.navigation.items.find(function(item) { return item.model.get('_name') === 'customItemName' }).model.set('_layout', 'left');

Warning

1. This may interfere with existing extension placements. Please make sure to test your extensions and let me know about any issues.
2. This will break any theme which overrides nav.hbs

[cahirodoherty-learningpool]

👀

[chris-steele]

👍

[lc-alexanderbenesch]

code 👍

[oliverfoster]

As this is a breaking change and will require it's own major version bump it is on hold until a major version bump becomes more necessary. Please continue to test to make sure it is robust and useful.

[tomgreenfield]

Looking good, @oliverfoster.

My feeling at this point in time for config would be to get the course author to hard-code the sequence of navbar items in a global location such as course.json. This would take the guess work out of where a plugin's functionality might be appended with the z-index style order system.

"_navigation": {
  "_left": [
    "back"
  ],
  "_middle": [
    "navigationLogo"
  ],
  "_right": [
    "drawer",
    "close"
  ]
}

You mentioned possible further complexity where one single plugin might want to add several different icons to the navbar in different places – we might think about addressing this by getting a plugin's schema to define IDs or labels for each nav item for which the author can add to the global nav config. I assume the default label would be a property from the bower JSON for simplicity.

All up for debate and formalisation, of course.

[oliverfoster]

closed temporarily to make way for #3169