fix (download): download in new page

whenever clicking on the download link, there were issue with
target=_blank + the download attribute. Effectively the download
attribute remove the effect of target blank, hence this workaround to
make sure the files that are downloaded are correctly named + open up in
a new tab. The issue without target blank is if the user starts the
download, he doesn't see a direct feedback telling him that something is
working under the hood, hence the target blank
This commit is contained in:
MickaelK 2025-02-06 14:41:14 +11:00
parent 849f206408
commit eedbfd42af
2 changed files with 10 additions and 4 deletions

View file

@ -39,10 +39,11 @@ export function preventDefault() {
return rxjs.tap((e) => e.preventDefault());
}
export function onClick($node) {
export function onClick($node, opts = { preventDefault: false }) {
const sideE = ($node) => {
assert.type($node, HTMLElement);
return rxjs.fromEvent($node, "click").pipe(
rxjs.tap((e) => (opts.preventDefault === true) && e.preventDefault()),
rxjs.map(() => $node)
);
};

View file

@ -122,9 +122,11 @@ function componentLeft(render, { $scroll }) {
`))),
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="download"]`), { preventDefault: true }).pipe(rxjs.tap(($button) => {
let url = $button.parentElement.getAttribute("href");
url += "&name=" + $button.parentElement.getAttribute("download");
window.open(url);
})),
onClick(qs($page, `[data-action="share"]`)).pipe(rxjs.tap(() => {
componentShare(createModal({
withButtonsRight: null,
@ -178,6 +180,9 @@ function componentLeft(render, { $scroll }) {
</button>
`))),
rxjs.mergeMap(($page) => rxjs.merge(
onClick(qs($page, `[data-action="download"]`), { preventDefault: true }).pipe(rxjs.tap(($button) => {
window.open($button.parentElement.getAttribute("href"));
})),
onClick(qs($page, `[data-action="delete"]`)).pipe(rxjs.mergeMap(() => {
const paths = expandSelection().map(({ path }) => path);
return rxjs.from(componentDelete(