It’s been a while since my last post, so I’ve probably lost track of some of my recent insights. I really need to be more disciplined.
The topic of today’s post is hacking Canvas. One of the great things about Canvas is the handles it provides for enterprising (foolhardy?) administrators who want to tweak the system. You don’t have to write a module or External Tool to get started, either, because Canvas lets you mount custom css and javascript at the level of the account or sub-account. This gives administrators a remarkable amount of power, perhaps even too much.
So, what can you do with custom js and css? Lots, but here are just a couple of concrete examples of ways people have changed, not just the look, but the behavior of Canvas. Each of these examples was inspired by a need that made it’s way into the Canvas Feature Request forum. The forum is probably worth a blog post of its own, but for now I will only note that there are a LOT of requests out there, and only a small number are adopted in an update cycle. For those who can’t wait, a small subset can be handled via js and/or css.
Request #1: Make the group space visually distinct from the course space
solution: add this code to your custom js file! http://jsfiddle.net/pYnWN/12
(kudos to Nathan Bierma)
Request #2: Unleash the Content Editor: Encourage RICH content & flexible layouts
solution: jQueryUI is already sitting behind every Canvas page. With jQuery it is easy to add layout elements like tabs and overlays to a page. Unfortunately, the so-called Rich Text Editor Canvas provides for editing pages strips out javascript. The solution is to add hooks into existing javascript objects with the clever use of carefully named classes, so that when your custom script ‘sees’ the classes, it automatically invokes the appropriate jQueryUI interface widget.
Request #3: Allow LTI redirect links to open in a new windows
solution: Once again, custom js to the rescue. As with the first example, this script looks for existing Canvas html elements to determine when new UI elements are needed. When the script sees an LTI iframe, it creates a show/hide button that collapses the nav menu, creating more space for the main frame. When an External Tool is launched from the nav menu, you get the show/hide, plus a button that will launch a new window with the same LTI data and destination.
https://apps.ats.udel.edu/canvas/collapse.js
As of this writing, only the show/hide button has been implemented on UD’s primary account, but I have the launch button in the test account, and the jQueryUI hooks in a sub-account. I’ll be pitching the group navigation options soon.