From 14f6fcf4481cedc2cd9d5ea5aaff88e109089e1f Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sat, 20 Jan 2024 21:44:51 +0200 Subject: [PATCH] Don't do a full page load when clicking the subscribe button (#28871) - Refactor the form around the subscribe button into its own template - Use htmx to perform the form submission - `hx-boost="true"` to prevent the default form submission behavior of a full page load - `hx-sync="this:replace"` to replace the current request (in case the button is clicked again before the response is returned) - `hx-target="this"` to replace the form tag with the new form tag - `hx-push-url="false"` to disable a change to the URL - `hx-swap="show:no-scroll"` to preserve the scroll position - Change the backend response to return a `
` tag instead of a redirect to the issue page - Include `htmx.org` in javascript imports This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach. # Before ![before](https://github.com/go-gitea/gitea/assets/20454870/4ec3e81e-4dbf-4338-9968-b0655c276d4c) # After ![after](https://github.com/go-gitea/gitea/assets/20454870/8c8841af-9bfe-40b2-b1cd-cd1f3c90ba4d) --------- Signed-off-by: Yarden Shoham --- package-lock.json | 6 ++++++ package.json | 1 + routers/web/repo/issue_watch.go | 9 ++++++++- templates/repo/issue/view_content/sidebar.tmpl | 14 +------------- templates/repo/issue/view_content/watching.tmpl | 13 +++++++++++++ web_src/js/features/common-global.js | 1 + webpack.config.js | 1 + 7 files changed, 31 insertions(+), 14 deletions(-) create mode 100644 templates/repo/issue/view_content/watching.tmpl diff --git a/package-lock.json b/package-lock.json index b299967eb..d73fc5df5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,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", @@ -6158,6 +6159,11 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/htmx.org": { + "version": "1.9.10", + "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.10.tgz", + "integrity": "sha512-UgchasltTCrTuU2DQLom3ohHrBvwr7OqpwyAVJ9VxtNBng4XKkVsqrv0Qr3srqvM9ZNI3f1MmvVQQqK7KW/bTA==" + }, "node_modules/http-proxy-agent": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz", diff --git a/package.json b/package.json index 801e85db8..5c6de1dd6 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/routers/web/repo/issue_watch.go b/routers/web/repo/issue_watch.go index 1cb5cc716..1f51ceba5 100644 --- a/routers/web/repo/issue_watch.go +++ b/routers/web/repo/issue_watch.go @@ -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) @@ -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) } diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 4334e4bcb..6c13eef02 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -270,19 +270,7 @@
{{ctx.Locale.Tr "notification.notifications"}}
- - - {{$.CsrfTokenHtml}} - - + {{template "repo/issue/view_content/watching" .}}
{{end}} diff --git a/templates/repo/issue/view_content/watching.tmpl b/templates/repo/issue/view_content/watching.tmpl new file mode 100644 index 000000000..06b9d9af3 --- /dev/null +++ b/templates/repo/issue/view_content/watching.tmpl @@ -0,0 +1,13 @@ +
+ + {{$.CsrfTokenHtml}} + +
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 0b00eb8e8..ffa0434cf 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -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.org'; const {appUrl, appSubUrl, csrfToken, i18n} = window.config; diff --git a/webpack.config.js b/webpack.config.js index 448dc6400..0d8418938 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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)',