Simplify modals code

MTG · Nov 3, 2023 · c2c2fbf · c2c2fbf
1 parent d8bf647
commit c2c2fbf
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 104 deletions.
diff --git a/freesound/static/bw-frontend/src/components/commentsModal.js b/freesound/static/bw-frontend/src/components/commentsModal.js
diff --git a/freesound/static/bw-frontend/src/components/downloadersModals.js b/freesound/static/bw-frontend/src/components/downloadersModals.js
diff --git a/freesound/static/bw-frontend/src/components/modal.js b/freesound/static/bw-frontend/src/components/modal.js
@@ -83,6 +83,23 @@ const bindConfirmationModalElements = (container) => {
   });
 }
 
+// Logic to bind default modals
+
+const handleDefaultModal = (modalUrl, modalActivationParam, atPage) => {
+  if ((atPage !== undefined) && modalUrl.indexOf('&page') == -1){
+    modalUrl += '&page=' + atPage;
+  }
+  handleGenericModal(modalUrl, undefined, undefined, true, true, modalActivationParam);
+}
+
+const bindDefaultModals = (container) => {
+  bindModalActivationElements('[data-toggle="modal-default"]', handleDefaultModal, container);
+}
+
+const activateDefaultModalsIfParameters = () => {
+  activateModalsIfParameters('[data-toggle="modal-default"]', handleDefaultModal);
+}
+
 
 // Generic modals logic
 const genericModalWrapper = document.getElementById('genericModalWrapper');
@@ -255,4 +272,4 @@ const handleGenericModalWithForm = (fetchContentUrl, onLoadedCallback, onClosedC
   }, onClosedCallback, doRequestAsync, showLoadingToast, modalActivationParam)
 }
 
-export {activateModal, dismissModal, handleGenericModal, handleGenericModalWithForm, bindModalActivationElements, bindConfirmationModalElements, activateModalsIfParameters};
+export {activateModal, dismissModal, handleGenericModal, handleGenericModalWithForm, handleDefaultModal, bindModalActivationElements, bindConfirmationModalElements, activateModalsIfParameters, bindDefaultModals, activateDefaultModalsIfParameters};
diff --git a/freesound/static/bw-frontend/src/components/player/player-ui.js b/freesound/static/bw-frontend/src/components/player/player-ui.js
@@ -569,7 +569,7 @@ const createSimilarSoundsButton = (parentNode, playerImgNode) => {
     // Edit: the bookmark button all alone makes players look ugly, so we don't make them always visible even in touch devices
     //similarSoundsButtonContainer.classList.add('opacity-050')
   }
-  similarSoundsButton.setAttribute('data-toggle', 'similar-sounds-modal');
+  similarSoundsButton.setAttribute('data-toggle', 'modal-default');
   similarSoundsButton.setAttribute('data-modal-content-url', parentNode.dataset.similarSoundsModalUrl);
   similarSoundsButtonContainer.appendChild(similarSoundsButton)
   return similarSoundsButtonContainer

diff --git a/freesound/static/bw-frontend/src/components/similarSoundsModal.js b/freesound/static/bw-frontend/src/components/similarSoundsModal.js
diff --git a/...ontend/src/components/moderationModals.js → ...nd/src/components/userAnnotationsModal.js b/...ontend/src/components/moderationModals.js → ...nd/src/components/userAnnotationsModal.js
@@ -1,4 +1,4 @@
-import {handleGenericModal, bindModalActivationElements, activateModalsIfParameters, dismissModal} from './modal';
+import {handleGenericModal, bindModalActivationElements, activateModalsIfParameters, dismissModal, handleDefaultModal} from './modal';
 import {makePostRequest} from "../utils/postRequest";
 import {showToast} from "./toast";
 
@@ -22,14 +22,7 @@ const saveAnnotation = (addAnnotationUrl, text, user_id) => {
     });
 }
 
