Refactor legacy JS (#33115)

Author: wxiaoguang

templates/org/team/repositories.tmpl

@@ -9,7 +9,7 @@
 				{{template "org/team/navbar" .}}
 				{{$canAddRemove := and $.IsOrganizationOwner (not $.Team.IncludesAllRepositories)}}
 				{{if $canAddRemove}}
-					<div class="ui attached segment tw-flex tw-flex-wrap tw-gap-2">
+					<div class="ui top attached segment tw-flex tw-flex-wrap tw-gap-2">
 						<form class="ui form ignore-dirty tw-flex-1 tw-flex" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/add" method="post">
 							{{.CsrfTokenHtml}}
 							<div id="search-repo-box" data-uid="{{.Org.ID}}" class="ui search">

web_src/js/features/notification.ts

@@ -1,6 +1,5 @@
-import $ from 'jquery';
 import {GET} from '../modules/fetch.ts';
-import {toggleElem, type DOMEvent} from '../utils/dom.ts';
+import {toggleElem, type DOMEvent, createElementFromHTML} from '../utils/dom.ts';
 import {logoutFromWorker} from '../modules/worker.ts';
 
 const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
@@ -158,7 +157,8 @@ async function updateNotificationTable() {
       }
 
       const data = await response.text();
-      if ($(data).data('sequence-number') === notificationSequenceNumber) {
+      const el = createElementFromHTML(data);
+      if (parseInt(el.getAttribute('data-sequence-number')) === notificationSequenceNumber) {
         notificationDiv.outerHTML = data;
         initNotificationsTable();
       }

web_src/js/features/org-team.ts

@@ -1,39 +1,44 @@
-import $ from 'jquery';
-import {hideElem, showElem} from '../utils/dom.ts';
+import {queryElems, toggleElem} from '../utils/dom.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl} = window.config;
 
-export function initOrgTeamSettings() {
-  // Change team access mode
-  $('.organization.new.team input[name=permission]').on('change', () => {
-    const val = $('input[name=permission]:checked', '.organization.new.team').val();
-    if (val === 'admin') {
-      hideElem('.organization.new.team .team-units');
-    } else {
-      showElem('.organization.new.team .team-units');
-    }
-  });
+function initOrgTeamSettings() {
+  // on the page "page-content organization new team"
+  const pageContent = document.querySelector('.page-content.organization.new.team');
+  if (!pageContent) return;
+  queryElems(pageContent, 'input[name=permission]', (el) => el.addEventListener('change', () => {
+    // Change team access mode
+    const val = pageContent.querySelector<HTMLInputElement>('input[name=permission]:checked')?.value;
+    toggleElem(pageContent.querySelectorAll('.team-units'), val !== 'admin');
+  }));
 }
 
-export function initOrgTeamSearchRepoBox() {
-  const $searchRepoBox = $('#search-repo-box');
+function initOrgTeamSearchRepoBox() {
+  // on the page "page-content organization teams"
+  const $searchRepoBox = fomanticQuery('#search-repo-box');
   $searchRepoBox.search({
     minCharacters: 2,
     apiSettings: {
       url: `${appSubUrl}/repo/search?q={query}&uid=${$searchRepoBox.data('uid')}`,
       onResponse(response) {
         const items = [];
-        $.each(response.data, (_i, item) => {
+        for (const item of response.data) {
           items.push({
             title: item.repository.full_name.split('/')[1],
             description: item.repository.full_name,
           });
-        });
-
+        }
         return {results: items};
       },
     },
     searchFields: ['full_name'],
     showNoResults: false,
   });
 }
+
+export function initOrgTeam() {
+  if (!document.querySelector('.page-content.organization')) return;
+  initOrgTeamSettings();
+  initOrgTeamSearchRepoBox();
+}

web_src/js/features/repo-issue-sidebar.ts

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import {POST} from '../modules/fetch.ts';
 import {queryElems, toggleElem} from '../utils/dom.ts';
 import {initIssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
@@ -9,9 +8,8 @@ function initBranchSelector() {
   if (!elSelectBranch) return;
 
   const urlUpdateIssueRef = elSelectBranch.getAttribute('data-url-update-issueref');
-  const $selectBranch = $(elSelectBranch);
-  const $branchMenu = $selectBranch.find('.reference-list-menu');
-  $branchMenu.find('.item:not(.no-select)').on('click', async function (e) {
+  const elBranchMenu = elSelectBranch.querySelector('.reference-list-menu');
+  queryElems(elBranchMenu, '.item:not(.no-select)', (el) => el.addEventListener('click', async function (e) {
     e.preventDefault();
     const selectedValue = this.getAttribute('data-id'); // eg: "refs/heads/my-branch"
     const selectedText = this.getAttribute('data-name'); // eg: "my-branch"
@@ -29,7 +27,7 @@ function initBranchSelector() {
       document.querySelector<HTMLInputElement>(selectedHiddenSelector).value = selectedValue;
       elSelectBranch.querySelector('.text-branch-name').textContent = selectedText;
     }
-  });
+  }));
 }
 
 function initRepoIssueDue() {

web_src/js/index.ts

@@ -40,7 +40,7 @@ import {initUserSettings} from './features/user-settings.ts';
 import {initRepoActivityTopAuthorsChart, initRepoArchiveLinks} from './features/repo-common.ts';
 import {initRepoMigrationStatusChecker} from './features/repo-migrate.ts';
 import {initRepoDiffView} from './features/repo-diff.ts';
-import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.ts';
+import {initOrgTeam} from './features/org-team.ts';
 import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.ts';
 import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts';
 import {initRepoEditor} from './features/repo-editor.ts';
@@ -166,8 +166,7 @@ onDomReady(() => {
     initNotificationCount,
     initNotificationsTable,
 
-    initOrgTeamSearchRepoBox,
-    initOrgTeamSettings,
+    initOrgTeam,
 
     initRepoActivityTopAuthorsChart,
     initRepoArchiveLinks,