From 55aede80330ed0925f141188df568cecfffd1af0 Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Fri, 19 Jan 2024 07:01:01 -0600 Subject: [PATCH] Clean up of the htdocs/themes directories. Move gateway.scss and achievements.scss into htdocs/js subfolders. Rename the math4.js file to htdocs/js/System/system.js. Rename the math4.scss file to htdocs/js/System/system.scss. These files do not belong in the theme directories and should not be considered theme-able. Where possible, the page specific code in the math4.js (now system.js) file has been moved into the page specific JavaScript file for that page. The aria label hack that was in math4.js has been removed. It is clear that is not doing the correct thing, and it is probably less of a problem to have an aria label that reads "answer 1" even when there are no other answers than the numerous cases that it is changing aria labels to just "answer" when it shouldn't. One case is if there is only one text answer and there are other answers (radio buttons, checkboxes, etc) on the page. In this case the "answer 1" is changed to "answer" even when there is more than one answer on the page. Also in gateway quizzes the "problem n" prefix is removed if there is only one problem on the page, and it shouldn't be. Aria labels in general need to be rethought, but this JavaScript hack is just incorrect. Update the README files in the themes directories a bit. More could be done here to give better directions on how to customize themes. The name of the htdocs/js directory really needs to be changed. It is really the public "assets" location, and not just JavaScript. The htdocs/css directory should be removed as well. Also change "npm install" to "npm ci" in the warnings that are issued if the `static-assets.json` files are not found. --- .../Achievements}/achievements.scss | 0 .../math4 => js/GatewayQuiz}/gateway.scss | 0 htdocs/js/PGProblemEditor/pgproblemeditor.js | 3 +++ htdocs/js/SendMail/sendmail.js | 5 ++++ .../math4/math4.js => js/System/system.js} | 23 ---------------- .../math4.scss => js/System/system.scss} | 0 htdocs/themes/math4-green/README | 12 +++++---- htdocs/themes/math4-green/achievements.scss | 1 - htdocs/themes/math4-green/gateway.scss | 1 - htdocs/themes/math4-green/math4.js | 1 - htdocs/themes/math4-green/math4.scss | 1 - htdocs/themes/math4-red/README | 9 ++++++- htdocs/themes/math4-red/achievements.scss | 1 - htdocs/themes/math4-red/gateway.scss | 1 - htdocs/themes/math4-red/math4.js | 1 - htdocs/themes/math4-red/math4.scss | 1 - htdocs/themes/math4-yellow/README | 12 +++++---- htdocs/themes/math4-yellow/achievements.scss | 1 - htdocs/themes/math4-yellow/gateway.scss | 1 - htdocs/themes/math4-yellow/math4.js | 1 - htdocs/themes/math4-yellow/math4.scss | 1 - htdocs/themes/math4/README | 26 +++++++++---------- htdocs/themes/math4/system.html.ep | 4 +-- lib/FormatRenderedProblem.pm | 4 +-- lib/WeBWorK/Utils.pm | 6 ++--- .../ContentGenerator/Achievements.html.ep | 2 +- .../ContentGenerator/GatewayQuiz.html.ep | 4 +-- templates/ContentGenerator/Problem.html.ep | 2 +- 28 files changed, 54 insertions(+), 70 deletions(-) rename htdocs/{themes/math4 => js/Achievements}/achievements.scss (100%) rename htdocs/{themes/math4 => js/GatewayQuiz}/gateway.scss (100%) rename htdocs/{themes/math4/math4.js => js/System/system.js} (80%) rename htdocs/{themes/math4/math4.scss => js/System/system.scss} (100%) delete mode 120000 htdocs/themes/math4-green/achievements.scss delete mode 120000 htdocs/themes/math4-green/gateway.scss delete mode 120000 htdocs/themes/math4-green/math4.js delete mode 120000 htdocs/themes/math4-green/math4.scss mode change 120000 => 100644 htdocs/themes/math4-red/README delete mode 120000 htdocs/themes/math4-red/achievements.scss delete mode 120000 htdocs/themes/math4-red/gateway.scss delete mode 120000 htdocs/themes/math4-red/math4.js delete mode 120000 htdocs/themes/math4-red/math4.scss delete mode 120000 htdocs/themes/math4-yellow/achievements.scss delete mode 120000 htdocs/themes/math4-yellow/gateway.scss delete mode 120000 htdocs/themes/math4-yellow/math4.js delete mode 120000 htdocs/themes/math4-yellow/math4.scss diff --git a/htdocs/themes/math4/achievements.scss b/htdocs/js/Achievements/achievements.scss similarity index 100% rename from htdocs/themes/math4/achievements.scss rename to htdocs/js/Achievements/achievements.scss diff --git a/htdocs/themes/math4/gateway.scss b/htdocs/js/GatewayQuiz/gateway.scss similarity index 100% rename from htdocs/themes/math4/gateway.scss rename to htdocs/js/GatewayQuiz/gateway.scss diff --git a/htdocs/js/PGProblemEditor/pgproblemeditor.js b/htdocs/js/PGProblemEditor/pgproblemeditor.js index 144d149e59..b1baddd513 100644 --- a/htdocs/js/PGProblemEditor/pgproblemeditor.js +++ b/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; diff --git a/htdocs/js/SendMail/sendmail.js b/htdocs/js/SendMail/sendmail.js index 2e6472e4c1..c86017a870 100644 --- a/htdocs/js/SendMail/sendmail.js +++ b/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(); + }); })(); diff --git a/htdocs/themes/math4/math4.js b/htdocs/js/System/system.js similarity index 80% rename from htdocs/themes/math4/math4.js rename to htdocs/js/System/system.js index 4a29c2ac2a..09148d58bb 100644 --- a/htdocs/themes/math4/math4.js +++ b/htdocs/js/System/system.js @@ -80,15 +80,6 @@ (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. @@ -101,20 +92,6 @@ (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'); diff --git a/htdocs/themes/math4/math4.scss b/htdocs/js/System/system.scss similarity index 100% rename from htdocs/themes/math4/math4.scss rename to htdocs/js/System/system.scss diff --git a/htdocs/themes/math4-green/README b/htdocs/themes/math4-green/README index 8f17e22ef8..e607958755 100644 --- a/htdocs/themes/math4-green/README +++ b/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. \ No newline at end of file +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. diff --git a/htdocs/themes/math4-green/achievements.scss b/htdocs/themes/math4-green/achievements.scss deleted file mode 120000 index 29f5d3e73d..0000000000 --- a/htdocs/themes/math4-green/achievements.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/achievements.scss \ No newline at end of file diff --git a/htdocs/themes/math4-green/gateway.scss b/htdocs/themes/math4-green/gateway.scss deleted file mode 120000 index 6b9b170384..0000000000 --- a/htdocs/themes/math4-green/gateway.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/gateway.scss \ No newline at end of file diff --git a/htdocs/themes/math4-green/math4.js b/htdocs/themes/math4-green/math4.js deleted file mode 120000 index e59cda599c..0000000000 --- a/htdocs/themes/math4-green/math4.js +++ /dev/null @@ -1 +0,0 @@ -../math4/math4.js \ No newline at end of file diff --git a/htdocs/themes/math4-green/math4.scss b/htdocs/themes/math4-green/math4.scss deleted file mode 120000 index 73e7781e4e..0000000000 --- a/htdocs/themes/math4-green/math4.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/math4.scss \ No newline at end of file diff --git a/htdocs/themes/math4-red/README b/htdocs/themes/math4-red/README deleted file mode 120000 index 61cc3df62f..0000000000 --- a/htdocs/themes/math4-red/README +++ /dev/null @@ -1 +0,0 @@ -../math4/README \ No newline at end of file diff --git a/htdocs/themes/math4-red/README b/htdocs/themes/math4-red/README new file mode 100644 index 0000000000..e607958755 --- /dev/null +++ b/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. diff --git a/htdocs/themes/math4-red/achievements.scss b/htdocs/themes/math4-red/achievements.scss deleted file mode 120000 index 29f5d3e73d..0000000000 --- a/htdocs/themes/math4-red/achievements.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/achievements.scss \ No newline at end of file diff --git a/htdocs/themes/math4-red/gateway.scss b/htdocs/themes/math4-red/gateway.scss deleted file mode 120000 index 6b9b170384..0000000000 --- a/htdocs/themes/math4-red/gateway.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/gateway.scss \ No newline at end of file diff --git a/htdocs/themes/math4-red/math4.js b/htdocs/themes/math4-red/math4.js deleted file mode 120000 index e59cda599c..0000000000 --- a/htdocs/themes/math4-red/math4.js +++ /dev/null @@ -1 +0,0 @@ -../math4/math4.js \ No newline at end of file diff --git a/htdocs/themes/math4-red/math4.scss b/htdocs/themes/math4-red/math4.scss deleted file mode 120000 index 73e7781e4e..0000000000 --- a/htdocs/themes/math4-red/math4.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/math4.scss \ No newline at end of file diff --git a/htdocs/themes/math4-yellow/README b/htdocs/themes/math4-yellow/README index 8f17e22ef8..e607958755 100644 --- a/htdocs/themes/math4-yellow/README +++ b/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. \ No newline at end of file +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. diff --git a/htdocs/themes/math4-yellow/achievements.scss b/htdocs/themes/math4-yellow/achievements.scss deleted file mode 120000 index 29f5d3e73d..0000000000 --- a/htdocs/themes/math4-yellow/achievements.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/achievements.scss \ No newline at end of file diff --git a/htdocs/themes/math4-yellow/gateway.scss b/htdocs/themes/math4-yellow/gateway.scss deleted file mode 120000 index 6b9b170384..0000000000 --- a/htdocs/themes/math4-yellow/gateway.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/gateway.scss \ No newline at end of file diff --git a/htdocs/themes/math4-yellow/math4.js b/htdocs/themes/math4-yellow/math4.js deleted file mode 120000 index e59cda599c..0000000000 --- a/htdocs/themes/math4-yellow/math4.js +++ /dev/null @@ -1 +0,0 @@ -../math4/math4.js \ No newline at end of file diff --git a/htdocs/themes/math4-yellow/math4.scss b/htdocs/themes/math4-yellow/math4.scss deleted file mode 120000 index 73e7781e4e..0000000000 --- a/htdocs/themes/math4-yellow/math4.scss +++ /dev/null @@ -1 +0,0 @@ -../math4/math4.scss \ No newline at end of file diff --git a/htdocs/themes/math4/README b/htdocs/themes/math4/README index 29374528d0..0b92a6b6d6 100644 --- a/htdocs/themes/math4/README +++ b/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. diff --git a/htdocs/themes/math4/system.html.ep b/htdocs/themes/math4/system.html.ep index 7720f30c13..abcfacf25f 100644 --- a/htdocs/themes/math4/system.html.ep +++ b/htdocs/themes/math4/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 =%> diff --git a/lib/FormatRenderedProblem.pm b/lib/FormatRenderedProblem.pm index 03fe636223..39c0ec166d 100644 --- a/lib/FormatRenderedProblem.pm +++ b/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 } ] ); diff --git a/lib/WeBWorK/Utils.pm b/lib/WeBWorK/Utils.pm index 390c75906f..af613d528d 100644 --- a/lib/WeBWorK/Utils.pm +++ b/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 = {}; } } diff --git a/templates/ContentGenerator/Achievements.html.ep b/templates/ContentGenerator/Achievements.html.ep index 46345c1c93..8124e7def9 100644 --- a/templates/ContentGenerator/Achievements.html.ep +++ b/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 diff --git a/templates/ContentGenerator/GatewayQuiz.html.ep b/templates/ContentGenerator/GatewayQuiz.html.ep index c74428452b..d4b15d4f9f 100644 --- a/templates/ContentGenerator/GatewayQuiz.html.ep +++ b/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') =%> % diff --git a/templates/ContentGenerator/Problem.html.ep b/templates/ContentGenerator/Problem.html.ep index 973ebae237..2c852c5679 100644 --- a/templates/ContentGenerator/Problem.html.ep +++ b/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}