-const handleModerationModal = (modalUrl, modalActivationParam, atPage) => {
-    if ((atPage !== undefined) && modalUrl.indexOf('&page') == -1){
-        modalUrl += '&page=' + atPage;
-    }
-    handleGenericModal(modalUrl, undefined, undefined, true, true, modalActivationParam);
-}
-
-const handleUserAnnnotationModal = (modalUrl, modalActivationParam) => {
+const handleUserAnnnotationsModal = (modalUrl, modalActivationParam) => {
     handleGenericModal(modalUrl, (modalContainer) => {
         // Bind action to save annotation (and prevent default form submit)
         const formElement = modalContainer.getElementsByTagName('form')[0];
@@ -43,18 +36,12 @@ const handleUserAnnnotationModal = (modalUrl, modalActivationParam) => {
     }, undefined, true, true, modalActivationParam);
 }
 
-const bindModerationModals = (container) => {
-    bindModalActivationElements('[data-toggle="pending-moderation-modal"]', handleModerationModal, container);
-    bindModalActivationElements('[data-toggle="user-annotations-modal"]', handleUserAnnnotationModal, container);
-    bindModalActivationElements('[data-toggle="tardy-users-modal"]', handleModerationModal, container);
-    bindModalActivationElements('[data-toggle="tardy-moderators-modal"]', handleModerationModal, container);
+const bindUserAnnotationsModal = (container) => {
+    bindModalActivationElements('[data-toggle="user-annotations-modal"]', handleUserAnnnotationsModal, container);
 }
 
-const activateModerationModalsIfParameters = () => {
-    activateModalsIfParameters('[data-toggle="pending-moderation-modal"]', handleModerationModal);
-    activateModalsIfParameters('[data-toggle="user-annotations-modal"]', handleUserAnnnotationModal);
-    activateModalsIfParameters('[data-toggle="tardy-users-modal"]', handleModerationModal);
-    activateModalsIfParameters('[data-toggle="tardy-moderators-modal"]', handleModerationModal);
+const activateUserAnnotationsModalIfParameters = () => {
+    activateModalsIfParameters('[data-toggle="user-annotations-modal"]', handleUserAnnnotationsModal);
 }
 
-export {bindModerationModals, activateModerationModalsIfParameters};
+export {bindUserAnnotationsModal, activateUserAnnotationsModalIfParameters};
diff --git a/freesound/static/bw-frontend/src/utils/initHelper.js b/freesound/static/bw-frontend/src/utils/initHelper.js
@@ -4,22 +4,19 @@ import { bindBookmarkSoundModals } from '../components/bookmarkSound.js';
 import { makeCarousels } from '../components/carousel.js';
 import { makeCheckboxes } from '../components/checkbox.js';
 import { makeCollapsableBlocks } from '../components/collapsableBlock.js';
-import { bindCommentsModals, activateCommentsModalsIfParameters } from '../components/commentsModal.js';
-import { bindDownloadersModals, activateDownloadersModalsIfParameters } from '../components/downloadersModals.js';
 import { makeDropdowns } from '../components/dropdown.js';
 import { addExplicitSoundWarnings } from '../components/explicit.js';
 import { bindFlagUserButtons } from '../components/flagging.js';
 import { bindFollowTagsButtons } from '../components/followUnfollowTags.js';
 import { bindDisableOnSubmitForms } from '../components/formDisableOnSubmit.js';
 import { bindDoNotSubmitOnEnterForms } from '../components/formDoNotSubmitOnEnter.js';
 import { addSearchIconToInputs } from '../components/input.js';
-import { bindConfirmationModalElements } from '../components/modal.js';
-import { bindModerationModals, activateModerationModalsIfParameters } from '../components/moderationModals.js';
+import { bindConfirmationModalElements, bindDefaultModals, activateDefaultModalsIfParameters } from '../components/modal.js';
+import { bindUserAnnotationsModal, activateUserAnnotationsModalIfParameters} from '../components/userAnnotationsModal.js';
 import { makeRadios } from '../components/radio.js';
 import { makeRatingWidgets } from '../components/rating.js';
 import { bindRemixGroupModals, activateRemixGroupModalsIfParameters } from '../components/remixGroupModal.js';
 import { makeSelect } from '../components/select.js';
-import { bindSimilarSoundModals, activateSimilarSoundsModalsIfParameters } from '../components/similarSoundsModal.js';
 import { makeTextareaCharacterCounter } from '../components/textareaCharactersCounter.js';
 import { bindUnsecureImageCheckListeners } from '../components/unsecureImageCheck.js';
 
@@ -49,22 +46,18 @@ const initializeStuffInContainer = (container, bindModals, activateModals) => {
 
     // Bind modals
     if (bindModals === true){
+        bindDefaultModals(container);
         bindConfirmationModalElements(container);
-        bindBookmarkSoundModals(container);
-        bindCommentsModals(container);
-        bindDownloadersModals(container);
-        bindModerationModals(container);
         bindRemixGroupModals(container);
-        bindSimilarSoundModals(container);
+        bindBookmarkSoundModals(container);
+        bindUserAnnotationsModal(container); 
     }
 
     // Activate modals if needed (this should only be used the first time initializeStuffInContainer is called)
     if (activateModals === true){
-        activateDownloadersModalsIfParameters();
-        activateCommentsModalsIfParameters();
-        activateModerationModalsIfParameters();
+        activateDefaultModalsIfParameters();
+        activateUserAnnotationsModalIfParameters();
         activateRemixGroupModalsIfParameters();
-        activateSimilarSoundsModalsIfParameters();
     }
 }
 

diff --git a/templates_bw/accounts/account.html b/templates_bw/accounts/account.html
@@ -25,7 +25,7 @@ <h1>{{ user.username }}</h1>
                 {% if home %}
                     {% if user.profile.num_sounds %}    
                     <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'accounts-manage-sounds' 'published' %}">Manage sounds</a>
-                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt"  data-toggle="comments-modal" data-modal-content-url="{% url "comments-for-user" user.username %}?ajax=1" data-modal-activation-param="comments" href="javascript:void(0);" title="See all comments on your sounds">Comments</a>
+                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt"  data-toggle="modal-default" data-modal-content-url="{% url "comments-for-user" user.username %}?ajax=1" data-modal-activation-param="comments" href="javascript:void(0);" title="See all comments on your sounds">Comments</a>
                     {% else %}
                     <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'accounts-upload' %}">Upload a sound</a>
                     {% endif %}
@@ -60,18 +60,18 @@ <h1>{{ user.username }}</h1>
                                 </a>
                             </li>
                             <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="pending-moderation-modal" data-modal-content-url="{% url "tickets-user-pending_sounds" user.username %}?ajax=1" data-modal-activation-param="pending_moderation" href="javascript:void(0);">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "tickets-user-pending_sounds" user.username %}?ajax=1" data-modal-activation-param="pending_moderation" href="javascript:void(0);">
                                     Sounds pending moderation ({{ num_sounds_pending }})
                                 </a>
                             </li>
                             {% if not user_downloads_public %}
                             <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="downloaders-modal" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);">
                                     See downloaded sounds ({{ user.profile.num_sound_downloads }})
                                 </a>
                             </li>
                             <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="downloaders-modal" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);">
                                     See downloaded packs ({{ user.profile.num_pack_downloads }})
                                 </a>
                             </li>
