To Our Amazing Educators Everywhere,
Happy Teacher Appreciation Week!
Found this content helpful? Log in or sign up to leave a like!
Hello all,
I'm looking for help with some custom JavaScript on the Admin/Courses page. We have a large number of courses and we would like to add a direct link to "People" and "Files" as shown in the graphic below to streamline our workflow.
Any thoughts on how I could implement this in our custom JS theme file?
Thanks
v/r
MJH
1 Solution
Robert,
This is perfect! Already tested and implemented. My LMS and student services folks are incredibly pleased.
This is why I love this community.
v/r
MJH
This has been an amazing tweak to the system for the last 3 months, but we've now moved to the new Course and People search page. Our folks who grew used to the shortcuts from the Admin...Courses page now lament its loss.
I've looked at the code to see if I could implement a change in theme-level JS, but it now appears to be built with React (which makes my head hurt even more).
Would anybody have an idea how to recode the above to do something like the below? (While I like the icon mockup on line 1, my student services team would prefer the text-based mockups on line 2 so that they don't have to change their procedures).
Any thoughts?
Warnings and discouragement aside, I was an EMT once and know the benefit of bandage 
...and clinical review, to see if we can make improvements.
Also admitting, James's warnings pushed me to try different things.
Think I learned a few new tricks, and want to make a few adjustments to some other project's mutations.
No classes, just available DOM selectors.
Attempts at preventing multiple executions and memory leaks.
It should execute once, when the DOM is updated and the new links haven't been added.
I'd run it on test first with the console open, let me know if you see any errors.
@James , anyone, feel free to review/critique.
[code redacted so it doesn't get used, keep reading]
Alright, I'm done with converting it to a user script. I tried to duplicate your result without duplicating your code -- other than borrowing the selector that you used. I still haven't taken a serious look at your revised script.
Notes:
- It's a pure JavaScript solution, no jQuery.
- I had to work around it running on the wrong pages within the user script include metadata, but I had added a check within the script itself to make sure it was on the correct page.
- There's an object that contains the list of links to add. I'm relying on JavaScript to keep them in the same order they were created, even though it's an object and not an array. The use of an object allowed me to specify a link and a name -- so I can link to users but call it "People". That should help with internationalization if needed.
- I allow the user to customize the class they want to use to mark the block. I always try to name mine jj_ something so I don't have to worry about them conflicting with anything that Canvas might have.
- There's a block of user-specified CSS in there. This gets added to a stylesheet at the top to do all the styling. They can also remove it and supply external styling.
- I added an isRunning to avoid a race condition. I think that technically this shouldn't happen since JS is single threaded and can't finish adding something else to the page until my script is done, but I didn't want to risk it. It can be taken out if there is a provable no-race condition.
- I add the CSS, add the mutation observer, and then check the course list. Technically that means that adding the course list triggers the mutation observer, but it is cheap to check the list. I didn't want the checking of the course list to happen before the mutation observer got added just in case there was a condition where it checked the course, there weren't any there, and then mutation observer got added and so the links didn't get added. This shouldn't happen in normal circumstances and because of the way I'm checking the mutation observer, as soon as someone moused over the page it would have shown up.
- The checkCourses() function does the hard work. It gets called separately and then as the result of an observed mutation. It checks the length of those two arrays as indicated and if there are more courses without a supplemental list, then it processes them. It already has the list because it needed it to check the length.
- I used a div instead of a span so it would come down to the next line as a block element. Then I put an unordered list inside. Semantically, it is a list of items and should be marked up that, even if Canvas doesn't in many places. I used CSS markup to add the | separator before all of the items in the list except for the first one.
- The script should be pasteable into someone's global JavaScript without any modifications but I have not tested that. The metadata could be stripped out as it's just comments outside a user script.
Responses to your questions:
- I try not to borrow other people's code verbatim, but I'm writing for a different audience. The user script has the ability to require external resources, so I don't have to put them into my code. If I am borrowing ideas from someone, I typically rewrite them in a way that I understand and is consistent with my coding style.
- I don't mess with minimization, so I haven't dealt with the what is needed, what isn't. I do several things that aren't always necessary. I sometimes use longer, more descriptive variable names; store something to a variable when I don't have to; add semicolons to the end of a line even if it's not necessary; use JavaScript instead of jQuery; etc. I use jshint within Eclipse to warn -- this one is clean. Sometimes I go to one of the online JS beautifiers or lint checkers. They often complain about missing semicolons, so I include them. One of the things I don't do enough of is add comments, but I try to write up documentation when I release a Canvancement.
- As for user support, I do get some of that. Probably because the user scripts can be written by users without having to be an admin. That means that the masses can run mine while the select few can run the others. Those select few are more likely to know what's going on or be able to fix something if it goes wrong. That also increases the opportunity for things to go wrong or that you haven't thought of.
- Overall, I think there's not a of people using this. I had a Canvancement that added similar functionality to the admin > people page. It broke with the new interface, but I don't think anyone has said anything yet. I may be confusing my Canvancements, but the more opportunity that you have for people to use them, the more people that will need support.
- I try to over engineer things and pick a reasonable set of defaults so that people don't have to mess with it. Just plug it in and goes.
I want to share the code, but I don't want to release it on GitHub if you're willing to look at it and make comments. I haven't figured out how to do development branching on GitHub, so everything goes into the Master branch, which makes me think that people might think it's ready for use.
Besides, I need to look and see what you added to yours and see if there are any great ideas I want to include. Ultimately, we need to figure out what to do with it. It's really your baby, you did the hard work, but I think we should make a user script version available for people.
For now, I'll put it here and move on to other projects (filtering the Canvas Commons search data). I'm not getting much done for my classes this weekend, but I'm getting some code written, which is a lot more fun.
Note: The code that was here has been removed since there is now an updated and ready to use version. I will put an announcement in the Community when I can. For now, the code is posted on the Canvancement GitHub site: Admin Course Links
I prefix a lot of our internal code with ccsd or rc, but have felt weird signing code for the community. I guess I should get over that.
Yes, I do because it's less likely to clash with something that they may be using. I didn't want to preface everything with 'canvancement_', so 'jj_' seemed to work. It has nothing to do with ownership, it was more of a case of making sure I didn't pick something that was already used or might be used at some point. I guess we could go the React way and come up with class names like _w587Yz
and few less semicolons and var keywords.
Since my code was being reviewed, I decided to list the var's near the top of the function and save space by putting a comma between them. I almost never do that, even if I need a var declared outside a loop to avoid the warnings about declaring a variable within a loop (the scope with var is to the whole enclosure, but const and let are scoped to the block).
I ❤️ minifcation
What does a fallen-over ice cream cone mean?
I really really like yours, except for the coded CSS/style, because I'd probably push a mod like this into global. Makes complete sense for a user script. Don't think this particular one applies to us, no was has complained about this UI update yet.
Much of what I do is for other people and not something I'll use myself. It just feels good.
This was the first time I've tried, scratch that, managed to include CSS without reverting to a // @ grant statement in the header. I thought I'd try to see what it would take. I originally started to code it onto every element that needed it, then decided that it would be more extensible and allow for external styling if I did it the way I did.
I was wondering if you were expecting the race condition from the XHR, the mutation or your own functions?
I don't know that I'm expecting a race condition. That's the thing. I don't know if I need to be worried about it or not. I'm not a JavaScript programmer, or at least not formally educated in the ways. It just seemed that my script would get called a lot and I didn't want it to try and run while it was already running.
The reason I don't think it matters is because I saw a really good video on JavaScript that explained how it is single threaded and when you have a function, it gets added to a stack waiting it's time to run, but then once it runs, it doesn't leave that. Even when you have promises, they get added and when the promises resolve, they have to wait their turn in the stack before they finish. Of course, that video might have said that there was just a single loop handling the event thread. I found the video, here's the link: Philip Roberts: What the heck is the event loop anyway? | JSConf EU
So, I don't really think that there will be a race condition. However, I do think that my function will get called many times between the time that the mutations start happening and they're done -- it's going to called 20 times or so (I don't know exactly). The isRunning doesn't really keep it from doing the check, unless it's currently inside the block doing something, which it shouldn't be because the block is a single function.
Except .. that the buildLinks() function is a different function and so I don't know if that means a different thread, which might lead to a race condition.
The line 46 must be your line 46, because it doesn't make sense in my original code. But that doesn't even seem to be the place to add the console.log(). It seems like it should go at line 52 instead.
if (isRunning) {
console.log('Should have bought a squirrel'); // Add it here
return;
}Putting it where you put it would flag as a race when it was already running. I was more interested in preventing the race, so if it was already running and it got called again, then I had a race condition. Where you have it would make it run with every mutation observer check UNLESS there was a race condition, but you don't know how many mutations there are to know how many times it should be called to see if one was missing. By putting it in the if() block, then you don't want it to appear at all.
With mine, I don't get anything logged, but that's the problem with race conditions, it's very timing based, so reloading the page three times and seeing nothing doesn't mean much.
With yours, I see this:
But even if JavaScript is single threaded today, should we count on it always being that way? Web Workers introduced some kind of multithreading.
What I would love to do is say "Once you run this, don't run it again for 250 ms", but that gets into timeouts and what if someone clicked and got a new load within that 250 ms? I mean, the initial load for me is slow, so it's very conceivable I could have typed something in the search box before it was finished loading and that comes back really quickly after the first load. I also really, really, really don't like using setTimeout() --- it's very machine specific and almost always the wrong way to do something.
Canvas uses them in their code, by the way.
They also do things like I did with checking for the existence of any items that should be marked up but haven't been yet. I don't see them running it more than once, but they've also announced they're going to deprecate the .enhanceable_content class where they do that.
I recently saw a tweet along the lines of...
When the boss asks me how close I am to being finished, first line or last line I'm always 93%
(source: it's really hard to re-find things on twitter, even with google)
I don't think anything I write is ever complete, usually just done for now, often going back as I learn things.
DRY (Don't Repeat Yourself), often use of OOP/Classes, but also helps when things get larger than 1 script. For example, our JS directory for global modifications. Note, the util directory, these are used in many of the other files, but compiled and minified are 1 line, so we don't have to manage 1000+ lines of code. I'm not sure how others do it, some are probably just pasting scripts on top of each other.
It's also a reminder of what is and isn't supportable. SHEBENE, recently asked about putting a community hack in place in our Canvas. After review it, I said, that hack has more lines than our entire compiled set (this lands in dist-pretty). I told him we'll have to test and evaluate it, but that's a lot of code to support. Since it's also only necessary for a subset of users it would need to be hosted on AWS/S3, and included for the correct Roles. benefit > maintenance
What I did with the Syllabus, was definitely not extensible, it was a first try to give the user a config, without them having to code the HTML. Your example replacement looks good. The config at the top, is what I've been trying to do when bringing code to the Community. Aaron wrote the original ccsd-canvas/create-workroom.js code. Before adding it to Github I refactored it and placed the config at the top. Either way, the end user still probably has to fish out the URL paths they want to include and manually edit. We should focus on keeping them out of the code, until they want to. fruit at the bottom...sorry
For...in, I have either been using it so long and not to noticed the warning, didn't see it, or haven't experienced undesirable effects, or (d)
I have been trying use Object.keys() - JavaScript | MDN more. Here's something recognizable.
function buildLinks(base) {
var div = document.createElement('div');
div.classList.add(wrapperClass);
var ul = document.createElement('ul'), item, a;
Object.keys(linksToAdd).forEach(function(key) {
item = document.createElement('li'),
a = document.createElement('a')
a.href = base + '/' + key,
a.textContent = linksToAdd[key];
item.appendChild(a);
ul.appendChild(item);
});
div.append(ul);
return div;
}
Have you seen Template literals - JavaScript | MDN
not exactly sprintf(), but has some cool functionality. Template Literals | CSS-Tricks
var opts = {
'analytics' : 'Analytics',
'grades':'Grades',
'users':'Users',
'files':'Files',
};
links = Object.keys(opts).map((key) => `<a href="${key}">${opts[key]}</a>`).join(' | ')
console.log(links); // <a href="analytics">Analytics</a> | <a href="grades">Grades</a> | <a href="users">Users</a> | <a href="files">Files</a>
Object.keys(styles).forEach(function(key) {
sheet.insertRule(`.${wrapperClass} ${key} {${styles[key]}}`, sheet.cssRules.length);
});
