From a221b7ba1ef09605cd1ba1aa2c7cff4e7ec42bd1 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 26 Jan 2024 16:46:39 +0000 Subject: [PATCH] NavTitle display update, _isHiddenOnMenu support --- README.md | 26 ++++++++++++++++++-------- example.json | 19 +++++++++++++------ js/NavigationTitleView.js | 29 ++++++++++++++++++----------- js/adapt-navigationTitle.js | 24 +++++++++++++++++------- properties.schema | 30 ++++++++++++++++++++++++++++++ schema/contentobject.schema.json | 27 +++++++++++++++++++++++++++ schema/course.schema.json | 5 +++++ 7 files changed, 128 insertions(+), 32 deletions(-) create mode 100644 schema/contentobject.schema.json diff --git a/README.md b/README.md index be2fc2c..7dff45e 100755 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ## 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. Screenshot @@ -12,25 +12,35 @@ 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
**Framework versions:** 5.24.4+
**Author / maintainer:** CGKineo
**Accessibility support:** WAI AA
**RTL support:** Yes
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari 14 for macOS/iOS/iPadOS, Opera
diff --git a/example.json b/example.json index 731b58f..832889f 100755 --- a/example.json +++ b/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 } diff --git a/js/NavigationTitleView.js b/js/NavigationTitleView.js index ff65500..1c472e6 100755 --- a/js/NavigationTitleView.js +++ b/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,24 +27,31 @@ class NavigationTitleView extends Backbone.View { changed() { this.setIsDeviceSmall(); + this.setTitle(); this.hideForMobile(); ReactDOM.render(, 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'); + // if (!courseConfig?.title || !courseConfig?._useCourseTitle) return; - // The course title is already announced on course load as site . - // 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() { diff --git a/js/adapt-navigationTitle.js b/js/adapt-navigationTitle.js index 57c1779..79586dc 100755 --- a/js/adapt-navigationTitle.js +++ b/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. diff --git a/properties.schema b/properties.schema index 8a1912a..ae195ef 100755 --- a/properties.schema +++ b/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": "" + } + } + } + } } } } diff --git a/schema/contentobject.schema.json b/schema/contentobject.schema.json new file mode 100644 index 0000000..32c3ad5 --- /dev/null +++ b/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 + } + } + } + } + } + } +} diff --git a/schema/course.schema.json b/schema/course.schema.json index 0f1156a..79f6197 100644 --- a/schema/course.schema.json +++ b/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",