Skip to content

Commit 4a8e899

Browse files
authored
Merge branch 'main' into go-gitea#17676-init-content-history
2 parents 1899189 + 49b2cb9 commit 4a8e899

File tree

2 files changed

+38
-9
lines changed

2 files changed

+38
-9
lines changed

docs/content/doc/developers/guidelines-frontend.md

+26
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,19 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
4040
7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
4141

4242

43+
### Framework Usage
44+
45+
Mixing different frameworks together is highly discouraged. A JavaScript module should follow one major framework and follow the framework's best practice.
46+
47+
Recommended implementations:
48+
* Vue + Native
49+
* Fomantic-UI (jQuery)
50+
* Native only
51+
52+
Discouraged implementations:
53+
* Vue + jQuery
54+
* jQuery + Native
55+
4356
### `async` Functions
4457

4558
Only mark a function as `async` if and only if there are `await` calls
@@ -98,6 +111,19 @@ $('#el').on('click', async (e) => { // not recommended but acceptable
98111
});
99112
```
100113

114+
### HTML Attributes and `dataset`
115+
116+
We forbid `dataset` usage, its camel-casing behaviour makes it hard to grep for attributes. However there are still some special cases, so the current guideline is:
117+
118+
* For legacy code:
119+
* `$.data()` should be refactored to `$.attr()`.
120+
* `$.data()` can be used to bind some non-string data to elements in rare cases, but it is highly discouraged.
121+
122+
* For new code:
123+
* `node.dataset` should not be used, use `node.getAttribute` instead.
124+
* never bind any user data to a DOM node, use a suitable design pattern to describe the relation between node and data.
125+
126+
101127
### Vue2/Vue3 and JSX
102128

103129
Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.

web_src/js/features/repo-projects.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
const {csrfToken} = window.config;
22

33
async function initRepoProjectSortable() {
4-
const els = document.getElementsByClassName('board');
4+
const els = document.querySelectorAll('#project-board > .board');
55
if (!els.length) return;
66

77
const {Sortable} = await import(/* webpackChunkName: "sortable" */'sortablejs');
8-
const boardColumns = document.getElementsByClassName('board-column');
98

10-
new Sortable(els[0], {
9+
// the HTML layout is: #project-board > .board > .board-column .board.cards > .board-card.card .content
10+
const mainBoard = els[0];
11+
let boardColumns = mainBoard.getElementsByClassName('board-column');
12+
new Sortable(mainBoard, {
1113
group: 'board-column',
1214
draggable: '.board-column',
15+
filter: '[data-id="0"]',
1316
animation: 150,
1417
ghostClass: 'card-ghost',
1518
onSort: () => {
16-
const board = document.getElementsByClassName('board')[0];
17-
const boardColumns = board.getElementsByClassName('board-column');
18-
19-
for (const [i, column] of boardColumns.entries()) {
19+
boardColumns = mainBoard.getElementsByClassName('board-column');
20+
for (let i = 0; i < boardColumns.length; i++) {
21+
const column = boardColumns[i];
2022
if (parseInt($(column).data('sorting')) !== i) {
2123
$.ajax({
2224
url: $(column).data('url'),
@@ -33,8 +35,9 @@ async function initRepoProjectSortable() {
3335
},
3436
});
3537

36-
for (const column of boardColumns) {
37-
new Sortable(column.getElementsByClassName('board')[0], {
38+
for (const boardColumn of boardColumns) {
39+
const boardCardList = boardColumn.getElementsByClassName('board')[0];
40+
new Sortable(boardCardList, {
3841
group: 'shared',
3942
animation: 150,
4043
ghostClass: 'card-ghost',

0 commit comments

Comments
 (0)