mirror of
https://github.com/mickael-kerjean/filestash.git
synced 2025-10-27 19:53:41 +08:00
71b14e6eaf
This contains a bunch of things packaged in 1: 1) UI improvements for the 3D viewer to support all sort of file types and create a nice rendering in a clean way with all sort of options 2) enable people to use Filestash as an SDK so we can embed the 3d viewer elsewhere
423 lines
23 KiB
JavaScript
423 lines
23 KiB
JavaScript
import { createElement, createRender, createFragment, onDestroy } from "../../lib/skeleton/index.js";
|
|
import rxjs, { effect, onClick, preventDefault } from "../../lib/rx.js";
|
|
import { animate, slideXIn, slideYIn } from "../../lib/animate.js";
|
|
import { basename, forwardURLParams } from "../../lib/path.js";
|
|
import { loadCSS } from "../../helpers/loader.js";
|
|
import assert from "../../lib/assert.js";
|
|
import { qs, qsa } from "../../lib/dom.js";
|
|
import t from "../../locales/index.js";
|
|
|
|
import "../../components/dropdown.js";
|
|
import "../../components/icon.js";
|
|
import { createModal } from "../../components/modal.js";
|
|
|
|
import componentShare from "./modal_share.js";
|
|
import componentTag from "./modal_tag.js";
|
|
import componentRename from "./modal_rename.js";
|
|
import componentDelete from "./modal_delete.js";
|
|
|
|
import { getSelection$, clearSelection, lengthSelection, expandSelection } from "./state_selection.js";
|
|
import { getAction$, setAction } from "./state_newthing.js";
|
|
import { setState, getState$ } from "./state_config.js";
|
|
import { clearCache } from "./cache.js";
|
|
import { getPermission, calculatePermission } from "./model_acl.js";
|
|
import { currentPath, extractPath } from "./helper.js";
|
|
|
|
import { rm as rm$, mv as mv$ } from "./model_files.js";
|
|
import { rm as rmVL, mv as mvVL, withVirtualLayer } from "./model_virtual_layer.js";
|
|
|
|
const modalOpt = {
|
|
withButtonsRight: t("OK"),
|
|
withButtonsLeft: t("CANCEL"),
|
|
};
|
|
|
|
const rm = (...paths) => withVirtualLayer(
|
|
rm$(...paths),
|
|
rmVL(...paths),
|
|
);
|
|
|
|
const mv = (from, to) => withVirtualLayer(
|
|
mv$(from, to),
|
|
mvVL(from, to),
|
|
);
|
|
|
|
export default async function(render) {
|
|
const $page = createElement(`
|
|
<div class="component_submenu container">
|
|
<div class="action left no-select"></div>
|
|
<div class="action right no-select"></div>
|
|
</div>
|
|
`);
|
|
render($page);
|
|
onDestroy(() => clearSelection());
|
|
|
|
const $scroll = assert.type($page.closest(".scroll-y"), HTMLElement);
|
|
componentLeft(createRender(qs($page, ".action.left")), { $scroll });
|
|
componentRight(createRender(qs($page, ".action.right")));
|
|
|
|
effect(rxjs.fromEvent($scroll, "scroll", { passive: true }).pipe(
|
|
rxjs.map((e) => e.target.scrollTop > 12),
|
|
rxjs.distinctUntilChanged(),
|
|
rxjs.startWith(false),
|
|
rxjs.tap((scrolling) => scrolling
|
|
? $scroll.classList.add("scrolling")
|
|
: $scroll.classList.remove("scrolling")),
|
|
));
|
|
}
|
|
|
|
function componentLeft(render, { $scroll }) {
|
|
effect(getSelection$().pipe(
|
|
rxjs.filter(() => lengthSelection() === 0),
|
|
rxjs.mergeMap(() => rxjs.merge(rxjs.fromEvent(window, "resize"), rxjs.of(null))),
|
|
rxjs.mergeMap(() => getPermission()),
|
|
rxjs.map(() => render(createFragment(`
|
|
<button data-action="new-file" title="${t("New File")}"${toggleDependingOnPermission(currentPath(), "new-file")}>
|
|
${window.innerWidth < 410 && t("New File").length > 10
|
|
? t("New File", null, "NEW_FILE::SHORT")
|
|
: t("New File")}
|
|
</button>
|
|
<button data-action="new-folder" title="${t("New Folder")}"${toggleDependingOnPermission(currentPath(), "new-folder")}>
|
|
${window.innerWidth < 410 && t("New Folder").length > 10
|
|
? t("New Folder", null, "NEW_FOLDER::SHORT")
|
|
: t("New Folder")}
|
|
</button>
|
|
`))),
|
|
rxjs.mergeMap(($page) => rxjs.merge(
|
|
onClick(qs($page, `[data-action="new-file"]`)).pipe(rxjs.mapTo("NEW_FILE")),
|
|
onClick(qs($page, `[data-action="new-folder"]`)).pipe(rxjs.mapTo("NEW_FOLDER")),
|
|
)),
|
|
rxjs.mergeMap((actionName) => getAction$().pipe(
|
|
rxjs.first(),
|
|
rxjs.map((currentAction) => actionName === currentAction ? null : actionName),
|
|
)),
|
|
rxjs.tap((actionName) => {
|
|
$scroll.scrollTo({
|
|
top: 0,
|
|
behavior: window.chrome ? "smooth" : "instant", // prevent firefox bug
|
|
});
|
|
setAction(actionName);
|
|
}),
|
|
));
|
|
onDestroy(() => setAction(null));
|
|
|
|
effect(getSelection$().pipe(
|
|
rxjs.filter(() => lengthSelection() === 1),
|
|
rxjs.map(() => render(createFragment(`
|
|
<a target="_blank" ${generateLinkAttributes(expandSelection())}><button data-action="download" title="${t("Download")}">
|
|
${t("Download")}
|
|
</button></a>
|
|
<button data-action="delete"${toggleDependingOnPermission(currentPath(), "delete")} title="${t("Remove")}">
|
|
${t("Remove")}
|
|
</button>
|
|
<button data-action="rename" title="${t("Rename")}"${toggleDependingOnPermission(currentPath(), "rename")}>
|
|
${t("Rename")}
|
|
</button>
|
|
<button data-action="share" title="${t("Share")}" class="${(window.CONFIG["enable_share"] && !new URLSearchParams(location.search).has("share")) ? "" : "hidden"}">
|
|
${t("Share")}
|
|
</button>
|
|
<button data-action="tag" title="${t("Tag")}" class="${new URLSearchParams(location.search).get("canary") === "true" ? "" : "hidden"}">
|
|
${t("Tag")}
|
|
</button>
|
|
`))),
|
|
rxjs.tap(($buttons) => animate($buttons, { time: 100, keyframes: slideYIn(5) })),
|
|
rxjs.switchMap(($page) => rxjs.merge(
|
|
onClick(qs($page, `[data-action="download"]`)).pipe(
|
|
rxjs.mergeMap(() => rxjs.EMPTY),
|
|
),
|
|
onClick(qs($page, `[data-action="share"]`)).pipe(rxjs.tap(() => {
|
|
componentShare(createModal({
|
|
withButtonsRight: null,
|
|
withButtonsLeft: null,
|
|
targetHeight: 315,
|
|
}), { path: expandSelection()[0].path });
|
|
})),
|
|
onClick(qs($page, `[data-action="tag"]`)).pipe(rxjs.tap(() => {
|
|
componentTag(createModal({
|
|
...modalOpt,
|
|
withButtonsLeft: null,
|
|
withButtonsRight: null,
|
|
}), { path: expandSelection()[0].path });
|
|
})),
|
|
onClick(qs($page, `[data-action="rename"]`)).pipe(rxjs.mergeMap(() => {
|
|
const path = expandSelection()[0].path;
|
|
return rxjs.from(componentRename(
|
|
createModal(modalOpt),
|
|
basename(path.replace(new RegExp("/$"), "")),
|
|
)).pipe(rxjs.mergeMap((val) => {
|
|
const [basepath] = extractPath(path);
|
|
clearSelection();
|
|
clearCache(path);
|
|
clearCache(basepath + val);
|
|
return mv(path, basepath + val);
|
|
}));
|
|
})),
|
|
onClick(qs($page, `[data-action="delete"]`)).pipe(rxjs.mergeMap(() => {
|
|
const path = expandSelection()[0].path;
|
|
return rxjs.from(componentDelete(
|
|
createModal(modalOpt),
|
|
basename(path.replace(new RegExp("/$"), "")).substr(0, 15),
|
|
)).pipe(rxjs.mergeMap(() => {
|
|
const selection = expandSelection()[0].path;
|
|
clearSelection();
|
|
clearCache(path);
|
|
return rm(selection);
|
|
}));
|
|
})),
|
|
)),
|
|
));
|
|
|
|
effect(getSelection$().pipe(
|
|
rxjs.filter(() => lengthSelection() > 1),
|
|
rxjs.map(() => render(createFragment(`
|
|
<a target="_blank" ${generateLinkAttributes(expandSelection())}><button data-action="download">
|
|
${t("Download")}
|
|
</button></a>
|
|
<button data-action="delete"${toggleDependingOnPermission(currentPath(), "delete")}>
|
|
${t("Remove")}
|
|
</button>
|
|
`))),
|
|
rxjs.mergeMap(($page) => rxjs.merge(
|
|
onClick(qs($page, `[data-action="delete"]`)).pipe(rxjs.mergeMap(() => {
|
|
const paths = expandSelection().map(({ path }) => path);
|
|
return rxjs.from(componentDelete(
|
|
createModal(modalOpt),
|
|
"remove",
|
|
)).pipe(rxjs.mergeMap(() => {
|
|
clearSelection();
|
|
return rm(...paths);
|
|
}));
|
|
})),
|
|
)),
|
|
));
|
|
}
|
|
|
|
function componentRight(render) {
|
|
const ICONS = {
|
|
LIST_VIEW: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJtIDEzMy4zMzMsNTYgdiA2NCBjIDAsMTMuMjU1IC0xMC43NDUsMjQgLTI0LDI0IEggMjQgQyAxMC43NDUsMTQ0IDAsMTMzLjI1NSAwLDEyMCBWIDU2IEMgMCw0Mi43NDUgMTAuNzQ1LDMyIDI0LDMyIGggODUuMzMzIGMgMTMuMjU1LDAgMjQsMTAuNzQ1IDI0LDI0IHogbSAzNzkuMzM0LDIzMiB2IC02NCBjIDAsLTEzLjI1NSAtMTAuNzQ1LC0yNCAtMjQsLTI0IEggMjEzLjMzMyBjIC0xMy4yNTUsMCAtMjQsMTAuNzQ1IC0yNCwyNCB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggMjc1LjMzMyBjIDEzLjI1NiwwIDI0LjAwMSwtMTAuNzQ1IDI0LjAwMSwtMjQgeiBtIDAsLTE2OCBWIDU2IGMgMCwtMTMuMjU1IC0xMC43NDUsLTI0IC0yNCwtMjQgSCAyMTMuMzMzIGMgLTEzLjI1NSwwIC0yNCwxMC43NDUgLTI0LDI0IHYgNjQgYyAwLDEzLjI1NSAxMC43NDUsMjQgMjQsMjQgaCAyNzUuMzMzIGMgMTMuMjU2LDAgMjQuMDAxLC0xMC43NDUgMjQuMDAxLC0yNCB6IE0gMTA5LjMzMywyMDAgSCAyNCBDIDEwLjc0NSwyMDAgMCwyMTAuNzQ1IDAsMjI0IHYgNjQgYyAwLDEzLjI1NSAxMC43NDUsMjQgMjQsMjQgaCA4NS4zMzMgYyAxMy4yNTUsMCAyNCwtMTAuNzQ1IDI0LC0yNCB2IC02NCBjIDAsLTEzLjI1NSAtMTAuNzQ1LC0yNCAtMjQsLTI0IHogTSAwLDM5MiB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggODUuMzMzIGMgMTMuMjU1LDAgMjQsLTEwLjc0NSAyNCwtMjQgdiAtNjQgYyAwLC0xMy4yNTUgLTEwLjc0NSwtMjQgLTI0LC0yNCBIIDI0IEMgMTAuNzQ1LDM2OCAwLDM3OC43NDUgMCwzOTIgWiBtIDE4OS4zMzMsMCB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggMjc1LjMzMyBjIDEzLjI1NSwwIDI0LC0xMC43NDUgMjQsLTI0IHYgLTY0IGMgMCwtMTMuMjU1IC0xMC43NDUsLTI0IC0yNCwtMjQgSCAyMTMuMzMzIGMgLTEzLjI1NSwwIC0yNCwxMC43NDUgLTI0LDI0IHoiIC8+Cjwvc3ZnPgo=",
|
|
GRID_VIEW: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDQgNDQiPgogIDxwYXRoIGZpbGw9IiM2MjY0NjkiIGQ9Ik0gMTgsNCBIIDYgQyA0LjksNCA0LDQuOSA0LDYgdiAxMiBjIDAsMS4xIDAuOSwyIDIsMiBoIDEyIGMgMS4xLDAgMiwtMC45IDIsLTIgViA2IEMgMjAsNC45IDE5LjEsNCAxOCw0IFoiIC8+CiAgPHBhdGggZmlsbD0iIzYyNjQ2OSIgZD0iTSAzOCw0IEggMjYgYyAtMS4xLDAgLTIsMC45IC0yLDIgdiAxMiBjIDAsMS4xIDAuOSwyIDIsMiBoIDEyIGMgMS4xLDAgMiwtMC45IDIsLTIgViA2IEMgNDAsNC45IDM5LjEsNCAzOCw0IFoiIC8+CiAgPHBhdGggZmlsbD0iIzYyNjQ2OSIgZD0iTSAxOCwyNCBIIDYgYyAtMS4xLDAgLTIsMC45IC0yLDIgdiAxMiBjIDAsMS4xIDAuOSwyIDIsMiBoIDEyIGMgMS4xLDAgMiwtMC45IDIsLTIgViAyNiBjIDAsLTEuMSAtMC45LC0yIC0yLC0yIHoiIC8+CiAgPHBhdGggZmlsbD0iIzYyNjQ2OSIgZD0iTSAzOCwyNCBIIDI2IGMgLTEuMSwwIC0yLDAuOSAtMiwyIHYgMTIgYyAwLDEuMSAwLjksMiAyLDIgaCAxMiBjIDEuMSwwIDIsLTAuOSAyLC0yIFYgMjYgYyAwLC0xLjEgLTAuOSwtMiAtMiwtMiB6IiAvPgo8L3N2Zz4K",
|
|
|
|
CROSS: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=",
|
|
MAGNIFYING_GLASS: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJNNTA1IDQ0Mi43TDQwNS4zIDM0M2MtNC41LTQuNS0xMC42LTctMTctN0gzNzJjMjcuNi0zNS4zIDQ0LTc5LjcgNDQtMTI4QzQxNiA5My4xIDMyMi45IDAgMjA4IDBTMCA5My4xIDAgMjA4czkzLjEgMjA4IDIwOCAyMDhjNDguMyAwIDkyLjctMTYuNCAxMjgtNDR2MTYuM2MwIDYuNCAyLjUgMTIuNSA3IDE3bDk5LjcgOTkuN2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMGwyOC4zLTI4LjNjOS40LTkuNCA5LjQtMjQuNi4xLTM0ek0yMDggMzM2Yy03MC43IDAtMTI4LTU3LjItMTI4LTEyOCAwLTcwLjcgNTcuMi0xMjggMTI4LTEyOCA3MC43IDAgMTI4IDU3LjIgMTI4IDEyOCAwIDcwLjctNTcuMiAxMjgtMTI4IDEyOHoiIC8+Cjwvc3ZnPgo=",
|
|
|
|
SORT: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJNNDEgMjg4aDIzOGMyMS40IDAgMzIuMSAyNS45IDE3IDQxTDE3NyA0NDhjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwTDI0IDMyOWMtMTUuMS0xNS4xLTQuNC00MSAxNy00MXptMjU1LTEwNUwxNzcgNjRjLTkuNC05LjQtMjQuNi05LjQtMzMuOSAwTDI0IDE4M2MtMTUuMSAxNS4xLTQuNCA0MSAxNyA0MWgyMzhjMjEuNCAwIDMyLjEtMjUuOSAxNy00MXoiIC8+Cjwvc3ZnPgo=",
|
|
CHECK: "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojOTA5MDkwO2ZpbGwtb3BhY2l0eToxIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6IiAvPgo8L3N2Zz4K",
|
|
};
|
|
|
|
const escape$ = rxjs.fromEvent(window, "keydown").pipe(
|
|
rxjs.filter((event) => event.keyCode === 27),
|
|
rxjs.share(),
|
|
);
|
|
|
|
const defaultLayout = (view) => {
|
|
switch (view) {
|
|
case "grid": return `<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,${ICONS.LIST_VIEW}" alt="grid" />`;
|
|
case "list": return `<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,${ICONS.GRID_VIEW}" alt="list" />`;
|
|
default: throw new Error("NOT_IMPLEMENTED");
|
|
}
|
|
};
|
|
const defaultSort = (sort) => { // TODO
|
|
return `<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,${ICONS.SORT}" alt="${sort}" />`;
|
|
};
|
|
effect(getSelection$().pipe(
|
|
rxjs.filter((selections) => selections.length === 0),
|
|
rxjs.mergeMap(() => getState$().pipe(rxjs.first())),
|
|
rxjs.map(({ view, sort }) => render(createFragment(`
|
|
<form style="display: inline-block;" onsubmit="event.preventDefault()">
|
|
<input class="hidden" placeholder="${t("search")}" name="q" style="
|
|
background: transparent;
|
|
border: none;
|
|
padding-left: 5px;
|
|
color: var(--color);
|
|
font-size: 0.95rem;">
|
|
</form>
|
|
<button data-action="search" title="${t("Search")}">
|
|
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,${ICONS.MAGNIFYING_GLASS}" alt="search" />
|
|
</button>
|
|
<button data-action="view" title="${t("Layout")}">
|
|
${defaultLayout(view)}
|
|
</button>
|
|
<button data-action="sort" title="${t("Sort")}">
|
|
${defaultSort(sort)}
|
|
</button>
|
|
<div class="component_dropdown view sort" data-target="sort">
|
|
<div class="dropdown_container">
|
|
<ul>
|
|
<li data-target="type">
|
|
${t("Sort By Type")}
|
|
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,${ICONS.CHECK}" alt="check" />
|
|
</li>
|
|
<li data-target="date">
|
|
${t("Sort By Date")}
|
|
</li>
|
|
<li data-target="name">
|
|
${t("Sort By Name")}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`))),
|
|
rxjs.mergeMap(($page) => rxjs.merge(
|
|
// feature: view button
|
|
onClick(qs($page, `[data-action="view"]`)).pipe(rxjs.tap(($button) => {
|
|
const $img = $button.querySelector("img");
|
|
if ($img.getAttribute("alt") === "list") {
|
|
setState("view", "grid");
|
|
$img.setAttribute("alt", "grid");
|
|
$img.setAttribute("src", "data:image/svg+xml;base64," + ICONS.LIST_VIEW);
|
|
} else {
|
|
setState("view", "list");
|
|
$img.setAttribute("alt", "list");
|
|
$img.setAttribute("src", "data:image/svg+xml;base64," + ICONS.GRID_VIEW);
|
|
}
|
|
})),
|
|
// feature: sort button
|
|
rxjs.merge(
|
|
onClick(qs($page, `[data-action="sort"]`)).pipe(rxjs.map(($el) => { // toggle the dropdown
|
|
return !$el.nextSibling.classList.contains("active");
|
|
})),
|
|
escape$.pipe(rxjs.mapTo(false)), // quit the dropdown on esc
|
|
rxjs.fromEvent(window, "click").pipe( // quit when clicking outside the dropdown
|
|
rxjs.filter((e) => !e.target.closest(`[data-action="sort"]`) && !e.target.closest(".dropdown_container")),
|
|
rxjs.mapTo(false),
|
|
),
|
|
).pipe(
|
|
rxjs.takeUntil(getSelection$().pipe(rxjs.skip(1))),
|
|
rxjs.mergeMap((targetStateIsOpen) => {
|
|
const $sort = qs($page, `[data-target="sort"]`);
|
|
const $lis = qsa($page, `.dropdown_container li`);
|
|
targetStateIsOpen
|
|
? $sort.classList.add("active")
|
|
: $sort.classList.remove("active");
|
|
|
|
return onClick($lis).pipe(
|
|
rxjs.first(),
|
|
rxjs.mergeMap(($el) => getState$().pipe(rxjs.first(), rxjs.map((state) => ({
|
|
order: state.order,
|
|
$el,
|
|
})))),
|
|
rxjs.tap(({ $el, order }) => {
|
|
setState(
|
|
"sort", $el.getAttribute("data-target"),
|
|
"order", order === "asc" ? "des" : "asc",
|
|
);
|
|
[...$lis].forEach(($li) => {
|
|
const $img = $li.querySelector("img");
|
|
if ($img) $img.remove();
|
|
});
|
|
$el.appendChild(createElement(`<img class="component_icon" src="data:image/svg+xml;base64,${ICONS.CHECK}" alt="check" />`));
|
|
$sort.classList.remove("active");
|
|
}),
|
|
);
|
|
}),
|
|
),
|
|
// feature: search box
|
|
rxjs.merge(
|
|
rxjs.merge(
|
|
onClick(qs($page, `[data-action="search"]`)),
|
|
rxjs.fromEvent(window, "keydown").pipe(
|
|
rxjs.filter((e) => (e.ctrlKey || e.metaKey) && e.key === "f"),
|
|
preventDefault(),
|
|
),
|
|
).pipe(rxjs.map(() => qs($page, "input").classList.contains("hidden"))),
|
|
escape$.pipe(rxjs.mapTo(false)),
|
|
).pipe(
|
|
rxjs.takeUntil(getSelection$().pipe(rxjs.skip(1))),
|
|
rxjs.mergeMap(async(show) => {
|
|
const $input = qs($page, "input");
|
|
const $searchImg = qs($page, "img");
|
|
if (show) {
|
|
$page.classList.add("hover");
|
|
$input.value = "";
|
|
$input.classList.remove("hidden");
|
|
$searchImg.setAttribute("src", "data:image/svg+xml;base64," + ICONS.CROSS);
|
|
$searchImg.setAttribute("alt", "close");
|
|
|
|
const $listOfButtons = $page.parentElement.firstElementChild.children;
|
|
for (const $item of $listOfButtons) {
|
|
$item.classList.add("hidden");
|
|
}
|
|
setAction(null); // reset new file, new folder
|
|
await animate($input, {
|
|
keyframes: [{ width: "0px" }, { width: "180px" }],
|
|
time: 200,
|
|
});
|
|
$input.focus();
|
|
} else {
|
|
$page.classList.remove("hover");
|
|
$searchImg.setAttribute("src", "data:image/svg+xml;base64," + ICONS.MAGNIFYING_GLASS);
|
|
$searchImg.setAttribute("alt", "search");
|
|
await animate($input, {
|
|
keyframes: [{ width: "180px" }, { width: "0px" }],
|
|
time: 100,
|
|
});
|
|
$input.classList.add("hidden");
|
|
const $listOfButtons = $page.parentElement.firstElementChild.children;
|
|
for (const $item of $listOfButtons) {
|
|
$item.classList.remove("hidden");
|
|
animate($item, { time: 100, keyframes: slideXIn(5) });
|
|
}
|
|
setState("search", "");
|
|
}
|
|
return $input;
|
|
}),
|
|
rxjs.mergeMap(($input) => rxjs.merge(
|
|
rxjs.fromEvent($input, "input").pipe(
|
|
rxjs.debounce(() => $input.value ? rxjs.timer(500) : rxjs.of(null)),
|
|
),
|
|
rxjs.fromEvent($input, "change"),
|
|
).pipe(
|
|
rxjs.map(() => $input.value),
|
|
rxjs.distinctUntilChanged(),
|
|
rxjs.tap((val) => setState("search", val)),
|
|
)),
|
|
),
|
|
)),
|
|
));
|
|
onDestroy(() => setState("search", ""));
|
|
|
|
effect(getSelection$().pipe(
|
|
rxjs.filter((selections) => selections.length >= 1),
|
|
rxjs.map(() => render(createFragment(`
|
|
<button data-bind="clear">
|
|
${lengthSelection()} <component-icon name="close"></component-icon>
|
|
</button>
|
|
`))),
|
|
rxjs.mergeMap(($page) => onClick(qs($page, `[data-bind="clear"]`)).pipe(
|
|
rxjs.tap(() => clearSelection()),
|
|
rxjs.takeUntil(getSelection$().pipe(rxjs.skip(1))),
|
|
)),
|
|
));
|
|
}
|
|
|
|
export function init() {
|
|
return Promise.all([
|
|
loadCSS(import.meta.url, "../../css/designsystem_dropdown.css"),
|
|
loadCSS(import.meta.url, "./ctrl_submenu.css"),
|
|
loadCSS(import.meta.url, "./modal_share.css"),
|
|
loadCSS(import.meta.url, "./modal_tag.css"),
|
|
]);
|
|
}
|
|
|
|
function generateLinkAttributes(selections) {
|
|
let filename = "archive.zip";
|
|
let href = "api/files/zip?";
|
|
if (selections.length === 1) {
|
|
const path = selections[0].path;
|
|
const regDir = new RegExp("/$");
|
|
const isDir = regDir.test(path);
|
|
if (isDir) {
|
|
filename = basename(path.replace(regDir, "")) + ".zip";
|
|
} else {
|
|
filename = basename(path);
|
|
href = "api/files/cat?";
|
|
}
|
|
}
|
|
href += selections.map(({ path }) => "path=" + encodeURIComponent(path)).join("&");
|
|
href = forwardURLParams(href, ["share"]);
|
|
return `href="${href}" download="${filename}"`;
|
|
}
|
|
|
|
function toggleDependingOnPermission(path, action) {
|
|
return calculatePermission(path, action) === false ? ` style="display:none"` : "";
|
|
}
|