Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2026-01-05 23:35:34 +01:00
Code Issues Projects Releases Wiki Activity

chore (rewrite): drag and drop for moving things around

Browse source
This commit is contained in:
MickaelK 2024-05-28 19:14:45 +10:00
parent a0cb495ce5
commit ca7cdb3683
5 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/assets/components/breadcrumb.css
View file

@ -69,7 +69,7 @@
border-radius: 3px;
letter-spacing: -0.5px;
}
.component_breadcrumb .component_path-element .component_path-element-wrapper.highlight a {
.component_breadcrumb .component_path-element.highlight .component_path-element-wrapper a {
color: var(--bg-color);
background: var(--dark);
border-radius: 3px;

21
public/assets/components/breadcrumb.js
View file

@ -1,6 +1,9 @@
import { animate, slideYOut, slideYIn, opacityOut } from "../lib/animate.js";
import { loadCSS } from "../helpers/loader.js";
import { mv } from "../pages/filespage/model_files.js";
import { extractPath } from "../pages/filespage/helper.js";
class ComponentBreadcrumb extends window.HTMLDivElement {
constructor() {
super();
@ -100,7 +103,7 @@ class ComponentBreadcrumb extends window.HTMLDivElement {
})();
return `
<div class="component_path-element n${idx}">
<div class="component_path-element n${idx}" data-path="${pathChunks.slice(0, idx+1).join("/") + "/"}">
<div class="li component_path-element-wrapper">
<a class="label" href="/files${link}" data-link>
${tmpl}
@ -154,16 +157,22 @@ class ComponentBreadcrumb extends window.HTMLDivElement {
setupDragDropTarget() {
this.querySelectorAll("a.label").forEach(($folder) => {
const $path = $folder.closest(".component_path-element");
$folder.ondragover = (e) => {
e.preventDefault();
$folder.parentElement.classList.add("highlight");
$path.classList.add("highlight");
};
$folder.ondragleave = () => {
$folder.parentElement.classList.remove("highlight");
$path.classList.remove("highlight");
};
$folder.ondrop = (e) => {
$folder.parentElement.classList.remove("highlight");
console.log("DROP", e.dataTransfer.getData("path"));
$folder.ondrop = async (e) => {
$path.classList.remove("highlight");
const from = e.dataTransfer.getData("path");
let to = $path.getAttribute("data-path");
const [fromBasepath, fromName] = extractPath(from);
to += fromName + "/";
await mv(from, to).toPromise();
};
});
}

3
public/assets/locales/fr.json
View file

@ -11,6 +11,7 @@
"CAMERA": "appareil",
"CAN_RESHARE": "peut repartager",
"CANCEL": "annuler",
"CONNECTION_LOST": "Connection perdue",
"CANNOT_ESTABLISH_A_CONNECTION": "Impossible d'établir une connexion",
"CANT_LOAD_THIS_PICTURE": "impossible de charger cette image",
"CANT_USE_FILESYSTEM": "Impossible d'utiliser le système de fichiers",
@ -93,7 +94,7 @@
"SAVE_CURRENT_FILE": "enregistrer le fichier actuel",
"SEARCH": "recherche",
"SETTINGS": "réglage",
"SORT": "tri",
"SORT": "ordre",
"STARRED": "favoris",
"SHARE": "partager",
"SHARED_DRIVE": "disque partagé",

1
public/assets/pages/filespage/cache_transcient.js
View file

@ -202,6 +202,7 @@ export function mv(ajax$, fromPath, toPath) {
fn: (file) => {
if (file.name === fromName) {
file.loading = true;
file.last = true;
type = file.type;
}
return file;

3
public/assets/pages/filespage/thing.js
View file

@ -5,7 +5,7 @@ import assert from "../../lib/assert.js";
import { extractPath } from "./helper.js";
import { mv } from "./model_files.js";
import { files$ } from "./ctrl_filesystem.js";
import { addSelection, isSelected } from "./state_selection.js";
import { addSelection, isSelected, clearSelection } from "./state_selection.js";
const IMAGE = {
FILE: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiPgogIDxwYXRoIHN0eWxlPSJjb2xvcjojMDAwMDAwO3RleHQtaW5kZW50OjA7dGV4dC10cmFuc2Zvcm06bm9uZTtmaWxsOiM4YzhjOGM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuOTg0ODEwNDEiIGQ9Im0gMiwxMy4wODI0MTIgMC4wMTk0NjIsMS40OTIzNDcgYyA1ZS02LDAuMjIyMTQ1IDAuMjA1NTkwMiwwLjQyNDI2MiAwLjQzMTE1MDIsMC40MjQyNzIgTCAxMy41ODk2MTIsMTUgQyAxMy44MTUxNzMsMTQuOTk5OTk1IDEzLjk5OTk5LDE0Ljc5Nzg3NCAxNCwxNC41NzU3MjkgdiAtMS40OTMzMTcgYyAtNC4xNzE4NjkyLDAuNjYyMDIzIC03LjY1MTY5MjgsMC4zOTg2OTYgLTEyLDAgeiIgLz4KICA8cGF0aCBzdHlsZT0iY29sb3I6IzAwMDAwMDt0ZXh0LWluZGVudDowO3RleHQtdHJhbnNmb3JtOm5vbmU7ZGlzcGxheTppbmxpbmU7ZmlsbDojYWFhYWFhO3N0cm9rZS13aWR0aDowLjk4NDA4MTI3IiBkPSJNIDIuMzUwMSwxLjAwMTMzMTIgQyAyLjE1MjU5LDEuMDM4MzI0NyAxLjk5NjU5LDEuMjI3MjcyMyAyLjAwMDA5LDEuNDI0OTM1NiBWIDE0LjEzMzQ1NyBjIDVlLTYsMC4yMjE4MTYgMC4yMDUyMywwLjQyMzYzNCAwLjQzMDc5LDAuNDIzNjQ0IGwgMTEuMTM5LC0xLjAxZS00IGMgMC4yMjU1NiwtNmUtNiAwLjQzMDExLC0wLjIwMDc1OCAwLjQzMDEyLC0wLjQyMjU3NCBsIDYuN2UtNCwtOS44MjI2NDI2IGMgLTIuNDg0MDQ2LC0xLjM1NTAwNiAtMi40MzUyMzQsLTIuMDMxMjI1NCAtMy41MDAxLC0zLjMwOTcwNyAtMC4wNDMsLTAuMDE1ODgyIDAuMDQ2LDAuMDAxNzQgMCwwIEwgMi40MzA2NywxLjAwMTEwOCBDIDIuNDAzODMsMC45OTg1OSAyLjM3Njc0LDAuOTk4NTkgMi4zNDk5LDEuMDAxMTA4IFoiIC8+CiAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6IzhjOGM4YztmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzllNzU3NTtzdHJva2Utd2lkdGg6MDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDEwLjUwMDU3LDEuMDAyMDc2NCBjIDAsMy4yNzY4MDI4IC0wLjAwNTIsMy4xNzM5MTYxIDAuMzYyOTIxLDMuMjY5ODIwMiAwLjI4MDEwOSwwLjA3Mjk4NCAzLjEzNzE4LDAuMDM5ODg3IDMuMTM3MTgsMC4wMzk4ODcgLTEuMTIwMDY3LC0xLjA1NTY2OTIgLTIuMzMzNCwtMi4yMDY0NzEzIC0zLjUwMDEsLTMuMzA5NzA3NCB6IiAvPgo8L3N2Zz4K",
@ -103,6 +103,7 @@ export function createThing({
});
};
$thing.ondragstart = (e) => {
clearSelection();
$thing.classList.add("hover");
e.dataTransfer.setData("path", path);
e.dataTransfer.setDragImage($thing, e.offsetX, -10);