From 66806db1376f8970c3672b885bbacd8baaebc686 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 17:09:22 +0000 Subject: [PATCH 1/5] Remove jQuery from the create/rename branch modals (except Fomantic) - Switched to plain JavaScript - Tested the create/rename branch modals' functionality and they work as before Signed-off-by: Yarden Shoham --- web_src/js/features/repo-branch.js | 56 +++++++++++++++++------------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js index e6da9661b6d8a..3ae84b16fe479 100644 --- a/web_src/js/features/repo-branch.js +++ b/web_src/js/features/repo-branch.js @@ -8,35 +8,41 @@ export function initRepoBranchButton() { function initRepoCreateBranchButton() { // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code) - $('.show-create-branch-modal').on('click', function () { - let modalFormName = $(this).attr('data-modal-form'); - if (!modalFormName) { - modalFormName = '#create-branch-form'; - } - $(modalFormName)[0].action = $(modalFormName).attr('data-base-action') + $(this).attr('data-branch-from-urlcomponent'); - let fromSpanName = $(this).attr('data-modal-from-span'); - if (!fromSpanName) { - fromSpanName = '#modal-create-branch-from-span'; - } + for (const element of document.querySelectorAll('.show-create-branch-modal')) { + element.addEventListener('click', () => { + let modalFormName = element.getAttribute('data-modal-form'); + if (!modalFormName) { + modalFormName = '#create-branch-form'; + } + const modalForm = document.querySelector(modalFormName); + if (!modalForm) return; + modalForm.action = modalForm.getAttribute('data-base-action') + element.getAttribute('data-branch-from-urlcomponent'); - $(fromSpanName).text($(this).attr('data-branch-from')); - $($(this).attr('data-modal')).modal('show'); - }); + let fromSpanName = element.getAttribute('data-modal-from-span'); + if (!fromSpanName) { + fromSpanName = '#modal-create-branch-from-span'; + } + document.querySelector(fromSpanName).textContent = element.getAttribute('data-branch-from'); + + $(element.getAttribute('data-modal')).modal('show'); + }); + } } function initRepoRenameBranchButton() { - $('.show-rename-branch-modal').on('click', function () { - const target = $(this).attr('data-modal'); - const $modal = $(target); - - const oldBranchName = $(this).attr('data-old-branch-name'); - $modal.find('input[name=from]').val(oldBranchName); + for (const element of document.querySelectorAll('.show-rename-branch-modal')) { + element.addEventListener('click', () => { + const target = element.getAttribute('data-modal'); + const modal = document.querySelector(target); + const oldBranchName = element.getAttribute('data-old-branch-name'); + modal.querySelector('input[name=from]').value = oldBranchName; - // display the warning that the branch which is chosen is the default branch - const $warn = $modal.find('.default-branch-warning'); - toggleElem($warn, $(this).attr('data-is-default-branch') === 'true'); + // display the warning that the branch which is chosen is the default branch + const warn = modal.querySelector('.default-branch-warning'); + toggleElem(warn, element.getAttribute('data-is-default-branch') === 'true'); - const $text = $modal.find('[data-rename-branch-to]'); - $text.text($text.attr('data-rename-branch-to').replace('%s', oldBranchName)); - }); + const text = modal.querySelector('[data-rename-branch-to]'); + text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName); + }); + } } From f3d03e56747149aa840e964e975f957c02c32936 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 20:46:16 +0200 Subject: [PATCH 2/5] Update web_src/js/features/repo-branch.js Co-authored-by: silverwind --- web_src/js/features/repo-branch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js index 3ae84b16fe479..14d93c86f576b 100644 --- a/web_src/js/features/repo-branch.js +++ b/web_src/js/features/repo-branch.js @@ -16,7 +16,7 @@ function initRepoCreateBranchButton() { } const modalForm = document.querySelector(modalFormName); if (!modalForm) return; - modalForm.action = modalForm.getAttribute('data-base-action') + element.getAttribute('data-branch-from-urlcomponent'); + modalForm.action = `${modalForm.getAttribute('data-base-action')}${element.getAttribute('data-branch-from-urlcomponent')}`; let fromSpanName = element.getAttribute('data-modal-from-span'); if (!fromSpanName) { From dd9e258651e22d9cab28441a177817a8dbec84b6 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 18:49:02 +0000 Subject: [PATCH 3/5] element -> el --- web_src/js/features/repo-branch.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js index 14d93c86f576b..9d2f4d12b0fa0 100644 --- a/web_src/js/features/repo-branch.js +++ b/web_src/js/features/repo-branch.js @@ -8,38 +8,38 @@ export function initRepoBranchButton() { function initRepoCreateBranchButton() { // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code) - for (const element of document.querySelectorAll('.show-create-branch-modal')) { - element.addEventListener('click', () => { - let modalFormName = element.getAttribute('data-modal-form'); + for (const el of document.querySelectorAll('.show-create-branch-modal')) { + el.addEventListener('click', () => { + let modalFormName = el.getAttribute('data-modal-form'); if (!modalFormName) { modalFormName = '#create-branch-form'; } const modalForm = document.querySelector(modalFormName); if (!modalForm) return; - modalForm.action = `${modalForm.getAttribute('data-base-action')}${element.getAttribute('data-branch-from-urlcomponent')}`; + modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`; - let fromSpanName = element.getAttribute('data-modal-from-span'); + let fromSpanName = el.getAttribute('data-modal-from-span'); if (!fromSpanName) { fromSpanName = '#modal-create-branch-from-span'; } - document.querySelector(fromSpanName).textContent = element.getAttribute('data-branch-from'); + document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from'); - $(element.getAttribute('data-modal')).modal('show'); + $(el.getAttribute('data-modal')).modal('show'); }); } } function initRepoRenameBranchButton() { - for (const element of document.querySelectorAll('.show-rename-branch-modal')) { - element.addEventListener('click', () => { - const target = element.getAttribute('data-modal'); + for (const el of document.querySelectorAll('.show-rename-branch-modal')) { + el.addEventListener('click', () => { + const target = el.getAttribute('data-modal'); const modal = document.querySelector(target); - const oldBranchName = element.getAttribute('data-old-branch-name'); + const oldBranchName = el.getAttribute('data-old-branch-name'); modal.querySelector('input[name=from]').value = oldBranchName; // display the warning that the branch which is chosen is the default branch const warn = modal.querySelector('.default-branch-warning'); - toggleElem(warn, element.getAttribute('data-is-default-branch') === 'true'); + toggleElem(warn, el.getAttribute('data-is-default-branch') === 'true'); const text = modal.querySelector('[data-rename-branch-to]'); text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName); From 9f4b30937d973013c0e04a26b61b779938cada8f Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 21:17:57 +0200 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: delvh --- web_src/js/features/repo-branch.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js index 9d2f4d12b0fa0..5718585bcd0eb 100644 --- a/web_src/js/features/repo-branch.js +++ b/web_src/js/features/repo-branch.js @@ -10,18 +10,12 @@ function initRepoCreateBranchButton() { // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code) for (const el of document.querySelectorAll('.show-create-branch-modal')) { el.addEventListener('click', () => { - let modalFormName = el.getAttribute('data-modal-form'); - if (!modalFormName) { - modalFormName = '#create-branch-form'; - } + let modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form'; const modalForm = document.querySelector(modalFormName); if (!modalForm) return; modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`; - let fromSpanName = el.getAttribute('data-modal-from-span'); - if (!fromSpanName) { - fromSpanName = '#modal-create-branch-from-span'; - } + let fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span'; document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from'); $(el.getAttribute('data-modal')).modal('show'); From 7833c58b340a2f3ca8e426ad99c554e17a75fafe Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 19:19:30 +0000 Subject: [PATCH 5/5] Lint --- web_src/js/features/repo-branch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js index 5718585bcd0eb..b9ffc6127f66c 100644 --- a/web_src/js/features/repo-branch.js +++ b/web_src/js/features/repo-branch.js @@ -10,12 +10,12 @@ function initRepoCreateBranchButton() { // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code) for (const el of document.querySelectorAll('.show-create-branch-modal')) { el.addEventListener('click', () => { - let modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form'; + const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form'; const modalForm = document.querySelector(modalFormName); if (!modalForm) return; modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`; - let fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span'; + const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span'; document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from'); $(el.getAttribute('data-modal')).modal('show');