finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove most jQuery function calls from the repository topic box (#30191)

Browse source 
Remove most jQuery function calls

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 0497b2607d1052e771af4017c2c4180adb7d86b2)
This commit is contained in:
Yarden Shoham 2024-03-31 18:39:50 +03:00 committed by Gergely Nagy
parent 4be577085e
commit 1983226581
No known key found for this signature in database
5 changed files with 54 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
templates/repo/home.tmpl
View file

@ -18,22 +18,21 @@
</div> </div>
</form> </form>
</div> </div>
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-1" id="repo-topics"> <div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
{{range .Topics}}<a class="ui repo-topic large label topic tw-m-0" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}} {{/* it should match the code in issue-home.js */}}
{{range .Topics}}<a class="repo-topic ui large label" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
</div> </div>
{{end}} {{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<div class="ui form tw-hidden tw-flex tw-flex-col tw-mt-4" id="topic_edit"> <div class="ui form tw-hidden tw-flex tw-gap-2 tw-my-2" id="topic_edit">
<div class="field tw-flex-1 tw-mb-1"> <div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
<div class="ui fluid multiple search selection dropdown tw-flex-wrap" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}"> <input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}"> {{range .Topics}}
{{range .Topics}} {{/* keep the same layout as Fomantic UI generated labels */}}
{{/* keey the same layout as Fomantic UI generated labels */}} <a class="ui label transition visible tw-cursor-default tw-inline-block" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
<a class="ui label transition visible tw-cursor-default tw-inline-block" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a> {{end}}
{{end}} <div class="text"></div>
<div class="text"></div>
</div>
</div> </div>
<div> <div>
<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button> <button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>

1
web_src/css/repo.css
View file

@ -2475,6 +2475,7 @@ tbody.commit-list {
#repo-topics .repo-topic { #repo-topics .repo-topic {
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
cursor: pointer; cursor: pointer;
margin: 0;
} }
#new-dependency-drop-list.ui.selection.dropdown { #new-dependency-drop-list.ui.selection.dropdown {

86
web_src/js/features/repo-home.js
View file

