mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 11:28:24 +00:00 
			
		
		
		
	Remove jQuery from the code diff expansion buttons (#29385)
- Removed all jQuery AJAX calls and replaced with htmx - Tested the code diff expansion buttons functionality and it works as before plus a loading indicator # Demo using `htmx` instead of jQuery AJAX  Signed-off-by: Yarden Shoham <git@yardenshoham.com>
This commit is contained in:
		| @@ -5,17 +5,17 @@ | |||||||
| 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"> | 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"> | ||||||
| 				<div class="gt-df"> | 				<div class="gt-df"> | ||||||
| 				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | 				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | ||||||
| 					<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}"> | 					<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}"> | ||||||
| 						{{svg "octicon-fold-down"}} | 						{{svg "octicon-fold-down"}} | ||||||
| 					</button> | 					</button> | ||||||
| 				{{end}} | 				{{end}} | ||||||
| 				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | 				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | ||||||
| 					<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}"> | 					<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}"> | ||||||
| 						{{svg "octicon-fold-up"}} | 						{{svg "octicon-fold-up"}} | ||||||
| 					</button> | 					</button> | ||||||
| 				{{end}} | 				{{end}} | ||||||
| 				{{if eq $line.GetExpandDirection 2}} | 				{{if eq $line.GetExpandDirection 2}} | ||||||
| 					<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}"> | 					<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}"> | ||||||
| 						{{svg "octicon-fold"}} | 						{{svg "octicon-fold"}} | ||||||
| 					</button> | 					</button> | ||||||
| 				{{end}} | 				{{end}} | ||||||
| @@ -51,17 +51,17 @@ | |||||||
| 			<td colspan="2" class="lines-num"> | 			<td colspan="2" class="lines-num"> | ||||||
| 				<div class="gt-df"> | 				<div class="gt-df"> | ||||||
| 					{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | 					{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | ||||||
| 						<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}"> | 						<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}"> | ||||||
| 							{{svg "octicon-fold-down"}} | 							{{svg "octicon-fold-down"}} | ||||||
| 						</button> | 						</button> | ||||||
| 					{{end}} | 					{{end}} | ||||||
| 					{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | 					{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | ||||||
| 						<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}"> | 						<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}"> | ||||||
| 							{{svg "octicon-fold-up"}} | 							{{svg "octicon-fold-up"}} | ||||||
| 						</button> | 						</button> | ||||||
| 					{{end}} | 					{{end}} | ||||||
| 					{{if eq $line.GetExpandDirection 2}} | 					{{if eq $line.GetExpandDirection 2}} | ||||||
| 						<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}"> | 						<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}"> | ||||||
| 							{{svg "octicon-fold"}} | 							{{svg "octicon-fold"}} | ||||||
| 						</button> | 						</button> | ||||||
| 					{{end}} | 					{{end}} | ||||||
|   | |||||||
| @@ -18,17 +18,17 @@ | |||||||
| 					<td class="lines-num lines-num-old"> | 					<td class="lines-num lines-num-old"> | ||||||
| 						<div class="gt-df"> | 						<div class="gt-df"> | ||||||
| 						{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | 						{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | ||||||
| 							<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | 							<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | ||||||
| 								{{svg "octicon-fold-down"}} | 								{{svg "octicon-fold-down"}} | ||||||
| 							</button> | 							</button> | ||||||
| 						{{end}} | 						{{end}} | ||||||
| 						{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | 						{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | ||||||
| 							<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | 							<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | ||||||
| 								{{svg "octicon-fold-up"}} | 								{{svg "octicon-fold-up"}} | ||||||
| 							</button> | 							</button> | ||||||
| 						{{end}} | 						{{end}} | ||||||
| 						{{if eq $line.GetExpandDirection 2}} | 						{{if eq $line.GetExpandDirection 2}} | ||||||
| 							<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | 							<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | ||||||
| 								{{svg "octicon-fold"}} | 								{{svg "octicon-fold"}} | ||||||
| 							</button> | 							</button> | ||||||
| 						{{end}} | 						{{end}} | ||||||
|   | |||||||
| @@ -14,17 +14,17 @@ | |||||||
| 					<td colspan="2" class="lines-num"> | 					<td colspan="2" class="lines-num"> | ||||||
| 						<div class="gt-df"> | 						<div class="gt-df"> | ||||||
| 							{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | 							{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} | ||||||
| 								<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | 								<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | ||||||
| 									{{svg "octicon-fold-down"}} | 									{{svg "octicon-fold-down"}} | ||||||
| 								</button> | 								</button> | ||||||
| 							{{end}} | 							{{end}} | ||||||
| 							{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | 							{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} | ||||||
| 								<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | 								<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | ||||||
| 									{{svg "octicon-fold-up"}} | 									{{svg "octicon-fold-up"}} | ||||||
| 								</button> | 								</button> | ||||||
| 							{{end}} | 							{{end}} | ||||||
| 							{{if eq $line.GetExpandDirection 2}} | 							{{if eq $line.GetExpandDirection 2}} | ||||||
| 								<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | 								<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}"> | ||||||
| 									{{svg "octicon-fold"}} | 									{{svg "octicon-fold"}} | ||||||
| 								</button> | 								</button> | ||||||
| 							{{end}} | 							{{end}} | ||||||
|   | |||||||
| @@ -186,14 +186,6 @@ export function initRepoCodeView() { | |||||||
|   $(document).on('click', '.fold-file', ({currentTarget}) => { |   $(document).on('click', '.fold-file', ({currentTarget}) => { | ||||||
|     invertFileFolding(currentTarget.closest('.file-content'), currentTarget); |     invertFileFolding(currentTarget.closest('.file-content'), currentTarget); | ||||||
|   }); |   }); | ||||||
|   $(document).on('click', '.code-expander-button', async ({currentTarget}) => { |  | ||||||
|     const url = currentTarget.getAttribute('data-url'); |  | ||||||
|     const query = currentTarget.getAttribute('data-query'); |  | ||||||
|     const anchor = currentTarget.getAttribute('data-anchor'); |  | ||||||
|     if (!url) return; |  | ||||||
|     const blob = await $.get(`${url}?${query}&anchor=${anchor}`); |  | ||||||
|     currentTarget.closest('tr').outerHTML = blob; |  | ||||||
|   }); |  | ||||||
|   $(document).on('click', '.copy-line-permalink', async ({currentTarget}) => { |   $(document).on('click', '.copy-line-permalink', async ({currentTarget}) => { | ||||||
|     await clippie(toAbsoluteUrl(currentTarget.getAttribute('data-url'))); |     await clippie(toAbsoluteUrl(currentTarget.getAttribute('data-url'))); | ||||||
|   }); |   }); | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user