From 21a1d7691124dc5c1fca0ecab3de852a8671f4b8 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 5 Mar 2023 22:23:42 +0800
Subject: [PATCH] Improve the frontend guideline (#23298)

### The CustomEvent prefix

There was already `ce-quick-submit`, the `ce-` prefix seems better than
`us-`. Rename the only `us-` prefixed `us-load-context-popup` to `ce-`
prefixed.

### Styles and Attributes in Go HTML Template

https://github.com/go-gitea/gitea/pull/21855#issuecomment-1429643073

Suggest to stick to `class="c1 {{if $var}}c2{{end}}"`

The readability and maintainability should be applied to the code which
is read by developers, but not for the generated outputs.

The template code is the code for developers, while the generated HTML
are only for browsers.

The `class="c1 {{if $var}}c2{{end}}"` style is clearer for developers
and more intuitive, and the generated HTML also makes browsers happy (a
few spaces do not affect anything)

Think about a more complex case:

* `class="{{if $active}}active{{end}} menu item {{if $show}}show{{end}}
{{if $warn}}warn{{end}}"`
* --vs--
* `class="{{if $active}}active {{end}}menu item{{if $show}}
show{{end}}{{if $warn}} warn{{end}}"`

The first style make it clearer to see each CSS class name with its
`{{if}}` block.

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 .../developers/guidelines-frontend.en-us.md    | 18 ++++++++++++++++++
 web_src/js/components/ContextPopup.vue         |  2 +-
 web_src/js/features/contextpopup.js            |  2 +-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/content/doc/developers/guidelines-frontend.en-us.md b/docs/content/doc/developers/guidelines-frontend.en-us.md
index 66d3e83e93..9ac317f401 100644
--- a/docs/content/doc/developers/guidelines-frontend.en-us.md
+++ b/docs/content/doc/developers/guidelines-frontend.en-us.md
@@ -47,6 +47,8 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
 7. Clarify variable types, prefer `elem.disabled = true` instead of `elem.setAttribute('disabled', 'anything')`, prefer `$el.prop('checked', var === 'yes')` instead of `$el.prop('checked', var)`.
 8. Use semantic elements, prefer `<button class="ui button">` instead of `<div class="ui button">`.
 9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided.
+10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event.
+11. Custom event names are recommended to use `ce-` prefix.
 
 ### Accessibility / ARIA
 
@@ -109,6 +111,22 @@ However, there are still some special cases, so the current guideline is:
 * Vue components are recommended to use `v-if` and `v-show` to show/hide elements.
 * Go template code should use Gitea's `.gt-hidden` and `showElem()/hideElem()/toggleElem()`, see more details in `.gt-hidden`'s comment.
 
+### Styles and Attributes in Go HTML Template
+
+It's recommended to use:
+
+```html
+<div class="gt-name1 gt-name2 {{if .IsFoo}}gt-foo{{end}}" {{if .IsFoo}}data-foo{{end}}></div>
+```
+
+instead of:
+
+```html
+<div class="gt-name1 gt-name2{{if .IsFoo}} gt-foo{{end}}"{{if .IsFoo}} data-foo{{end}}></div>
+```
+
+to make the code more readable.
+
 ### Legacy Code
 
 A lot of legacy code already existed before this document's written. It's recommended to refactor legacy code to follow the guidelines.
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 3244034782..ad305b23a9 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -87,7 +87,7 @@ export default {
     }
   },
   mounted() {
-    this.$refs.root.addEventListener('us-load-context-popup', (e) => {
+    this.$refs.root.addEventListener('ce-load-context-popup', (e) => {
       const data = e.detail;
       if (!this.loading && this.issue === null) {
         this.load(data);
diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index 61f7120908..21e6bec311 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -32,7 +32,7 @@ export function initContextPopups() {
       content: el,
       interactive: true,
       onShow: () => {
-        el.firstChild.dispatchEvent(new CustomEvent('us-load-context-popup', {detail: {owner, repo, index}}));
+        el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
       }
     });
   });