adaptlearning · oliverfoster · Oct 17, 2023 · Sep 8, 2023 · Sep 13, 2023 · Sep 19, 2023
diff --git a/README.md b/README.md
@@ -96,6 +96,28 @@ Label for the button that cancels the switch languages dialog.
 
 <div float align=right><a href="#top">Back to Top</a></div>
 
+### 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
+                          }
+                        }
+                      }
                     }
                   }
                 }