AlekPet
8a2f21f3d7
Add IDE node, avaiables run Python and JavaScript code inside node Small fix Preview Text Node Rewrite code inside utils from function createModalWindow, add themes modal window. Add preiview image showing sizes image
530 lines
13 KiB
JavaScript
530 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 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 {
|
|
element[key] = currValue;
|
|
}
|
|
});
|
|
return element;
|
|
}
|
|
|
|
function isValidStyle(opt, strColor) {
|
|
let op = new Option().style;
|
|
if (!op.hasOwnProperty(opt)) return false;
|
|
op[opt] = strColor;
|
|
return 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,
|
|
THEMES_MODAL_WINDOW,
|
|
};
|