wip: remove jquery

removed jquery from core
YUCLing · Nov 18, 2024 · 609aae9 · 609aae9
1 parent 11fc74d
commit 609aae9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git a/framework/core/js/src/admin/components/AdminNav.js b/framework/core/js/src/admin/components/AdminNav.js
@@ -37,20 +37,17 @@ export default class AdminNav extends Component {
   }
 
   scrollToActive() {
-    const children = $('.Dropdown-menu').children('.active');
-    const nav = $('#admin-navigation');
-    const time = app.previous.type ? 250 : 0;
+    const children = document.querySelectorAll('.Dropdown-menu > .active');
+    const nav = document.getElementById('admin-navigation');
 
     if (
       children.length > 0 &&
-      (children[0].offsetTop > nav.scrollTop() + nav.outerHeight() || children[0].offsetTop + children[0].offsetHeight < nav.scrollTop())
+      (children[0].offsetTop > nav.scrollTop + nav.getBoundingClientRect().height || children[0].offsetTop + children[0].offsetHeight < nav.scrollTop)
     ) {
-      nav.animate(
-        {
-          scrollTop: children[0].offsetTop - nav.height() / 2,
-        },
-        time
-      );
+      nav.scrollTo({
+        top: children[0].offsetTop - nav.clientHeight / 2,
+        behavior: app.previous.type ? 'smooth' : 'instant'
+      });
     }
   }
 

diff --git a/framework/core/js/src/admin/components/CreateUserModal.tsx b/framework/core/js/src/admin/components/CreateUserModal.tsx
@@ -199,7 +199,7 @@ export default class CreateUserModal<CustomAttrs extends ICreateUserModalAttrs =
   }
 
   onready() {
-    this.$('[name=username]').trigger('select');
+    (this.element.querySelector('[name="username"]') as HTMLInputElement).select();
   }
 
   onsubmit(e: SubmitEvent | null = null) {

diff --git a/framework/core/js/src/admin/components/UserListPage.tsx b/framework/core/js/src/admin/components/UserListPage.tsx
@@ -303,13 +303,13 @@ export default class UserListPage extends AdminPage {
         name: app.translator.trans('core.admin.users.grid.columns.email.title'),
         content: (user: User) => {
           function setEmailVisibility(visible: boolean) {
-            // Get needed jQuery element refs
-            const emailContainer = $(`[data-column-name=emailAddress][data-user-id=${user.id()}] .UserList-email`);
-            const emailAddress = emailContainer.find('.UserList-emailAddress');
-            const emailToggleButton = emailContainer.find('.UserList-emailIconBtn');
-            const emailToggleButtonIcon = emailToggleButton.find('.icon');
+            // Get needed element refs
+            const emailContainer = document.querySelector(`[data-column-name='emailAddress'][data-user-id='${user.id()}'] .UserList-email`)!;
+            const emailAddress = emailContainer.querySelector('.UserList-emailAddress')!;
+            const emailToggleButton = emailContainer.querySelector('.UserList-emailIconBtn')!;
+            const emailToggleButtonIcon = emailToggleButton.querySelector('.icon')!;
 
-            emailToggleButton.attr(
+            emailToggleButton.setAttribute(
               'title',
               extractText(
                 visible
@@ -318,23 +318,27 @@ export default class UserListPage extends AdminPage {
               )
             );
 
-            emailAddress.attr('aria-hidden', visible ? null : 'true');
+            if (visible) {
+              emailAddress.removeAttribute('aria-hidden');
+            } else {
+              emailAddress.setAttribute('aria-hidden', 'true');
+            }
 
             if (visible) {
-              emailToggleButtonIcon.addClass('fa-eye');
-              emailToggleButtonIcon.removeClass('fa-eye-slash');
+              emailToggleButtonIcon.classList.add('fa-eye');
+              emailToggleButtonIcon.classList.remove('fa-eye-slash');
             } else {
-              emailToggleButtonIcon.removeClass('fa-eye');
-              emailToggleButtonIcon.addClass('fa-eye-slash');
+              emailToggleButtonIcon.classList.remove('fa-eye');
+              emailToggleButtonIcon.classList.add('fa-eye-slash');
             }
 
             // Need the string interpolation to prevent TS error.
-            emailContainer.attr('data-email-shown', `${visible}`);
+            emailContainer.setAttribute('data-email-shown', `${visible}`);
           }
 
           function toggleEmailVisibility() {
-            const emailContainer = $(`[data-column-name=emailAddress][data-user-id=${user.id()}] .UserList-email`);
-            const emailShown = emailContainer.attr('data-email-shown') === 'true';
+            const emailContainer = document.querySelector(`[data-column-name='emailAddress'][data-user-id='${user.id()}'] .UserList-email`)!;
+            const emailShown = emailContainer.getAttribute('data-email-shown') === 'true';
 
             if (emailShown) {
               setEmailVisibility(false);