Fix: NavTitle display update, _isHiddenOnMenu support (fixes #12) (#13)

* NavTitle display update, _isHiddenOnMenu support

* Removed framework version

* Bug fix title showing on mobile

README.md

@@ -4,33 +4,42 @@
 
 ## Settings overview
 
-**Navigation Title** attributes include a text field for the title, an option to hide for mobile view, and an option to use the course title instead of custom text.
+**Navigation Title** attributes include a text field for the title, an option to hide for mobile view, and an option to use the course title instead of custom text. The title can be shown on the menu, on specific pages, or everywhere as default.
 
 <img src='https://user-images.githubusercontent.com/898168/210417005-3c2f0e9d-b1f0-4a7b-815c-33c3a6921965.jpg' width="500" alt="Screenshot">
 
 ## Attributes
 
 The following attributes are set within *course.json*.
 
-### **\_navigationTitle** (object):
+**\_navigationTitle** (object):
 The object that defines the content to render. It contains the following settings:
 
-### **\_isEnabled** (boolean):
+> **\_isEnabled** (boolean):
 Turns on and off the **Navigation Title** extension.
 
-### **\_hideForMobile** (boolean):
+> **\_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.
 
-### **\_useCourseTitle** (boolean):
+> **\_useCourseTitle** (boolean):
 Optional, use the course title as the navigation title. Will override anything in the `title` property of the `_navigationTitle` object.
 
-### **title** (string):
+> **title** (string):
 The title text to display.
 
+The following attributes are set within _contentObjects.json_.
+
+**\_navigationTitle** (object):
+The object that defines the content to render. It contains the following settings:
+
+> **\_isEnabled** (boolean):
+When `false`, hides the title on a specific page or sub menu. Default: `true`
+
 ----------------------------
-**Version number:**  1.0.0<br>
-**Framework versions:**  5.24.4+<br>
 **Author / maintainer:** CGKineo<br>
 **Accessibility support:** WAI AA<br>
 **RTL support:** Yes<br>
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera<br>
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari 14 for macOS/iOS/iPadOS, Opera<br>

example.json

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

js/NavigationTitleView.js

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

js/adapt-navigationTitle.js

@@ -4,16 +4,26 @@ import NavigationTitleView from './NavigationTitleView';
 class NavigationTitle extends Backbone.Controller {
 
   initialize() {
-    this.listenTo(Adapt, 'adapt:initialize', this.onDataReady);
+    this.listenTo(Adapt, {
+      'menuView:postRender pageView:postRender': this.onPostRender
+    });
   }
 
-  onDataReady() {
-    const config = Adapt.course.get('_navigationTitle');
-    if (!config || !config._isEnabled) return;
+  static get courseConfig() {
+    return Adapt.course.get('_navigationTitle');
+  }
 
-    this.titleView = new NavigationTitleView({
-      model: new Backbone.Model(config)
-    });
+  onPostRender(view) {
+    if (this.titleView) this.titleView.remove();
+
+    const config = view.model.get('_navigationTitle');
+    if (
+      (!NavigationTitle.courseConfig || !NavigationTitle.courseConfig._isEnabled) ||
+      (config && (!config._isEnabled || config._isHiddenOnMenu))
+    ) return;
+
+    const model = new Backbone.Model(config);
+    this.titleView = new NavigationTitleView({ model });
 
     // If 'navigation logo' is present in the navigation, insert title after it.
     // Otherwise, insert after 'back' button.

properties.schema

@@ -36,6 +36,15 @@
                   "validators": [],
                   "help": "Set to true to enable the 'Navigation Title' feature."
                 },
+                "_isHiddenOnMenu": {
+                  "type": "boolean",
+                  "required": false,
+                  "default": false,
+                  "title": "Hide the nav title on the menu",
+                  "inputType": "Checkbox",
+                  "validators": [],
+                  "help": ""
+                },
                 "_hideForMobile": {
                   "type": "boolean",
                   "required": false,
@@ -66,6 +75,27 @@
               }
             }
           }
+        },
+        "contentobject": {
+          "type": "object",
+          "properties": {
+            "_navigationTitle": {
+              "type": "object",
+              "required": false,
+              "legend": "Navigation Title",
+              "properties": {
+                "_isEnabled": {
+                  "type": "boolean",
+                  "required": false,
+                  "default": true,
+                  "title": "Show nav title on this page / sub menu",
+                  "inputType": "Checkbox",
+                  "validators": [],
+                  "help": ""
+                }
+              }
+            }
+          }
         }
       }
     }

schema/contentobject.schema.json

@@ -0,0 +1,27 @@
+{
+  "$anchor": "navigationTitle-contentobject",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "$patch": {
+    "source": {
+      "$ref": "contentobject"
+    },
+    "with": {
+      "properties": {
+        "_navigationLogo": {
+          "type": "object",
+          "title": "Navigation Title",
+          "default": {},
+          "required": [],
+          "properties": {
+            "_isEnabled": {
+              "type": "boolean",
+              "title": "Show nav title on this page / sub menu",
+              "default": true
+            }
+          }
+        }
+      }
+    }
+  }
+}

schema/course.schema.json

@@ -45,6 +45,11 @@
               "description": "Enable or disable the 'Navigation Title' feature",
               "default": true
             },
+            "_isHiddenOnMenu": {
+              "type": "boolean",
+              "title": "Hide the nav title on the menu",
+              "default": false
+            },
             "_hideForMobile": {
               "type": "boolean",
               "title": "Hide title for mobile view",