Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce htmx and use it to avoid full page load on Subscribe and Follow #28908

Merged
merged 16 commits into from
Jan 30, 2024
Merged

Introduce htmx and use it to avoid full page load on Subscribe and Follow #28908

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
80f33f7
Introduce htmx and use it to avoid full page load on `Subscribe` and …
yardenshoham Jan 23, 2024
2096553
Add `is-loading` during request and disable autoscroll
yardenshoham Jan 23, 2024
90b2eb3
Change default swap style to `outerHTML` and disable url push
yardenshoham Jan 23, 2024
55c4706
Apply spinner on entire profile
yardenshoham Jan 27, 2024
d312b30
Merge branch 'main' into htmx
6543 Jan 27, 2024
94c151c
Merge branch 'main' into htmx
6543 Jan 27, 2024
5cdc587
Merge branch 'main' into htmx
yardenshoham Jan 28, 2024
5e27261
Merge branch 'main' into htmx
yardenshoham Jan 28, 2024
5fbbaa2
Merge branch 'main' into htmx
yardenshoham Jan 28, 2024
9d6015f
Merge branch 'main' into htmx
GiteaBot Jan 28, 2024
910d973
Merge branch 'main' into htmx
GiteaBot Jan 29, 2024
42b1435
Merge branch 'main' into htmx
GiteaBot Jan 29, 2024
6859b1b
Merge branch 'main' into htmx
GiteaBot Jan 30, 2024
0d03be1
Merge branch 'main' into htmx
GiteaBot Jan 30, 2024
acc2ca8
Merge branch 'main' into htmx
GiteaBot Jan 30, 2024
ae3b58f
Remove `window.htmx`
yardenshoham Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"esbuild-loader": "4.0.2",
"escape-goat": "4.0.0",
"fast-glob": "3.3.2",
"htmx.org": "1.9.10",
"jquery": "3.7.1",
"katex": "0.16.9",
"license-checker-webpack-plugin": "0.2.1",
Expand Down
9 changes: 8 additions & 1 deletion routers/web/repo/issue_watch.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,15 @@ import (
"strconv"

issues_model "code.gitea.io/gitea/models/issues"
"code.gitea.io/gitea/modules/base"
"code.gitea.io/gitea/modules/context"
"code.gitea.io/gitea/modules/log"
)

const (
tplWatching base.TplName = "repo/issue/view_content/watching"
)

