diff --git a/README.md b/README.md
index ad8bfab..2352058 100644
--- a/README.md
+++ b/README.md
@@ -96,6 +96,28 @@ Label for the button that cancels the switch languages dialog.
+### Attributes
+
+Add to _course.json_ under _\_globals.\_extensions_.
+
+### \_languagePicker (object):
+The languagePicker object that contains values for `navigationBarLabel`, `languageSelector` and `_navTooltip` that contains `_isEnabled`, `text`.
+
+#### \navigationBarLabel (string):
+Label shown next to the language picker button when navigation bar labels are enabled. Defaults to Language picker.
+
+#### \languageSelector (string):
+Aria label that appears at the top of the drawer displayed when language picker button is clicked. Defaults to Language selector.
+
+#### \_navTooltip (object):
+The _navTooltip object that contains values for `_isEnabled` and `text`.
+
+#### \_isEnabled (boolean):
+Enables/disables tooltips for the language picker button in the navigation bar. The default value is `true`.
+
+#### \text (string):
+Text to be displayed in the tooltip when the user hovers over the language picker button in the navigation bar. Defaults to 'Language selector'
+
## Limitations
- If the [**Spoor**](https://github.com/adaptlearning/adapt-contrib-spoor) extension is disabled (or not installed), **Language Picker** will not remember the learner's language choice from the previous session.
- Switching languages during an [**Assessment**](https://github.com/adaptlearning/adapt-contrib-assessment) will reset assessment attempts.
@@ -109,4 +131,4 @@ If the [**Spoor**](https://github.com/adaptlearning/adapt-contrib-spoor) extensi
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-bookmarking/graphs/contributors)
**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/bower.json b/bower.json
index ed34910..48f89ec 100644
--- a/bower.json
+++ b/bower.json
@@ -5,7 +5,7 @@
"url": "git://github.com/adaptlearning/adapt-contrib-languagePicker.git"
},
"version": "5.3.0",
- "framework": ">=5.24.2",
+ "framework": ">=5.30.2",
"homepage": "https://github.com/adaptlearning/adapt-contrib-languagePicker",
"bugs": "https://github.com/adaptlearning/adapt-contrib-languagePicker/issues",
"extension": "languagePicker",
diff --git a/example.json b/example.json
index f93ea39..677c4e1 100644
--- a/example.json
+++ b/example.json
@@ -48,5 +48,13 @@
// to be added to the _extensions object in course.json
"_languagePicker": {
- "navigationBarLabel" : "Select course language"
+ "languageSelector": "Language selector",
+ "_navOrder": 0,
+ "_navTooltip": {
+ "_isEnabled": true,
+ "text": "Language selector"
+ },
+ "_showLabel": true,
+ "navigationBarLabel" : "Select course language",
+ "_drawerPosition": "auto"
}
diff --git a/js/adapt-languagePicker.js b/js/adapt-languagePicker.js
index 8c3b195..2ad0119 100644
--- a/js/adapt-languagePicker.js
+++ b/js/adapt-languagePicker.js
@@ -1,7 +1,9 @@
import Adapt from 'core/js/adapt';
import offlineStorage from 'core/js/offlineStorage';
+import navigation from 'core/js/navigation';
+import NavigationButtonModel from 'core/js/models/NavigationButtonModel';
import LanguagePickerView from './languagePickerView';
-import LanguagePickerNavView from './languagePickerNavView';
+import LanguagePickerNavigationButton from './languagePickerNavigationButton';
import LanguagePickerModel from './languagePickerModel';
class LanguagePicker extends Backbone.Controller {
@@ -71,24 +73,33 @@ class LanguagePicker extends Backbone.Controller {
setupNavigationView() {
/*
- * On the framework this isn't an issue, but courses built in the authoring tool before the ARIA label
- * was added will break unless the extension is removed then added again.
- */
- const courseGlobals = Adapt.course.get('_globals')._extensions;
- let navigationBarLabel = '';
- if (courseGlobals._languagePicker) {
- navigationBarLabel = courseGlobals._languagePicker.navigationBarLabel;
- }
-
- const languagePickerNavView = new LanguagePickerNavView({
- model: this.languagePickerModel,
- attributes: {
- 'aria-label': navigationBarLabel,
- 'aria-expanded': false
- }
+ * On the framework this isn't an issue, but courses built in the authoring tool before the ARIA label
+ * was added will break unless the extension is removed then added again.
+ */
+ const globalsConfig = Adapt.course.get('_globals')?._extensions?._languagePicker;
+ const {
+ _navOrder = 0,
+ _showLabel = true,
+ navigationBarLabel = '',
+ _drawerPosition = 'auto',
+ _navTooltip = {}
+ } = globalsConfig ?? {};
+ const model = new NavigationButtonModel({
+ _id: 'languagepicker',
+ _order: _navOrder,
+ _showLabel,
+ _classes: 'nav__languagepicker-btn languagepicker__nav-btn',
+ _iconClasses: this.languagePickerModel.get('_languagePickerIconClass') || 'icon-language-2',
+ _role: 'button',
+ ariaLabel: navigationBarLabel,
+ text: navigationBarLabel,
+ _drawerPosition,
+ _navTooltip
});
-
- languagePickerNavView.$el.appendTo('.nav__inner');
+ navigation.addButton(new LanguagePickerNavigationButton({
+ model: model,
+ drawerModel: this.languagePickerModel
+ }));
}
}
diff --git a/js/languagePickerNavView.js b/js/languagePickerNavView.js
index 266d5b3..be999ae 100644
--- a/js/languagePickerNavView.js
+++ b/js/languagePickerNavView.js
@@ -1,6 +1,7 @@
import Adapt from 'core/js/adapt';
import drawer from 'core/js/drawer';
import LanguagePickerDrawerView from './languagePickerDrawerView';
+import tooltips from 'core/js/tooltips';
export default class LanguagePickerNavView extends Backbone.View {
@@ -26,6 +27,11 @@ export default class LanguagePickerNavView extends Backbone.View {
remove: this.remove,
'drawer:closed': this.onClose
});
+
+ tooltips.register({
+ _id: 'languagePicker',
+ ...Adapt.course.get('_globals')?._extensions?._languagePicker?._navTooltip || {}
+ });
}
onClose() {
diff --git a/js/languagePickerNavigationButton.js b/js/languagePickerNavigationButton.js
new file mode 100644
index 0000000..c4d234d
--- /dev/null
+++ b/js/languagePickerNavigationButton.js
@@ -0,0 +1,46 @@
+import Adapt from 'core/js/adapt';
+import drawer from 'core/js/drawer';
+import NavigationButtonView from 'core/js/views/NavigationButtonView';
+import tooltips from 'core/js/tooltips';
+import LanguagePickerDrawerView from './languagePickerDrawerView';
+
+export default class LanguagePickerNavigationButton extends NavigationButtonView {
+
+ attributes() {
+ return {
+ ...super.attributes(),
+ 'data-tooltip-id': this.model.get('_id')
+ };
+ }
+
+ events() {
+ return {
+ click: 'onClick'
+ };
+ }
+
+ initialize(options) {
+ super.initialize(options);
+ this.drawerModel = options.drawerModel;
+ this.setupEventListeners();
+ tooltips.register({
+ _id: this.model.get('_id'),
+ ...this.model.get('_navTooltip')
+ });
+ }
+
+ setupEventListeners() {
+ this.listenTo(Adapt, {
+ remove: this.remove
+ });
+ }
+
+ static get template() {
+ return 'languagePickerNavigationButton.jsx';
+ }
+
+ onClick(event) {
+ drawer.openCustomView(new LanguagePickerDrawerView({ model: this.drawerModel }).$el, false, this.model.get('_drawerPosition'));
+ }
+
+}
diff --git a/package.json b/package.json
index ed34910..48f89ec 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"url": "git://github.com/adaptlearning/adapt-contrib-languagePicker.git"
},
"version": "5.3.0",
- "framework": ">=5.24.2",
+ "framework": ">=5.30.2",
"homepage": "https://github.com/adaptlearning/adapt-contrib-languagePicker",
"bugs": "https://github.com/adaptlearning/adapt-contrib-languagePicker/issues",
"extension": "languagePicker",
diff --git a/properties.schema b/properties.schema
index 17e17e5..7002146 100644
--- a/properties.schema
+++ b/properties.schema
@@ -4,21 +4,99 @@
"id": "http://jsonschema.net",
"required": false,
"globals": {
- "navigationBarLabel": {
+ "languageSelector": {
"type": "string",
"required": true,
- "default": "Select course language",
+ "default": "Language selector",
"inputType": "Text",
"validators": [],
"translatable": true
},
- "languageSelector": {
+ "_navOrder": {
+ "type": "number",
+ "required": true,
+ "title": "Navigation bar order",
+ "help": "Determines the order in which the button is displayed in the navigation bar. Negative numbers (e.g. -100) are left-aligned. Positive numbers (e.g. 100) are right-aligned.",
+ "default": 0,
+ "inputType": "Text",
+ "validators": []
+ },
+ "_navTooltip": {
+ "type": "object",
+ "title": "Navigation tooltip",
+ "properties": {
+ "_isEnabled": {
+ "type": "boolean",
+ "default": true,
+ "title": "Enable tooltip for navigation button",
+ "inputType": "Checkbox",
+ "validators": []
+ },
+ "text": {
+ "type": "string",
+ "title": "",
+ "default": "Select course language",
+ "help": "The tooltip text to display on hover.",
+ "inputType": "Text",
+ "validators": [],
+ "translatable": true
+ }
+ }
+ },
+ "_showLabel": {
+ "type": "boolean",
+ "required": true,
+ "default": true,
+ "title": "Enable navigation button label",
+ "inputType": "Checkbox",
+ "validators": [],
+ "help": "Determines whether a label is shown on the navigation bar button."
+ },
+ "navigationBarLabel": {
"type": "string",
"required": true,
- "default": "Language selector",
+ "default": "Select course language",
+ "title": "Navigation bar button label",
"inputType": "Text",
"validators": [],
"translatable": true
+ },
+ "_drawerPosition": {
+ "type": "string",
+ "required": true,
+ "default": "auto",
+ "title": "Drawer position",
+ "help": "Determines the starting position of the drawer to open.",
+ "inputType": {
+ "type": "Select",
+ "options": [
+ "auto",
+ "left",
+ "right"
+ ]
+ },
+ "validators": []
+ },
+ "_navTooltip": {
+ "type": "object",
+ "title": "Navigation tooltip",
+ "properties": {
+ "_isEnabled": {
+ "type": " boolean",
+ "title": "Enable tooltip for Language selector button",
+ "default": true,
+ "inputType": "Checkbox",
+ "validators": [],
+ "required": true
+ },
+ "text": {
+ "type": "string",
+ "title": "Tooltip text",
+ "default": "Language selector",
+ "inputType": "Text",
+ "required": true
+ }
+ }
}
},
"properties": {
diff --git a/schema/course.schema.json b/schema/course.schema.json
index f4921c7..5b0047c 100644
--- a/schema/course.schema.json
+++ b/schema/course.schema.json
@@ -21,21 +21,83 @@
"title": "Language Picker",
"default": {},
"properties": {
- "navigationBarLabel": {
+ "languageSelector": {
"type": "string",
- "title": "Navigation bar label",
- "default": "Select course language",
+ "title": "Language selector",
+ "default": "Language selector",
"_adapt": {
"translatable": true
}
},
- "languageSelector": {
+ "_navOrder": {
+ "type": "number",
+ "title": "Navigation bar order",
+ "description": "Determines the order in which the button is displayed in the navigation bar. Negative numbers (e.g. -100) are left-aligned. Positive numbers (e.g. 100) are right-aligned.",
+ "default": 0
+ },
+ "_navTooltip": {
+ "type": "object",
+ "title": "Navigation tooltip",
+ "properties": {
+ "_isEnabled": {
+ "type": "boolean",
+ "title": "Enable tooltip for navigation button",
+ "default": true
+ },
+ "text": {
+ "type": "string",
+ "title": "",
+ "default": "Select course language",
+ "_adapt": {
+ "translatable": true
+ }
+ }
+ }
+ },
+ "_showLabel": {
+ "type": "boolean",
+ "title": "Enable navigation button label",
+ "description": "Determines whether a label is shown on the navigation bar button.",
+ "default": true
+ },
+ "navigationBarLabel": {
"type": "string",
- "title": "Language selector",
- "default": "Language selector",
+ "title": "Navigation button label",
+ "description": "The tooltip text to display on hover.",
+ "default": "Select course language",
"_adapt": {
"translatable": true
}
+ },
+ "_drawerPosition": {
+ "type": "string",
+ "default": "auto",
+ "title": "Drawer position",
+ "description": "Determines the starting position of the drawer to open.",
+ "enum": [
+ "auto",
+ "left",
+ "right"
+ ]
+ },
+ "_navTooltip": {
+ "type": "object",
+ "title": "Navigation tooltip",
+ "properties": {
+ "_isEnabled": {
+ "type": "boolean",
+ "title": "Enable tooltip for language picker button",
+ "default": true
+ },
+ "text": {
+ "type": "string",
+ "title": "Tooltip text",
+ "default": "Language selector",
+ "_adapt": {
+ "translatable": true
+ }
+ }
+ }
}
}
}
diff --git a/templates/languagePickerNavigationButton.jsx b/templates/languagePickerNavigationButton.jsx
new file mode 100644
index 0000000..7ccd9f5
--- /dev/null
+++ b/templates/languagePickerNavigationButton.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { classes, compile } from 'core/js/reactHelpers';
+
+export default function LanguagePickerNavigationButton(props) {
+ const {
+ text,
+ _iconClasses
+ } = props;
+ return (
+ <>
+
+
+
+ );
+}