New: Allow visua11y to appear in drawer

example.json

@@ -1,6 +1,7 @@
 // course.json
 "_visua11y": {
   "_isEnabled": false,
+  "_location": "notify",
   "_shouldSavePreferences": true,
   "title": "Accessibility Controls",
   "body": "Use the controls below to customise your learning experience to your individual needs.",

js/Visua11yButtonView.js

@@ -1,6 +1,7 @@
 import Adapt from 'core/js/adapt';
 import Visua11ySettingsView from './Visua11ySettingsView';
 import notify from 'core/js/notify';
+import drawer from 'core/js/drawer';
 
 class AnimationsButtonView extends Backbone.View {
 
@@ -42,17 +43,21 @@ class AnimationsButtonView extends Backbone.View {
   onClick(event) {
     if (event && event.preventDefault) event.preventDefault();
     const config = Adapt.course.get('_visua11y');
-    Adapt.visua11y.settingsPrompt = notify.popup({
-      title: config.title,
-      body: config.body,
-      _view: new Visua11ySettingsView(),
-      _classes: 'is-visua11ysettings',
-      _showCloseButton: config._showCloseButton || false
-    });
+    if (config._location === 'drawer') {
+      drawer.triggerCustomView(new Visua11ySettingsView().$el, false, 'auto');
+    } else {
+      Adapt.visua11y.settingsPrompt = notify.popup({
+        title: config.title,
+        body: config.body,
+        _view: new Visua11ySettingsView(),
+        _classes: 'is-visua11ysettings',
+        _showCloseButton: config._showCloseButton || false
+      });
+      Adapt.visua11y.settingsPrompt.$el.on('click', this.onNotifyClicked);
+      this.listenTo(Adapt, 'notify:closed', this.onNotifyClosed);
+    }
     this.render();
-    Adapt.visua11y.settingsPrompt.$el.on('click', this.onNotifyClicked);
     Adapt.trigger('visua11y:opened');
-    this.listenTo(Adapt, 'notify:closed', this.onNotifyClosed);
   }
 
   onNotifyClicked(event) {

js/Visua11ySettingsView.js

@@ -7,7 +7,12 @@ import { templates } from 'core/js/reactHelpers';
 export default class Visua11ySettingsView extends Backbone.View {
 
   className() {
-    return 'visua11ysettings';
+    return [
+      'visua11ysettings',
+      Adapt.visua11y.config._location === 'drawer'
+        ? 'visua11ysettings-drawer'
+        : 'visua11ysettings-notify'
+    ].filter(Boolean).join(' ');
   }
 
   initialize() {

js/adapt-visua11y.js

@@ -7,6 +7,7 @@ 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';
 
 /**
  * Utility function for applying deep defaults
@@ -362,6 +363,14 @@ class Visua11y extends Backbone.Controller {
     $('body').hide().show(0);
   }
 
+  close() {
+    if (this.config._location === 'drawer') {
+      drawer.close();
+      return;
+    }
+    this.settingsPrompt?.closeNotify();
+  }
+
   reset() {
     this._colorProfileId = this.config._colorProfile._default;
     this._invert = this.config._invert._default;

less/visua11ySettings.less

@@ -4,7 +4,7 @@
   background-color: transparent;
 
   .notify__popup-inner {
-    max-width: @device-width-small;
+    max-width: @device-width-medium;
     margin: auto;
     background-color: @notify;
     padding: @item-padding (@item-padding / 2);
@@ -16,6 +16,8 @@
 // --------------------------------------------------
 .visua11ysettings {
 
+  color: white;
+
   &__description {
     padding-left: @item-padding / 2;
     padding-right: @item-padding / 2;
@@ -25,8 +27,11 @@
   &__group {
     padding: @item-padding / 2;
     margin-bottom: @item-padding;
-    background-color: darken(@notify, 5%);
     border-radius: 3px;
+
+    .visua11ysettings-notify & {
+      background-color: darken(@notify, 5%);
+    }
   }
 
   &__group-title {
@@ -73,6 +78,10 @@
     @media (min-width: @device-width-medium) {
       flex-direction: row;
     }
+
+    .visua11ysettings-drawer & {
+      flex-direction: column;
+    }
   }
 
   .colorprofileid {
@@ -98,6 +107,11 @@
         align-items: center;
         justify-content: space-between;
       }
+
+      .visua11ysettings-drawer & {
+        flex-direction: column;
+        align-items: start;
+      }
     }
 
     .visua11ysettings__item-title {

properties.schema

@@ -49,6 +49,20 @@
                   "inputType": "Checkbox",
                   "validators": []
                 },
+                "_location": {
+                  "type": "string",
+                  "required": true,
+                  "default": "notify",
+                  "title": "Open in notify or drawer",
+                  "validators": ["required"],
+                  "inputType": {
+                    "type": "Select",
+                    "options": [
+                    "notify",
+                    "drawer"
+                    ]
+                  }
+                },
                 "_shouldSavePreferences": {
                   "type": "boolean",
                   "required": false,

schema/course.schema.json

@@ -36,6 +36,16 @@
               "title": "Enable Visua11y",
               "default": false
             },
+            "_location": {
+              "type": "string",
+              "title": "Open in notify or drawer",
+              "default": "notify",
+              "enum": [
+                "notify",
+                "drawer"
+              ],
+              "_backboneForms": "Select"
+            },
             "_shouldSavePreferences": {
               "type": "boolean",
               "title": "Save user preferences?",

templates/Visua11ySettings.jsx

@@ -10,7 +10,7 @@ export default function Visua11ySettings(config) {
   }
 
   function onClose() {
-    visua11y.settingsPrompt.closeNotify();
+    visua11y.close();
   }
 
   function onChange(event) {