mathieu/personotes
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changement des ilink vers markdown pur

Browse Source
This commit is contained in:
Mathieu Aumont
2025-11-12 20:17:43 +01:00
parent 6585b1765a
commit a09b73e4f1
25 changed files with 803 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/src/file-tree.js
View File

@ -1,3 +1,4 @@
import { debug, debugError } from './debug.js';
/**
* FileTree - Gère l'arborescence hiérarchique avec drag & drop
* Utilise la délégation d'événements pour éviter les problèmes de listeners perdus
@ -12,7 +13,7 @@ class FileTree {
init() {
this.setupEventListeners();
console.log('FileTree initialized with event delegation');
debug('FileTree initialized with event delegation');
}
setupEventListeners() {
@ -112,27 +113,33 @@ class FileTree {
}
};
// Drag over - délégué sur les folder-headers
// Drag over - délégué sur les folder-headers et la racine
this.dragOverHandler = (e) => {
const folderHeader = e.target.closest('.folder-header');
if (folderHeader) {
this.handleDragOver(e, folderHeader);
const rootHeader = e.target.closest('.sidebar-section-header[data-section="notes"]');
const target = folderHeader || rootHeader;
if (target) {
this.handleDragOver(e, target);
}
};
// Drag leave - délégué
this.dragLeaveHandler = (e) => {
const folderHeader = e.target.closest('.folder-header');
if (folderHeader) {
this.handleDragLeave(e, folderHeader);
const rootHeader = e.target.closest('.sidebar-section-header[data-section="notes"]');
const target = folderHeader || rootHeader;
if (target) {
this.handleDragLeave(e, target);
}
};
// Drop - délégué
this.dropHandler = (e) => {
const folderHeader = e.target.closest('.folder-header');
if (folderHeader) {
this.handleDrop(e, folderHeader);
const rootHeader = e.target.closest('.sidebar-section-header[data-section="notes"]');
const target = folderHeader || rootHeader;
if (target) {
this.handleDrop(e, target);
}
};
@ -152,7 +159,7 @@ class FileTree {
// Vérifier si le swap concerne le file-tree
const target = event.detail?.target;
if (target && (target.id === 'file-tree' || target.closest('#file-tree'))) {
console.log('FileTree: afterSwap detected, updating attributes...');
debug('FileTree: afterSwap detected, updating attributes...');
this.updateDraggableAttributes();
}
});
@ -162,14 +169,14 @@ class FileTree {
const target = event.detail?.target;
// Ignorer les swaps de statut (auto-save-status, save-status)
if (target && target.id === 'file-tree') {
console.log('FileTree: oobAfterSwap detected, updating attributes...');
debug('FileTree: oobAfterSwap detected, updating attributes...');
this.updateDraggableAttributes();
}
});
// Écouter les restaurations d'historique (bouton retour du navigateur)
document.body.addEventListener('htmx:historyRestore', () => {
console.log('FileTree: History restored, re-initializing event listeners...');
debug('FileTree: History restored, re-initializing event listeners...');
// Réinitialiser complètement les event listeners après restauration de l'historique
setTimeout(() => {
this.setupEventListeners();
@ -214,7 +221,7 @@ class FileTree {
this.draggedPath = path;
this.draggedType = type;
console.log('Drag start:', { type, path, name });
debug('Drag start:', { type, path, name });
}
handleDragEnd(e) {
@ -242,20 +249,23 @@ class FileTree {
this.draggedType = null;
}
handleDragOver(e, folderHeader) {
handleDragOver(e, target) {
e.preventDefault();
e.stopPropagation();
const folderItem = folderHeader.closest('.folder-item');
if (!folderItem) return;
// Gérer soit un folder-header dans un folder-item, soit la racine (sidebar-section-header)
const isRoot = target.classList.contains('sidebar-section-header');
const targetElement = isRoot ? target : target.closest('.folder-item');
const targetPath = folderItem.dataset.path;
if (!targetElement) return;
const targetPath = targetElement.dataset.path;
// Empêcher de déplacer un dossier dans lui-même ou dans ses enfants
if (this.draggedType === 'folder' && this.draggedPath) {
if (targetPath === this.draggedPath || targetPath.startsWith(this.draggedPath + '/')) {
e.dataTransfer.dropEffect = 'none';
folderItem.classList.remove('drag-over');
targetElement.classList.remove('drag-over');
this.removeDestinationIndicator();
return;
}
@ -263,34 +273,37 @@ class FileTree {
e.dataTransfer.dropEffect = 'move';
if (folderItem && !folderItem.classList.contains('drag-over')) {
// Retirer la classe des autres dossiers
document.querySelectorAll('.folder-item.drag-over').forEach(f => {
if (f !== folderItem) {
if (targetElement && !targetElement.classList.contains('drag-over')) {
// Retirer la classe des autres dossiers et de la racine
document.querySelectorAll('.folder-item.drag-over, .sidebar-section-header.drag-over').forEach(f => {
if (f !== targetElement) {
f.classList.remove('drag-over');
}
});
folderItem.classList.add('drag-over');
targetElement.classList.add('drag-over');
// Afficher l'indicateur de destination
this.showDestinationIndicator(folderItem, targetPath);
this.showDestinationIndicator(targetElement, targetPath, isRoot);
}
}
handleDragLeave(e, folderHeader) {
const folderItem = folderHeader.closest('.folder-item');
if (!folderItem) return;
handleDragLeave(e, target) {
// Gérer soit un folder-header dans un folder-item, soit la racine (sidebar-section-header)
const isRoot = target.classList.contains('sidebar-section-header');
const targetElement = isRoot ? target : target.closest('.folder-item');
// Vérifier que la souris a vraiment quitté le dossier
const rect = folderHeader.getBoundingClientRect();
if (!targetElement) return;
// Vérifier que la souris a vraiment quitté l'élément
const rect = target.getBoundingClientRect();
if (e.clientX < rect.left || e.clientX >= rect.right ||
e.clientY < rect.top || e.clientY >= rect.bottom) {
folderItem.classList.remove('drag-over');
targetElement.classList.remove('drag-over');
this.removeDestinationIndicator();
}
}
showDestinationIndicator(folderItem, targetPath) {
showDestinationIndicator(targetElement, targetPath, isRoot) {
let indicator = document.getElementById('drag-destination-indicator');
if (!indicator) {
indicator = document.createElement('div');
@ -299,8 +312,7 @@ class FileTree {
document.body.appendChild(indicator);
}
const folderName = folderItem.querySelector('.folder-name').textContent.trim();
const isRoot = folderItem.dataset.isRoot === 'true';
const folderName = targetElement.querySelector('.folder-name').textContent.trim();
const displayPath = isRoot ? 'notes/' : targetPath;
indicator.innerHTML = `
@ -318,14 +330,17 @@ class FileTree {
}
}
handleDrop(e, folderHeader) {
handleDrop(e, target) {
e.preventDefault();
e.stopPropagation();
const folderItem = folderHeader.closest('.folder-item');
if (!folderItem) return;
// Gérer soit un folder-header dans un folder-item, soit la racine (sidebar-section-header)
const isRoot = target.classList.contains('sidebar-section-header');
const targetElement = isRoot ? target : target.closest('.folder-item');
folderItem.classList.remove('drag-over');
if (!targetElement) return;
targetElement.classList.remove('drag-over');
// Supprimer l'indicateur de destination
this.removeDestinationIndicator();
@ -333,9 +348,9 @@ class FileTree {
const sourcePath = e.dataTransfer.getData('application/note-path') ||
e.dataTransfer.getData('text/plain');
const sourceType = e.dataTransfer.getData('application/note-type');
const targetFolderPath = folderItem.dataset.path;
const targetFolderPath = targetElement.dataset.path;
console.log('Drop event:', {
debug('Drop event:', {
sourcePath,
sourceType,
targetFolderPath,
@ -364,7 +379,7 @@ class FileTree {
const sourceDir = sourcePath.includes('/') ?
sourcePath.substring(0, sourcePath.lastIndexOf('/')) : '';
if (sourceDir === targetFolderPath) {
console.log('Déjà dans le même dossier parent, rien à faire');
debug('Déjà dans le même dossier parent, rien à faire');
return;
}
@ -377,12 +392,12 @@ class FileTree {
// Si targetFolderPath est vide (racine), ne pas ajouter de slash
const destinationPath = targetFolderPath === '' ? itemName : targetFolderPath + '/' + itemName;
console.log(`Déplacement: ${sourcePath} → ${destinationPath}`);
debug(`Déplacement: ${sourcePath} → ${destinationPath}`);
this.moveFile(sourcePath, destinationPath);
}
async moveFile(sourcePath, destinationPath) {
console.log('moveFile called:', { sourcePath, destinationPath });
debug('moveFile called:', { sourcePath, destinationPath });
try {
// Utiliser htmx.ajax() au lieu de fetch() manuel
@ -392,7 +407,7 @@ class FileTree {
values: { source: sourcePath, destination: destinationPath },
swap: 'none' // On ne swap rien directement, le serveur utilise hx-swap-oob
}).then(() => {
console.log(`Fichier déplacé: ${sourcePath} -> ${destinationPath}`);
debug(`Fichier déplacé: ${sourcePath} -> ${destinationPath}`);
}).catch((error) => {
console.error('Erreur lors du déplacement:', error);
alert('Erreur lors du déplacement du fichier');
@ -504,7 +519,7 @@ window.handleNewFolder = async function(event) {
swap: 'none' // On ne swap rien directement, le serveur utilise hx-swap-oob
}).then(() => {
window.hideNewFolderModal();
console.log(`Dossier créé: ${folderName}`);
debug(`Dossier créé: ${folderName}`);
}).catch((error) => {
console.error('Erreur lors de la création du dossier:', error);
alert('Erreur lors de la création du dossier');
@ -722,7 +737,7 @@ class SelectionManager {
}
});
console.log(`${paths.length} élément(s) supprimé(s)`);
debug(`${paths.length} élément(s) supprimé(s)`);
// Fermer la modale
this.hideDeleteConfirmationModal();