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
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:
Responses to your questions:
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);
});