@ -1,55 +1,53 @@
import $ from 'jquery'; import $ from 'jquery';
import {stripTags} from '../utils.js'; import {stripTags} from '../utils.js';
import {hideElem, showElem} from '../utils/dom.js'; import {hideElem, queryElemChildren, showElem} from '../utils/dom.js';
import {POST} from '../modules/fetch.js'; import {POST} from '../modules/fetch.js';
import {showErrorToast} from '../modules/toast.js';
const {appSubUrl} = window.config; const {appSubUrl} = window.config;
export function initRepoTopicBar() { export function initRepoTopicBar() {
const mgrBtn = document.getElementById('manage_topic'); const mgrBtn = document.getElementById('manage_topic');
if (!mgrBtn) return; if (!mgrBtn) return;
const editDiv = document.getElementById('topic_edit'); const editDiv = document.getElementById('topic_edit');
const viewDiv = document.getElementById('repo-topics'); const viewDiv = document.getElementById('repo-topics');
const saveBtn = document.getElementById('save_topic'); const topicDropdown = editDiv.querySelector('.ui.dropdown');
const topicDropdown = editDiv.querySelector('.dropdown'); let lastErrorToast;
const $topicDropdown = $(topicDropdown);
const $topicForm = $(editDiv);
const $topicDropdownSearch = $topicDropdown.find('input.search');
const topicPrompts = {
countPrompt: topicDropdown.getAttribute('data-text-count-prompt') ?? undefined,
formatPrompt: topicDropdown.getAttribute('data-text-format-prompt') ?? undefined,
};
mgrBtn.addEventListener('click', () => { mgrBtn.addEventListener('click', () => {
hideElem(viewDiv); hideElem(viewDiv);
showElem(editDiv); showElem(editDiv);
$topicDropdownSearch.trigger('focus'); topicDropdown.querySelector('input.search').focus();
}); });
$('#cancel_topic_edit').on('click', () => { document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
lastErrorToast?.hideToast();
hideElem(editDiv); hideElem(editDiv);
showElem(viewDiv); showElem(viewDiv);
mgrBtn.focus(); mgrBtn.focus();
}); });
saveBtn.addEventListener('click', async () => { document.getElementById('save_topic').addEventListener('click', async (e) => {
const topics = $('input[name=topics]').val(); lastErrorToast?.hideToast();
const topics = editDiv.querySelector('input[name=topics]').value;
const data = new FormData(); const data = new FormData();
data.append('topics', topics); data.append('topics', topics);
const response = await POST(saveBtn.getAttribute('data-link'), {data}); const response = await POST(e.target.getAttribute('data-link'), {data});
if (response.ok) { if (response.ok) {
const responseData = await response.json(); const responseData = await response.json();
if (responseData.status === 'ok') { if (responseData.status === 'ok') {
$(viewDiv).children('.topic').remove(); queryElemChildren(viewDiv, '.repo-topic', (el) => el.remove());
if (topics.length) { if (topics.length) {
const topicArray = topics.split(','); const topicArray = topics.split(',');
topicArray.sort(); topicArray.sort();
for (const topic of topicArray) { for (const topic of topicArray) {
// it should match the code in repo/home.tmpl
const link = document.createElement('a'); const link = document.createElement('a');
link.classList.add('ui', 'repo-topic', 'large', 'label', 'topic', 'tw-m-0'); link.classList.add('repo-topic', 'ui', 'large', 'label');
link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`; link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`;
link.textContent = topic; link.textContent = topic;
mgrBtn.parentNode.insertBefore(link, mgrBtn); // insert all new topics before manage button mgrBtn.parentNode.insertBefore(link, mgrBtn); // insert all new topics before manage button
@ -59,27 +57,23 @@ export function initRepoTopicBar() {
showElem(viewDiv); showElem(viewDiv);
} }
} else if (response.status === 422) { } else if (response.status === 422) {
// how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save"
const responseData = await response.json(); const responseData = await response.json();
lastErrorToast = showErrorToast(responseData.message, {duration: 5000});
if (responseData.invalidTopics.length > 0) { if (responseData.invalidTopics.length > 0) {
topicPrompts.formatPrompt = responseData.message;
const {invalidTopics} = responseData; const {invalidTopics} = responseData;
const $topicLabels = $topicDropdown.children('a.ui.label'); const topicLabels = queryElemChildren(topicDropdown, 'a.ui.label');
for (const [index, value] of topics.split(',').entries()) { for (const [index, value] of topics.split(',').entries()) {
if (invalidTopics.includes(value)) { if (invalidTopics.includes(value)) {
$topicLabels.eq(index).removeClass('green').addClass('red'); topicLabels[index].classList.remove('green');
topicLabels[index].classList.add('red');
} }
} }
} else {
topicPrompts.countPrompt = responseData.message;
} }
} }
// Always validate the form
$topicForm.form('validate form');
}); });
$topicDropdown.dropdown({ $(topicDropdown).dropdown({
allowAdditions: true, allowAdditions: true,
forceSelection: false, forceSelection: false,
fullTextSearch: 'exact', fullTextSearch: 'exact',
@ -102,9 +96,9 @@ export function initRepoTopicBar() {
const query = stripTags(this.urlData.query.trim()); const query = stripTags(this.urlData.query.trim());
let found_query = false; let found_query = false;
const current_topics = []; const current_topics = [];
$topicDropdown.find('a.label.visible').each((_, el) => { for (const el of queryElemChildren(topicDropdown, 'a.ui.label.visible')) {
current_topics.push(el.getAttribute('data-value')); current_topics.push(el.getAttribute('data-value'));
}); }
if (res.topics) { if (res.topics) {
let found = false; let found = false;
@ -146,38 +140,8 @@ export function initRepoTopicBar() {
}, },
onAdd(addedValue, _addedText, $addedChoice) { onAdd(addedValue, _addedText, $addedChoice) {
addedValue = addedValue.toLowerCase().trim(); addedValue = addedValue.toLowerCase().trim();
$($addedChoice)[0].setAttribute('data-value', addedValue); $addedChoice[0].setAttribute('data-value', addedValue);
$($addedChoice)[0].setAttribute('data-text', addedValue); $addedChoice[0].setAttribute('data-text', addedValue);
},
});
$.fn.form.settings.rules.validateTopic = function (_values, regExp) {
const $topics = $topicDropdown.children('a.ui.label');
const status = !$topics.length || $topics.last()[0].getAttribute('data-value').match(regExp);
if (!status) {
$topics.last().removeClass('green').addClass('red');
}
return status && !$topicDropdown.children('a.ui.label.red').length;
};
$topicForm.form({
on: 'change',
inline: true,
fields: {
topics: {
identifier: 'topics',
rules: [
{
type: 'validateTopic',
value: /^\s*[a-z0-9][-.a-z0-9]{0,35}\s*$/,
prompt: topicPrompts.formatPrompt,
},
{
type: 'maxCount[25]',
prompt: topicPrompts.countPrompt,
},
],
},
}, },
}); });
} }

1
web_src/js/modules/toast.js
View file

@ -39,6 +39,7 @@ function showToast(message, level, {gravity, position, duration, useHtmlBody, ..
toast.showToast(); toast.showToast();
toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast()); toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
return toast;
} }
export function showInfoToast(message, opts) { export function showInfoToast(message, opts) {

18
web_src/js/utils/dom.js
View file

@ -51,8 +51,22 @@ export function isElemHidden(el) {
return res[0]; return res[0];
} }
export function queryElemSiblings(el, selector = '*') { function applyElemsCallback(elems, fn) {
return Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector)); if (fn) {
for (const el of elems) {
fn(el);
}
}
return elems;
}
export function queryElemSiblings(el, selector = '*', fn) {
return applyElemsCallback(Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector)), fn);
}
// it works like jQuery.children: only the direct children are selected
export function queryElemChildren(parent, selector = '*', fn) {
return applyElemsCallback(parent.querySelectorAll(`:scope > ${selector}`), fn);
} }
export function onDomReady(cb) { export function onDomReady(cb) {