mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 10:56:10 +01:00 
			
		
		
		
	Use querySelector over alternative DOM methods (#31280)
				
					
				
			As per https://github.com/go-gitea/gitea/pull/30115#discussion_r1626060164, prefer `querySelector` by enabling [`unicorn/prefer-query-selector`](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-query-selector.md) and autofixing all except 10 issues. According to [this](https://old.reddit.com/r/learnjavascript/comments/i0f5o8/performance_of_getelementbyid_vs_queryselector/), querySelector may be faster as well, so it's a win-win. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
		| @@ -101,7 +101,7 @@ const sfc = { | ||||
|   }, | ||||
|  | ||||
|   mounted() { | ||||
|     const el = document.getElementById('dashboard-repo-list'); | ||||
|     const el = document.querySelector('#dashboard-repo-list'); | ||||
|     this.changeReposFilter(this.reposFilter); | ||||
|     $(el).find('.dropdown').dropdown(); | ||||
|     nextTick(() => { | ||||
| @@ -330,7 +330,7 @@ const sfc = { | ||||
| }; | ||||
|  | ||||
| export function initDashboardRepoList() { | ||||
|   const el = document.getElementById('dashboard-repo-list'); | ||||
|   const el = document.querySelector('#dashboard-repo-list'); | ||||
|   if (el) { | ||||
|     createApp(sfc).mount(el); | ||||
|   } | ||||
|   | ||||
| @@ -5,7 +5,7 @@ import {GET} from '../modules/fetch.js'; | ||||
| export default { | ||||
|   components: {SvgIcon}, | ||||
|   data: () => { | ||||
|     const el = document.getElementById('diff-commit-select'); | ||||
|     const el = document.querySelector('#diff-commit-select'); | ||||
|     return { | ||||
|       menuVisible: false, | ||||
|       isLoading: false, | ||||
|   | ||||
| @@ -7,10 +7,10 @@ export default { | ||||
|     return {store: diffTreeStore()}; | ||||
|   }, | ||||
|   mounted() { | ||||
|     document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList); | ||||
|     document.querySelector('#show-file-list-btn').addEventListener('click', this.toggleFileList); | ||||
|   }, | ||||
|   unmounted() { | ||||
|     document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList); | ||||
|     document.querySelector('#show-file-list-btn').removeEventListener('click', this.toggleFileList); | ||||
|   }, | ||||
|   methods: { | ||||
|     toggleFileList() { | ||||
|   | ||||
| @@ -112,7 +112,7 @@ export default { | ||||
|     updateState(visible) { | ||||
|       const btn = document.querySelector('.diff-toggle-file-tree-button'); | ||||
|       const [toShow, toHide] = btn.querySelectorAll('.icon'); | ||||
|       const tree = document.getElementById('diff-file-tree'); | ||||
|       const tree = document.querySelector('#diff-file-tree'); | ||||
|       const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text'); | ||||
|       btn.setAttribute('data-tooltip-content', newTooltip); | ||||
|       toggleElem(tree, visible); | ||||
|   | ||||
| @@ -325,7 +325,7 @@ const sfc = { | ||||
| export default sfc; | ||||
|  | ||||
| export function initRepositoryActionView() { | ||||
|   const el = document.getElementById('repo-action-view'); | ||||
|   const el = document.querySelector('#repo-action-view'); | ||||
|   if (!el) return; | ||||
|  | ||||
|   // TODO: the parent element's full height doesn't work well now, | ||||
|   | ||||
| @@ -51,7 +51,7 @@ const sfc = { | ||||
| }; | ||||
|  | ||||
| export function initRepoActivityTopAuthorsChart() { | ||||
|   const el = document.getElementById('repo-activity-top-authors-chart'); | ||||
|   const el = document.querySelector('#repo-activity-top-authors-chart'); | ||||
|   if (el) { | ||||
|     createApp(sfc).mount(el); | ||||
|   } | ||||
|   | ||||
| @@ -85,7 +85,7 @@ const sfc = { | ||||
|         this.isViewBranch = false; | ||||
|         this.$refs.dropdownRefName.textContent = item.name; | ||||
|         if (this.setAction) { | ||||
|           document.getElementById(this.branchForm)?.setAttribute('action', url); | ||||
|           document.querySelector(`#${this.branchForm}`)?.setAttribute('action', url); | ||||
|         } else { | ||||
|           $(`#${this.branchForm} input[name="refURL"]`).val(url); | ||||
|         } | ||||
|   | ||||
| @@ -43,25 +43,25 @@ const sfc = { | ||||
|   }, | ||||
|  | ||||
|   mounted() { | ||||
|     document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit); | ||||
|     document.querySelector('#scoped-access-submit').addEventListener('click', this.onClickSubmit); | ||||
|   }, | ||||
|  | ||||
|   unmounted() { | ||||
|     document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit); | ||||
|     document.querySelector('#scoped-access-submit').removeEventListener('click', this.onClickSubmit); | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     onClickSubmit(e) { | ||||
|       e.preventDefault(); | ||||
|  | ||||
|       const warningEl = document.getElementById('scoped-access-warning'); | ||||
|       const warningEl = document.querySelector('#scoped-access-warning'); | ||||
|       // check that at least one scope has been selected | ||||
|       for (const el of document.getElementsByClassName('access-token-select')) { | ||||
|       for (const el of document.querySelectorAll('.access-token-select')) { | ||||
|         if (el.value) { | ||||
|           // Hide the error if it was visible from previous attempt. | ||||
|           hideElem(warningEl); | ||||
|           // Submit the form. | ||||
|           document.getElementById('scoped-access-form').submit(); | ||||
|           document.querySelector('#scoped-access-form').submit(); | ||||
|           // Don't show the warning. | ||||
|           return; | ||||
|         } | ||||
| @@ -78,7 +78,7 @@ export default sfc; | ||||
|  * Initialize category toggle sections | ||||
|  */ | ||||
| export function initScopedAccessTokenCategories() { | ||||
|   for (const el of document.getElementsByClassName('scoped-access-token-mount')) { | ||||
|   for (const el of document.querySelectorAll('.scoped-access-token-mount')) { | ||||
|     createApp({}) | ||||
|       .component('scoped-access-token-selector', sfc) | ||||
|       .mount(el); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user