canvas-where-am-I

Archived

This repository can now be found here https://github.com/oxctl/canvas-where-am-I

---

Theme .js and .css to add within course navigation to Instructure Canvas on the web. Because the Canvas student app does not support ajax calls, it will not work on the student app. Does the following:

Add Modules sub-menu

• Modules sub-menu item takes you to Modules page but hides other Modules
• For Pages and other items that are launched via the Modules page, the appropriate Module will be highlighted in the list below Modules (note that there is a switch: allowMultilineModuleTitles to specify whether to allow Module titles to wrap)
• Modules takes you to normal Modules view (unless it is the Home page)

Add tiles at top of Modules tool (ONLY if Modules is set as home page):

• Tiles are generated by calling the Canvas api
• Added a drop-down arrow which gives you a quick link to the Module item (page, discussion, etc) - NOTE: only if showItemLinks==1
• Clicking the tile anywhere except the drop-down arrow takes you to the appropriate part of the Modules page

Add progress bar below content (between Previous and Next buttons) as either:

• icon buttons for each item in a Module, linking to that item - rollover to see what that item is
• if insufficient space for buttonms, shows rectangle for each page, indicating position through Module. Tooltip shows title of item.

Copy Previous and Next buttons from bottom of page to top (** Code curently comented out **)

• currently not working on every content type - see notes in code

Installation

You'll need admin rights in a subaccount to be able to upload the canvas-where-am-I.css and canvas-where-am-I.js files into a Theme - see: https://community.canvaslms.com/docs/DOC-10862-4214724282 NOTE: Please read the 'Custom File Risks' section of the Canvas docs on theming to make sure you understand what you are doing

1. Look at the various 'Configurable variables' at the top of the canvas-where-am-I.js - they are commented - and adjust as appropriate
2. Upload the canvas-where-am-I.css and canvas-where-am-I.js into the CSS and JavaScript File boxes for the Canvas desktop application only (it will not work on the student app).
3. If you would like your Home page to display the tiles for each Module, set the Modules page as your Home page.

**NOTE: We recommend uploading the minified versions of canvas-where-am-I.css and canvas-where-am-I.js, to minify them run the command 'npm run minify', the files will be named canvas-where-am-I.min.css and canvas-where-am-I.min.js.

Contributing

I would be grateful for any help you can give with this. Some of the more obvious enhancements are in the 'Issues' for this repository. As well as these issues, there are some TODOs at the top of canvas-where-am-I.js.

Development

If you are wanting to work on this script there are some supporting files that make development faster. To set this up you first need to install npm and mkcert. Once installed run the initial setup of mkcert:

mkcert -install

This will install a trusted root certificate which will mean your browser can load files from a local webserver over HTTPS without forcing you to accept the untrusted certificate first.

The next step is to generate a certificate to use with:

mkcert localhost

Then install all the npm dependencies with:

npm install

Then startup the local webserver that will response to requests.

npm run start

There is then a file, development.js that should be added to your theme as a JavaScript file which will dynamically add JS/CSS from your local webserver to Canvas.

Problems

Please report these as Issues and I will try and sort them out as soon as possible

Testing

To get lots more debugging information when doing tests run with the DEBUG environmental variable set:

DEBUG="puppeteer:*" jest

We were having problems with clicking on elements before the DOM has had it's jQuery handlers attached and although there is code to handle these early clicks they don't handle some element types. The fix of just waiting for jQuery to add handlers is good enough although not ideal.

_earlyClick is the function handling this:

https://github.com/instructure/canvas-lms/blob/master/app/views/layouts/_head.html.erb https://github.com/instructure/canvas-lms/blob/master/public/javascripts/instructure.js

It would be useful if there was an event generated when Canvas had set it's page up correctly. It doesn't look like there's an object we can watch for changes.

Fixing the Mac OS warning on Chrome

puppeteer/puppeteer#4752 (comment)

Timing on tests

I am getting some stalls of just over 60 seconds when using puppeteer, Chrome appears to retry so just upping the test timeout appears to cover these cases.

I've also had the expect(page).toFill('selector', 'value') not work reliably, sometimes it enters the values, sometimes it only types some of them. Slowing down the whole script was the simple way to fix this issue.

Caveat

This code relies heavily on the ids and classes of various elements in Canvas. As a result it is likley to break when Instructure make changes to the Canvas UI. I hope I am not being naive in thinking that these should be fairly simple to fix when necessary, particularly with help from others in the lovely Canvas community :)