Merge pull request #2318 from drgrice1/themes-dir-cleanup

Clean up of the htdocs/themes directories.

conf/defaults.config

@@ -130,7 +130,6 @@ $courseURLs{feedbackFormURL} = "";
 ################################################################################
 
 $defaultTheme = "math4";
-$defaultThemeTemplate = "system";
 
 # The institution logo should be an image file in the theme's images folder
 $institutionLogo = 'maa_logo.svg';

conf/localOverrides.conf.dist

@@ -75,7 +75,6 @@ $mail{feedbackRecipients}    = [
 ################################################################################
 
 #$defaultTheme = "math4";
-#$defaultThemeTemplate = "system";
 
 # The institution logo should be an image file in the theme's images folder
 #$institutionLogo = 'my_school_logo.png';

htdocs/js/PGProblemEditor/pgproblemeditor.js

@@ -5,6 +5,9 @@
 	toastContainer.style.zIndex = 20;
 	document.body.append(toastContainer);
 
+	// Setup reference link tooltips.
+	document.querySelectorAll('.reference-link').forEach((el) => new bootstrap.Tooltip(el));
+
 	// Convenience method for showing messages in a Bootstrap toast.
 	const showMessage = (message, success = false) => {
 		if (!message) return;

htdocs/js/SendMail/sendmail.js

@@ -29,4 +29,9 @@
 			submit.click();
 		});
 	}
+
+	// Insertable macro toast
+	document.getElementById('insertable-macros-btn')?.addEventListener('click', () => {
+		new bootstrap.Toast(document.getElementById('insertable-macros'), { autohide: false }).show();
+	});
 })();

htdocs/themes/math4/math4.js → htdocs/js/System/system.js

@@ -83,15 +83,6 @@
 		.querySelectorAll('.student-nav-button')
 		.forEach((el) => new bootstrap.Tooltip(el, { trigger: 'hover', fallbackPlacements: [] }));
 
-	// Sets up problems to rescale the image accoring to attr height width and not native height width.
-	const rescaleImage = (_index, element) => {
-		if (element.height != element.naturalHeight || element.width != element.naturalWidth) {
-			element.height = (element.getBoundingClientRect().width * element.height) / element.width;
-		}
-	};
-	document.querySelectorAll('.problem-content img').forEach(rescaleImage);
-	window.addEventListener('resize', () => document.querySelectorAll('.problem-content img').forEach(rescaleImage));
-
 	// Homework sets editor config
 	// FIXME: These are really general purpose tooltips and not just in the homework sets editor.  So the class name
 	// should be chosen to better reflect this.
@@ -104,20 +95,6 @@
 		.querySelectorAll('.hardcopy-tooltip')
 		.forEach((el) => new bootstrap.Tooltip(el, { trigger: 'hover', fallbackPlacements: [], html: true }));
 
