Fix: Moved JS logic into template jsx (fixes #14)

README.md

@@ -8,38 +8,31 @@
 
 <img src='https://user-images.githubusercontent.com/898168/210417005-3c2f0e9d-b1f0-4a7b-815c-33c3a6921965.jpg' width="500" alt="Screenshot">
 
-## Attributes
+### Attributes
 
 The following attributes are set within *course.json*.
 
-**\_navigationTitle** (object):
-The object that defines the content to render. It contains the following settings:
+**\_navigationTitle** (object): The object that defines the content to render. It contains values for **\_isEnabled**, **\_isHiddenOnMenu**, **\_hideForMobile**, **\_useCourseTitle**, and **title**.
 
-> **\_isEnabled** (boolean):
-Turns on and off the **Navigation Title** extension.
+>**\_isEnabled** (boolean): Turns on and off the **Navigation Title** extension.
 
-> **\_isHiddenOnMenu** (boolean):
-When `true`, hides the logo on the main menu. Default: `false`
+>**\_isHiddenOnMenu** (boolean): When `true`, hides the logo on the main menu. Default: `false`
 
-> **\_hideForMobile** (boolean):
-Optional, hide the title for mobile view. Useful to declutter the navigation bar where limited space is available.
+>**\_hideForMobile** (boolean): Optional, hide the title for mobile view. Useful to declutter the navigation bar where limited space is available.
 
-> **\_useCourseTitle** (boolean):
-Optional, use the course title as the navigation title. Will override anything in the `title` property of the `_navigationTitle` object.
+>**\_useCourseTitle** (boolean): Optional, use the course title as the navigation title. Will override anything in the `title` property of the `_navigationTitle` object.
 
-> **title** (string):
-The title text to display.
+>**title** (string): The title text to display should **\_useCourseTitle** be set to false.
 
-The following attributes are set within _contentObjects.json_.
+The following attributes are set within *contentObjects.json*.
 
-**\_navigationTitle** (object):
-The object that defines the content to render. It contains the following settings:
+**\_navigationTitle** (object): The object that defines the content to render. It contains the value for **\_isEnabled**.
 
-> **\_isEnabled** (boolean):
-When `false`, hides the title on a specific page or sub menu. Default: `true`
+>**\_isEnabled** (boolean): When `false`, hides the title on a specific page or sub menu. Default: `true`
 
 ----------------------------
 **Author / maintainer:** CGKineo<br>
+**AAT support:** Yes<br>
 **Accessibility support:** WAI AA<br>
 **RTL support:** Yes<br>
 **Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari 14 for macOS/iOS/iPadOS, Opera<br>

example.json

@@ -2,18 +2,18 @@
 "_globals": {
     "_extensions": {
         "_navigationTitle": {
-            "_navOrder": 2
+            "_navOrder": 0
         }
     }
 }
 
 // course.json
 "_navigationTitle": {
     "_isEnabled": true,
-    "title": "Title",
     "_isHiddenOnMenu": false,
     "_hideForMobile": true,
-    "_useCourseTitle": false
+    "_useCourseTitle": false,
+    "title": "Title"
 }
 
 // contentObjects.json - Disable for this page

js/NavigationTitleView.js

@@ -1,5 +1,4 @@
 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';
@@ -17,54 +16,13 @@ class NavigationTitleView extends Backbone.View {
   }
 
   initialize() {
-    this.listenTo(Adapt, 'device:changed', this.changed);
+    this.listenTo(Adapt, 'device:changed', this.render);
     this.render();
   }
 
   render() {
-    this.changed();
-  }
-
-  changed() {
-    this.setIsDeviceSmall();
-    this.setTitle();
-    this.hideForMobile();
-
     ReactDOM.render(<templates.navigationTitle {...this.model.toJSON()} />, this.el);
   }
-
-  setIsDeviceSmall() {
-    this.model.set('_isDeviceSmall', device.screenSize === 'small');
-  }
-
-  setTitle() {
-    // Course config
-    const courseConfig = Adapt.course.get('_navigationTitle');
-
-    if (!courseConfig?._useCourseTitle) {
-      this.model.set('title', courseConfig.title);
-    } else {
-      // Use course title from course.json
-      this.model.set('title', Adapt.course.get('title'));
-
-      // The course title is already announced on course load as site <title>.
-      // Hide from screenreaders to avoid repetition.
-      this.$el.attr('aria-hidden', 'true');
-    }
-  }
-
-  hideForMobile() {
-    const _isDeviceSmall = this.model.get('_isDeviceSmall');
-
-    const courseConfig = Adapt.course.get('_navigationTitle');
-    const _hideForMobile = courseConfig._hideForMobile;
-
-    if (_isDeviceSmall && _hideForMobile) {
-      this.$el.addClass('u-display-none');
-    } else {
-      this.$el.removeClass('u-display-none');
-    }
-  }
 }
 
 export default NavigationTitleView;

js/adapt-navigationTitle.js

@@ -5,24 +5,29 @@ class NavigationTitle extends Backbone.Controller {
 
   initialize() {
     this.listenTo(Adapt, {
-      'menuView:postRender pageView:postRender': this.onPostRender
+      'contentObjectView:postRender': this.onContentObjectPostRender
     });
   }
 
   static get courseConfig() {
-    return Adapt.course.get('_navigationTitle');
+    const config = Adapt.course.get('_navigationTitle');
+    const title = (config._useCourseTitle)
+      ? Adapt.course.get('title')
+      : Adapt.course.get('_navigationTitle').title;
+    config.title = title;
+    return config;
   }
 
-  onPostRender(view) {
+  onContentObjectPostRender(view) {
     if (this.titleView) this.titleView.remove();
 
     const config = view.model.get('_navigationTitle');
     if (
-      (!NavigationTitle.courseConfig || !NavigationTitle.courseConfig._isEnabled) ||
+      (!NavigationTitle.courseConfig?._isEnabled) ||
       (config && (!config._isEnabled || config._isHiddenOnMenu))
     ) return;
 
-    const model = new Backbone.Model(config);
+    const model = new Backbone.Model(NavigationTitle.courseConfig);
     this.titleView = new NavigationTitleView({ model });
 
     // If 'navigation logo' is present in the navigation, insert title after it.

schema/contentobject.schema.json

@@ -8,7 +8,7 @@
     },
     "with": {
       "properties": {
-        "_navigationLogo": {
+        "_navigationTitle": {
           "type": "object",
           "title": "Navigation Title",
           "default": {},

templates/navigationTitle.jsx

@@ -1,19 +1,27 @@
 import React from 'react';
+import device from 'core/js/device';
 
 export default function NavigationTitle(props) {
   const {
-    title,
-    _useCourseTitle
+    _hideForMobile,
+    _useCourseTitle,
+    title
   } = props;
 
-  return (
+  const isVisible = !(_hideForMobile && !device.isScreenSizeMin('medium'));
 
-    <div
-      className='navigation-title__inner'
-      dangerouslySetInnerHTML={{ __html: title }}
-      aria-level={!_useCourseTitle ? 1 : null}
-      role='heading'
-    />
+  return (
+    <>
+      {isVisible &&
+      <div
+        className='navigation-title__inner'
+        dangerouslySetInnerHTML={{ __html: title }}
+        aria-level={!_useCourseTitle ? 1 : null}
+        aria-hidden={_useCourseTitle ? true : null}
+        role='heading'
+      />
+      }
+    </>
 
   );
 }