github/filestash
4
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2024-04-21 12:32:08 +00:00
Code Issues Releases Wiki Activity

chore (rewrite): refactoring of the filepage action bar

Browse Source
This commit is contained in:
MickaelK
2024-04-09 07:29:14 +10:00
parent 465b9fc92a
commit eb2118c517
1 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/pages/filespage/ctrl_submenu.js
+39 -17
View File
@@ -9,19 +9,11 @@ import "../../components/dropdown.js";
import "../../components/icon.js";
export default async function(render) {
const $page = createElement(`<div class="component_submenu container"></div>`);
const $page = createElement(`
<div class="component_submenu container">
</div>
`);
render($page);
const $scroll = $page.closest(".scroll-y");
effect(rxjs.fromEvent($scroll, "scroll", { passive: true }).pipe(
rxjs.map((e) => e.target.scrollTop > 30),
rxjs.distinctUntilChanged(),
rxjs.startWith(false),
rxjs.tap((scrolling) => scrolling
? $scroll.classList.add("scrolling")
: $scroll.classList.remove("scrolling")),
));
onDestroy(() => clearSelection());
// feature1: layout base case
@@ -33,7 +25,7 @@ export default async function(render) {
<button data-action="new-folder">New Folder</button>
</div>
<div class="action right no-select" style="margin-right:2px;">
<button>
<button data-action="search">
<input style="
display: none;
background: transparent;
@@ -45,7 +37,7 @@ export default async function(render) {
">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJNNTA1IDQ0Mi43TDQwNS4zIDM0M2MtNC41LTQuNS0xMC42LTctMTctN0gzNzJjMjcuNi0zNS4zIDQ0LTc5LjcgNDQtMTI4QzQxNiA5My4xIDMyMi45IDAgMjA4IDBTMCA5My4xIDAgMjA4czkzLjEgMjA4IDIwOCAyMDhjNDguMyAwIDkyLjctMTYuNCAxMjgtNDR2MTYuM2MwIDYuNCAyLjUgMTIuNSA3IDE3bDk5LjcgOTkuN2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMGwyOC4zLTI4LjNjOS40LTkuNCA5LjQtMjQuNi4xLTM0ek0yMDggMzM2Yy03MC43IDAtMTI4LTU3LjItMTI4LTEyOCAwLTcwLjcgNTcuMi0xMjggMTI4LTEyOCA3MC43IDAgMTI4IDU3LjIgMTI4IDEyOCAwIDcwLjctNTcuMiAxMjgtMTI4IDEyOHoiIC8+Cjwvc3ZnPgo=" alt="search" />
</button>
<button>
<button data-action="view">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJtIDEzMy4zMzMsNTYgdiA2NCBjIDAsMTMuMjU1IC0xMC43NDUsMjQgLTI0LDI0IEggMjQgQyAxMC43NDUsMTQ0IDAsMTMzLjI1NSAwLDEyMCBWIDU2IEMgMCw0Mi43NDUgMTAuNzQ1LDMyIDI0LDMyIGggODUuMzMzIGMgMTMuMjU1LDAgMjQsMTAuNzQ1IDI0LDI0IHogbSAzNzkuMzM0LDIzMiB2IC02NCBjIDAsLTEzLjI1NSAtMTAuNzQ1LC0yNCAtMjQsLTI0IEggMjEzLjMzMyBjIC0xMy4yNTUsMCAtMjQsMTAuNzQ1IC0yNCwyNCB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggMjc1LjMzMyBjIDEzLjI1NiwwIDI0LjAwMSwtMTAuNzQ1IDI0LjAwMSwtMjQgeiBtIDAsLTE2OCBWIDU2IGMgMCwtMTMuMjU1IC0xMC43NDUsLTI0IC0yNCwtMjQgSCAyMTMuMzMzIGMgLTEzLjI1NSwwIC0yNCwxMC43NDUgLTI0LDI0IHYgNjQgYyAwLDEzLjI1NSAxMC43NDUsMjQgMjQsMjQgaCAyNzUuMzMzIGMgMTMuMjU2LDAgMjQuMDAxLC0xMC43NDUgMjQuMDAxLC0yNCB6IE0gMTA5LjMzMywyMDAgSCAyNCBDIDEwLjc0NSwyMDAgMCwyMTAuNzQ1IDAsMjI0IHYgNjQgYyAwLDEzLjI1NSAxMC43NDUsMjQgMjQsMjQgaCA4NS4zMzMgYyAxMy4yNTUsMCAyNCwtMTAuNzQ1IDI0LC0yNCB2IC02NCBjIDAsLTEzLjI1NSAtMTAuNzQ1LC0yNCAtMjQsLTI0IHogTSAwLDM5MiB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggODUuMzMzIGMgMTMuMjU1LDAgMjQsLTEwLjc0NSAyNCwtMjQgdiAtNjQgYyAwLC0xMy4yNTUgLTEwLjc0NSwtMjQgLTI0LC0yNCBIIDI0IEMgMTAuNzQ1LDM2OCAwLDM3OC43NDUgMCwzOTIgWiBtIDE4OS4zMzMsMCB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggMjc1LjMzMyBjIDEzLjI1NSwwIDI0LC0xMC43NDUgMjQsLTI0IHYgLTY0IGMgMCwtMTMuMjU1IC0xMC43NDUsLTI0IC0yNCwtMjQgSCAyMTMuMzMzIGMgLTEzLjI1NSwwIC0yNCwxMC43NDUgLTI0LDI0IHoiIC8+Cjwvc3ZnPgo=" alt="list" />
</button>
<button>
@@ -55,6 +47,12 @@ export default async function(render) {
</div>
`)),
applyMutation($page, "replaceChildren"),
rxjs.mergeMap(() => 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")),
onClick(qs($page, `[data-action="search"]`)).pipe(rxjs.mapTo("SEARCH")),
onClick(qs($page, `[data-action="view"]`)).pipe(rxjs.mapTo("VIEW")),
).pipe(rxjs.tap((action) => onMenuSelect(action)))),
));
// feature2: update when selection is preset
@@ -62,7 +60,7 @@ export default async function(render) {
rxjs.filter((selections) => selections.length > 0),
rxjs.tap((selections) => selections.length === 1 && animate($page)),
rxjs.map((selections) => createFragment(`
<div class="action left">
<div class="action left no-select">
<button data-action="download">Download</button>
<button data-action="share">Share</button>
<button data-action="embed">Embed</button>
@@ -70,19 +68,43 @@ export default async function(render) {
<button data-action="rename">Rename</button>
<button data-action="delete">Delete</button>
</div>
<div class="action right">
<div class="action right no-select">
<button data-bind="clear">
${selections.length} <component-icon name="close"></component-icon>
</button>
</div>
`)),
applyMutation($page, "replaceChildren"),
rxjs.mergeMap((e) => rxjs.merge(
rxjs.mergeMap(() => rxjs.merge(
onClick(qs($page, `[data-bind="clear"]`)).pipe(
rxjs.tap(() => clearSelection()),
rxjs.mergeMap(() => rxjs.EMPTY),
),
onClick(qs($page, `[data-action="download"]`)).pipe(rxjs.mapTo("DOWNLOAD")),
onClick(qs($page, `[data-action="share"]`)).pipe(rxjs.mapTo("SHARE")),
onClick(qs($page, `[data-action="embed"]`)).pipe(rxjs.mapTo("EMBED")),
onClick(qs($page, `[data-action="tag"]`)).pipe(rxjs.mapTo("TAG")),
onClick(qs($page, `[data-action="rename"]`)).pipe(rxjs.mapTo("RENAME")),
onClick(qs($page, `[data-action="delete"]`)).pipe(rxjs.mapTo("DELETE")),
)),
rxjs.tap((action) => onMenuSelect(action)),
));
// feature3: effect on scroll
const $scroll = $page.closest(".scroll-y");
effect(rxjs.fromEvent($scroll, "scroll", { passive: true }).pipe(
rxjs.map((e) => e.target.scrollTop > 30),
rxjs.distinctUntilChanged(),
rxjs.startWith(false),
rxjs.tap((scrolling) => scrolling
? $scroll.classList.add("scrolling")
: $scroll.classList.remove("scrolling")),
));
}
function onMenuSelect(action) {
console.log(`select "${action}"`);
}
export function init() {