[DONE] Last 3.4.0 fixes (#967)

* remove untranslated field in flatpages and linkfooter fixture

* * add "PDF" mention to accessibility grid link
* Comment some js generating errors in caption_maker.js
* replace old jquery call by vanilla js in caption maker
* TriggerAlertClose is only triggered on base-message-alert generated by django

pod/completion/static/js/caption_maker.js

@@ -281,11 +281,11 @@ function DisplayExistingCaption(seconds) {
     ]);
 
     document.getElementById("textCaptionEntry").value = theCaption.caption;
-    document.getElementById("previewTrack").value = theCaption.caption;
+    //document.getElementById("previewTrack").value = theCaption.caption;
   } else {
     document.getElementById("captionTitle").innerHTML = " ";
     document.getElementById("textCaptionEntry").value = "";
-    document.getElementById("previewTrack").value = "";
+    //document.getElementById("previewTrack").value = "";
   }
 }
 

pod/completion/templates/video_caption_maker.html

@@ -69,7 +69,7 @@
     </div>
   {% endfor %}
   <script>
-    $(document).ready(function () {
+    document.addEventListener('DOMContentLoaded',function () {
       TriggerAlertClose();
     });
   </script>

pod/main/apps.py

@@ -14,7 +14,7 @@ def create_missing_pages(sender, **kwargs):
     count = 0
     with open("./pod/main/fixtures/flat_pages.json", encoding="utf-8") as data_file:
         json_data = json.loads(data_file.read())
-        print("--> Search missing accessibility pages...")
+        print("--> Search missing flat pages and footer links...")
         for fixture in json_data:
             count += create_pages_and_links(fixture)
 

pod/main/static/js/main.js

@@ -39,7 +39,21 @@ function getParents(el, parentSelector) {
 }
 
 /**
- * [slideUp description]
+ * Slide up target and remove it from DOM
+ * @param  {[type]}   target   [description]
+ */
+function slideUpAndRemove(target) {
+  target.animate(
+    {opacity: 0,},
+    {duration: 1000,},
+  );
+  slideUp(target, 1000, function () {
+    target.remove();
+  });
+}
+
+/**
+ * Hide target element with a slide animation
  * @param  {[type]}   target   [description]
  * @param  {Number}   duration [description]
  * @param  {Function} callback [description]
@@ -70,11 +84,16 @@ function slideUp(target, duration = 500, callback = null) {
     if (callback !== null) {
       callback();
     }
-    //alert("!");
   }, duration);
 }
 
-/* SLIDE DOWN */
+/**
+ * Show target element with a slide animation
+ * @param  {[type]}   target   [description]
+ * @param  {Number}   duration [description]
+ * @param  {Function} callback [description]
+ * @return {[type]}            [description]
+ */
 var slideDown = (target, duration = 500) => {
   target.style.removeProperty("display");
   let display = window.getComputedStyle(target).display;
@@ -562,24 +581,14 @@ document.addEventListener("DOMContentLoaded", function () {
 
 /**
  * Automatically hide success and info type alerts
+ *  generated by Django messages.add_message()
  */
 function TriggerAlertClose() {
-  // (alert-warning and alert-danger will remain on screen)
   window.setTimeout(function () {
     document
-      .querySelectorAll(".alert.alert-success, .alert.alert-info")
+      .querySelectorAll("#base-message-alert>.alert-success, #base-message-alert>.alert-info")
       .forEach((el) => {
-        el.animate(
-          {
-            opacity: 0,
-          },
-          {
-            duration: 1000,
-          },
-        );
-        slideUp(el, 1000, function () {
-          el.remove();
-        });
+        slideUpAndRemove(el);
       });
   }, 8000);
 }
@@ -1295,7 +1304,9 @@ var showalert = function (message, alerttype) {
   if (["alert-success", "alert-info"].includes(alerttype)) {
     setTimeout(function () {
       let formalertdiv = document.getElementById("formalertdiv");
-      formalertdiv?.remove();
+      window.setTimeout(function () {
+        slideUpAndRemove(formalertdiv);
+      });
     }, 8000);
   }
 };

pod/progressive_web_app/static/js/notification-toast.js

@@ -23,12 +23,12 @@ async function postNotificationPreference(
 }
 
 async function setPushPreference(notificationSettingUrl) {
-  const notificationsSpinner = document.querySelector("#notifications-spinner");
-  const notificationButton = document.querySelector(
-    "#notification-action-button",
+  const notificationsSpinner = document.getElementById("notifications-spinner");
+  const notificationButton = document.getElementById(
+    "notification-action-button"
   );
-  const notificationsPreferenceTips = document.querySelector(
-    "#notifications-preference-tips",
+  const notificationsPreferenceTips = document.getElementById(
+   "notifications-preference-tips"
   );
 
   notificationsSpinner.classList.remove("d-none");
@@ -49,7 +49,7 @@ async function setPushPreference(notificationSettingUrl) {
       notificationsPreferenceTips.textContent = gettext(
         "An error happened during notification subscription",
       );
-      notificationsPreferenceTips.classList.remove("alert-primary");
+      notificationsPreferenceTips.classList.remove("alert-success");
       notificationsPreferenceTips.classList.remove("alert-warning");
       notificationsPreferenceTips.classList.add("alert-error");
     }
@@ -62,7 +62,7 @@ async function setPushPreference(notificationSettingUrl) {
 
   if (permissionState == "prompt") {
     notificationsPreferenceTips.classList.remove("d-none");
-    notificationsPreferenceTips.classList.remove("alert-primary");
+    notificationsPreferenceTips.classList.remove("alert-success");
     notificationsPreferenceTips.classList.remove("alert-error");
     notificationsPreferenceTips.classList.add("alert-warning");
     notificationsPreferenceTips.textContent = gettext(
@@ -97,7 +97,7 @@ async function updateToast() {
 
   if (permissionState == "denied") {
     notificationsPreferenceTips.classList.remove("d-none");
-    notificationsPreferenceTips.classList.remove("alert-primary");
+    notificationsPreferenceTips.classList.remove("alert-success");
     notificationsPreferenceTips.classList.remove("alert-warning");
     notificationsPreferenceTips.classList.add("alert-error");
     notificationsPreferenceTips.textContent = gettext(

pod/progressive_web_app/templates/notification_toast.html

@@ -2,12 +2,11 @@
 {% load static %}
 {% load i18n %}
 
-
 <div class="toast-container position-fixed bottom-0 start-0 p-3">
   <div id="notification-toast" class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       <strong class="me-auto">{% trans "Get application notifications" %}</strong>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="{% trans 'Close' %}" title="{% trans 'Close notification panel' %}"></button>
     </div>
     <div class="toast-body">
       <p>
@@ -25,5 +24,4 @@
   </div>
 </div>
 
-
 <script src="{% static 'js/notification-toast.js' %}?ver={{VERSION}}"></script>

pod/video/templates/videos/video_collaborate.html

@@ -55,20 +55,19 @@ <h3>{% trans "Video Collaborate" %}</h3>
         </div>
     <div style="clear: both; padding-top: 24px; padding-bottom: 24px; display: block;">
         <div style="padding-top: 6px;">
-					<h5>{% trans "Tricks" %} :</h5>
-					<p>{% trans "Start the video than click the + icon to write a comment at the choosen time. Video will be paused." %}<br>
-					{% trans "Click on comment's timecode to go at this time in the video." %}<br>
-					{% trans "Black notes are public. The clearest are private. The intermediary is visible to the owner of the video." %}
-				</p>
+          <h5>{% trans "Tricks" %} :</h5>
+          <p>{% trans "Start the video than click the + icon to write a comment at the choosen time. Video will be paused." %}<br>
+          {% trans "Click on comment's timecode to go at this time in the video." %}<br>
+          {% trans "Black notes are public. The clearest are private. The intermediary is visible to the owner of the video." %}
+        </p>
             <span class="float-end">
                 <a href="{% url 'video:video' slug=video.slug %}" title="{% blocktrans with video_title=video.title %}Back to the video “{{ video_title }}”{% endblocktrans %}" class="btn btn btn-secondary btn-sm" data-bs-toggle="tooltip" data-bs-placement="bottom">
-                    <i class="bi bi-arrow-left"></i>&nbsp;{% trans "Back to the video"%}
+                    <i class="bi bi-arrow-left" aria-hidden="true"></i>&nbsp;{% trans "Back to the video"%}
                 </a>
             </span>
         </div>
     </div>
 
-
 {% endblock page_content %}
 {% block collapse_page_aside %}
 {% endblock collapse_page_aside %}