How to hide the Options: Adjust events and due dates in Content Copy

[trussellr]

Howdy!

We are trying to find a way (potentially either by CSS or Javascript) to hide the "Options: Adjust events and due dates" portion of the content copy in Canvas. We have had a handful of professors accidentally change their course's participation dates and I haven't been able to find an option in Canvas itself or a working edit just yet.

[chriscas]

Hi @trussellr ,

You can try the following javascript code, which I just quickly whipped up by modifying some code I had around from other projects.  This will disable the date adjust option for any kind of course imports.  If you need the same for the course copy area, I think it's going to be very similar code, just modifying a couple checks.  I'm going to tag @James here too so he might be able to just look at what i'm giving you to make sure it's not outrageously bad.  He helped me try to understand mutation observers (which I believe are needed for this) in the past, and even though I can get some that work, including this example, I never really know if I'm doing them correctly.  I don't know why I have such a hard time wrapping my head around how they are supposed to be coded.

There should now be an option to prevent teachers from modifying course dates, which I believe is also supposed to apply to imports, but to be honest we have always had issues dates being adjusted improperly form imports too. I actually wrote a python script that we now run every morning to go through every single course on our instance and make sure the dates are correct.

-Chris

if (/^\/courses\/[0-9]+\/content_migrations$/.test(window.location.pathname)) {
	function disableDateAdjust() {
		element=document.getElementById("dateAdjustCheckbox")
		if (typeof(element) != 'undefined' && element != null) {
			element.disabled=true;
		}
	}
	disableDateAdjust();
	var ImportObserver = new MutationObserver(function(mutations) { 
		mutations.forEach(function(mutation) {
			disableDateAdjust();
		});
	});
	ImportObserver.observe(document.getElementById("converter"), {
		childList: true
	}); 
}

[James · Accepted solution]

Chris ( @chriscas ), I'm not sure why you would need a mutation observer here as it has well defined class names and IDs (not that random crap that comes from using React).

If you don't want anyone to be able to set the due dates (including admins) and you don't care about the word options appearing there, even though there may not be any options to change, then adding this to your custom CSS should hide it.

form#migrationConverterContainer div.dateShift { display: none; }
form#copy_course_form div#date_shift { display: none; }

This takes care of the course import and the course copy functionality.

You could also combine those into one CSS rule if you like by separating the selectors with a comma.

form#migrationConverterContainer div.dateShift,
form#copy_course_form div#date_shift { display: none; }

[chriscas]

Thanks @James ,

i'm so used to doing modifications with javascript that i totally overlooked the simpler option of using CSS to hide the whole area.

I will say that when we do things like this in our instance, we usually just disable a button/checkmark and add some text in that area explaining to users why the option is disabled.  When we started out simpler just disabling or hiding things completely with no explanation, we got quite a few tickets submitted from faculty saying Canvas is broken, because they found the Instructure guide for topic X and it's not working that way for our instance. Just something to be aware of. for anyone going down the customization road like this.  I *think* in this case, a mutationobserver would be needed because at least in my testing the dropdown selector for the import type changes what's displayed below, and just doing a javascript modification once doesn't apply if the dropdown is changed later.  

-Chris

[James]

@chriscas 

Hiding things works for the majority of people, but since it really just makes and API call, a determined person could get around it. With that in mind, determine who you are trying to keep from using it. If you are okay with just disabling it for mouse users and letting keyboard users still use it, then you can use the pointer-events:none to disable a checkbox through CSS. You can use the ::after pseudo-class to add content.

form#migrationConverterContainer label[for="dateAdjustCheckbox"] {
  pointer-events: none;
  color: #ccc;
}
form#migrationConverterContainer label[for="dateAdjustCheckbox"]::after {
  color: #000;
  content: ": This option has been disabled by your local Canvas administrator. Contact Chris Casey for more information.";
}

That's just for the import content screen, you would need to do something similar for the copy course content screen.

Here's what it looks like. The checkbox is still there, you just can't click on it. Yes, you can still use the keyboard to select it, but how many people are going to do that in the first place and especially after seeing the note to contact their local admin?

If you needed to manipulate it through JavaScript, then yes, I would use a mutation observer.