Fix: Add support for Navigation Button API (fixes #90 #92)

example.json

@@ -1,3 +1,15 @@
+// course.json
+"_extensions": {
+  "_visua11y": {
+    "_navOrder": 100,
+    "navLabel": "Accessibility",
+    "_navTooltip": {
+      "_isEnabled": true,
+      "text": "Visual accessibility settings"
+    }
+  }
+}
+
 // course.json
 "_visua11y": {
   "_isEnabled": false,

js/Visua11yButtonView.js → js/Visua11yNavigationButtonView.js

@@ -1,25 +1,26 @@
 import Adapt from 'core/js/adapt';
 import Visua11ySettingsView from './Visua11ySettingsView';
+import NavigationButtonView from 'core/js/views/NavigationButtonView';
 import notify from 'core/js/notify';
 import drawer from 'core/js/drawer';
 import tooltips from 'core/js/tooltips';
 
-class AnimationsButtonView extends Backbone.View {
+class Visua11yNavigationButtonView extends NavigationButtonView {
 
   attributes() {
+    const attributes = this.model.toJSON();
+
     return {
+      name: attributes._id,
+      role: attributes._role === 'button' ? undefined : attributes._role,
+      'data-order': attributes._order,
       'aria-label': Adapt.visua11y.config._button.navigationAriaLabel,
-      'data-order': (Adapt.course.get('_globals')?._extensions?._visua11y?._navOrder || 0),
       'data-tooltip-id': 'visua11y'
     };
   }
 
-  tagName() {
-    return 'button';
-  }
-
   className() {
-    return 'btn-icon nav__btn visua11y-btn';
+    return 'btn-icon nav__btn nav__visua11y-btn';
   }
 
   events() {
@@ -28,27 +29,25 @@ class AnimationsButtonView extends Backbone.View {
     };
   }
 
-  initialize() {
+  initialize(options) {
+    super.initialize(options);
     this.onNotifyClosed = this.onNotifyClosed.bind(this);
     this.onNotifyClicked = this.onNotifyClicked.bind(this);
     this.render();
-    
+
     tooltips.register({
       _id: 'visua11y',
       ...Adapt.course.get('_globals')?._extensions?._visua11y?._navTooltip || {}
     });
   }
 
-  render() {
-    const template = Handlebars.templates.visua11yButton;
-    const data = {
-      _globals: Adapt.course?.get('_globals')
-    };
-    this.$el.html(template(data));
+  static get template() {
+    return 'Visua11yNavigationButton.jsx';
   }
 
   onClick(event) {
     if (event && event.preventDefault) event.preventDefault();
+
     const config = Adapt.course.get('_visua11y');
     if (config._location === 'drawer') {
       drawer.triggerCustomView(new Visua11ySettingsView().$el, false, 'auto');
@@ -71,16 +70,18 @@ class AnimationsButtonView extends Backbone.View {
     const $target = $(event.target);
     const isChild = ($target.parents('.notify__popup-inner').length !== 0);
     if (isChild) return;
+
     Adapt.visua11y.settingsPrompt.closeNotify();
   }
 
   onNotifyClosed(notify) {
     if (notify !== Adapt.visua11y.settingsPrompt) return;
+
     Adapt.visua11y.settingsPrompt.$el.off('click', this.onNotifyClicked);
     Adapt.visua11y.settingsPrompt = null;
     this.stopListening(Adapt, 'notify:closed', this.onNotifyClosed);
   }
 
 }
 
-export default AnimationsButtonView;
+export default Visua11yNavigationButtonView;

js/adapt-visua11y.js

@@ -5,9 +5,12 @@ import CSSRule from './CSSRule';
 import Color from './Color';
 import DEFAULTS from './DEFAULTS';
 import { highContrast, invert, lowBrightness, profileFilter } from './ColorTransformations';
-import Visua11yButtonView from './Visua11yButtonView';
 import notify from 'core/js/notify';
 import drawer from 'core/js/drawer';
+import offlineStorage from 'core/js/offlineStorage';
+import Visua11yNavigationButtonView from './Visua11yNavigationButtonView';
+import navigation from 'core/js/navigation';
+import NavigationButtonModel from 'core/js/models/NavigationButtonModel';
 
 /**
  * Utility function for applying deep defaults
@@ -54,6 +57,10 @@ class Visua11y extends Backbone.Controller {
     return _deepDefaults((this._adaptStarted ? Adapt.course : Adapt.config).get('_visua11y') ?? {}, DEFAULTS);
   }
 
+  static get globalsConfig() {
+    return Adapt.course.get('_globals')?._extensions?._visua11y;
+  }
+
   get colorProfiles() {
     return Object.entries(this.config._colorProfiles).map(([_id, name]) => ({ _id, name }));
   }
@@ -273,7 +280,7 @@ class Visua11y extends Backbone.Controller {
       boolToInt(this._noBackgroundImages),
       parseInt(this._highContrastLuminanceThreshold)
     ];
-    Adapt.offlineStorage.set('v', Adapt.offlineStorage.serialize(data));
+    offlineStorage.set('v', offlineStorage.serialize(data));
   }
 
   restore() {
@@ -292,8 +299,8 @@ class Visua11y extends Backbone.Controller {
     };
     const serialized = (this.config._shouldSavePreferences === false)
       ? null
-      : Adapt.offlineStorage.get('v');
-    const data = serialized ? Adapt.offlineStorage.deserialize(serialized) : [];
+      : offlineStorage.get('v');
+    const data = serialized ? offlineStorage.deserialize(serialized) : [];
     this._colorProfileId = Object.keys(DEFAULTS._colorProfiles)[data[0] ?? Object.keys(DEFAULTS._colorProfiles).findIndex(k => k === this.config._colorProfile._default)];
     this._invert = intToBool(this.config._invert, data[1]);
     this._fontSize = intToLargeMediumSmall(this.config._fontSize, data[2]);
@@ -311,7 +318,24 @@ class Visua11y extends Backbone.Controller {
 
   setupNavigationButton() {
     if (!this.config?._isEnabled) return;
-    $('.nav__drawer-btn').after(new Visua11yButtonView().$el);
+
+    const {
+      _navOrder = 0,
+      _showLabel = true,
+      navLabel = ''
+    } = Visua11y.globalsConfig ?? {};
+
+    const model = new NavigationButtonModel({
+      _id: 'visua11y',
+      _order: _navOrder,
+      _showLabel,
+      _classes: 'nav__visua11y-btn',
+      _iconClasses: '',
+      _role: 'button',
+      text: navLabel
+    });
+
+    navigation.addButton(new Visua11yNavigationButtonView({ model }));
   }
 
   apply() {

less/buttons.less

@@ -1,4 +1,4 @@
-.visua11y-btn {
+.nav__visua11y-btn {
   .u-float-right;
   .icon {
     .icon-visua11y-accessibility;

templates/Visua11yNavigationButton.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { classes, compile } from 'core/js/reactHelpers';
+
+export default function Visua11yNavigationButton(props) {
+  const {
+    text,
+    _iconClasses
+  } = props;
+  return (
+    <>
+      <span
+        className={classes([
+          'icon',
+          _iconClasses
+        ])}
+        aria-hidden="true"
+      />
+      <span
+        className="nav__btn-label"
+        aria-hidden="true"
+        dangerouslySetInnerHTML={{ __html: compile(text, props) }}
+      />
+    </>
+  );
+}