feat: start removing jquery usages (#19850)

* feat: start removing jquery usages

* fixes

Author: KarenKonou

weblate/static/editor/browse.js

@@ -5,20 +5,20 @@
 (() => {
   function ProjectStringsBrowser() {
     hotkeys("right", () => {
-      const nextButton = $("#button-next");
-      const nextLocation = nextButton.attr("href");
-      if (nextButton.length > 0 && !nextButton.hasClass("disabled")) {
-        if (nextLocation !== undefined) {
+      const nextButton = document.getElementById("button-next");
+      const nextLocation = nextButton?.getAttribute("href");
+      if (nextButton && !nextButton.classList.contains("disabled")) {
+        if (nextLocation !== null && nextLocation !== undefined) {
           window.location.href = nextLocation;
         }
       }
       return false;
     });
     hotkeys("left", () => {
-      const prevButton = $("#button-prev");
-      const prevLocation = prevButton.attr("href");
-      if (prevButton.length > 0 && !prevButton.hasClass("disabled")) {
-        if (prevLocation !== undefined) {
+      const prevButton = document.getElementById("button-prev");
+      const prevLocation = prevButton?.getAttribute("href");
+      if (prevButton && !prevButton.classList.contains("disabled")) {
+        if (prevLocation !== null && prevLocation !== undefined) {
           window.location.href = prevLocation;
         }
       }

weblate/static/js/accounts/profile/index.js

@@ -2,19 +2,30 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-$(document).ready(() => {
-  const $profileNotificationSettings = $("#notifications");
-  const $container = $profileNotificationSettings.find("#div_id_watched");
-  const $selectElement = $profileNotificationSettings.find("#id_watched");
+document.addEventListener("DOMContentLoaded", () => {
+  const profileNotificationSettings = document.getElementById("notifications");
+  const container =
+    profileNotificationSettings?.querySelector("#div_id_watched");
+  const selectElement =
+    profileNotificationSettings?.querySelector("#id_watched");
+
+  if (
+    container === null ||
+    container === undefined ||
+    selectElement === null ||
+    selectElement === undefined
+  ) {
+    return;
+  }
 
   // Make elements link-like except click behavior
-  makeElementsLinkLike($container);
+  makeElementsLinkLike(container);
   // Watch the container when elements are added and removed
   const watchedContainerMutationObserver = new MutationObserver(() => {
-    makeElementsLinkLike($container);
+    makeElementsLinkLike(container);
   });
 
-  watchedContainerMutationObserver.observe($container[0], {
+  watchedContainerMutationObserver.observe(container, {
     childList: true,
     subtree: true,
   });
@@ -24,20 +35,22 @@ $(document).ready(() => {
    * 'data-value' attribute, change its `href` to point to project page, and
    * prevent default click action.
    *
-   * @param {Object} parentElement - The parent element to search for 'a'
+   * @param {Element} parentElement - The parent element to search for 'a'
    *                                  elements.
    */
   function makeElementsLinkLike(parentElement) {
-    const slugs = JSON.parse($selectElement.attr("data-project-slugs"));
-    parentElement.find("a").each((_index, element) => {
-      const $element = $(element);
-      const dataValue = $element.attr("data-value");
+    const slugs = JSON.parse(selectElement.getAttribute("data-project-slugs"));
+    if (slugs === undefined || slugs === null) {
+      return;
+    }
+    for (const element of parentElement.querySelectorAll("a")) {
+      const dataValue = element.getAttribute("data-value");
       if (dataValue) {
         // Encode the data value to prevent unsafe HTML injection
         const projectSlug = encodeURIComponent(slugs[dataValue]);
-        $element.attr("href", `/projects/${projectSlug}/`);
-        $element.on("click", (event) => event.preventDefault());
+        element.setAttribute("href", `/projects/${projectSlug}/`);
+        element.addEventListener("click", (event) => event.preventDefault());
       }
-    });
+    }
   }
 });

weblate/static/js/keyboard-shortcuts.js

@@ -3,6 +3,13 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 (() => {
+  function showShortcutsModal() {
+    const modal = document.getElementById("shortcuts-modal");
+    if (modal !== null) {
+      bootstrap.Modal.getOrCreateInstance(modal).show();
+    }
+  }
+
   // Match the "?" character directly rather than binding via hotkeys-js
   document.addEventListener("keydown", (event) => {
     if (event.key !== "?") {
@@ -18,10 +25,10 @@
       return;
     }
     event.preventDefault();
-    $("#shortcuts-modal").modal("show");
+    showShortcutsModal();
   });
 
-  $("#shortcuts-btn").on("click", () => {
-    $("#shortcuts-modal").modal("show");
-  });
+  document
+    .getElementById("shortcuts-btn")
+    ?.addEventListener("click", showShortcutsModal);
 })();

weblate/static/js/screenshots/clipboard-paste.js

@@ -2,18 +2,24 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-$(document).ready(() => {
+document.addEventListener("DOMContentLoaded", () => {
   // The paste trigger button
-  const $pasteScreenshotBtn = $("#paste-screenshot-btn");
+  const pasteScreenshotBtn = document.getElementById("paste-screenshot-btn");
+  if (pasteScreenshotBtn === null) {
+    return;
+  }
   // The file input to store the screenshot file
-  const $screenshotFileInput = $("#screenshot-form-container input#id_image");
+  const screenshotFileInput = document.querySelector(
+    "#screenshot-form-container input#id_image",
+  );
 
   // Check if the browser supports the Clipboard API
   if (!navigator.clipboard?.read) {
-    $pasteScreenshotBtn.remove();
+    pasteScreenshotBtn.remove();
+    return;
   }
 
-  $pasteScreenshotBtn.on("click", async (e) => {
+  pasteScreenshotBtn.addEventListener("click", async (e) => {
     e.preventDefault();
     try {
       // Read clipboard content
@@ -27,13 +33,13 @@ $(document).ready(() => {
             const blob = await clipboardItem.getType(type);
             const reader = new FileReader();
             reader.onload = (_event) => {
-              if ($screenshotFileInput.length > 0) {
+              if (screenshotFileInput !== null) {
                 // Load the file data into the form input
                 const fileName = `screenshot_${Date.now()}.${type.split("/")[1]}`;
                 const imageFile = new File([blob], fileName, { type: type });
                 const dataTransfer = new DataTransfer();
                 dataTransfer.items.add(imageFile);
-                $screenshotFileInput[0].files = dataTransfer.files;
+                screenshotFileInput.files = dataTransfer.files;
                 // Inform paste success
                 showInfo("success", gettext("Image Pasted!"));
               } else {
@@ -65,10 +71,16 @@ $(document).ready(() => {
  * @param {string} message - The content of the message.
  */
 function showInfo(type, message) {
-  const $pasteScreenshotInfo = $("#paste-screenshot-info-label");
-  const span = `<span class="text-${type}">${message}</span>`;
-  $pasteScreenshotInfo.html(span);
-  $pasteScreenshotInfo
-    .css("transform", "scale(1)")
-    .removeClass("animate__animated animate__fadeIn");
+  const pasteScreenshotInfo = document.getElementById(
+    "paste-screenshot-info-label",
+  );
+  if (pasteScreenshotInfo === null) {
+    return;
+  }
+  const span = document.createElement("span");
+  span.classList.add(`text-${type}`);
+  span.textContent = message;
+  pasteScreenshotInfo.replaceChildren(span);
+  pasteScreenshotInfo.style.transform = "scale(1)";
+  pasteScreenshotInfo.classList.remove("animate__animated", "animate__fadeIn");
 }