From 7cc9f4df23e543061f8510f32cd2afca77b999f5 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 4 Mar 2023 20:56:47 +0800
Subject: [PATCH] doc & rename

---
 .../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 66d3e83e938c..9ac317f40190 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 3244034782d6..ad305b23a910 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 61f71209083c..21e6bec311d2 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}}));
       }
     });
   });