AlekPet
285c9ef6a3
In settings Comfyui add option save settings painter node inside json file, used his when canvas loading image big size, and localStorage limit quote expire. Painter node and PoseNode creates css files styles nodes Change style scrollbar in IDENode Small updates in extras node Small update utils.js makeElement function Update __init_.py, display loaded nodes inside python file
548 lines
13 KiB
JavaScript
548 lines
13 KiB
JavaScript
// Make modal window
|
|
function makeModal({
|
|
title = "Message",
|
|
text = "No text",
|
|
type = "info",
|
|
parent = null,
|
|
stylePos = "fixed",
|
|
} = {}) {
|
|
const overlay = document.createElement("div");
|
|
Object.assign(overlay.style, {
|
|
display: "none",
|
|
position: stylePos,
|
|
background: "rgba(0 0 0 / 0.8)",
|
|
opacity: 0,
|
|
top: "0",
|
|
left: "0",
|
|
right: "0",
|
|
bottom: "0",
|
|
zIndex: "500",
|
|
transition: "all .8s",
|
|
cursor: "pointer",
|
|
});
|
|
|
|
const boxModal = document.createElement("div");
|
|
Object.assign(boxModal.style, {
|
|
transition: "all 0.5s",
|
|
opacity: 0,
|
|
display: "none",
|
|
position: stylePos,
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%,-50%)",
|
|
background: "#525252",
|
|
minWidth: "300px",
|
|
fontFamily: "sans-serif",
|
|
zIndex: "501",
|
|
border: "1px solid rgb(255 255 255 / 45%)",
|
|
});
|
|
|
|
boxModal.className = "alekpet_modal_window";
|
|
|
|
const boxModalBody = document.createElement("div");
|
|
Object.assign(boxModalBody.style, {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
textAlign: "center",
|
|
});
|
|
|
|
boxModalBody.className = "alekpet_modal_body";
|
|
|
|
const boxModalHtml = `
|
|
<div class="alekpet_modal_header" style="display: flex; align-items: center; background: #222; width: 100%;justify-content: center;">
|
|
<div class="alekpet_modal_title" style="flex-basis: 85%; text-align: center;padding: 5px;">${title}</div>
|
|
<div class="alekpet_modal_close">✕</div>
|
|
</div>
|
|
<div class="alekpet_modal_description" style="padding: 8px;">${text}</div>`;
|
|
boxModalBody.innerHTML = boxModalHtml;
|
|
|
|
const alekpet_modal_header = boxModalBody.querySelector(
|
|
".alekpet_modal_header"
|
|
);
|
|
Object.assign(alekpet_modal_header.style, {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
});
|
|
|
|
const close = boxModalBody.querySelector(".alekpet_modal_close");
|
|
Object.assign(close.style, {
|
|
cursor: "pointer",
|
|
});
|
|
|
|
let parentElement = document.body;
|
|
if (parent && parent.nodeType === 1) {
|
|
parentElement = parent;
|
|
}
|
|
|
|
boxModal.append(boxModalBody);
|
|
parentElement.append(overlay, boxModal);
|
|
|
|
const removeEvent = new Event("removeElements");
|
|
const remove = () => {
|
|
animateTransitionProps(boxModal, { opacity: 0 }).then(() =>
|
|
animateTransitionProps(overlay, { opacity: 0 }).then(() => {
|
|
parentElement.removeChild(boxModal);
|
|
parentElement.removeChild(overlay);
|
|
})
|
|
);
|
|
};
|
|
|
|
boxModal.addEventListener("removeElements", remove);
|
|
overlay.addEventListener("removeElements", remove);
|
|
|
|
animateTransitionProps(overlay)
|
|
.then(() => {
|
|
overlay.addEventListener("click", () => {
|
|
overlay.dispatchEvent(removeEvent);
|
|
});
|
|
animateTransitionProps(boxModal);
|
|
})
|
|
.then(() =>
|
|
boxModal
|
|
.querySelector(".alekpet_modal_close")
|
|
.addEventListener("click", () => boxModal.dispatchEvent(removeEvent))
|
|
);
|
|
}
|
|
|
|
function findWidget(node, value, attr = "name", func = "find") {
|
|
return node?.widgets ? node.widgets[func]((w) => w[attr] === value) : null;
|
|
}
|
|
|
|
function animateTransitionProps(
|
|
el,
|
|
props = { opacity: 1 },
|
|
preStyles = { display: "block" }
|
|
) {
|
|
Object.assign(el.style, preStyles);
|
|
return new Promise((res) => {
|
|
setTimeout(() => {
|
|
Object.assign(el.style, props);
|
|
|
|
const transstart = () => (el.isAnimating = true);
|
|
const transchancel = () => (el.isAnimating = false);
|
|
el.addEventListener("transitionstart", transstart);
|
|
el.addEventListener("transitioncancel", transchancel);
|
|
|
|
el.addEventListener("transitionend", function transend() {
|
|
el.isAnimating = false;
|
|
el.removeEventListener("transitionend", transend);
|
|
el.removeEventListener("transitionend", transchancel);
|
|
el.removeEventListener("transitionend", transstart);
|
|
res(el);
|
|
});
|
|
}, 100);
|
|
});
|
|
}
|
|
|
|
function animateClick(target, opacityVal = 0.9) {
|
|
if (target?.isAnimating) return;
|
|
|
|
const hide = +target.style.opacity === 0;
|
|
return animateTransitionProps(target, {
|
|
opacity: hide ? opacityVal : 0,
|
|
}).then(() => showHide({ elements: [target], hide: !hide }));
|
|
}
|
|
|
|
function showHide({ elements = [], hide = null, displayProp = "block" } = {}) {
|
|
Array.from(elements).forEach((el) => {
|
|
if (hide !== null) {
|
|
el.style.display = !hide ? displayProp : "none";
|
|
} else {
|
|
el.style.display =
|
|
!el.style.display || el.style.display === "none" ? displayProp : "none";
|
|
}
|
|
});
|
|
}
|
|
|
|
function isEmptyObject(obj) {
|
|
if (!obj) return true;
|
|
return Object.keys(obj).length === 0 && obj.constructor === Object;
|
|
}
|
|
|
|
function makeElement(tag, attrs = {}) {
|
|
if (!tag) tag = "div";
|
|
const element = document.createElement(tag);
|
|
Object.keys(attrs).forEach((key) => {
|
|
const currValue = attrs[key];
|
|
if (key === "class") {
|
|
if (Array.isArray(currValue)) {
|
|
element.classList.add(...currValue);
|
|
} else if (currValue instanceof String && typeof currValue === "string") {
|
|
element.className = currValue;
|
|
}
|
|
} else if (key === "dataset") {
|
|
try {
|
|
if (Array.isArray(currValue)) {
|
|
currValue.forEach((datasetArr) => {
|
|
const [prop, propval] = Object.entries(datasetArr)[0];
|
|
element.dataset[prop] = propval;
|
|
});
|
|
} else {
|
|
const [prop, propval] = Object.entries(currValue)[0];
|
|
element.dataset[prop] = propval;
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
} else if (["for"].includes(key)) {
|
|
element.setAttribute(key, currValue);
|
|
} else if (key === "children") {
|
|
element.append(...(currValue instanceof Array ? currValue : [currValue]));
|
|
} else if (key === "parent") {
|
|
currValue.append(element);
|
|
} else {
|
|
element[key] = currValue;
|
|
}
|
|
});
|
|
return element;
|
|
}
|
|
|
|
function isValidStyle(opt, strColor) {
|
|
let op = new Option().style;
|
|
if (!op.hasOwnProperty(opt))
|
|
return { result: false, color: "", color_hex: "" };
|
|
|
|
op[opt] = strColor;
|
|
|
|
return {
|
|
result: op[opt] !== "",
|
|
color_rgb: op[opt],
|
|
color_hex: rgbToHex(op[opt]),
|
|
};
|
|
}
|
|
|
|
function rgbToHex(rgb) {
|
|
const regEx = new RegExp(/\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
|
|
if (regEx.test(rgb)) {
|
|
let [, r, g, b] = regEx.exec(rgb);
|
|
r = parseInt(r).toString(16);
|
|
g = parseInt(g).toString(16);
|
|
b = parseInt(b).toString(16);
|
|
|
|
r = r.length === 1 ? r + "0" : r;
|
|
g = g.length === 1 ? g + "0" : g;
|
|
b = b.length === 1 ? b + "0" : b;
|
|
|
|
return `#${r}${g}${b}`;
|
|
}
|
|
}
|
|
|
|
async function getDataJSON(url) {
|
|
try {
|
|
const response = await fetch(url);
|
|
const jsonData = await response.json();
|
|
return jsonData;
|
|
} catch (err) {
|
|
return new Error(err);
|
|
}
|
|
}
|
|
|
|
function deepMerge(target, source) {
|
|
if (source?.nodeType) return;
|
|
for (let key in source) {
|
|
if (source[key] instanceof Object && key in target) {
|
|
Object.assign(source[key], deepMerge(target[key], source[key]));
|
|
}
|
|
}
|
|
|
|
Object.assign(target || {}, source);
|
|
return target;
|
|
}
|
|
|
|
const THEME_MODAL_WINDOW_BASE = {
|
|
stylesTitle: {
|
|
background: "#8f210f",
|
|
padding: "5px",
|
|
borderRadius: "6px",
|
|
marginBottom: "5px",
|
|
alignSelf: "stretch",
|
|
},
|
|
stylesBox: {
|
|
background: "auto",
|
|
color: "auto",
|
|
border: 0,
|
|
boxShadow: "none",
|
|
padding: 0,
|
|
fontFamily: "sans-serif",
|
|
},
|
|
stylesWrapper: {
|
|
display: "flex",
|
|
background: "#3b2222",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
alignItems: "stretch",
|
|
textAlign: "center",
|
|
borderRadius: "6px",
|
|
boxShadow: "3px 3px 6px #141414",
|
|
border: "1px solid #f91b1b",
|
|
color: "white",
|
|
padding: "6px",
|
|
fontFamily: "sans-serif",
|
|
lineHeight: 1.5,
|
|
maxWidth: "300px",
|
|
},
|
|
stylesClose: { background: "#3b2222" },
|
|
};
|
|
|
|
const THEMES_MODAL_WINDOW = {
|
|
error: { ...THEME_MODAL_WINDOW_BASE },
|
|
warning: {
|
|
stylesTitle: {
|
|
...THEME_MODAL_WINDOW_BASE.stylesTitle,
|
|
background: "#e99818",
|
|
},
|
|
stylesBox: { ...THEME_MODAL_WINDOW_BASE.stylesBox },
|
|
stylesWrapper: {
|
|
...THEME_MODAL_WINDOW_BASE.stylesWrapper,
|
|
background: "#594e32",
|
|
boxShadow: "3px 3px 6px #141414",
|
|
border: "1px solid #e99818",
|
|
},
|
|
stylesClose: {
|
|
...THEME_MODAL_WINDOW_BASE.stylesClose,
|
|
background: "#594e32",
|
|
},
|
|
},
|
|
normal: {
|
|
stylesTitle: {
|
|
...THEME_MODAL_WINDOW_BASE.stylesTitle,
|
|
background: "#108f0f",
|
|
},
|
|
stylesBox: { ...THEME_MODAL_WINDOW_BASE.stylesBox },
|
|
stylesWrapper: {
|
|
...THEME_MODAL_WINDOW_BASE.stylesWrapper,
|
|
background: "#223b2a",
|
|
boxShadow: "3px 3px 6px #141414",
|
|
border: "1px solid #108f0f",
|
|
},
|
|
stylesClose: {
|
|
...THEME_MODAL_WINDOW_BASE.stylesClose,
|
|
background: "#223b2a",
|
|
},
|
|
},
|
|
};
|
|
|
|
const defaultOptions = {
|
|
auto: {
|
|
autohide: false,
|
|
autoshow: false,
|
|
autoremove: false,
|
|
propStyles: { opacity: 0 },
|
|
propPreStyles: {},
|
|
timewait: 2000,
|
|
},
|
|
parent: null,
|
|
};
|
|
|
|
function createWindowModal({
|
|
textTitle = "Message",
|
|
textBody = "Hello world!",
|
|
textFooter = null,
|
|
classesWrapper = [],
|
|
stylesWrapper = {},
|
|
classesBox = [],
|
|
stylesBox = {},
|
|
classesTitle = [],
|
|
stylesTitle = {},
|
|
classesBody = [],
|
|
stylesBody = {},
|
|
classesClose = [],
|
|
stylesClose = {},
|
|
classesFooter = [],
|
|
stylesFooter = {},
|
|
options = defaultOptions,
|
|
} = {}) {
|
|
// Check all options exist
|
|
options = deepMerge({ ...defaultOptions }, options);
|
|
|
|
const {
|
|
parent,
|
|
auto: {
|
|
autohide,
|
|
autoshow,
|
|
autoremove,
|
|
timewait,
|
|
propStyles,
|
|
propPreStyles,
|
|
},
|
|
} = options;
|
|
|
|
// Function past text(html)
|
|
function addText(text, parent) {
|
|
if (!parent) return;
|
|
|
|
switch (typeof text) {
|
|
case "string":
|
|
if (/^\<*.\/?\>$/.test(text)) {
|
|
parent.innerHTML(text);
|
|
} else {
|
|
parent.textContent = text;
|
|
}
|
|
break;
|
|
case "object":
|
|
default:
|
|
if (Array.isArray(text)) {
|
|
text.forEach((element) => parent.append(element));
|
|
} else if (text.nodeType === 1 || text.nodeType === 3)
|
|
parent.append(text);
|
|
}
|
|
}
|
|
|
|
// Wrapper
|
|
const wrapper_settings = makeElement("div", {
|
|
class: ["alekpet__wrapper__window", ...classesWrapper],
|
|
});
|
|
|
|
Object.assign(wrapper_settings.style, {
|
|
display: "none",
|
|
opacity: 0,
|
|
minWidth: "220px",
|
|
position: "absolute",
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
opacity: 0,
|
|
transition: "all .8s",
|
|
...stylesWrapper,
|
|
});
|
|
|
|
// Box
|
|
const box__settings = makeElement("div", {
|
|
class: ["alekpet__window__box", ...classesBox],
|
|
});
|
|
Object.assign(box__settings.style, {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
background: "#0e0e0e",
|
|
padding: "10px",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
gap: "10px",
|
|
textAlign: "center",
|
|
borderRadius: "6px",
|
|
color: "white",
|
|
border: "2px solid silver",
|
|
fontFamily: "monospace",
|
|
boxShadow: "2px 2px 4px silver",
|
|
...stylesBox,
|
|
});
|
|
|
|
// Title
|
|
const box_settings_title = makeElement("div", {
|
|
class: ["alekpet__window__title", , ...classesTitle],
|
|
});
|
|
Object.assign(box_settings_title.style, {
|
|
...stylesTitle,
|
|
});
|
|
// Add text (html) to title
|
|
addText(textTitle, box_settings_title);
|
|
|
|
// Body
|
|
const box_settings_body = makeElement("div", {
|
|
class: ["alekpet__window__body", ...classesBody],
|
|
});
|
|
Object.assign(box_settings_body.style, {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "flex-end",
|
|
gap: "5px",
|
|
textWrap: "wrap",
|
|
...stylesBody,
|
|
});
|
|
// Add text (html) to body
|
|
addText(textBody, box_settings_body);
|
|
|
|
// Close button
|
|
const close__box__button = makeElement("div", {
|
|
class: ["close__box__button", ...classesClose],
|
|
textContent: "✖",
|
|
});
|
|
Object.assign(close__box__button.style, {
|
|
position: "absolute",
|
|
top: "-10px",
|
|
right: "-10px",
|
|
background: "silver",
|
|
borderRadius: "50%",
|
|
width: "20px",
|
|
height: "20px",
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
fontSize: "0.8rem",
|
|
...stylesClose,
|
|
});
|
|
|
|
close__box__button.addEventListener("click", () =>
|
|
animateTransitionProps(wrapper_settings, {
|
|
opacity: 0,
|
|
}).then(() => {
|
|
showHide({ elements: [wrapper_settings] });
|
|
})
|
|
);
|
|
|
|
close__box__button.onmouseenter = () => {
|
|
close__box__button.style.opacity = 0.8;
|
|
};
|
|
|
|
close__box__button.onmouseleave = () => {
|
|
close__box__button.style.opacity = 1;
|
|
};
|
|
|
|
box__settings.append(box_settings_title, box_settings_body);
|
|
|
|
// Footer
|
|
if (textFooter) {
|
|
const box_settings_footer = makeElement("div", {
|
|
class: [...classesFooter],
|
|
});
|
|
Object.assign(box_settings_footer.style, {
|
|
...stylesFooter,
|
|
});
|
|
|
|
// Add text (html) to body
|
|
addText(textFooter, box_settings_footer);
|
|
|
|
box__settings.append(box_settings_footer);
|
|
}
|
|
|
|
wrapper_settings.append(close__box__button, box__settings);
|
|
|
|
if (parent && parent.nodeType === 1) {
|
|
parent.append(wrapper_settings);
|
|
|
|
if (autoshow) {
|
|
animateClick(wrapper_settings).then(
|
|
() =>
|
|
autohide &&
|
|
setTimeout(
|
|
() =>
|
|
animateTransitionProps(
|
|
wrapper_settings,
|
|
{ ...propStyles },
|
|
{ ...propPreStyles }
|
|
).then(() => autoremove && parent.removeChild(wrapper_settings)),
|
|
timewait
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
return wrapper_settings;
|
|
}
|
|
|
|
export {
|
|
makeModal,
|
|
createWindowModal,
|
|
animateTransitionProps,
|
|
animateClick,
|
|
showHide,
|
|
makeElement,
|
|
getDataJSON,
|
|
isEmptyObject,
|
|
isValidStyle,
|
|
rgbToHex,
|
|
findWidget,
|
|
THEMES_MODAL_WINDOW,
|
|
};
|