/*
* Raiju Image Manager — Unified Component
*
* Shared between the frontend inline editor and the backend dashboard.
* Consumers initialize it once via NbImageManager.init({...}) and then
* call NbImageManager.open(callback, currentPath, { types: ['image'] }) to pick media.
*
* Depends on css/image-manager.css and css/raiju-admin-tokens.css.
*/
(function () {
'use strict';
// ============================================================
// CONFIGURATION (set via init())
// ============================================================
var config = {
apiUrl: 'api.php',
csrfToken: '',
t: function (key) { return key; },
showToast: function (msg) { console.log(msg); },
showConfirm: null, // optional; falls back to window.confirm
canGenerateImages: function () { return false; },
openImageGenerator: null,
itemsPerPage: 25,
};
// ============================================================
// STATE
// ============================================================
var state = {
data: [],
filtered: [],
selectedPath: null,
selectedPaths: [],
revealSelection: false,
multiplePicker: false,
callback: null,
isPicker: false,
allowedTypes: ['image'],
activeType: 'image',
view: 'grid',
mode: 'library',
sort: { field: 'date', dir: 'desc' },
search: '',
folders: [],
folderFilter: 'all',
expandedFolders: {},
lightboxItem: null,
page: 1,
};
var replaceTarget = null;
var moveTarget = null;
var renameTarget = null;
var pendingRename = null;
var aiLabelTarget = null;
var previousFocus = null;
// Upload limits from the server (list-media): what PHP lets through and what Raiju allows
var uploadLimits = null;
var mediaTypes = {
image: {
labelKey: 'media.type_images',
uploadLabelKey: 'image.upload',
formatsKey: 'image.formats_hint',
accept: '.jpg,.jpeg,.png,.webp,.gif,.svg,image/*',
extensions: ['jpg', 'jpeg', 'png', 'webp', 'gif', 'svg'],
maxSize: 5 * 1024 * 1024,
},
audio: {
labelKey: 'media.type_audio',
uploadLabelKey: 'audio.upload',
formatsKey: 'audio.formats_hint',
accept: '.mp3,.wav,.ogg,.m4a,.aac,.flac,audio/*',
extensions: ['mp3', 'wav', 'ogg', 'm4a', 'aac', 'flac'],
maxSize: 50 * 1024 * 1024,
},
video: {
labelKey: 'media.type_video',
uploadLabelKey: 'media.upload',
formatsKey: 'media.video_formats_hint',
accept: '.mp4,.webm,.mov,.m4v,video/*',
extensions: ['mp4', 'webm', 'mov', 'm4v'],
maxSize: 250 * 1024 * 1024,
},
document: {
labelKey: 'media.type_documents',
uploadLabelKey: 'media.upload',
formatsKey: 'media.document_formats_hint',
accept: '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.rtf,application/pdf,text/plain',
extensions: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf'],
maxSize: 50 * 1024 * 1024,
},
};
// ============================================================
// SVG ICONS
// ============================================================
var Icons = {
upload: '',
grid: '',
list: '',
eye: '',
download: '',
ai: '',
replace: '',
delete: '',
copy: '',
restore: '',
folder: '',
folderPlus: '',
layers: '',
move: '',
rename: '',
chevronRight: '',
chevronLeft: '',
};
// ============================================================
// HELPERS
// ============================================================
function escapeHtml(str) {
var div = document.createElement('div');
div.textContent = str == null ? '' : String(str);
return div.innerHTML;
}
function t(key, params) {
var s = config.t(key, params);
if (params && typeof s === 'string') {
for (var k in params) {
s = s.replace('{' + k + '}', params[k]);
}
}
return s;
}
function clampItemsPerPage(value) {
var parsed = parseInt(value, 10);
if (!Number.isFinite(parsed)) return 25;
return Math.max(10, Math.min(500, parsed));
}
function getItemsPerPage() {
return clampItemsPerPage(config.itemsPerPage);
}
function paginationIcon(direction) {
return direction === 'prev' ? Icons.chevronLeft : Icons.chevronRight;
}
function mediaSummaryText(total, from, to) {
if (total <= 0) return t('lists.summary_empty');
return t('lists.summary_range', { from: from, to: to, total: total });
}
function confirmAction(title, message, onYes) {
if (typeof config.showConfirm === 'function') {
config.showConfirm(title, message, onYes);
} else {
showFallbackConfirm(title, message, onYes);
}
}
function showFallbackConfirm(title, message, onYes) {
var overlay = document.createElement('div');
overlay.className = 'raiju-dialog-overlay';
overlay.innerHTML =
'' +
'
' +
'
' +
'
' +
'' +
'' +
'
' +
'
' +
'' + escapeHtml(mediaDisplayName(item)) + '' + sizeBadgeHtml(item) +
(folder ? '' + escapeHtml(folder) + '' : '') +
'
';
}
function mediaIcon(item) {
if (isAudio(item)) return '';
if (isVideo(item)) return '';
return '';
}
function detectTransparency(image) {
if (!image) return;
var surface = image.closest('.rj-imgmgr-thumb-btn, .rj-imgmgr-lightbox-stage');
if (!surface) return;
var source = (image.currentSrc || image.src || '').split(/[?#]/)[0].toLowerCase();
if (/\.jpe?g$/.test(source)) {
surface.classList.remove('rj-imgmgr-has-transparency');
return;
}
try {
var naturalWidth = image.naturalWidth || 1;
var naturalHeight = image.naturalHeight || 1;
var scale = Math.min(1, 256 / Math.max(naturalWidth, naturalHeight));
var canvas = document.createElement('canvas');
canvas.width = Math.max(1, Math.round(naturalWidth * scale));
canvas.height = Math.max(1, Math.round(naturalHeight * scale));
var context = canvas.getContext('2d', { willReadFrequently: true });
if (!context) return;
context.drawImage(image, 0, 0, canvas.width, canvas.height);
var pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;
var hasTransparency = false;
for (var i = 3; i < pixels.length; i += 4) {
if (pixels[i] < 255) {
hasTransparency = true;
break;
}
}
surface.classList.toggle('rj-imgmgr-has-transparency', hasTransparency);
} catch (e) {
// If a browser cannot inspect the bitmap, keep the neutral default.
surface.classList.remove('rj-imgmgr-has-transparency');
}
}
// Versioned preview URL: a replaced file keeps its name, so without the
// modification time the browser would show the cached old image
function previewSrc(item) {
var path = item && item.path ? String(item.path) : '';
if (!path || !item.modified) return path;
return path + (path.indexOf('?') === -1 ? '?' : '&') + 'v=' + encodeURIComponent(String(item.modified));
}
// AI disclosure label (EU AI Act, Art. 50) for images and videos
function canAiLabel(item) {
return !!item && (isImage(item) || item.type === 'video');
}
function aiLabelText(kind) {
return t(kind === 'modified' ? 'media.ai_modified' : 'media.ai_generated');
}
function aiBadgeHtml(item) {
if (!item || !item.aiLabel) return '';
return '' +
escapeHtml(t('media.ai_badge')) + '';
}
// Tell the page about label changes, so the inline editor updates labels next to images
function announceAiLabel(type, name, label) {
if (!name) return;
document.dispatchEvent(new CustomEvent('raiju:ai-label-change', {
detail: { type: type || 'image', name: name, label: label || '' }
}));
}
function aiLabelActionHtml(item) {
if (!canAiLabel(item)) return '';
var title = t('media.ai_label') + (item.aiLabel ? ': ' + aiLabelText(item.aiLabel) : '');
return '';
}
function mediaThumbHtml(item, className, previewAction) {
var actionAttr = previewAction ? ' data-action="preview"' : '';
var previewAttr = ' data-preview-path="' + escapeHtml(item.path || '') + '" data-preview-name="' + escapeHtml(mediaDisplayName(item)) + '" onclick="window.NbImageManager && NbImageManager.preview(this.dataset.previewPath, this.dataset.previewName); return false;"';
if (isImage(item)) {
return '';
}
return '';
}
// ============================================================
// MODAL CREATION
// ============================================================
function createModal() {
if (document.getElementById('rj-imgmgr-modal')) return;
var modal = document.createElement('div');
modal.id = 'rj-imgmgr-modal';
modal.className = 'rj-imgmgr-modal';
modal.innerHTML =
'' +
'' +
'' +
'
' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'' +
'
' +
'
' +
'
' +
'
' +
'
' +
'' + escapeHtml(t('image.drop_files')) + '' +
'' + escapeHtml(t('image.or')) + '' +
'' +
'' +
'
' +
'
' +
'' +
'
' +
'' + (entry.icon || '') + '' +
'' + escapeHtml(entry.label) + '' +
'' + count + '' +
(entry.deletable
? ''
: '') +
'
';
}).join('');
}
// ============================================================
// LOAD / RENDER
// ============================================================
function loadImages() {
var modal = document.getElementById('rj-imgmgr-modal');
var gridEl = modal.querySelector('.rj-imgmgr-grid');
var listBody = modal.querySelector('.rj-imgmgr-list-body');
var typeParam = state.activeType === 'all' ? state.allowedTypes.join(',') : state.activeType;
var url = config.apiUrl + '?action=list-media&type=' + encodeURIComponent(typeParam) + '&trash=' + (state.mode === 'trash' ? '1' : '0') + '&_=' + Date.now();
gridEl.innerHTML = '' + escapeHtml(t('image.loading')) + '
';
listBody.innerHTML = '';
fetch(url)
.then(function (r) { return r.json(); })
.then(function (result) {
var items = result.success && result.data
? (Array.isArray(result.data) ? result.data : (result.data.items || []))
: [];
state.folders = result.success && result.data && Array.isArray(result.data.folders) ? result.data.folders : [];
if (result.success && result.data && result.data.limits) {
uploadLimits = result.data.limits;
if (uploadLimits.imageMaxBytes) mediaTypes.image.maxSize = uploadLimits.imageMaxBytes;
}
if (result.success && result.data && Array.isArray(result.data.types)) {
result.data.types.forEach(function (typeInfo) {
if (mediaTypes[typeInfo.type] && typeInfo.maxSize) mediaTypes[typeInfo.type].maxSize = typeInfo.maxSize;
});
}
updateLimitHint();
if (items.length > 0) {
state.data = items.map(function (img) {
return Object.assign({}, img, {
type: img.type || 'image',
folder: img.folder || '',
basename: img.basename || img.name || '',
path: img.path.indexOf('api.php?') === 0 ? img.path : img.path.replace(/^\.\.\//, '/')
});
});
updateFolderUI();
updateSortHeaderClasses();
applySortOrder();
filterAndRender();
if (state.revealSelection) revealSelection();
} else {
state.data = [];
state.filtered = [];
state.page = 1;
updateFolderUI();
renderPagination();
var emptyKey = state.mode === 'trash' ? (isImageOnlyPicker() ? 'image.trash_empty' : 'media.trash_empty') : 'media.no_files';
var empty = '' + escapeHtml(t(emptyKey)) + '
';
gridEl.innerHTML = empty;
listBody.innerHTML = empty;
}
})
.catch(function (err) {
gridEl.innerHTML = '' + escapeHtml(err.message) + '
';
});
}
function updateSortHeaderClasses() {
var modal = document.getElementById('rj-imgmgr-modal');
if (!modal) return;
modal.querySelectorAll('.rj-imgmgr-list-header-col.sortable').forEach(function (col) {
col.classList.remove('sorted-asc', 'sorted-desc');
if (col.dataset.sort === state.sort.field) {
col.classList.add(state.sort.dir === 'asc' ? 'sorted-asc' : 'sorted-desc');
}
});
}
function applySortOrder() {
state.data.sort(function (a, b) {
var va, vb;
switch (state.sort.field) {
case 'name': va = (a.name || '').toLowerCase(); vb = (b.name || '').toLowerCase(); break;
case 'size': va = a.sizeBytes || 0; vb = b.sizeBytes || 0; break;
case 'date': va = a.modified || 0; vb = b.modified || 0; break;
default: return 0;
}
if (va < vb) return state.sort.dir === 'asc' ? -1 : 1;
if (va > vb) return state.sort.dir === 'asc' ? 1 : -1;
return 0;
});
}
function filterAndRender() {
state.filtered = state.data.filter(function (img) {
var folder = img.folder || '';
var matchesFolder = state.folderFilter === 'all' || folder === state.folderFilter;
var matchesSearch = !state.search || ((img.name || '') + ' ' + (img.basename || '') + ' ' + folder).toLowerCase().indexOf(state.search) !== -1;
return matchesFolder && matchesSearch;
});
var pageSize = getItemsPerPage();
var pages = Math.max(1, Math.ceil(state.filtered.length / pageSize));
state.page = Math.max(1, Math.min(state.page || 1, pages));
render();
}
// Picker opened with the current file: show the page that holds it and scroll it into view (once per open)
function revealSelection() {
state.revealSelection = false;
var path = state.multiplePicker ? state.selectedPaths[0] : state.selectedPath;
var index = path ? state.filtered.findIndex(function (entry) { return entry.path === path; }) : -1;
if (index === -1) return;
var page = Math.floor(index / getItemsPerPage()) + 1;
if (page !== state.page) {
state.page = page;
render();
}
var modal = document.getElementById('rj-imgmgr-modal');
var selected = modal && modal.querySelector('.rj-imgmgr-item.selected, .rj-imgmgr-row.selected');
if (selected) selected.scrollIntoView({ block: 'nearest' });
}
function render() {
renderPagination();
if (state.view === 'grid') renderGrid();
else renderList();
}
function currentPageItems() {
var pageSize = getItemsPerPage();
var current = Math.max(1, state.page || 1);
var start = (current - 1) * pageSize;
return state.filtered.slice(start, start + pageSize);
}
function renderPagination() {
var modal = document.getElementById('rj-imgmgr-modal');
if (!modal) return;
var pageSize = getItemsPerPage();
var total = state.filtered.length;
var pageCount = Math.max(1, Math.ceil(total / pageSize));
var current = Math.max(1, Math.min(state.page || 1, pageCount));
state.page = current;
var from = total === 0 ? 0 : ((current - 1) * pageSize) + 1;
var to = Math.min(total, current * pageSize);
var summary = mediaSummaryText(total, from, to);
var showPager = total > pageSize;
var html = '';
modal.querySelectorAll('.rj-imgmgr-pagination').forEach(function (footer) {
var isTop = footer.classList.contains('rj-imgmgr-pagination--top');
footer.hidden = isTop && !showPager;
footer.innerHTML = isTop && !showPager ? '' : html;
});
}
function setMediaPage(page) {
var pageSize = getItemsPerPage();
var pages = Math.max(1, Math.ceil(state.filtered.length / pageSize));
state.page = Math.max(1, Math.min(parseInt(page, 10) || 1, pages));
render();
}
function renderGrid() {
var modal = document.getElementById('rj-imgmgr-modal');
var gridEl = modal.querySelector('.rj-imgmgr-grid');
if (state.filtered.length === 0) {
var msg = state.search
? t('image.no_search_results', { term: state.search })
: t('media.no_files');
gridEl.innerHTML = '' + escapeHtml(msg) + '
';
return;
}
gridEl.innerHTML = '';
currentPageItems().forEach(function (image) {
var item = document.createElement('div');
var isSelected = state.isPicker && isSelectedPath(image.path);
item.className = 'rj-imgmgr-item' + (isSelected ? ' selected' : '');
item.dataset.path = image.path;
item.setAttribute('role', 'listitem');
item.setAttribute('aria-label', image.name || image.path || t('media.file'));
item.innerHTML = state.mode === 'trash'
? mediaThumbHtml(image, 'rj-imgmgr-thumb', true) +
mediaNameHtml(image, 'rj-imgmgr-name') +
'' +
'' +
'' +
'' +
'
'
:
mediaThumbHtml(image, 'rj-imgmgr-thumb', true) +
mediaNameHtml(image, 'rj-imgmgr-name') +
'' +
'' +
mediaDownloadActionHtml(image) +
'' +
'' +
'' +
(isImage(image) ? '' : '') +
aiLabelActionHtml(image) +
'' +
'
';
if (state.mode !== 'trash' && state.isPicker) {
item.insertAdjacentHTML('afterbegin', '');
}
gridEl.appendChild(item);
attachItemEvents(item, image);
});
}
function renderList() {
var modal = document.getElementById('rj-imgmgr-modal');
var listBody = modal.querySelector('.rj-imgmgr-list-body');
if (state.filtered.length === 0) {
var msg = state.search
? t('image.no_search_results', { term: state.search })
: t('media.no_files');
listBody.innerHTML = '' + escapeHtml(msg) + '
';
return;
}
listBody.innerHTML = '';
currentPageItems().forEach(function (image) {
appendMediaRow(listBody, image);
});
}
function appendMediaRow(listBody, image) {
var row = document.createElement('div');
var isSelected = state.isPicker && isSelectedPath(image.path);
row.className = 'rj-imgmgr-row' + (isSelected ? ' selected' : '');
if (image.folder) row.classList.add('rj-imgmgr-row--child');
row.dataset.path = image.path;
row.setAttribute('aria-label', image.name || image.path || t('media.file'));
row.innerHTML = state.mode === 'trash'
? '' +
mediaThumbHtml(image, 'rj-imgmgr-list-thumb', true) +
mediaNameHtml(image, 'rj-imgmgr-list-name') +
'' + escapeHtml(image.size || '-') + '
' +
'' + escapeHtml(image.dateFormatted || '-') + '
' +
'' +
'' +
'' +
'' +
'
'
:
'' +
mediaThumbHtml(image, 'rj-imgmgr-list-thumb', true) +
mediaNameHtml(image, 'rj-imgmgr-list-name') +
'' + escapeHtml(image.size || '-') + '
' +
'' + escapeHtml(image.dateFormatted || '-') + '
' +
'' +
'' +
mediaDownloadActionHtml(image) +
'' +
'' +
'' +
(isImage(image) ? '' : '') +
aiLabelActionHtml(image) +
'' +
'
';
if (state.mode !== 'trash' && state.isPicker) {
row.querySelector('div:first-child').outerHTML = '';
}
listBody.appendChild(row);
attachItemEvents(row, image);
}
function attachItemEvents(element, image) {
var check = element.querySelector('.rj-imgmgr-check');
if (check) {
check.addEventListener('click', function (e) {
e.stopPropagation();
toggleSelection(image.path);
});
}
var previewThumb = element.querySelector('.rj-imgmgr-thumb-btn');
if (previewThumb) {
previewThumb.addEventListener('click', function (e) {
e.stopPropagation();
openLightbox(image);
});
}
element.addEventListener('click', function (e) {
var actionEl = e.target.closest('[data-action]');
if (actionEl) {
e.stopPropagation();
var action = actionEl.dataset.action;
if (action === 'preview') openLightbox(image);
else if (action === 'download') return;
else if (action === 'copy') copyPath(image.path);
else if (action === 'move') openMoveDialog(image);
else if (action === 'rename') openRenameDialog(image);
else if (action === 'ai-label') openAiLabelDialog(image);
else if (action === 'original') openOriginalDialog(image);
else if (action === 'replace') openReplaceDialog(image.name, image.path);
else if (action === 'delete') deleteMedia(image);
else if (action === 'restore') restoreMedia(image);
else if (action === 'delete-permanent') deleteMediaPermanently(image);
return;
}
// Click elsewhere on item = toggle selection
if (state.mode !== 'trash' && state.isPicker) toggleSelection(image.path);
});
}
function isSelectedPath(path) {
return state.multiplePicker
? state.selectedPaths.indexOf(path) !== -1
: state.selectedPath === path;
}
function toggleSelection(path) {
if (state.multiplePicker) {
var idx = state.selectedPaths.indexOf(path);
if (idx === -1) {
state.selectedPaths.push(path);
} else {
state.selectedPaths.splice(idx, 1);
}
} else {
state.selectedPath = state.selectedPath === path ? null : path;
}
updateSelectionUI();
}
function updateSelectionUI() {
var modal = document.getElementById('rj-imgmgr-modal');
if (!modal) return;
modal.querySelectorAll('.rj-imgmgr-item, .rj-imgmgr-row').forEach(function (item) {
var path = item.dataset.path;
var isSelected = isSelectedPath(path);
item.classList.toggle('selected', isSelected);
var check = item.querySelector('.rj-imgmgr-check');
if (check) check.classList.toggle('checked', isSelected);
});
var info = modal.querySelector('.rj-imgmgr-selection-info');
var confirmBtn = modal.querySelector('[data-action="confirm"]');
if (!state.isPicker) {
info.textContent = '';
info.classList.remove('has-selection');
confirmBtn.hidden = true;
confirmBtn.disabled = true;
return;
}
if (state.mode === 'trash') {
info.textContent = t('image.trash_hint');
info.classList.remove('has-selection');
confirmBtn.hidden = true;
confirmBtn.disabled = true;
return;
}
confirmBtn.hidden = false;
var selectedCount = state.multiplePicker ? state.selectedPaths.length : (state.selectedPath ? 1 : 0);
if (selectedCount) {
info.textContent = state.multiplePicker
? t('media.selection_count', { count: selectedCount })
: state.selectedPath;
info.classList.add('has-selection');
confirmBtn.disabled = false;
} else {
info.textContent = t(isImageOnlyPicker() ? 'image.no_selection' : 'media.no_selection');
info.classList.remove('has-selection');
confirmBtn.disabled = true;
}
}
function updateModeUI() {
var modal = document.getElementById('rj-imgmgr-modal');
if (!modal) return;
modal.querySelectorAll('.rj-imgmgr-mode-btn').forEach(function (btn) {
btn.classList.toggle('rj-imgmgr-mode-btn--active', btn.dataset.mode === state.mode);
btn.setAttribute('aria-pressed', btn.dataset.mode === state.mode ? 'true' : 'false');
});
var dropzone = modal.querySelector('.rj-imgmgr-dropzone');
var emptyBtn = modal.querySelector('.rj-imgmgr-empty-trash-btn');
if (dropzone) dropzone.hidden = state.mode === 'trash';
if (emptyBtn) emptyBtn.hidden = state.mode !== 'trash';
updateGeneratorButton();
if (state.mode === 'trash') {
state.selectedPath = null;
state.folderFilter = 'all';
}
updateFolderUI();
updateSelectionUI();
}
// ============================================================
// VIEW / SORT
// ============================================================
function switchMode(mode) {
if (mode !== 'library' && mode !== 'trash') return;
if (state.mode === mode) return;
state.mode = mode;
state.search = '';
state.page = 1;
var modal = document.getElementById('rj-imgmgr-modal');
modal.querySelector('.rj-imgmgr-search').value = '';
updateModeUI();
loadImages();
}
function switchView(view) {
state.view = view;
var modal = document.getElementById('rj-imgmgr-modal');
modal.querySelectorAll('.rj-imgmgr-view-btn').forEach(function (btn) {
btn.classList.toggle('rj-imgmgr-view-btn--active', btn.dataset.view === view);
btn.setAttribute('aria-pressed', btn.dataset.view === view ? 'true' : 'false');
});
var gridEl = modal.querySelector('.rj-imgmgr-grid');
var listEl = modal.querySelector('.rj-imgmgr-list');
if (view === 'grid') {
gridEl.classList.remove('hidden');
listEl.classList.remove('active');
} else {
gridEl.classList.add('hidden');
listEl.classList.add('active');
}
render();
}
function sort(field) {
if (state.sort.field === field) {
state.sort.dir = state.sort.dir === 'asc' ? 'desc' : 'asc';
} else {
state.sort.field = field;
state.sort.dir = 'asc';
}
updateSortHeaderClasses();
applySortOrder();
state.page = 1;
filterAndRender();
}
// ============================================================
// ACTIONS
// ============================================================
function copyPath(path) {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(path).then(function () {
config.showToast(t('toast.copied'), 'success');
}).catch(function () {
fallbackCopy(path);
});
} else {
fallbackCopy(path);
}
}
function fallbackCopy(text) {
var ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
try { document.execCommand('copy'); config.showToast(t('toast.copied'), 'success'); }
catch (e) { config.showToast(t('toast.error'), 'error'); }
document.body.removeChild(ta);
}
function deleteMedia(item) {
if (!item || !item.name) return;
var formData = new FormData();
formData.append('action', 'delete-media');
formData.append('type', item.type || 'image');
formData.append('filename', item.name);
formData.append('csrf_token', config.csrfToken);
fetch(config.apiUrl, { method: 'POST', body: formData })
.then(function (r) { return r.json(); })
.then(function (result) {
if (result.success) {
config.showToast(t('image.trashed'), 'success');
if (state.selectedPath === item.path || (state.selectedPath && state.selectedPath.indexOf('/' + item.name) !== -1)) {
state.selectedPath = null;
}
state.selectedPaths = state.selectedPaths.filter(function(path) { return path !== item.path; });
loadImages();
} else {
config.showToast(result.message || t('toast.error'), 'error');
}
})
.catch(function (err) {
config.showToast(err.message || t('toast.error'), 'error');
});
}
function restoreMedia(item) {
if (!item || !item.name) return;
var formData = new FormData();
formData.append('action', 'restore-media');
formData.append('type', item.type || 'image');
formData.append('filename', item.name);
formData.append('csrf_token', config.csrfToken);
fetch(config.apiUrl, { method: 'POST', body: formData })
.then(function (r) { return r.json(); })
.then(function (result) {
if (result.success) {
config.showToast(t('image.restored'), 'success');
loadImages();
} else {
config.showToast(result.message || t('toast.error'), 'error');
}
})
.catch(function (err) {
config.showToast(err.message || t('toast.error'), 'error');
});
}
function deleteMediaPermanently(item) {
if (!item || !item.name) return;
confirmAction(
t('image.delete_permanently'),
t('image.delete_permanently_confirm', { filename: item.name }),
function () {
var formData = new FormData();
formData.append('action', 'delete-media-trash');
formData.append('type', item.type || 'image');
formData.append('filename', item.name);
formData.append('csrf_token', config.csrfToken);
fetch(config.apiUrl, { method: 'POST', body: formData })
.then(function (r) { return r.json(); })
.then(function (result) {
if (result.success) {
config.showToast(t('image.deleted_permanently'), 'success');
loadImages();
} else {
config.showToast(result.message || t('toast.error'), 'error');
}
})
.catch(function (err) {
config.showToast(err.message || t('toast.error'), 'error');
});
}
);
}
// In-app name prompt: window.prompt() is unavailable in embedded
// webviews (Electron/VS Code) and clashes with the UI style anyway.
function promptFolderName(onSubmit) {
var existing = document.getElementById('rj-imgmgr-folder-prompt');
if (existing) existing.remove();
var dialog = document.createElement('div');
dialog.id = 'rj-imgmgr-folder-prompt';
dialog.className = 'rj-imgmgr-move active';
dialog.innerHTML =
'' +
'' +
'' +
'
' +
'' +
'' +
'
' +
'' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
) + ')
';
} else if (isAudio(item)) {
stage.innerHTML = '';
} else if (isVideo(item)) {
stage.innerHTML = '';
} else {
stage.innerHTML = '';
}
lb.querySelector('.rj-imgmgr-lightbox-info').textContent = label;
updateLightboxNav();
lb.classList.add('active');
}
function lightboxImages() {
var items = (state.filtered && state.filtered.length ? state.filtered : state.data).filter(isImage);
return items.length ? items : (state.lightboxItem && isImage(state.lightboxItem) ? [state.lightboxItem] : []);
}
function updateLightboxNav() {
var lb = document.getElementById('rj-imgmgr-lightbox');
if (!lb) return;
var items = lightboxImages();
var canNavigate = items.length > 1 && state.lightboxItem && isImage(state.lightboxItem);
lb.querySelectorAll('.rj-imgmgr-lightbox-nav').forEach(function(btn) {
btn.hidden = !canNavigate;
});
}
function showAdjacentLightboxImage(direction) {
var items = lightboxImages();
if (items.length <= 1 || !state.lightboxItem) return;
var index = items.findIndex(function(item) { return item.path === state.lightboxItem.path; });
if (index === -1) index = 0;
var nextIndex = (index + direction + items.length) % items.length;
openLightbox(items[nextIndex]);
}
function closeLightbox() {
var lb = document.getElementById('rj-imgmgr-lightbox');
if (lb) {
lb.querySelectorAll('audio, video').forEach(function (media) { media.pause(); });
lb.classList.remove('active');
}
state.lightboxItem = null;
}
// ============================================================
// REPLACE DIALOG
// ============================================================
function createReplaceDialog() {
if (document.getElementById('rj-imgmgr-replace')) return;
var dialog = document.createElement('div');
dialog.id = 'rj-imgmgr-replace';
dialog.className = 'rj-imgmgr-replace';
dialog.innerHTML =
'' +
'' +
'' +
'
' +
'
' + escapeHtml(t('image.replacing')) + '
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'
' +
'
' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'
' +
'
' +
'
' + escapeHtml(t('media.original_hint')) + '
' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' + escapeHtml(t('media.rename_extension_hint')) + '
' +
'
' +
'
' +
'' +
'
' +
'' +
'
' +
'
' +
'
' +
option('', t('media.ai_none'), '') +
option('generated', t('media.ai_generated'), t('media.ai_generated_desc')) +
option('modified', t('media.ai_modified'), t('media.ai_modified_desc')) +
'
' +
'
' + escapeHtml(t('media.ai_hint')) + '
' +
'
' +
'' +
'
' + references.slice(0, 10).map(function(ref) {
var first = ref.matches && ref.matches[0] ? ref.matches[0] : null;
var line = first && first.line ? ':' + first.line : '';
var snippet = first && first.snippet ? '' + escapeHtml(first.snippet) + '' : '';
return '- ' + escapeHtml(ref.file + line) + '' + snippet + '
';
}).join('') + '
' +
'' + escapeHtml(t('media.rename_references_confirm')) + '
' +
'';
box.querySelector('[data-action="confirm-rename"]').addEventListener('click', function () {
submitRename(true);
});
}
function submitRename(confirmReferences) {
if (!renameTarget || !renameTarget.name) return;
var dialog = document.getElementById('rj-imgmgr-rename');
var input = dialog.querySelector('.rj-imgmgr-rename-input');
var submit = dialog.querySelector('[data-action="submit"]');
var newName = (input.value || '').trim();
if (!newName) {
input.focus();
return;
}
var formData = new FormData();
formData.append('action', 'rename-media');
formData.append('type', renameTarget.type || 'image');
formData.append('filename', renameTarget.name);
formData.append('newName', newName);
formData.append('scanReferences', dialog.querySelector('.rj-imgmgr-rename-scan').checked ? '1' : '0');
formData.append('confirmReferences', confirmReferences ? '1' : '0');
formData.append('csrf_token', config.csrfToken);
submit.disabled = true;
fetch(config.apiUrl, { method: 'POST', body: formData })
.then(function (r) { return r.json(); })
.then(function (result) {
if (result.success) {
var oldPath = renameTarget.path;
config.showToast(t('media.file_renamed'), 'success');
if (state.selectedPath === renameTarget.path && result.data && result.data.path) {
state.selectedPath = result.data.path.replace(/^\.\.\//, '/');
}
state.selectedPaths = state.selectedPaths.map(function(path) {
return path === oldPath && result.data && result.data.path
? result.data.path.replace(/^\.\.\//, '/')
: path;
});
closeRenameDialog();
loadImages();
return;
}
if (result.data && result.data.requiresConfirmation) {
pendingRename = result.data;
renderRenameReferences(result.data.references || []);
return;
}
config.showToast(result.message || t('toast.error'), 'error');
})
.catch(function (err) {
config.showToast(err.message || t('toast.error'), 'error');
})
.finally(function () {
submit.disabled = false;
});
}
// ============================================================
// PUBLIC API
// ============================================================
window.NbImageManager = {
init: function (options) {
Object.assign(config, options || {});
},
open: open,
mount: mount,
preview: function (path, name) {
var item = state.data.find(function (entry) { return entry.path === path; });
openLightbox(item || path, name || path);
},
detectTransparency: detectTransparency,
close: close,
confirmSelection: confirmSelection,
refresh: function () {
if (!document.getElementById('rj-imgmgr-modal')) return;
updateModeUI();
updateTypeUI();
filterAndRender();
},
};
})();