From 58e8ae0759ccfa97c478ccae4e0778bdce70966f Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 22 Jan 2026 22:40:02 +0000
Subject: [PATCH] =DirectoryManager.php updates, some javascript tweaks for CRUD.js, and minor style changes
---
assets/js/concise/UploadManager.js | 137 ++++++++++++++++++++++++++++++---------------
1 files changed, 92 insertions(+), 45 deletions(-)
diff --git a/assets/js/concise/UploadManager.js b/assets/js/concise/UploadManager.js
index f2e9188..e5f8643 100644
--- a/assets/js/concise/UploadManager.js
+++ b/assets/js/concise/UploadManager.js
@@ -19,6 +19,8 @@
this.selectionHandlers = new Map();
this.sortables = new Map();
+ this.changes = new Map();
+
this.previewUrls = new Set();
this.initElements();
this.initListeners();
@@ -37,9 +39,12 @@
video: 'video',
file: 'label > span',
details: 'details',
+ alt: '[name="image-alt-text"]',
+ title: '[name="image-title"]',
+ description: '[name="image-caption"]',
},
manyRefs: {
- inputs: 'input',
+ inputs: 'input, select, textarea',
},
setup({el, refs, manyRefs, data}) {
const isNewUpload = Object.hasOwn(data, 'file');
@@ -103,7 +108,29 @@
break;
}
if (refs.details) {
- refs.details.append(T.create('uploadMeta'));
+ if (Object.hasOwn(data.field.config, 'showMeta') && !data.field.config.showMeta) {
+ refs.details.remove();
+ } else {
+ if(Object.hasOwn(data, 'id')) {
+ refs.details.dataset.attachmentId = data.id;
+ } else if (Object.hasOwn(data, 'uploadId')) {
+ refs.details.dataset.uploadId = data.uploadId;
+ }
+ refs.details.setAttribute('data-ignore', '');
+
+
+ if (mimeType !== 'image' && refs.alt) {
+ refs.alt.closest('.field')?.remove();
+ } else if (Object.hasOwn(data, 'image-alt-text') && refs.alt) {
+ refs.alt.value = data['image-alt-text'];
+ }
+ if ((Object.hasOwn(data, 'title') || Object.hasOwn(data, 'file')) && refs.title) {
+ refs.title.value = data.title||data.file.name;
+ }
+ if (Object.hasOwn(data, 'image-caption') && refs.description) {
+ refs.description.value = data['image-caption'];
+ }
+ }
}
@@ -111,31 +138,12 @@
if (manyRefs.inputs) {
for (let input of manyRefs.inputs) {
- window.prefixInput(input, `${data.uploadId}-`);
+ window.prefixInput(input, `${data.id??data.uploadId}-`);
}
}
}
});
- T.define('uploadMeta', {
- refs: {
- alt: '[name="alt_text"]',
- title: '[name="image-title"]',
- description: '[name="image-caption"]',
- },
- setup({el, refs, manyRefs, data}) {
- if (Object.hasOwn(data, 'alt') && refs.alt) {
- refs.alt.value = data.alt;
- }
- if (Object.hasOwn(data, 'title') && refs.title) {
- refs.title.value = data.title;
- }
- if (Object.hasOwn(data, 'description') && refs.description) {
- refs.description.value = data.description;
- }
- }
- });
-
T.define('imageGroup', {
refs: {
selectAll: '[data-select-all]',
@@ -209,7 +217,7 @@
grid: '.item-grid'
},
async setup({el, refs, manyRefs, data}) {
- let fieldId = images.registerField(el, false, `recovery_${data.index}`);
+ let fieldId = images.registerField(el, false, false, `recovery_${data.index}`);
if (data.isCurrent) {
el.open = true;
@@ -417,6 +425,7 @@
};
const upload = { ...defaults, ...data };
+
Object.preventExtensions(upload);
await this.stores.uploads.save(upload);
return upload;
@@ -488,8 +497,15 @@
}
}
handleChange(e) {
+
let fieldId = this.getFieldIdFromElement(e.target);
- if (!fieldId) return;
+ if (!fieldId) {
+ let isMeta = e.target.closest('[data-upload-id], [data-attachment-id]');
+ if (isMeta) {
+ this.queueUploadMeta(e);
+ }
+ return;
+ }
if (e.target.matches(this.selectors.fields.input)) {
const files = Array.from(e.target.files);
@@ -505,12 +521,11 @@
}
let field = this.fields.get(fieldId);
- if (!field || !field.config.autoUpload) return;
if (field.config.destination === 'post_group') {
this.handleGroupMetaChange(e.target);
} else {
- this.queueUploadMeta(e).then(()=>{});
+ this.queueUploadMeta(e);
}
}
handleGroupMetaChange(input) {
@@ -799,38 +814,69 @@
return { uploadMap, files };
}
- async queueUploadMeta(e) {
- const uploadId = e.target.closest(this.selectors.items.item)?.dataset.uploadId;
- const upload = this.stores.uploads.get(uploadId);
- if (!uploadId || !upload) return;
+ queueUploadMeta(e) {
+ let attachmentId = e.target.closest('[data-attachment-id]')?.dataset.attachmentId;
+ let isUpload = false;
+ if (!attachmentId) {
+ attachmentId = e.target.closest('[data-upload-id]')?.dataset.uploadId;
+ isUpload = true;
+ if (!attachmentId) return;
- const field = this.fields.get(upload.field);
- if (!field) return;
- let data = {};
- data[e.target.name] = e.target.value;
+ }
- upload.fields = { ...upload.fields, ...data };
- await this.setUpload(upload.id, upload);
+ if (!this.changes.has(attachmentId)) {
+ let object = {};
+ if (isUpload) {
+ object['uploadId'] = attachmentId;
+ } else {
+ object['attachmentId'] = attachmentId;
+ }
+ this.changes.set(attachmentId, object);
+ }
- let queueData = {};
- queueData[upload.attachmentId ?? upload.id] = upload.fields;
- return await this.sendToQueue('uploads/meta', queueData, 'Uploading Meta', '', true);
+ let field = e.target.closest('[data-field]');
+ let name = field.dataset.field;
+
+ this.changes.get(attachmentId)[name] = e.target.value;
+
+ this.scheduleSave();
+ }
+ scheduleSave() {
+ window.debouncer.schedule(
+ `upload-meta`,
+ async () => {
+ if (this.changes.size > 0) {
+ let items = {};
+ for (let [id, meta] of this.changes.entries()) {
+ console.log(id, meta);
+ items[id] = meta;
+ }
+ let data = {
+ user: window.auth.getUser(),
+ items: items
+ };
+ await this.sendToQueue('uploads/meta', data, 'Uploading Meta', 'Uploading Meta', true);
+ this.changes.clear();
+ }
+ },
+ 2000
+ );
}
/*********************************************************************
FIELD LOGIC
*********************************************************************/
- scanFields(container, autoUpload = true) {
+ scanFields(container, autoUpload = true, imageMeta = true) {
const fields = container.querySelectorAll(this.selectors.fields.field);
- fields.forEach(uploader => this.registerField(uploader, autoUpload));
+ fields.forEach(uploader => this.registerField(uploader, autoUpload, imageMeta));
}
- registerField(element, autoUpload = true, id = null) {
+ registerField(element, autoUpload = true, imageMeta = true, id = null) {
const data = {
element: element,
id: (id) ? id : this.determineFieldId(element),
- config: this.extractFieldConfig(element, autoUpload),
+ config: this.extractFieldConfig(element, autoUpload, imageMeta),
uploads: new Set(),
operationId: null,
groups: [],
@@ -850,9 +896,10 @@
return data.id;
}
- extractFieldConfig(fieldElement, autoUpload) {
+ extractFieldConfig(fieldElement, autoUpload, imageMeta) {
return {
autoUpload: autoUpload,
+ showMeta: imageMeta,
destination: fieldElement.dataset.destination || 'meta', //TODO: why do we need this?
content: this.extractFieldContent(fieldElement),
mode: fieldElement.dataset.mode || 'direct',
@@ -1060,7 +1107,7 @@
id: uploadId,
field: fieldId,
status: 'local_processing',
- blob: null,
+ // blob: null,
fields: {
originalName: file.name,
originalSize: file.size,
--
Gitblit v1.10.0