From 20cec4557cf4a2d92e8bce48c7426607d32f3c83 Mon Sep 17 00:00:00 2001
From: Adam Zapletal <adamzap@gmail.com>
Date: Sat, 18 Jan 2025 07:04:13 -0600
Subject: [PATCH] Refactored `messages.js` (#1852)

* Refactored `messages.js`

- 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

* Use `transitionend` event instead of `setTimeout`

* Remove default `opacity` value

* Move `transition` rule to `fade-out` class
---
 djangoproject/scss/_style.scss           |  5 +++++
 djangoproject/static/js/djangoproject.js | 11 +++++++++++
 djangoproject/static/js/main.js          |  4 ----
 djangoproject/static/js/mod/messages.js  |  7 -------
 4 files changed, 16 insertions(+), 11 deletions(-)
 delete mode 100644 djangoproject/static/js/mod/messages.js

diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
index 4fcccf526..48b436a08 100644
--- a/djangoproject/scss/_style.scss
+++ b/djangoproject/scss/_style.scss
@@ -3427,6 +3427,11 @@ ul.corporate-members li {
             margin-right: 10px;
         }
 
+        &.fade-out {
+            opacity: 0;
+            transition: opacity 400ms;
+        }
+
         &.info {
             &::before {
                 content: $fa-var-info-circle;
diff --git a/djangoproject/static/js/djangoproject.js b/djangoproject/static/js/djangoproject.js
index f6e9229eb..725c3851c 100644
--- a/djangoproject/static/js/djangoproject.js
+++ b/djangoproject/static/js/djangoproject.js
@@ -11,3 +11,14 @@ document.querySelectorAll('#doc-versions a').forEach(function (el) {
     this.href = this.href.split('#')[0] + window.location.hash;
   });
 });
+
+// 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');
+  });
+});
diff --git a/djangoproject/static/js/main.js b/djangoproject/static/js/main.js
index a51dcd812..8e7c84be2 100644
--- a/djangoproject/static/js/main.js
+++ b/djangoproject/static/js/main.js
@@ -57,10 +57,6 @@ define(function () {
     mods.push('mod/corporate-member-join');
   }
 
-  if (hasClass('messages')) {
-    mods.push('mod/messages');
-  }
-
   if (hasClass('code-block-caption') || hasClass('snippet')) {
     mods.push('mod/clippify');
   }
diff --git a/djangoproject/static/js/mod/messages.js b/djangoproject/static/js/mod/messages.js
deleted file mode 100644
index c6728d5e0..000000000
--- a/djangoproject/static/js/mod/messages.js
+++ /dev/null
@@ -1,7 +0,0 @@
-define([
-  'jquery', //requires jquery
-], function ($) {
-  $('.messages li').on('click', '.close', function () {
-    $(this).parents('.messages > li').fadeOut();
-  });
-});