diff options
| author | Yarden Shoham <git@yardenshoham.com> | 2024-03-07 09:28:33 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-07 07:28:33 +0000 |
| commit | c1331d1f7ab60249ed2f080b24f3e32093fa708d (patch) | |
| tree | 51a77e4d5ef7a8a6b2a06658b636bcfaf7442d70 /templates/repo | |
| parent | c72e1a7abbba0cca34131a86273c987c47065dd0 (diff) | |
| download | gitea-c1331d1f7ab60249ed2f080b24f3e32093fa708d.tar.gz gitea-c1331d1f7ab60249ed2f080b24f3e32093fa708d.zip | |
Remove jQuery AJAX from the repo editor (#29636)
# Preview Tab
- Removed the jQuery AJAX call and replaced with our fetch wrapper
- Tested the preview tab functionality and it works as before
# Diff Tab
- Removed the jQuery AJAX call and replaced with htmx
- Tested the diff tab functionality and it works as before
## htmx Attributes
- `hx-post="{{.RepoLink}}..."`: make a POST request to the endpoint
- `hx-indicator=".tab[data-tab='diff']"`: attach the loading indicator
to the tab body
- `hx-target=".tab[data-tab='diff']"`: target the tab body for swapping
with the response
- `hx-swap="innerHTML"`: swap the target's inner HTML
- `hx-include="#edit_area"`: include the value of the textarea (content)
in the request body
- `hx-vals='{"context":"{{.BranchLink}}"}'`: include the context in the
request body
- `hx-params="context,content"`: include only these keys in the request
body
# Demo using `fetch` and `htmx` instead of jQuery AJAX
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'templates/repo')
| -rw-r--r-- | templates/repo/editor/edit.tmpl | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index a6dce81c08..05a8d96681 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -30,7 +30,7 @@ <a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a> <a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a> {{if not .IsNewFile}} - <a class="item" data-tab="diff" data-url="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" data-context="{{.BranchLink}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a> + <a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a> {{end}} </div> <div class="ui bottom attached active tab segment" data-tab="write"> @@ -45,7 +45,7 @@ {{ctx.Locale.Tr "loading"}} </div> <div class="ui bottom attached tab segment diff edit-diff" data-tab="diff"> - {{ctx.Locale.Tr "loading"}} + <div class="tw-p-16"></div> </div> </div> {{template "repo/editor/commit_form" .}} |