Merge branch 'master' into archive-redirect-ignore

Author: notbakaneko

resources/css/bem/blackout.less

@@ -7,7 +7,7 @@
   z-index: @z-index--blackout;
   backface-visibility: hidden;
   background-color: #000;
-  opacity: 0.75;
+  opacity: 0.5;
 
   &--overlay {
     z-index: @z-index--overlay;

resources/js/beatmap-discussions/beatmap-list.tsx

@@ -4,8 +4,8 @@
 import BeatmapListItem from 'components/beatmap-list-item';
 import BeatmapExtendedJson from 'interfaces/beatmap-extended-json';
 import UserJson from 'interfaces/user-json';
-import { action, computed, makeObservable, observable } from 'mobx';
-import { observer } from 'mobx-react';
+import { action, autorun, computed, makeObservable, observable } from 'mobx';
+import { disposeOnUnmount, observer } from 'mobx-react';
 import { deletedUserJson } from 'models/user';
 import * as React from 'react';
 import { makeUrl } from 'utils/beatmapset-discussion-helper';
@@ -34,16 +34,19 @@ export default class BeatmapList extends React.Component<Props> {
     super(props);
 
     makeObservable(this);
+    disposeOnUnmount(this, autorun(() => {
+      blackoutToggle(this, this.showingSelector);
+    }));
   }
 
   componentDidMount() {
     $(document).on(`click.${this.eventId}`, this.onDocumentClick);
     $(document).on(`turbolinks:before-cache.${this.eventId}`, this.handleBeforeCache);
-    blackoutToggle(this.showingSelector, 0.5);
   }
 
   componentWillUnmount() {
     $(document).off(`.${this.eventId}`);
+    blackoutToggle(this, false);
   }
 
   render() {
@@ -127,7 +130,6 @@ export default class BeatmapList extends React.Component<Props> {
   @action
   private setShowingSelector(state: boolean) {
     this.showingSelector = state;
-    blackoutToggle(state, 0.5);
   }
 
   @action

resources/js/components/modal.tsx

@@ -49,9 +49,7 @@ export default class Modal extends React.PureComponent<React.PropsWithChildren<P
 
   private readonly close = () => {
     modals.delete(this);
-    if (modals.size === 0) {
-      blackoutToggle(false);
-    }
+    blackoutToggle(this, false);
   };
 
   private readonly handleBeforeCache = () => {
@@ -91,6 +89,6 @@ export default class Modal extends React.PureComponent<React.PropsWithChildren<P
 
   private readonly open = () => {
     modals.add(this);
-    blackoutToggle(true, 0.5);
+    blackoutToggle(this, true);
   };
 }

resources/js/components/select-options.tsx

@@ -48,7 +48,7 @@ export default class SelectOptions<T extends Option> extends React.Component<Pro
     super(props);
     makeObservable(this);
     disposeOnUnmount(this, autorun(() => {
-      blackoutToggle(this.props.blackout && this.showingSelector, 0.5);
+      blackoutToggle(this, this.props.blackout && this.showingSelector);
     }));
   }
 
@@ -58,6 +58,7 @@ export default class SelectOptions<T extends Option> extends React.Component<Pro
 
   componentWillUnmount() {
     document.removeEventListener('click', this.hideSelector);
+    blackoutToggle(this, false);
   }
 
   render() {

resources/js/core-legacy/nav2.coffee

@@ -1,7 +1,7 @@
 # Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
 # See the LICENCE file in the repository root for full licence text.
 
-import { blackoutHide, blackoutShow } from 'utils/blackout'
+import { blackoutToggle } from 'utils/blackout'
 import { fadeToggle } from 'utils/fade'
 
 export default class Nav2
@@ -50,9 +50,9 @@ export default class Nav2
 
     if @showingMobileNav
       document.body.classList.add('js-nav2--active')
-      blackoutShow()
+      blackoutToggle(this, true)
     else if previousTree.indexOf('mobile-menu') != -1
-      blackoutHide()
+      blackoutToggle(this, false)
       Timeout.set 0, =>
         $(@clickMenu.menu('mobile-menu')).finish().slideUp 150, =>
           # use actual state instead of always removing the class in case

resources/js/utils/blackout.ts

@@ -3,25 +3,21 @@
 
 import { fadeToggle } from './fade';
 
-export function blackoutHide() {
-  blackoutToggle(false);
-}
-
-export function blackoutShow() {
-  blackoutToggle(true);
-}
+const elements = new Set<unknown>();
 
-export function blackoutToggle(state: boolean, opacity?: number) {
-  const el = window.newBody?.querySelector('.js-blackout');
-
-  if (el instanceof HTMLElement) {
-    el.style.opacity = !state || opacity == null ? '' : String(opacity);
-    fadeToggle(el, state);
+export function blackoutToggle(element: unknown, state: boolean) {
+  if (state) {
+    elements.add(element);
+  } else {
+    elements.delete(element);
   }
+
+  fadeToggle(
+    window.newBody?.querySelector('.js-blackout'),
+    blackoutVisible(),
+  );
 }
 
 export function blackoutVisible() {
-  const el = document.querySelector('.js-blackout');
-
-  return el instanceof HTMLElement && el.style.opacity !== '';
+  return elements.size > 0;
 }