cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(js): move multiSelect into batchToolbar + move residual method into relevant components

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-05-26 22:59:43 +02:00
parent 1cd934d594
commit 6ac4e6177c
13 changed files with 215 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app/filesView.js
+4 -4
View File
@@ -2,7 +2,7 @@
import { i18n } from '../core/i18n.js';
import { inlineViewer } from '../features/files/inlineViewer.js';
import { multiSelect } from '../features/files/multiSelect.js';
import { batchToolbar } from '../features/files/batchToolbar.js';
import { resolveHomeFolder } from './authSession.js';
import { updateHistory } from './main.js';
import { app } from './state.js';
@@ -217,9 +217,9 @@ async function loadFiles(options = { insertHistory: true }) {
ui._items.clear();
ui.resetFilesList();
if (multiSelect) {
multiSelect.clear();
multiSelect.init(); // this will wire buttons & select-all-checkbox
if (batchToolbar) {
batchToolbar.clear();
batchToolbar.init(); // this will wire buttons & select-all-checkbox
}
/** @type {FolderItem[]} */
static/js/app/main.js
+7 -7
View File
@@ -12,7 +12,7 @@ import { formatFileSize, formatQuotaSize } from '../core/formatters.js';
import { i18n } from '../core/i18n.js';
import { oxiIconsInit } from '../core/icons.js';
import { fileOps } from '../features/files/fileOperations.js';
import { multiSelect } from '../features/files/multiSelect.js';
import { batchToolbar } from '../features/files/batchToolbar.js';
import { favorites } from '../features/library/favorites.js';
import { recent } from '../features/library/recent.js';
import { fileSharing } from '../features/sharing/fileSharing.js';
@@ -50,7 +50,7 @@ let uploadDropdownDocumentClickHandler = null;
let uploadDropdownBindingsController = null;
let actionsBarDelegationBound = false;
const _multiSelectButons = `
const _batchToolbarButons = `
<div class="action-buttons batch-selection-bar hidden" id="multi-select-buttons">
<div class="list-header-checkbox">
<button class="batch-bar-close" id="batch-selection-close" title="Cancel selection">
@@ -117,7 +117,7 @@ const ACTIONS_BAR_TEMPLATES = {
<span data-i18n="actions.new_folder">New folder</span>
</button>
</div>
${_multiSelectButons}
${_batchToolbarButons}
${_toggleButtons}
`,
trash: `
@@ -131,7 +131,7 @@ const ACTIONS_BAR_TEMPLATES = {
`,
favorites: `
<div class="action-buttons" id="default-buttons"></div>
${_multiSelectButons}
${_batchToolbarButons}
${_toggleButtons}
`,
recent: `
@@ -141,7 +141,7 @@ const ACTIONS_BAR_TEMPLATES = {
<span data-i18n="actions.clear_recent">Clear recent</span>
</button>
</div>
${_multiSelectButons}
${_batchToolbarButons}
${_toggleButtons}
`,
sharedwithme: `
@@ -386,9 +386,9 @@ function initApp() {
}
// Initialize multi-select / batch actions
if (multiSelect?.init) {
if (batchToolbar?.init) {
console.log('Initializing multi-select module');
multiSelect.init();
batchToolbar.init();
}
window.addEventListener('authenticationDone', async () => {
static/js/app/navigation.js
+10 -10
View File
@@ -4,7 +4,7 @@
*/
import { i18n } from '../core/i18n.js';
import { multiSelect } from '../features/files/multiSelect.js';
import { batchToolbar } from '../features/files/batchToolbar.js';
import { favorites } from '../features/library/favorites.js';
import { musicView } from '../features/library/music.js';
import { photosView } from '../features/library/photos.js';
@@ -201,7 +201,7 @@ function switchToSharedSection() {
sharedView.show();
});
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
}
function switchToSharedWithMeSection() {
@@ -221,7 +221,7 @@ function switchToSharedWithMeSection() {
toggleFileContainer(true);
syncViewContainers();
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
// Load and render items into the files container
sharedWithMeView.init();
@@ -253,7 +253,7 @@ function switchToFilesSection() {
app.currentPath = app.userHomeFolderId || '';
app.breadcrumbPath = [];
ui.updateBreadcrumb();
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
// temp solution
sharedView.loadItems().then(() => {
@@ -296,7 +296,7 @@ function switchToFavoritesSection() {
`);
}
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
}
function switchToRecentFilesSection() {
@@ -329,7 +329,7 @@ function switchToRecentFilesSection() {
<p>Error loading the recent module</p>
`);
}
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
}
function switchToPhotosSection() {
@@ -352,7 +352,7 @@ function switchToPhotosSection() {
if (photosView) {
photosView.show();
}
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
}
function switchToTrashSection() {
@@ -377,7 +377,7 @@ function switchToTrashSection() {
// Load trash items
loadTrashItems();
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
}
function switchToMusicSection() {
@@ -404,7 +404,7 @@ function switchToMusicSection() {
if (musicView) {
musicView.show();
}
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
}
/**
@@ -423,7 +423,7 @@ function activateFilesUI() {
breadcrumb?.classList.remove('hidden');
toggleFileContainer(true);
syncViewContainers();
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
}
export {
static/js/app/trashView.js
+2 -2
View File
@@ -5,7 +5,7 @@
import { escapeHtml, formatDateTime } from '../core/formatters.js';
import { i18n } from '../core/i18n.js';
import { fileOps } from '../features/files/fileOperations.js';
import { multiSelect } from '../features/files/multiSelect.js';
import { batchToolbar } from '../features/files/batchToolbar.js';
import * as pathTooltip from '../features/pathTooltip.js';
import { appElements } from './state.js';
import { ui } from './ui.js';
@@ -22,7 +22,7 @@ async function loadTrashItems() {
const elements = appElements;
try {
if (multiSelect) multiSelect.clear();
if (batchToolbar) batchToolbar.clear();
pathTooltip.destroy(elements.filesList);
ui.resetFilesList(); // ensure also list visible & error hidden
elements.filesList.innerHTML = `
static/js/app/ui.js
+18 -18
View File
@@ -13,7 +13,7 @@ import { OxiIcons } from '../core/icons.js';
import { contextMenus } from '../features/files/contextMenus.js';
import { fileOps } from '../features/files/fileOperations.js';
import { inlineViewer } from '../features/files/inlineViewer.js';
import { multiSelect } from '../features/files/multiSelect.js';
import { batchToolbar } from '../features/files/batchToolbar.js';
import { wopiEditor } from '../features/files/wopiEditor.js';
import { favorites } from '../features/library/favorites.js';
import { recent } from '../features/library/recent.js';
@@ -727,9 +727,9 @@ const ui = {
* @param {any} dataTransfer fallback if nothing is selected
*/
async _dropToFolder(action, targetFolderId, dataTransfer) {
const selection = multiSelect.getSelection(targetFolderId);
const selection = batchToolbar.getSelection(targetFolderId);
multiSelect.clear();
batchToolbar.clear();
if (selection.fileIds.length === 0 && selection.folderIds.length === 0) {
// try to use dataTransfer (direct move without selection)
@@ -774,7 +774,7 @@ const ui = {
console.error(`drag and drop: action ${action} unknown`);
return;
}
multiSelect.showBatchResult(action, result);
batchToolbar.showBatchResult(action, result);
console.log(result);
},
@@ -941,8 +941,8 @@ const ui = {
}
// shiftkey is used to complete selection
if (e.shiftKey && multiSelect) {
multiSelect.handleToggleItem(card, e);
if (e.shiftKey && batchToolbar) {
batchToolbar.handleToggleItem(card, e);
return;
}
@@ -1512,13 +1512,13 @@ const ui = {
/**
* Toggle selection state of a file/folder card.
* Routes through the multiSelect module so batch actions know about selected items.
* Routes through the batchToolbar module so batch actions know about selected items.
* @param {HTMLDivElement} card
* @param {MouseEvent} event
*/
function toggleCardSelection(card, event) {
if (multiSelect) {
multiSelect.handleToggleItem(card, event);
if (batchToolbar) {
batchToolbar.handleToggleItem(card, event);
} else {
card.classList.toggle('selected');
}
@@ -1641,17 +1641,17 @@ function initRubberBandSelection() {
if (intersects) {
card.classList.add('selected');
// Sync with multiSelect module
if (multiSelect) {
const info = multiSelect._extractInfo(/** @type {HTMLDivElement} */ (card));
if (info) multiSelect.select(info.id, info.name, info.type, info.parentId);
// Sync with batchToolbar module
if (batchToolbar) {
const info = batchToolbar._extractInfo(/** @type {HTMLDivElement} */ (card));
if (info) batchToolbar.select(info.id, info.name, info.type, info.parentId);
}
} else {
card.classList.remove('selected');
// Deselect from multiSelect module
if (multiSelect) {
const info = multiSelect._extractInfo(/** @type {HTMLDivElement} */ (card));
if (info) multiSelect.deselect(info.id);
// Deselect from batchToolbar module
if (batchToolbar) {
const info = batchToolbar._extractInfo(/** @type {HTMLDivElement} */ (card));
if (info) batchToolbar.deselect(info.id);
}
}
});
@@ -1663,7 +1663,7 @@ function initRubberBandSelection() {
const hadSelection = selRect.style.display === 'block';
selRect.style.display = 'none';
// Update the batch bar after rubber band selection completes
if (multiSelect) multiSelect._syncUI();
if (batchToolbar) batchToolbar._syncUI();
// Suppress the click event that follows mouseup so the global
// deselect handler doesn't immediately clear the selection.
if (hadSelection) {