Merge pull request '[v7.0/forgejo] [PORT] Refactor dropzone (#30232)' (#3112) from bp-v7.0/forgejo-c1ac3e5 into v7.0/forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3112 Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
This commit is contained in:
commit
4732cc82be
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue