Refactoring CSS and JS

[torgeirl]

Goals

• improve performance
• reduce technical debt
• enable the use of CSP

Possible solutions

• since Trix's overall usage of JavaScript is limited, perhaps we could replace jQuery and Angular with more limited approaches such as HTMX and Alpine.js; they are also more appropriate for our update cadence

---

Tasks

• eliminate the use of inline styling
• eliminate the use of inline scripts ✔️
• avoid use of eval() functions

Inline styling:

• trix/trix_admin/templates/trix_admin/assignments/preview.django.html ✔️
• trix/trix_admin/templates/trix_admin/editor/markdown_help.django.html ✔️
• trix/trix_admin/templates/trix_admin/roleselect.django.html ✔️
• trix/trix_admin/templates/trix_admin/statistics.django.html + ../include/progress_bar.django.html ✔️*
• trix/trix_course/templates/trix_course/add_course_admin.django.html ✔️
• trix/trix_course/templates/trix_course/course_admin.django.html ✔️
• trix/trix_student/templates/trix_student/assignment_list_base.django.html ✔️
• trix/trix_student/templates/trix_student/consent_form_base.django.html ✔️ (removed)
• trix/trix_student/templates/trix_student/include/assignment.django.html ✔️
• inlined styling is added on the bottom of the course statistics page by angular-hotkeys (via cradmin_legacy)

(* Inline styling is removed from /trix_admin/statistics.django.html, but that has caused (at least) two changes:

1. the table header styling now has working directional arrows («A-Z indicators») 🎉
2. the course tag has a nonfunctional X (should only be displayed on optional tags) ❌)

Inline scripts:

• trix/trix_admin/templates/trix_admin/statistics.django.html ✔️
• trix/trix_student/templates/trix_student/assignment_list_base.django.html ✔️ (removed)

To ease the transition from Angular/jQuery to HTMX, the json-enc extension has been used. Ideally, we shouldn't need to pass JSON to the backend but rather handle parameters in regular URL format. ❌

---

HTMX features that rely on eval() are:

• event filters
• hx-on: attributes
• hx-vals with the js: prefix
• hx-headers with the js: prefix

Note that all features removed by disabling eval() can be reimplemented using your own custom javascript and the htmx event model.

[Levijatan]

The print button in trix/trix_student/templates/trix_student/assignment_list_base.django.html is pretty much the standard way to have a print button so I don't know if there is any other cleaner way to do it.

[Levijatan]

Moved the inline javascript in statistics.django.html out into their own file in 7aa0f05

[Levijatan]

Looking through all the javascript I think it wouldn't be to hard to replace most of it with HTMX, most of what angular is being used for seems to be simple state control. It would require some work on most of the views to get most out of it, but atleast I feel that it would be worth it.

[torgeirl]

The print button in trix/trix_student/templates/trix_student/assignment_list_base.django.html is pretty much the standard way to have a print button so I don't know if there is any other cleaner way to do it.

I've landed on simply removing it; most users are familiar with Ctrl+P and that has the bonus of allowing the user to print only select parts of the page instead of all assignments on a give page. 🍃

[Levijatan]

Moved out the inline styles in statistics. 4888329.
Quite happy that Less could generate css so it was quite nice to generate classes for progress bar width 1-100%

[Levijatan]

Could use the same css classes in assignment_list, pushed up in 62e0aa9