@@ -82,7 +82,7 @@ <h1>{{ user.username }}</h1>
                                 </a>
                             </li>
                             <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="comments-modal" data-modal-content-url="{% url "comments-by-user" user.username %}?ajax=1" data-modal-activation-param="comments_by" href="javascript:void(0);" title="See all sound comments by {{ user.username }}">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "comments-by-user" user.username %}?ajax=1" data-modal-activation-param="comments_by" href="javascript:void(0);" title="See all sound comments by {{ user.username }}">
                                     All comments ({{ user.profile.num_comments }})
                                 </a>
                             </li>
@@ -118,8 +118,8 @@ <h1>{{ user.username }}</h1>
                 </div>
                 {% if user_downloads_public %}
                 <div class="bw-profile__stats v-spacing-top-1 padding-left-4 padding-right-4">
-                    <div><a data-toggle="downloaders-modal" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);" >{{ user.profile.num_sound_downloads }} sound{{ user.profile.num_sound_downloads|pluralize}} downloaded</a></div>
-                    <div><a data-toggle="downloaders-modal" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);" >{{ user.profile.num_pack_downloads }} pack{{ user.profile.num_pack_downloads|pluralize}} downloaded</a></div>
+                    <div><a data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);" >{{ user.profile.num_sound_downloads }} sound{{ user.profile.num_sound_downloads|pluralize}} downloaded</a></div>
+                    <div><a data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);" >{{ user.profile.num_pack_downloads }} pack{{ user.profile.num_pack_downloads|pluralize}} downloaded</a></div>
                 </div>
             </div>
             {% endif %}

