180 lines
5.0 KiB
TypeScript
180 lines
5.0 KiB
TypeScript
/*
|
|
Copyright 2023 0xf8.dev@proton.me
|
|
|
|
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 from "./settings";
|
|
const settings = new Settings();
|
|
|
|
|
|
let status = (msg) => {
|
|
let s = $(`<div class="status"><span>${msg}</span></div>`);
|
|
|
|
$("div#container").prepend(s);
|
|
|
|
setTimeout(() => {
|
|
s.remove();
|
|
}, 2500);
|
|
}
|
|
|
|
// Loads on DOM ready
|
|
$(() => {
|
|
console.log("ready");
|
|
|
|
$("li.configValue input").on("blur", (e) => {
|
|
e.preventDefault();
|
|
|
|
let t = $(e.currentTarget);
|
|
|
|
let name = t.attr("x-config");
|
|
let type = t.attr("type");
|
|
let val = t.val();
|
|
|
|
if (type == "button")
|
|
return;
|
|
|
|
settings.config.set(name, val);
|
|
settings.config.sync();
|
|
});
|
|
|
|
$("li.configValue select").on("change", (e) => {
|
|
e.preventDefault();
|
|
|
|
let t = $(e.currentTarget);
|
|
|
|
let name = t.attr("x-config");
|
|
let val = t.val();
|
|
|
|
settings.config.set(name, val);
|
|
settings.config.sync();
|
|
});
|
|
|
|
// Hacky, terrible, downright awful way to prevent events from double-firing
|
|
let _ = false;
|
|
let preventDouble = () => {
|
|
if (!_) {
|
|
_ = true;
|
|
setTimeout(() => {
|
|
_ = false;
|
|
}, 200);
|
|
return false;
|
|
}
|
|
else return true;
|
|
}
|
|
|
|
$("li.configValue i").on("click touchstart", (e) => {
|
|
if (preventDouble())
|
|
return;
|
|
|
|
let t = $(e.currentTarget);
|
|
|
|
let name = t.attr("x-config");
|
|
let val = t.hasClass("fa-toggle-on");
|
|
|
|
t.removeClass(val ? "fa-toggle-on" : "fa-toggle-off");
|
|
t.addClass(val ? "fa-toggle-off" : "fa-toggle-on");
|
|
|
|
settings.config.set(name, !val);
|
|
settings.config.sync();
|
|
|
|
});
|
|
|
|
// Buttons
|
|
// Clear favorites
|
|
$("ul.settings.reset input:button").eq(0).on("click touchstart", (e) => {
|
|
if (preventDouble())
|
|
return;
|
|
|
|
settings.favorites.clear();
|
|
|
|
status("Cleared favorites");
|
|
});
|
|
|
|
// Clear blacklist
|
|
$("ul.settings.reset input:button").eq(1).on("click touchstart", (e) => {
|
|
if (preventDouble())
|
|
return;
|
|
|
|
settings.blacklist.clear();
|
|
|
|
status("Cleared blacklist")
|
|
});
|
|
|
|
// Clear everything
|
|
$("ul.settings.reset input:button").eq(2).on("click touchstart", (e) => {
|
|
if (preventDouble())
|
|
return;
|
|
|
|
localStorage.clear();
|
|
|
|
window.location.reload();
|
|
});
|
|
})
|
|
|
|
/*
|
|
|
|
*/
|
|
function si(name: string, displayName: string, icon: string, type: "string" | "number" | "boolean" | "toggle" | "button", title: string) {
|
|
return <>
|
|
<li title={ title }>
|
|
{ displayName }
|
|
<i className={ "fa-solid " + icon }></i>
|
|
</li>
|
|
<li className="configValue" x-type={ type }>
|
|
{(() => {
|
|
switch(type) {
|
|
case "number":
|
|
case "string":
|
|
return <input x-config={ name } type={ type } defaultValue={ settings.config.get(name) }></input>
|
|
case "button":
|
|
return <input type={ type } value={ name }></input>;
|
|
case "toggle":
|
|
return <i className={ settings.config.get(name) ? "fa-solid fa-2xl fa-toggle-on" : "fa-solid fa-2xl fa-toggle-off" } x-config={ name }></i>
|
|
case "boolean": {
|
|
return <select x-config={ name } defaultValue={ settings.config.get(name) }>
|
|
<option value="true">true</option>
|
|
<option value="false">false</option>
|
|
</select>;
|
|
}
|
|
}
|
|
})()}
|
|
</li>
|
|
</>;
|
|
}
|
|
|
|
App(() => {
|
|
return <>
|
|
<div id="container">
|
|
<h2>Settings</h2>
|
|
<ul className="settings top">
|
|
{ si("ignoreBlacklist", "Blacklist toggle mode", "fa-eye", "toggle", "Allows you to toggle which images are blacklisted (eye means visible, slashed eye means invisible)") }
|
|
{ si("onlyFavorites", "Favorites only mode", "fa-heart-circle-check", "toggle", "Shows only images that have been favorited") }
|
|
{ si("deterministic", "Deterministic order", "fa-shuffle", "toggle", "Toggle whether every image is shown in the same order every time") }
|
|
</ul>
|
|
{/* <h3>Favorites</h3>
|
|
<ul className="settings fav">
|
|
</ul>
|
|
<h3>Blacklist</h3>
|
|
<ul className="settings blk">
|
|
</ul> */}
|
|
<h3>Reset</h3>
|
|
<ul className="settings reset">
|
|
{ si("Reset", "Reset favorites", "fa-heart-circle-xmark", "button", "Reset favorited images") }
|
|
{ si("Reset", "Reset blacklist", "fa-file-circle-xmark", "button", "Reset blacklisted images") }
|
|
{ si("Reset", "Reset everything", "fa-trash", "button", "Reset everything (settings, favorites, blacklist, etc.)") }
|
|
</ul>
|
|
</div>
|
|
</>;
|
|
});
|