nodes/pythongosssss-ComfyUI-Custom-Scripts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add settings for image feed side + direction

Browse Source
This commit is contained in:
pythongosssss
2023-07-13 19:40:05 +01:00
parent 13e190bbab
commit 93f2a5788d
1 changed files with 104 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/imageFeed.js
+104 -8
View File
@@ -7,17 +7,36 @@ import { $el } from "/scripts/ui.js";
$el("style", {
textContent: `
.pysssss-image-feed {
min-height: 30px;
max-height: var(--max-height, 200px);
width: 100vw;
position: absolute;
bottom: 0;
background: #333;
overflow: auto;
z-index: 99;
font-family: sans-serif;
font-size: 12px;
}
.pysssss-image-feed--top, .pysssss-image-feed--bottom {
width: 100vw;
min-height: 30px;
max-height: var(--max-size, 200px);
}
.pysssss-image-feed--top {
top: 0;
}
.pysssss-image-feed--bottom {
bottom: 0;
}
.pysssss-image-feed--left, .pysssss-image-feed--right {
top: 0;
height: 100vh;
min-width: 30px;
max-width: var(--max-size, 200px);
}
.pysssss-image-feed--left {
left: 0;
}
.pysssss-image-feed--right {
right: 0;
}
.pysssss-image-feed-menu {
position: sticky;
top: 0;
@@ -58,7 +77,7 @@ $el("style", {
.pysssss-image-feed-list img {
object-fit: var(--img-fit, contain);
max-width: 100%;
max-height: var(--max-height);
max-height: var(--max-size);
}
.pysssss-image-feed-list img:hover {
filter: brightness(1.2);
@@ -95,6 +114,81 @@ app.registerExtension({
});
const imageList = $el("div.pysssss-image-feed-list");
const feedLocation = app.ui.settings.addSetting({
id: "pysssss.ImageFeed.Location",
name: "🐍 Image Feed Location",
defaultValue: "bottom",
type: () => {
return $el("tr", [
$el("td", [
$el("label", {
textContent: "🐍 Image Feed Location:",
}),
]),
$el("td", [
$el(
"select",
{
style: {
fontSize: "14px",
},
oninput: (e) => {
feedLocation.value = e.target.value;
imageFeed.className = `pysssss-image-feed pysssss-image-feed--${feedLocation.value}`;
},
},
["left", "top", "right", "bottom"].map((m) =>
$el("option", {
value: m,
textContent: m,
selected: feedLocation.value === m,
})
)
),
]),
]);
},
onChange(value) {
imageFeed.className = `pysssss-image-feed pysssss-image-feed--${value}`;
},
});
const feedDirection = app.ui.settings.addSetting({
id: "pysssss.ImageFeed.Direction",
name: "🐍 Image Feed Direction",
defaultValue: "newest first",
type: () => {
return $el("tr", [
$el("td", [
$el("label", {
textContent: "🐍 Image Feed Direction:",
}),
]),
$el("td", [
$el(
"select",
{
style: {
fontSize: "14px",
},
oninput: (e) => {
feedDirection.value = e.target.value;
imageList.replaceChildren(...[...imageList.childNodes].reverse());
},
},
["newest first", "oldest first"].map((m) =>
$el("option", {
value: m,
textContent: m,
selected: feedDirection.value === m,
})
)
),
]),
]);
},
});
const hideButton = $el("button.pysssss-image-feed-btn", {
textContent: "❌",
onclick: () => {
@@ -118,8 +212,8 @@ app.registerExtension({
min: 10,
max: 80,
oninput: (e) => {
e.target.parentElement.title = `Controls the maximum height of the image feed panel (${e.target.value}vh)`;
imageFeed.style.setProperty("--max-height", e.target.value + "vh");
e.target.parentElement.title = `Controls the maximum size of the image feed panel (${e.target.value}vh)`;
imageFeed.style.setProperty("--max-size", e.target.value + "vh");
saveVal("FeedSize", e.target.value);
},
$: (el) => {
@@ -184,7 +278,9 @@ app.registerExtension({
const href = `/view?filename=${encodeURIComponent(src.filename)}&type=${
src.type
}&subfolder=${encodeURIComponent(src.subfolder)}&t=${+new Date()}`;
imageList.prepend(
const method = feedDirection.value === "newest first" ? "prepend" : "append";
imageList[method](
$el("div", [
$el(
"a",