diff --git a/templates_bw/moderation/assign_sounds.html b/templates_bw/moderation/assign_sounds.html
@@ -30,7 +30,7 @@ <h3>Unassigned sound tickets ({{ num_sounds_pending }})</h3>
                 </div>
                 <div class="padding-left-3">
                     <a href="{% url "account" item.username %}">{{ item.username }}</a>
-                    <br><a class="bw-link--black" data-toggle="pending-moderation-modal" data-modal-content-url="{% url "tickets-user-pending_sounds" item.username %}?ajax=1" href="javascript:void(0);">
+                    <br><a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "tickets-user-pending_sounds" item.username %}?ajax=1" href="javascript:void(0);">
                         {{ item.new_count }} unassigned sound{{ item.new_count|pluralize }}
                     </a>
                     <br><span class="text-grey">{{ item.time }} day{{ item.time|pluralize }} in queue</span>
@@ -66,7 +66,7 @@ <h3>Tickets with tardy moderators ({{tardy_moderator_tickets_count}})</h3>
     </div>
     {% if tardy_moderator_tickets_count > tardy_moderator_tickets|length %}
     <div class="v-spacing-top-4 center">
-        <button class="btn-primary" data-toggle="tardy-moderators-modal" data-modal-content-url="{% url "tickets-moderation-tardy-moderators" %}?ajax=1" data-modal-activation-param="tardy_moderators">See all tickets with tardy moderators</a>
+        <button class="btn-primary" data-toggle="modal-default" data-modal-content-url="{% url "tickets-moderation-tardy-moderators" %}?ajax=1" data-modal-activation-param="tardy_moderators">See all tickets with tardy moderators</a>
     </div>
     {% endif %}
 </div>
@@ -83,7 +83,7 @@ <h3>Tickets with tardy users ({{tardy_user_tickets_count}})</h3>
     </div>
     {% if tardy_user_tickets_count > tardy_user_tickets|length %}
     <div class="v-spacing-top-4 center">
-        <button class="btn-primary" data-toggle="tardy-users-modal" data-modal-content-url="{% url "tickets-moderation-tardy-users" %}?ajax=1" data-modal-activation-param="tardy_users">See all tickets with tardy users</a>
+        <button class="btn-primary" data-toggle="modal-default" data-modal-content-url="{% url "tickets-moderation-tardy-users" %}?ajax=1" data-modal-activation-param="tardy_users">See all tickets with tardy users</a>
     </div>
     {% endif %}
 </div>

diff --git a/templates_bw/moderation/ticket.html b/templates_bw/moderation/ticket.html
@@ -22,7 +22,7 @@ <h3 class="text-grey">Ticket details</h3>
                     {% if ticket.sender %}
                     <a href="{% url "account" ticket.sender.username %}">{{ ticket.sender.username }}</a>
                     {% if perms.tickets.can_moderate %}
-                    <span class="h-spacing-1">·</span><a class="bw-link--grey" data-toggle="pending-moderation-modal" data-modal-content-url="{% url "tickets-user-pending_sounds" ticket.sender.username %}?ajax=1" href="javascript:void(0);">{{ num_sounds_pending }} pending</a>
+                    <span class="h-spacing-1">·</span><a class="bw-link--grey" data-toggle="modal-default" data-modal-content-url="{% url "tickets-user-pending_sounds" ticket.sender.username %}?ajax=1" href="javascript:void(0);">{{ num_sounds_pending }} pending</a>
                     <span class="h-spacing-1">·</span><a class="bw-link--grey" data-toggle="user-annotations-modal" data-modal-content-url="{% url "tickets-user-annotations" ticket.sender.id %}?ajax=1" href="javascript:void(0);"><span class="annotation-counter-{{ ticket.sender.id }}">{{ num_mod_annotations }}</span>Mod annotations</a>
                     {% endif %}
                     {% else %}