issue/2589 Added navigation item management

src/core/js/models/navigationItemModel.js

@@ -0,0 +1,18 @@
+define(function () {
+
+  class NavigationItemModel extends Backbone.Model {
+
+    defaults() {
+      return {
+        _name: '',
+        _layout: 'right',
+        _order: 1000,
+        _template: null
+      };
+    }
+
+  }
+
+  return NavigationItemModel;
+
+});

src/core/js/navigation.js

@@ -3,13 +3,13 @@ define([
   'core/js/views/navigationView'
 ], function(Adapt, NavigationView) {
 
-  var NavigationController = Backbone.Controller.extend({
+  class NavigationController extends Backbone.Controller {
 
-    initialize: function() {
+    initialize() {
       this.listenTo(Adapt, 'adapt:preInitialize', this.addNavigationBar);
-    },
+    }
 
-    addNavigationBar: function() {
+    addNavigationBar() {
       var adaptConfig = Adapt.course.get('_navigation');
 
       if (adaptConfig && adaptConfig._isDefaultNavigationDisabled) {
@@ -20,7 +20,7 @@ define([
       Adapt.navigation = new NavigationView();// This should be triggered after 'app:dataReady' as plugins might want to manipulate the navigation
     }
 
-  });
+  }
 
   return new NavigationController();
 

src/core/js/views/navigationItemView.js

@@ -0,0 +1,69 @@
+define([
+  'core/js/adapt'
+], function(Adapt) {
+
+  class NavigationItemView extends Backbone.View {
+
+    className() {
+      return [
+        'nav__item',
+        this.model.get('_classes')
+      ].filter(Boolean).join(' ');
+    }
+
+    attributes() {
+      return {
+        'data-item-name': this.model.get('_name') || ''
+      };
+    }
+
+    events() {
+      return {
+        'click [data-event]': 'triggerEvent'
+      };
+    }
+
+    initialize() {
+      this.render();
+    }
+
+    render() {
+      const templateName = this.model.get('_template');
+      if (!templateName) return;
+      const template = Handlebars.templates[templateName];
+      const data = this.model.toJSON();
+      this.$el.html(template(data));
+    }
+
+    triggerEvent(event) {
+      event.preventDefault();
+      const currentEvent = $(event.currentTarget).attr('data-event');
+      Adapt.trigger('navigation:' + currentEvent);
+      switch (currentEvent) {
+        case 'backButton':
+          Adapt.router.navigateToPreviousRoute();
+          break;
+        case 'homeButton':
+          Adapt.router.navigateToHomeRoute();
+          break;
+        case 'parentButton':
+          Adapt.router.navigateToParent();
+          break;
+        case 'skipNavigation':
+          this.skipNavigation();
+          break;
+        case 'returnToStart':
+          Adapt.startController.returnToStartLocation();
+          break;
+      }
+    }
+
+    skipNavigation() {
+      Adapt.a11y.focusFirst('.' + Adapt.location._contentType);
+    }
+
+  }
+
+  return NavigationItemView;
+
+});

src/core/js/views/navigationView.js

@@ -1,26 +1,23 @@
 define([
-  'core/js/adapt'
-], function(Adapt) {
+  'core/js/adapt',
+  './navigationItemView',
+  'core/js/models/navigationItemModel'
+], function(Adapt, NavigationItemView, NavigationItemModel) {
 
   class NavigationView extends Backbone.View {
 
     className() {
       return 'nav';
     }
 
-    events() {
-      return {
-        'click [data-event]': 'triggerEvent'
-      };
-    }
-
     attributes() {
       return {
         'role': 'navigation'
       };
     }
 
     initialize() {
+      this.items = [];
       this.listenToOnce(Adapt, {
         'courseModel:dataLoading': this.remove
       });
@@ -35,10 +32,9 @@ define([
 
     render() {
       const template = Handlebars.templates[this.constructor.template];
-      this.$el.html(template({
-        _globals: Adapt.course.get('_globals'),
-        _accessibility: Adapt.config.get('_accessibility')
-      })).insertBefore('#app');
+      this.$el.html(template({})).insertBefore('#app');
+
+      this.addDefaultButtons();
 
       _.defer(() => {
         Adapt.trigger('navigationView:postRender', this);
@@ -47,31 +43,69 @@ define([
       return this;
     }
 
-    triggerEvent(event) {
-      event.preventDefault();
-      const currentEvent = $(event.currentTarget).attr('data-event');
-      Adapt.trigger('navigation:' + currentEvent);
-      switch (currentEvent) {
-        case 'backButton':
-          Adapt.router.navigateToPreviousRoute();
-          break;
-        case 'homeButton':
-          Adapt.router.navigateToHomeRoute();
-          break;
-        case 'parentButton':
-          Adapt.router.navigateToParent();
-          break;
-        case 'skipNavigation':
-          this.skipNavigation();
-          break;
-        case 'returnToStart':
-          Adapt.startController.returnToStartLocation();
-          break;
+    addDefaultButtons() {
+      const accessibility = Adapt.config.get('_accessibility');
+      if (accessibility && accessibility._isSkipNavigationEnabled) {
+        this.add(new NavigationItemView({
+          model: new NavigationItemModel({
+            _name: 'skip',
+            _order: -2000,
+            _layout: 'left',
+            _eventName: 'skipNavigation',
+            _template: 'navSkip'
+          })
+        }));
       }
+      this.add(new NavigationItemView({
+        model: new NavigationItemModel({
+          _name: 'back',
+          _order: -1000,
+          _layout: 'left',
+          _eventName: 'backButton',
+          _template: 'navBack'
+        })
+      }));
+      this.add(new NavigationItemView({
+        model: new NavigationItemModel({
+          _name: 'drawer',
+          _order: 1000,
+          _layout: 'right',
+          _eventName: 'toggleDrawer',
+          _template: 'navDrawer'
+        })
+      }));
     }
 
-    skipNavigation() {
-      Adapt.a11y.focusFirst('.' + Adapt.location._contentType);
+    add(navigationItemView) {
+      this.remove(navigationItemView);
+      this.items.push(navigationItemView);
+      this.listenTo(navigationItemView.model, 'change:_order change:_layout', this.sort);
+      this.sort();
+    }
+
+    remove(navigationItemView) {
+      const name = navigationItemView.model.get('_name');
+      const index = this.items.findIndex(view => view.model.get('_name') === name);
+      const wasFound = (index !== -1);
+      if (!wasFound) return;
+      this.stopListening(navigationItemView.model, 'change:_order change:_layout', this.sort);
+      navigationItemView.remove();
+      this.items.splice(index, 1);
+    }
+
+    sort() {
+      const layoutGroups = this.items.reduce((layoutGroups, view) => {
+        const viewLayoutType = view.model.get('_layout') || '';
+        layoutGroups[viewLayoutType] = layoutGroups[viewLayoutType] || [];
+        layoutGroups[viewLayoutType].push(view);
+        return layoutGroups;
+      }, {});
+      for (let layoutGroupName in layoutGroups) {
+        const layoutGroup = layoutGroups[layoutGroupName];
+        layoutGroup.sort((groupA, groupB) => groupA.model.get('_order') - groupB.model.get('_order'));
+        const $target = this.$(`.js-nav-item-container${layoutGroupName ? `-${layoutGroupName}` : ''}`);
+        layoutGroup.forEach(view => $target.append(view.$el));
+      }
     }
 
     hideNavigationButton(model) {

src/core/less/core/nav.less

@@ -14,19 +14,28 @@
   background-color: red;
 
   &__inner {
+    display: flex;
+    justify-content: space-between;
     .l-container-responsive(@max-width);
   }
 
-  &__back-btn {
-    .u-float-left;
+  &__inner-right {
+    justify-content: flex-end;
   }
 
-  &__back-btn .icon {
-    .icon-controls-small-left;
+  &__inner-left,
+  &__inner-middle,
+  &__inner-right {
+    display: flex;
+  }
+
+  &__inner-left,
+  &__inner-right {
+    flex: auto;
   }
 
-  &__drawer-btn {
-    .u-float-right;
+  &__back-btn .icon {
+    .icon-controls-small-left;
   }
 
   &__drawer-btn .icon {

src/core/templates/nav.hbs

@@ -2,20 +2,8 @@
 {{import_globals}}
 
 {{! All links in the nav bar should have an attribute of data-event, navigationView uses this to fire a global event}}
-<div class="nav__inner u-clearfix">
-
-  {{#if _accessibility._isSkipNavigationEnabled}}
-  <button class="nav__btn nav__skip-btn aria-label a11y-ignore-focus" data-event="skipNavigation" aria-label="{{_globals._accessibility._ariaLabels.skipNavigation}}">
-      {{{_globals._accessibility.skipNavigationText}}}
-  </button>
-  {{/if}}
-
-  <button class="btn-icon nav__btn nav__back-btn js-nav-back-btn u-display-none" data-event="backButton" aria-label="{{_globals._accessibility._ariaLabels.previous}}" role="link">
-    <div class="icon"></div>
-  </button>
-
-  <button class="btn-icon nav__btn nav__drawer-btn js-nav-drawer-btn" data-event="toggleDrawer" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}">
-    <div class="icon"></div>
-  </button>
-
+<div class="nav__inner u-clearfix js-nav-item-container">
+  <div class="nav__inner-left u-clearfix js-nav-item-container-left"></div>
+  <div class="nav__inner-middle u-clearfix js-nav-item-container-middle"></div>
+  <div class="nav__inner-right u-clearfix js-nav-item-container-right"></div>
 </div>

src/core/templates/navBack.hbs

@@ -0,0 +1,6 @@
+{{! make the _globals object in course.json available to this template}}
+{{import_globals}}
+
+<button class="btn-icon nav__btn nav__back-btn js-nav-back-btn u-display-none" data-event="{{_eventName}}" aria-label="{{_globals._accessibility._ariaLabels.previous}}" role="link">
+  <div class="icon"></div>
+</button>

src/core/templates/navDrawer.hbs

@@ -0,0 +1,6 @@
+{{! make the _globals object in course.json available to this template}}
+{{import_globals}}
+
+<button class="btn-icon nav__btn nav__drawer-btn js-nav-drawer-btn" data-event="{{_eventName}}" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}">
+  <div class="icon"></div>
+</button>

src/core/templates/navSkip.hbs

@@ -0,0 +1,6 @@
+{{! make the _globals object in course.json available to this template}}
+{{import_globals}}
+
+<button class="nav__btn nav__skip-btn aria-label a11y-ignore-focus" data-event="{{_eventName}}" aria-label="{{_globals._accessibility._ariaLabels.skipNavigation}}">
+  {{{_globals._accessibility.skipNavigationText}}}
+</button>