mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

[PORT] Refactor dropzone (#30232) 

Simplify code and use `.files` elements

(cherry picked from commit ca297a90fb1fec5b270fad1a3e575916510e7385)

Conflicts:
	web_src/js/features/repo-legacy.js
(cherry picked from commit c1ac3e5891)
This commit is contained in:
wxiaoguang 2024-04-02 02:16:38 +08:00 committed by GitHub
parent c98d61710e
commit 294cb4f19b
1 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web_src/js/features/repo-legacy.js
View File

@ -358,11 +358,11 @@ async function onEditContent(event) {
input.name = 'files'; input.name = 'files';
input.type = 'hidden'; input.type = 'hidden';
input.value = data.uuid; input.value = data.uuid;
dropzone.querySelector('.files').insertAdjacentHTML('beforeend', input.outerHTML); dropzone.querySelector('.files').append(input);
}); });
this.on('removedfile', async (file) => { this.on('removedfile', async (file) => {
if (disableRemovedfileEvent) return;
document.getElementById(file.uuid)?.remove(); document.getElementById(file.uuid)?.remove();
if (disableRemovedfileEvent) return;
if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) { if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
try { try {
await POST(dropzone.getAttribute('data-remove-url'), {data: new URLSearchParams({file: file.uuid})}); await POST(dropzone.getAttribute('data-remove-url'), {data: new URLSearchParams({file: file.uuid})});
@ -384,6 +384,7 @@ async function onEditContent(event) {
disableRemovedfileEvent = true; disableRemovedfileEvent = true;
dz.removeAllFiles(true); dz.removeAllFiles(true);
dropzone.querySelector('.files').innerHTML = ''; dropzone.querySelector('.files').innerHTML = '';
for (const el of dropzone.querySelectorAll('.dz-preview')) el.remove();
fileUuidDict = {}; fileUuidDict = {};
disableRemovedfileEvent = false; disableRemovedfileEvent = false;
@ -392,7 +393,6 @@ async function onEditContent(event) {
dz.emit('addedfile', attachment); dz.emit('addedfile', attachment);
dz.emit('thumbnail', attachment, imgSrc); dz.emit('thumbnail', attachment, imgSrc);
dz.emit('complete', attachment); dz.emit('complete', attachment);
dz.files.push(attachment);
fileUuidDict[attachment.uuid] = {submitted: true}; fileUuidDict[attachment.uuid] = {submitted: true};
dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%'; dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%';
const input = document.createElement('input'); const input = document.createElement('input');
@ -400,7 +400,10 @@ async function onEditContent(event) {
input.name = 'files'; input.name = 'files';
input.type = 'hidden'; input.type = 'hidden';
input.value = attachment.uuid; input.value = attachment.uuid;
dropzone.querySelector('.files').insertAdjacentHTML('beforeend', input.outerHTML); dropzone.querySelector('.files').append(input);
}
if (!dropzone.querySelector('.dz-preview')) {
dropzone.classList.remove('dz-started');
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -412,24 +415,24 @@ async function onEditContent(event) {
return dz; return dz;
}; };
const cancelAndReset = (dz) => { const cancelAndReset = (e) => {
e.preventDefault();
showElem(renderContent); showElem(renderContent);
hideElem(editContentZone); hideElem(editContentZone);
if (dz) { comboMarkdownEditor.attachedDropzoneInst?.emit('reload');
dz.emit('reload');
}
}; };
const saveAndRefresh = async (dz) => { const saveAndRefresh = async (e) => {
e.preventDefault();
showElem(renderContent); showElem(renderContent);
hideElem(editContentZone); hideElem(editContentZone);
const dropzoneInst = comboMarkdownEditor.attachedDropzoneInst;
try { try {
const params = new URLSearchParams({ const params = new URLSearchParams({
content: comboMarkdownEditor.value(), content: comboMarkdownEditor.value(),
context: editContentZone.getAttribute('data-context'), context: editContentZone.getAttribute('data-context'),
}); });
for (const file of dz.files) params.append('files[]', file.uuid); for (const fileInput of dropzoneInst?.element.querySelectorAll('.files [name=files]')) params.append('files[]', fileInput.value);
const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params}); const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params});
const data = await response.json(); const data = await response.json();
@ -452,10 +455,8 @@ async function onEditContent(event) {
} else { } else {
content.querySelector('.dropzone-attachments').outerHTML = data.attachments; content.querySelector('.dropzone-attachments').outerHTML = data.attachments;
} }
if (dz) { dropzoneInst?.emit('submit');
dz.emit('submit'); dropzoneInst?.emit('reload');
dz.emit('reload');
}
initMarkupContent(); initMarkupContent();
initCommentContent(); initCommentContent();
} catch (error) { } catch (error) {
@ -463,25 +464,14 @@ async function onEditContent(event) {
} }
}; };
if (!editContentZone.innerHTML) { comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
if (!comboMarkdownEditor) {
editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML; editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML;
comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor')); comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
comboMarkdownEditor.attachedDropzoneInst = await setupDropzone(editContentZone.querySelector('.dropzone'));
const dropzone = editContentZone.querySelector('.dropzone'); editContentZone.addEventListener('ce-quick-submit', saveAndRefresh);
const dz = await setupDropzone(dropzone); editContentZone.querySelector('.cancel.button').addEventListener('click', cancelAndReset);
editContentZone.querySelector('.cancel.button').addEventListener('click', (e) => { editContentZone.querySelector('.save.button').addEventListener('click', saveAndRefresh);
e.preventDefault();
cancelAndReset(dz);
});
editContentZone.querySelector('.save.button').addEventListener('click', (e) => {
e.preventDefault();
saveAndRefresh(dz);
});
editContentZone.addEventListener('ce-quick-submit', () => {
editContentZone.querySelector('.save.button').dispatchEvent(new Event('click'));
});
} else {
comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
} }
// Show write/preview tab and copy raw content as needed // Show write/preview tab and copy raw content as needed