// IssueWatch sets issue watching
func IssueWatch(ctx *context.Context) {
issue := GetActionIssue(ctx)
Expand Down Expand Up @@ -52,5 +57,7 @@ func IssueWatch(ctx *context.Context) {
return
}

ctx.Redirect(issue.Link())
ctx.Data["Issue"] = issue
ctx.Data["IssueWatch"] = &issues_model.IssueWatch{IsWatching: watch}
ctx.HTML(http.StatusOK, tplWatching)
}
11 changes: 9 additions & 2 deletions routers/web/user/profile.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import (
"code.gitea.io/gitea/models/db"
repo_model "code.gitea.io/gitea/models/repo"
user_model "code.gitea.io/gitea/models/user"
"code.gitea.io/gitea/modules/base"
"code.gitea.io/gitea/modules/context"
"code.gitea.io/gitea/modules/git"
"code.gitea.io/gitea/modules/log"
Expand All @@ -26,6 +27,10 @@ import (
shared_user "code.gitea.io/gitea/routers/web/shared/user"
)

const (
tplProfileBigAvatar base.TplName = "shared/user/profile_big_avatar"
)

// OwnerProfile render profile page for a user or a organization (aka, repo owner)
func OwnerProfile(ctx *context.Context) {
if strings.Contains(ctx.Req.Header.Get("Accept"), "application/rss+xml") {
Expand Down Expand Up @@ -309,8 +314,10 @@ func Action(ctx *context.Context) {

if err != nil {
log.Error("Failed to apply action %q: %v", ctx.FormString("action"), err)
ctx.JSONError(fmt.Sprintf("Action %q failed", ctx.FormString("action")))
ctx.Error(http.StatusBadRequest, fmt.Sprintf("Action %q failed", ctx.FormString("action")))
return
}
ctx.JSONOK()

shared_user.PrepareContextForProfileBigAvatar(ctx)
ctx.HTML(http.StatusOK, tplProfileBigAvatar)
}
2 changes: 1 addition & 1 deletion templates/base/head.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
{{template "base/head_style" .}}
{{template "custom/header" .}}
</head>
<body>
<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-push-url="false">
{{ctx.DataRaceCheck $.Context}}
{{template "custom/body_outer_pre" .}}

Expand Down
14 changes: 1 addition & 13 deletions templates/repo/issue/view_content/sidebar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,19 +270,7 @@
<div class="ui watching">
<span class="text"><strong>{{ctx.Locale.Tr "notification.notifications"}}</strong></span>
<div class="gt-mt-3">
<form method="post" action="{{.Issue.Link}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
{{$.CsrfTokenHtml}}
<button class="fluid ui button">
{{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
{{else}}
{{svg "octicon-unmute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.subscribe"}}
{{end}}
</button>
</form>
{{template "repo/issue/view_content/watching" .}}
</div>
</div>
{{end}}
Expand Down
12 changes: 12 additions & 0 deletions templates/repo/issue/view_content/watching.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<form hx-boost="true" hx-sync="this:replace" hx-target="this" method="post" action="{{.Issue.Link}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
<button class="fluid ui button">
{{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
{{else}}
{{svg "octicon-unmute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.subscribe"}}
{{end}}
</button>
</form>
8 changes: 4 additions & 4 deletions templates/shared/user/profile_big_avatar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="ui card">
<div id="profile-avatar-card" class="ui card">
<div id="profile-avatar" class="content gt-df">
{{if eq .SignedUserID .ContextUser.ID}}
<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">
Expand Down Expand Up @@ -110,13 +110,13 @@
</li>
{{end}}
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
<li class="follow">
<li class="follow" hx-target="#profile-avatar-card">
{{if $.IsFollowing}}
<button class="ui basic red button link-action" data-url="{{.ContextUser.HomeLink}}?action=unfollow">
<button hx-post="{{.ContextUser.HomeLink}}?action=unfollow" class="ui basic red button">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}}
</button>
{{else}}
<button class="ui basic primary button link-action" data-url="{{.ContextUser.HomeLink}}?action=follow">
<button hx-post="{{.ContextUser.HomeLink}}?action=follow" class="ui basic primary button">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}}
</button>
{{end}}
Expand Down
1 change: 1 addition & 0 deletions web_src/js/features/common-global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';
import {confirmModal} from './comp/ConfirmModal.js';
import {showErrorToast} from '../modules/toast.js';
import {request, POST} from '../modules/fetch.js';
import '../htmx.js';

const {appUrl, appSubUrl, csrfToken, i18n} = window.config;

Expand Down
20 changes: 20 additions & 0 deletions web_src/js/htmx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as htmx from 'htmx.org';
import {showErrorToast} from './modules/toast.js';

window.htmx = htmx;
yardenshoham marked this conversation as resolved.
Show resolved Hide resolved

// https://htmx.org/reference/#config
htmx.config.requestClass = 'is-loading';
htmx.config.scrollIntoViewOnBoost = false;

// https://htmx.org/events/#htmx:sendError
document.body.addEventListener('htmx:sendError', (event) => {
// TODO: add translations
showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`);
});

// https://htmx.org/events/#htmx:responseError
document.body.addEventListener('htmx:responseError', (event) => {
// TODO: add translations
showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`);
});
1 change: 1 addition & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ export default {
},
override: {
'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
'htmx.org@1.9.10': {licenseName: 'BSD-2-Clause'}, // "BSD 2-Clause" -> "BSD-2-Clause"
},
emitError: true,
allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',
Expand Down