Refactored messages.js

[adamzap]

• Simplified code using a combination of CSS and JavaScript
• Stopped using jQuery
• Moved refactored code to djangoproject.js

This patch should bring no user-facing changes.

Refs #1827

The easiest way I found to test with was to add the following code to the bottom of blog.views.BlogViewMixin right before the return:

        from django.contrib import messages

        messages.info(self.request, 'abc')
        messages.success(self.request, 'def')

Then test this way:

1. Navigate to the "News" (/weblog/) section of the site
2. Dismiss the two message

[adamzap]

The 400ms value here matches the value in the JavaScript. I'd much prefer using a CSS transition than trying to fade the element out in JavaScript.

[pauloxnet]

Do you think it's possible to have the same UX using only CSS?

[adamzap]

Good question! The display property is not animatable by default, but by using transition-behavior: allow-discrete, we could get the desired UX in all modern browsers except for Firefox. In my testing, Firefox would only lose the fade effect, so it seems to degrade gracefully.

• https://caniuse.com/mdn-css_properties_display_is_transitionable
• https://css-tricks.com/almanac/properties/t/transition-behavior/

We'd still need one line of JavaScript to apply the fade-out class unless we wanted to resort to other kinds of hacks in the HTML.

Here's the diff if you are curious or want to try it locally. Let me know if you want me to push a commit for this:

diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
index 0c3395a2..222f43b2 100644
--- a/djangoproject/scss/_style.scss
+++ b/djangoproject/scss/_style.scss
@@ -3417,7 +3417,8 @@ ul.corporate-members li {
         border: 1px solid $green-dark;
         border-radius: 4px;
         opacity: 1;
-        transition: opacity 400ms;
+        transition: opacity 400ms, display 400ms;
+        transition-behavior: allow-discrete;
 
         &::before {
             @include fa-icon();
@@ -3431,6 +3432,7 @@ ul.corporate-members li {
 
         &.fade-out {
             opacity: 0;
+            display: none;
         }
 
         &.info {
diff --git a/djangoproject/static/js/djangoproject.js b/djangoproject/static/js/djangoproject.js
index 29256b31..3cb47a15 100644
--- a/djangoproject/static/js/djangoproject.js
+++ b/djangoproject/static/js/djangoproject.js
@@ -16,9 +16,5 @@ document.querySelectorAll('#doc-versions a').forEach(function (el) {
 document.querySelectorAll('.messages li .close').forEach(function (el) {
   el.addEventListener('click', function (e) {
     this.parentElement.classList.add('fade-out');
-
-    setTimeout(function () {
-      el.parentElement.style.display = 'none';
-    }, 400);
   });
 });