2023-02-25 22:54:57 +05:30
|
|
|
/*
|
2023-02-25 22:54:58 +05:30
|
|
|
Copyright 2023 0xf8.dev@proton.me
|
2023-02-25 22:54:57 +05:30
|
|
|
|
|
|
|
This file is part of Galerie
|
|
|
|
|
|
|
|
Galerie is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
|
|
|
Galerie is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License along with Galerie. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import App from "./app";
|
|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import jQuery from "jquery";
|
|
|
|
const $ = jQuery;
|
|
|
|
|
|
|
|
import Settings, { apiUrl } from "./settings";
|
|
|
|
|
|
|
|
const settings = new Settings();
|
|
|
|
|
|
|
|
let global_ActivePopout: Popout = null;
|
|
|
|
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
class Popout {
|
|
|
|
private element: JQuery<HTMLImageElement>;
|
2023-02-25 22:54:57 +05:30
|
|
|
private overlay: JQuery<HTMLElement>;
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
constructor(element: JQuery<HTMLImageElement>, src: string) {
|
|
|
|
this.element = element.clone();
|
2023-02-25 22:54:57 +05:30
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
this.element.removeClass("resourceh resource");
|
|
|
|
this.element.addClass("popout");
|
|
|
|
this.element.css("opacity", 0.0001);
|
2023-02-25 22:54:57 +05:30
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
this.element.on("load", () => {
|
|
|
|
console.log(this.element.height() > this.element.width(), this.element.height(), this.element.width());
|
2023-02-25 22:54:57 +05:30
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
if (this.element.height() > this.element.width())
|
|
|
|
if (screen.orientation.type == "portrait-primary" || screen.orientation.type == "portrait-secondary")
|
|
|
|
this.element.css("width", "94vw");
|
|
|
|
else
|
|
|
|
this.element.css("height", "94vh");
|
2023-02-25 22:54:57 +05:30
|
|
|
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
if (this.element.width() >= this.element.height())
|
|
|
|
this.element.css("width", "96vw");
|
2023-02-25 22:54:57 +05:30
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
this.element.css("opacity", 1);
|
|
|
|
});
|
2023-02-25 22:54:57 +05:30
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
this.overlay = $("<div class='overlay' scroll='no'>");
|
2023-02-25 22:54:57 +05:30
|
|
|
this.overlay.append(this.element);
|
|
|
|
}
|
|
|
|
|
|
|
|
create() {
|
2023-02-25 22:54:58 +05:30
|
|
|
if (global_ActivePopout != null) return;
|
2023-02-25 22:54:57 +05:30
|
|
|
global_ActivePopout = this;
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
$("root").append(this.overlay);
|
2023-02-25 22:54:57 +05:30
|
|
|
this.overlay.one("click", (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
this.destroy();
|
2023-02-25 22:54:58 +05:30
|
|
|
});
|
2023-02-25 22:54:57 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
destroy() {
|
2023-02-25 22:54:58 +05:30
|
|
|
if (global_ActivePopout != this) return;
|
2023-02-25 22:54:57 +05:30
|
|
|
global_ActivePopout = null;
|
|
|
|
|
|
|
|
this.overlay.remove();
|
|
|
|
this.element.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// ===============
|
|
|
|
// === Gallery ===
|
|
|
|
// ===============
|
|
|
|
|
|
|
|
class gallery {
|
|
|
|
constructor() {}
|
|
|
|
|
|
|
|
public async load(): Promise<void> {
|
2023-02-25 22:54:58 +05:30
|
|
|
console.log("Loading gallery");
|
2023-02-25 22:54:57 +05:30
|
|
|
|
|
|
|
await settings.cache.load();
|
|
|
|
}
|
|
|
|
|
|
|
|
public async loadDisplay(data: string[]): Promise<void> {
|
|
|
|
await this.clearDisplay();
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
if (settings.config.get("onlyFavorites")) {
|
|
|
|
let d = [];
|
|
|
|
|
|
|
|
for (let i in data) {
|
|
|
|
let j = data[i];
|
|
|
|
if (await settings.favorites.contains(j)) d.push(j);
|
|
|
|
}
|
|
|
|
|
|
|
|
data = d;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!settings.config.get("ignoreBlacklist")) {
|
|
|
|
let d = [];
|
|
|
|
|
|
|
|
for (let i in data) {
|
|
|
|
let j = data[i];
|
|
|
|
if (!await settings.blacklist.contains(j)) d.push(j);
|
|
|
|
}
|
|
|
|
|
|
|
|
data = d;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.length != 0) {
|
2023-02-25 22:54:57 +05:30
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
let f = await data.at(i);
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
if (!settings.config.get("ignoreBlacklist"))
|
|
|
|
if (await settings.blacklist.contains(f)) continue;
|
2023-02-25 22:54:57 +05:30
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
this.createElement(f).then((e) => e.appendTo($("div#display")));
|
2023-02-25 22:54:57 +05:30
|
|
|
}
|
2023-02-25 22:54:58 +05:30
|
|
|
} else {
|
|
|
|
let t = $(
|
|
|
|
`<span style='margin-top: 3em'>There's nothing here${settings.config.get("onlyFavorites") ? "" : ". <a style='color: white; text-decoration: none' href='#' id='a'>Reload?</a>"}${
|
|
|
|
settings.config.get("onlyFavorites")
|
|
|
|
? "<br>Hint: 'onlyFavorites' is enabled. <a style='color: white; text-decoration: none' href='#' id='dar'>Disable and reload?</a>"
|
|
|
|
: ""
|
|
|
|
}${await settings.blacklist.at(0) ? '<br>Hint: Every image is blacklisted' : ""}</span>`
|
|
|
|
);
|
|
|
|
|
|
|
|
t.children("a#a").on("click", async (e) => {
|
2023-02-25 22:54:57 +05:30
|
|
|
e.preventDefault();
|
2023-02-25 22:54:58 +05:30
|
|
|
this.loadDisplay(await settings.cache.order());
|
2023-02-25 22:54:57 +05:30
|
|
|
});
|
2023-02-25 22:54:58 +05:30
|
|
|
|
|
|
|
t.children("a#dar").on("click", async (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
settings.config.set("onlyFavorites", false);
|
|
|
|
this.loadDisplay(await settings.cache.order());
|
|
|
|
})
|
|
|
|
$(t).appendTo($("div#display"));
|
2023-02-25 22:54:57 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private async clearDisplay(): Promise<void> {
|
|
|
|
$("#display").children().remove();
|
|
|
|
}
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
private async createElement(src: string): Promise<JQuery<HTMLElement>> {
|
|
|
|
let container = $("<span>");
|
|
|
|
let element: JQuery<HTMLImageElement> = $(`<img class='resource resourceh'>`);
|
2023-02-25 22:54:57 +05:30
|
|
|
element.prop("loop", true);
|
|
|
|
element.prop("nocontrols", true);
|
|
|
|
element.attr("src", `${apiUrl}img/${src}`);
|
|
|
|
|
|
|
|
let popoutHandler = async (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
const popout = new Popout(element, src);
|
|
|
|
|
|
|
|
popout.create();
|
2023-02-25 22:54:58 +05:30
|
|
|
};
|
2023-02-25 22:54:57 +05:30
|
|
|
|
|
|
|
element.on("click", popoutHandler);
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
let ialist: JQuery<HTMLElement>;
|
|
|
|
let reloadlist = async () => {
|
|
|
|
ialist = await this.createIconActionList(container, src, reloadlist);
|
2023-02-25 22:54:57 +05:30
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
container.children("span").remove();
|
|
|
|
container.append(ialist);
|
|
|
|
};
|
|
|
|
|
|
|
|
container.append(element);
|
|
|
|
ialist = await this.createIconActionList(container, src, reloadlist);
|
|
|
|
ialist.css("opacity", 0);
|
|
|
|
|
|
|
|
container.append(ialist);
|
|
|
|
|
|
|
|
element.on("load", (e) => {
|
|
|
|
ialist.removeAttr("style");
|
|
|
|
});
|
|
|
|
|
|
|
|
// await reloadlist();
|
|
|
|
|
|
|
|
return container;
|
2023-02-25 22:54:57 +05:30
|
|
|
}
|
|
|
|
|
2023-02-25 22:54:58 +05:30
|
|
|
private async createIconActionList(e:JQuery<HTMLElement>, src: string, triggerReload) {
|
|
|
|
let container = $("<span>");
|
|
|
|
|
|
|
|
let ia = (icon: string, title: string, func: () => void) => {
|
|
|
|
let i = $(`<i title="${title}" class="${icon}">`);
|
|
|
|
i.on("click", func);
|
|
|
|
container.append(i);
|
|
|
|
};
|
|
|
|
|
|
|
|
if (await settings.favorites.contains(src)) {
|
|
|
|
ia("fa-solid fa-heart", "Unfavorite", () => {
|
|
|
|
settings.favorites.delete(src);
|
|
|
|
triggerReload();
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
ia("fa-regular fa-heart", "Favorite", () => {
|
|
|
|
settings.favorites.push(src);
|
|
|
|
triggerReload();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (settings.config.get("ignoreBlacklist")) {
|
|
|
|
if (await settings.blacklist.contains(src)) {
|
|
|
|
ia("fa-solid fa-eye-slash", "De-blacklist", () => {
|
|
|
|
settings.blacklist.delete(src);
|
|
|
|
triggerReload();
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
ia("fa-solid fa-eye", "Blacklist", () => {
|
|
|
|
settings.blacklist.push(src);
|
|
|
|
triggerReload();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
ia("fa-solid fa-ban", "Blacklist", () => {
|
|
|
|
settings.blacklist.push(src);
|
|
|
|
e.remove();
|
|
|
|
triggerReload();
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
return container;
|
|
|
|
}
|
|
|
|
}
|
2023-02-25 22:54:57 +05:30
|
|
|
|
|
|
|
let Gallery = new gallery();
|
|
|
|
|
|
|
|
window.onload = async () => {
|
|
|
|
await Gallery.load();
|
2023-02-25 22:54:58 +05:30
|
|
|
|
|
|
|
await Gallery.loadDisplay(await settings.cache.order());
|
|
|
|
};
|
2023-02-25 22:54:57 +05:30
|
|
|
|
|
|
|
const root = App(() => {
|
2023-02-25 22:54:58 +05:30
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div id="container">
|
|
|
|
<div id="display"></div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
});
|