#8 React/ES6 conversion, #6 Nav order, #1 Hide for mobile option

example.json

@@ -1,11 +1,20 @@
-    // course.json
-    "_navigationTitle": {
-        "_isEnabled": true,
-        "title": "Title"
-    }
+// course.json
+"_navigationTitle": {
+    "_isEnabled": true,
+    "title": "Title",
+    "_hideTitleForMobile": true
+}
 
-    // course.json -  if you want to use the course displayTitle
-    "_navigationTitle": {
-        "_isEnabled": true,
-        "title": "{{{Adapt.[course].displayTitle}}}"
+"_globals": {
+    "_extensions": {
+        "_navigationTitle": {
+            "_navOrder": 2
+        }
     }
+}
+
+// course.json -  if you want to use the course displayTitle
+"_navigationTitle": {
+    "_isEnabled": true,
+    "title": "{{{Adapt.[course].displayTitle}}}"
+}

js/NavigationTitleView.js

@@ -0,0 +1,50 @@
+import Adapt from 'core/js/adapt';
+import device from 'core/js/device';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { templates } from 'core/js/reactHelpers';
+
+class NavigationTitleView extends Backbone.View {
+  className() {
+    return 'navigation-title';
+  }
+
+  attributes() {
+    return {
+      'data-order': (Adapt.course.get('_globals')?._extensions?._navigationTitle?._navOrder || 0)
+    };
+  }
+
+  initialize() {
+    this.listenTo(Adapt, 'device:changed', this.changed);
+    this.render();
+  }
+
+  render() {
+    this.changed();
+  }
+
+  changed() {
+    this.setIsDeviceSmall();
+    this.hideForMobile();
+
+    ReactDOM.render(<templates.navigationTitle {...this.model.toJSON()} />, this.el);
+  }
+
+  setIsDeviceSmall() {
+    this.model.set('_isDeviceSmall', device.screenSize === 'small');
+  }
+
+  hideForMobile() {
+    const _isDeviceSmall = this.model.get('_isDeviceSmall');
+    const _hideForMobile = this.model.get('_hideForMobile');
+
+    if (_isDeviceSmall && _hideForMobile) {
+      this.$el.addClass('u-display-none');
+    } else {
+      this.$el.removeClass('u-display-none');
+    }
+  }
+}
+
+export default NavigationTitleView;

js/adapt-navigationTitle.js

@@ -1,37 +1,28 @@
-define([
-  'core/js/adapt',
-  './TitleView'
-],function(Adapt, TitleView) {
+import Adapt from 'core/js/adapt';
+import NavigationTitleView from './NavigationTitleView';
 
-  var NavigationTitle = Backbone.Controller.extend({
+class NavigationTitle extends Backbone.Controller {
 
-    initialize: function() {
-      this.listenTo(Adapt, "adapt:initialize", this.onDataReady);
-    },
+  initialize() {
+    this.listenTo(Adapt, 'adapt:initialize', this.onDataReady);
+  }
 
-    onDataReady: function() {
-      if (this.titleView) this.titleView.remove();
+  onDataReady() {
+    const config = Adapt.course.get('_navigationTitle');
+    if (!config || !config._isEnabled) return;
 
-      var config = Adapt.course.get("_navigationTitle");
-      if (!config || !config._isEnabled) return;
+    this.titleView = new NavigationTitleView({
+      model: new Backbone.Model(config)
+    });
 
-      this.titleView = new TitleView({
-        model: new Backbone.Model(config)
-      });
+    // If 'navigation logo' is present in the navigation, insert title after it.
+    // Otherwise, insert after 'back' button.
+    const $navLogo = $('.navigation-logo');
+    const $backBtn = $('.js-nav-back-btn');
+    const $insertAfter = $navLogo.length > 0 ? $navLogo : $backBtn;
 
-      // if 'navigation logo' is present in the navigation, insert after
-      var $navLogo = $('.navigation-logo');
-      if ($navLogo.length > 0) {
-        this.titleView.$el.insertAfter($navLogo);
-        return;
-      }
-      // otherwise just insert after back button
-      var $backBtn = ".js-nav-back-btn";
-      this.titleView.$el.insertAfter($backBtn);
-    }
+    this.titleView.$el.insertAfter($insertAfter);
+  }
+};
 
-  });
-
-  return new NavigationTitle();
-
-});
+export default new NavigationTitle();

less/navigationTitle.less

@@ -8,4 +8,4 @@
   min-height: @navMinHeight;
   padding-right: @icon-padding;
   padding-left: @icon-padding;
-}
+}

templates/navigationTitle.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function NavigationTitle(props) {
+  const {
+    title
+  } = props;
+
+  return (
+
+    <div className='navigation-title__inner'>
+      {title}
+    </div>
+
+  );
+}