-	// PG Problem Editor
-	document.querySelectorAll('.reference-link').forEach((el) => new bootstrap.Tooltip(el));
-
-	// SendMail insertable macro toast
-	document.getElementById('insertable-macros-btn')?.addEventListener('click', () => {
-		new bootstrap.Toast(document.getElementById('insertable-macros'), { autohide: false }).show();
-	});
-
-	// For accessibility we need to change single answer aria labels to "answer" and not "answer 1"
-	// FIXME: The correct aria-label should be inserted by PG to begin with.  This hack will not work if there is more
-	// than one problem on the page.
-	const codeshards = document.querySelectorAll('.codeshard');
-	if (codeshards.length == 1) codeshards[0].setAttribute('aria-label', 'answer');
-
 	const messages = document.querySelectorAll('#message .alert-dismissible, #message_bottom .alert-dismissible');
 	if (messages.length) {
 		const dismissBtn = document.getElementById('dismiss-messages-btn');

htdocs/themes/math4-green/README

@@ -1,6 +1,8 @@
-This is an "alternative" colorization to math4.  If you want to provide 
-multiple themes to your users you should follow this as an example.  
+This is an "alternative" colorization to math4.  If you want to provide
+multiple themes to your users you should follow this as an example.
 
-Everything (except the override files) should be a link pointing back to 
-math4.  This will make it so that all your themes will automatically get 
-updates.  All of your changes should be in the override files.  
+Everything except for the math4-overrides.js, math4-overrides.css,
+_theme-colors.scss, and _theme-overrides.scss files should be links pointing
+back to the corresponding files in math4.  This will make it so that all your
+themes will automatically get updates.  All of your changes should be in the
+listed override files.

htdocs/themes/math4-red/README

@@ -0,0 +1,8 @@
+This is an "alternative" colorization to math4.  If you want to provide
+multiple themes to your users you should follow this as an example.
+
+Everything except for the math4-overrides.js, math4-overrides.css,
+_theme-colors.scss, and _theme-overrides.scss files should be links pointing
+back to the corresponding files in math4.  This will make it so that all your
+themes will automatically get updates.  All of your changes should be in the
+listed override files.

htdocs/themes/math4-yellow/README

@@ -1,6 +1,8 @@
-This is an "alternative" colorization to math4.  If you want to provide 
-multiple themes to your users you should follow this as an example.  
+This is an "alternative" colorization to math4.  If you want to provide
+multiple themes to your users you should follow this as an example.
 
-Everything (except the override files) should be a link pointing back to 
-math4.  This will make it so that all your themes will automatically get 
-updates.  All of your changes should be in the override files.  
+Everything except for the math4-overrides.js, math4-overrides.css,
+_theme-colors.scss, and _theme-overrides.scss files should be links pointing
+back to the corresponding files in math4.  This will make it so that all your
+themes will automatically get updates.  All of your changes should be in the
+listed override files.

htdocs/themes/math4/README

@@ -1,18 +1,18 @@
 This folder contains the files necessary for the math4 theme.  These files are
-tracked by git and any changes made to them will be overwritten when you 
-upgrade.  The two exceptions are math4-overrides.css and math4-overrides.js.  
+tracked by git and any changes made to them will be overwritten when you
+upgrade.  The two exceptions are math4-overrides.css and math4-overrides.js.
 
-These files do not need to be present, but if they are they will be included 
-in system.conf and will override the math4.css and math4.js theme.  They can 
-created by copying math4-overrides.css.dist and math4-overrides.js.dist.  This 
-is similar to how localOverrides.conf interacts with defaults.conf and 
-localOverrides.conf.dist.  In particular if you upgrade your server
-math4-overrides.js and math4-overrides.css  will not change, but their .dist 
-versions and the other math4 theme files may change. This might cause problems 
-until you merge the changes. 
+These files do not need to be present, but if they are they will be included in
+system.conf and can be used for general overrides.  They can created by copying
+math4-overrides.css.dist and math4-overrides.js.dist.  This is similar to how
+localOverrides.conf interacts with defaults.conf and localOverrides.conf.dist.
+In particular if you upgrade your server math4-overrides.js and
+math4-overrides.css  will not change, but their .dist versions and the other
+math4 theme files may change. This might cause problems until you merge the
+changes.
 
 If you want to customize math4 you should only change math4-overrides.css and
-math4-overrides.js.  Note: Because you can include arbitrary jQuery in 
-math4-overrides.js you can actually change pretty much anything, including 
-adding new html or changing existing html. 
+math4-overrides.js.  Note: Because you can include arbitrary JavaScript in
+math4-overrides.js you can actually change pretty much anything, including
+adding new html or changing existing html.
 

lib/FormatRenderedProblem.pm

@@ -71,7 +71,7 @@ sub formatRenderedProblem {
 		[ 'bootstrap.css',                                              1 ],
 		[ 'node_modules/jquery-ui-dist/jquery-ui.min.css',              0 ],
 		[ 'node_modules/@fortawesome/fontawesome-free/css/all.min.css', 0 ],
-		[ 'math4.css',                                                  1 ],
+		[ 'js/System/system.css',                                       0 ],
 		[ 'math4-overrides.css',                                        1 ],
 	);
 
@@ -108,7 +108,7 @@ sub formatRenderedProblem {
 		[ 'node_modules/mathjax/es5/tex-svg.js',                    0, { defer => undef, id => 'MathJax-script' } ],
 		[ 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', 0, { defer => undef } ],
 		[ 'js/Problem/problem.js',                                  0, { defer => undef } ],
-		[ 'math4.js',                                               1, { defer => undef } ],
+		[ 'js/System/system.js',                                    0, { defer => undef } ],
 		[ 'math4-overrides.js',                                     1, { defer => undef } ]
 	);
 

lib/Mojolicious/WeBWorK.pm

@@ -81,9 +81,6 @@ sub startup ($app) {
 	# url_for_asset controller method.
 	unshift(@{ $app->static->paths }, $webwork_htdocs_dir);
 
-	# Add the themes directory to the template search paths.
-	push(@{ $app->renderer->paths }, $ce->{webworkDirs}{themes});
-
 	# Setup the Minion job queue. Make sure that any task added here is represented in the TASK_NAMES hash in
 	# WeBWorK::ContentGenerator::Instructor::JobManager.
 	$app->plugin(Minion => { $ce->{job_queue}{backend} => $ce->{job_queue}{database_dsn} });

lib/WeBWorK/ContentGenerator.pm

@@ -437,43 +437,13 @@ Defined in this package.
 
 Print the content of the generated page.
 
-This renders a Mojo::Template.
-
-The defaultThemeTemplate in the course environment is used for the page layout.
-If that is not defined, the default "system" template, is used. The location of
-the template is looked up in the course environment.
+This renders the Mojo::Template corresponding to the called ContentGenerator sub-package.
 
 =cut
 
 sub content ($c) {
 	my $ce = $c->ce;
-
-	my $theme = $c->param('theme') || $ce->{defaultTheme};
-	$theme = $ce->{defaultTheme} if $theme =~ m!(?:^|/)\.\.(?:/|$)!;
-
-	my $layout = $ce->{defaultThemeTemplate} // 'system';
-
-	my $layoutName = "$theme/$layout";
-
-	# Attempt to prevent disaster when the theme layout file is missing.
-	unless (-r "$ce->{webworkDirs}{themes}/$theme/$layout.html.ep") {
-		if (-r "$ce->{webworkDirs}{themes}/math4/$layout.html.ep") {
-			$layoutName = "math4/$layout";
-			$theme      = HTML::Entities::encode_entities($theme);
-			warn "Theme $theme is not one of the available themes. "
-				. 'Please check the theme configuration '
-				. 'in the files localOverrides.conf, course.conf and '
-				. "simple.conf and on the course configuration page.\n";
-		} else {
-			$theme = HTML::Entities::encode_entities($theme);
-			die "Neither the theme $theme nor the defaultTheme math4 are available.  "
-				. 'Please notify your site administrator that the structure of the '
-				. 'themes directory needs attention.';
-
-		}
-	}
-
-	return $c->render(template => ((ref($c) =~ s/^WeBWorK:://r) =~ s/::/\//gr), layout => $layoutName);
+	return $c->render(template => ((ref($c) =~ s/^WeBWorK:://r) =~ s/::/\//gr), layout => 'system');
 }
 
 =back

lib/WeBWorK/Utils.pm

@@ -2021,13 +2021,13 @@ sub getThirdPartyAssetURL {
 sub getAssetURL {
 	my ($ce, $file, $isThemeFile) = @_;
 
-	# Load the static files list generated by `npm install` the first time this method is called.
+	# Load the static files list generated by `npm ci` the first time this method is called.
 	unless ($staticWWAssets) {
 		my $staticAssetsList = "$ce->{webworkDirs}{htdocs}/static-assets.json";
 		$staticWWAssets = readJSON($staticAssetsList);
 		unless ($staticWWAssets) {
 			warn "ERROR: '$staticAssetsList' not found or not readable!\n"
-				. "You may need to run 'npm install' from '$ce->{webworkDirs}{htdocs}'.";
+				. "You may need to run 'npm ci' from '$ce->{webworkDirs}{htdocs}'.";
 			$staticWWAssets = {};
 		}
 	}
@@ -2037,7 +2037,7 @@ sub getAssetURL {
 		$staticPGAssets = readJSON($staticAssetsList);
 		unless ($staticPGAssets) {
 			warn "ERROR: '$staticAssetsList' not found or not readable!\n"
-				. "You may need to run 'npm install' from '$ce->{pg_dir}/htdocs'.";
+				. "You may need to run 'npm ci' from '$ce->{pg_dir}/htdocs'.";
 			$staticPGAssets = {};
 		}
 	}

templates/ContentGenerator/Achievements.html.ep

@@ -1,7 +1,7 @@
 % use WeBWorK::Utils qw(getAssetURL);
 %
 % content_for css => begin
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'achievements.css' }) =%>
+	<%= stylesheet getAssetURL($ce, 'js/Achievements/achievements.css') =%>
 % end
 %
 % content_for js => begin

templates/ContentGenerator/GatewayQuiz.html.ep

@@ -4,8 +4,8 @@
 % use WeBWorK::AchievementEvaluator qw(checkForAchievements);
 %
 % content_for css => begin
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'achievements.css' }) =%>
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'gateway.css' }) =%>
+	<%= stylesheet getAssetURL($ce, 'js/Achievements/achievements.css') =%>
+	<%= stylesheet getAssetURL($ce, 'js/GatewayQuiz/gateway.css') =%>
 	% # Output css for jquery-ui for problems to use.
 	<%= stylesheet getAssetURL($ce, 'node_modules/jquery-ui-dist/jquery-ui.min.css') =%>
 	%

templates/ContentGenerator/Problem.html.ep

@@ -4,7 +4,7 @@
 	% # Output css for jquery-ui for problems to use.
 	<%= stylesheet getAssetURL($ce, 'node_modules/jquery-ui-dist/jquery-ui.min.css') =%>
 	%
-	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'achievements.css' }) =%>
+	<%= stylesheet getAssetURL($ce, 'js/Achievements/achievements.css') =%>
 	%
 	% # Add CSS files requested by problems via ADD_CSS_FILE() in the PG file
 	% # or via a setting of $ce->{pg}{specialPGEnvironmentVars}{extra_css_files}

htdocs/themes/math4/system.html.ep → templates/layouts/system.html.ep

@@ -28,7 +28,7 @@
 	type => 'webwork', name => 'htdocs',
 	file => 'node_modules/@fortawesome/fontawesome-free/css/all.min.css'
 }) =%>
-<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'math4.css' }) =%>
+<%= stylesheet $c->url({ type => 'webwork', name => 'htdocs', file => 'js/System/system.css' }) =%>
 <%= content 'css' =%>
 % if ($c->exists_theme_file('math4-overrides.css')) {
 	<%= stylesheet $c->url({ type => 'webwork', name => 'theme', file => 'math4-overrides.css' }) =%>
@@ -47,7 +47,7 @@
 	type => 'webwork', name => 'htdocs',
 	file => 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
 	}), defer => undef =%>
-<%= javascript $c->url({ type => 'webwork', name => 'theme', file => 'math4.js' }), defer => undef =%>
+<%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'js/System/system.js' }), defer => undef =%>
 <%= content 'js' =%>
 % if ($c->exists_theme_file('math4-overrides.js')) {
 	<%= javascript $c->url({ type => 'webwork', name => 'theme', file => 'math4-overrides.js' }), defer => undef =%>