From ffef477da2a786ae03f450241d280a3b32090b47 Mon Sep 17 00:00:00 2001
From: Adam Zapletal <adamzap@gmail.com>
Date: Sat, 28 Dec 2024 10:06:07 -0600
Subject: [PATCH] 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
---
 djangoproject/scss/_style.scss           |  6 ++++++
 djangoproject/static/js/djangoproject.js | 11 +++++++++++
 djangoproject/static/js/main.js          |  4 ----
 djangoproject/static/js/mod/messages.js  |  7 -------
 4 files changed, 17 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 27bf24b36..0c3395a2f 100644
--- a/djangoproject/scss/_style.scss
+++ b/djangoproject/scss/_style.scss
@@ -3416,6 +3416,8 @@ ul.corporate-members li {
         color: $green-dark;
         border: 1px solid $green-dark;
         border-radius: 4px;
+        opacity: 1;
+        transition: opacity 400ms;
 
         &::before {
             @include fa-icon();
@@ -3427,6 +3429,10 @@ ul.corporate-members li {
             margin-right: 10px;
         }
 
+        &.fade-out {
+            opacity: 0;
+        }
+
         &.info {
             &::before {
                 content: $fa-var-info-circle;
diff --git a/djangoproject/static/js/djangoproject.js b/djangoproject/static/js/djangoproject.js
index f6e9229eb..29256b318 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.classList.add('fade-out');
+
+    setTimeout(function () {
+      el.parentElement.style.display = 'none';
+    }, 400);
+  });
+});
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();
-  });
-});