Merge pull request ppy#11939 from nanaya/attach-blade-popup

Apply effects on popups from blade template
gagahpangeran · Feb 26, 2025 · b29e7c6 · b29e7c6
2 parents 190c510 + a17b587
commit b29e7c6
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 deletions.
diff --git a/resources/js/core/blade-popup.ts b/resources/js/core/blade-popup.ts
@@ -0,0 +1,18 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { applyPopupEffects } from 'utils/popup';
+
+function applyEffects() {
+  for (const popup of document.querySelectorAll('.popup-active')) {
+    if (popup instanceof HTMLElement) {
+      applyPopupEffects(popup);
+    }
+  }
+}
+
+export default class BladePopup {
+  constructor() {
+    document.addEventListener('turbo:load', applyEffects);
+  }
+}
diff --git a/resources/js/osu-core.ts b/resources/js/osu-core.ts
@@ -8,6 +8,7 @@ import AccountEditAvatar from 'core/account-edit-avatar';
 import AccountEditBlocklist from 'core/account-edit-blocklist';
 import AnimateNav from 'core/animate-nav';
 import BbcodeAutoPreview from 'core/bbcode-auto-preview';
+import BladePopup from 'core/blade-popup';
 import BrowserTitleWithNotificationCount from 'core/browser-title-with-notification-count';
 import Captcha from 'core/captcha';
 import ClickMenu from 'core/click-menu';
@@ -52,6 +53,7 @@ export default class OsuCore {
   readonly animateNav;
   readonly bbcodeAutoPreview;
   readonly beatmapsetSearchController;
+  readonly bladePopup;
   readonly browserTitleWithNotificationCount;
   readonly captcha;
   readonly chatWorker;
@@ -105,6 +107,7 @@ export default class OsuCore {
 
     this.animateNav = new AnimateNav();
     this.bbcodeAutoPreview = new BbcodeAutoPreview();
+    this.bladePopup = new BladePopup();
     this.captcha = new Captcha();
     this.chatWorker = new ChatWorker();
     this.clickMenu = new ClickMenu();

diff --git a/resources/js/shared.coffee b/resources/js/shared.coffee
@@ -58,7 +58,7 @@ $(document).on 'turbo:load', ->
 # fadeOut effect for popup
 $(document).on 'click', '#popup-container, #overlay', (e) ->
   $('#overlay').fadeOut()
-  $popup = $(e.target).closest('.popup-active')
+  $popup = $('.popup-active')
   $popup.fadeOut null, -> $popup.remove()
 
 

diff --git a/resources/js/utils/popup.ts b/resources/js/utils/popup.ts
@@ -4,32 +4,32 @@
 import { htmlElementOrNull } from './html';
 
 type PopupType = 'danger' | 'info' | 'warning';
-const persistentPopups: PopupType[] = ['danger', 'warning'];
+const persistentPopupClasses: `alert-${PopupType}`[] = ['alert-danger', 'alert-warning'];
+
+export function applyPopupEffects(popupEl: HTMLElement) {
+  const $overlay = $('#overlay');
+  $overlay.fadeIn();
+  // warning/danger messages stay forever until clicked
+  const persistent = persistentPopupClasses.some((className) => popupEl.classList.contains(className));
+  if (!persistent) {
+    setTimeout(() => {
+      $overlay.click();
+    }, 5000);
+  }
+
+  htmlElementOrNull(document.activeElement)?.blur();
+}
 
 export function popup(message: string, type: PopupType = 'info') {
   const $popup = $('#popup-container');
   const $alert = $('.popup-clone').clone();
 
-  const closeAlert = () => $alert.trigger('click');
-
   // handle types of alerts by changing the colour
   $alert
     .addClass(`alert-${type} popup-active`)
     .removeClass('popup-clone');
-
   $alert.find('.popup-text').html(message);
-
-  // warning/danger messages stay forever until clicked
-  if (persistentPopups.includes(type)) {
-    $('#overlay')
-      .off('click.close-alert')
-      .one('click.close-alert', closeAlert)
-      .fadeIn();
-  } else {
-    setTimeout(closeAlert, 5000);
-  }
-
-  htmlElementOrNull(document.activeElement)?.blur();
-
   $alert.appendTo($popup).fadeIn();
+
+  applyPopupEffects($alert[0]);
 }
diff --git a/resources/views/layout/popup-container.blade.php b/resources/views/layout/popup-container.blade.php
@@ -7,13 +7,11 @@
 @endphp
 <div id="popup-container">
     <div class="alert alert-dismissable popup-clone col-md-6 col-md-offset-3 text-center" style="display: none">
-        <button type="button" data-dismiss="alert" class="close"><i class="fas fa-times"></i></button>
         <span class="popup-text"></span>
     </div>
 
     @if ($popup !== null)
         <div class="alert alert-dismissable alert-info popup-active col-md-6 col-md-offset-3 text-center">
-            <button type="button" data-dismiss="alert" class="close"><i class="fas fa-times"></i></button>
             <span class="popup-text">{{ $popup }}</span>
         </div>
     @endif