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);
   });
 });

[bmispelon]

Sorry for throwing one more option into the mix, but what about hooking to the transitionend event instead of using setTimeOut? https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

That way we don't have to dupicate the transition duration between the CSS and js.

It'd look something like this:

// Fade out and remove message elements when close icon is clicked
document.querySelectorAll('.messages li .close').forEach(function (el) {
  el.addEventListener('click', function (e) {
    this.parentElement.addEventListener('transitionend', function (e) {
        this.style.display = 'none';
    })
    this.parentElement.classList.add('fade-out');
  });
});

[adamzap]

Wow, much better, thanks! I didn't know that event existed. I pushed a commit.

[bmispelon]

A pure CSS solution would be nice, but if it's not cross-browser compatible then it's less ideal.

The current approach seems like a good compromise, and the transitionend js can be swapped out for transition-behavior: allow-discrete once that's cross-browser.

I've found a few nitpicks, but other than that I think that this is good to merge.

Thanks!

[bmispelon]

Looking at the MDN documentation for opacity it seems that 1 is the default value, so I think we don't need to specify it here.

[adamzap]

Sure! Done in 1bed277.

[bmispelon]

I'd move this rule to the &.fade-out selector later, just so that all the fading/animation logic all lives together.

[adamzap]

Thanks! Fixed in 9c5a059.

[pauloxnet]

A pure CSS solution would be nice, but if it's not cross-browser compatible then it's less ideal.

I can be wrong but it seems that the transition-behavior: allow-discrete; is available on all browser:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior

I tried only with Firefox Mobile for Android.

@adamzap can you also double check it?

The current approach seems like a good compromise, and the transitionend js can be swapped out for transition-behavior: allow-discrete once that's cross-browser.

If MDN is wrong about transition-behavior: allow-discrete; I also agree with Baptist that this solution can be merged.

[adamzap]

@pauloxnet There's a special page for the display property in that context: https://caniuse.com/mdn-css_properties_display_is_transitionable

I tried it locally, and the fade doesn't happen on Firefox for macOS.