FreeDATA/gui/electron/preload/index.ts
2024-02-29 16:36:56 +01:00

114 lines
3.4 KiB
TypeScript

import { ipcRenderer } from "electron";
function domReady(
condition: DocumentReadyState[] = ["complete", "interactive"],
) {
return new Promise((resolve) => {
if (condition.includes(document.readyState)) {
resolve(true);
} else {
document.addEventListener("readystatechange", () => {
if (condition.includes(document.readyState)) {
resolve(true);
}
});
}
});
}
const safeDOM = {
append(parent: HTMLElement, child: HTMLElement) {
if (!Array.from(parent.children).find((e) => e === child)) {
return parent.appendChild(child);
}
},
remove(parent: HTMLElement, child: HTMLElement) {
if (Array.from(parent.children).find((e) => e === child)) {
return parent.removeChild(child);
}
},
};
/**
* https://tobiasahlin.com/spinkit
* https://connoratherton.com/loaders
* https://projects.lukehaas.me/css-loaders
* https://matejkustec.github.io/SpinThatShit
*/
function useLoading() {
const className = `loaders-css__square-spin`;
const styleContent = `
@keyframes square-spin {
0% {
transform: rotate(0deg);
background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
25% { transform: perspective(100px) rotateX(180deg) rotateY(0);
background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg);
background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
75% { transform: perspective(100px) rotateX(0) rotateY(180deg);
background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
100% { transform: perspective(100px) rotateX(0) rotateY(0);
background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
}
.${className} > div {
animation-fill-mode: both;
width: 50px;
height: 50px;
background: #fff;
animation: square-spin 6s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.app-loading-wrap {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #282c34;
z-index: 99999;
}
`;
const oStyle = document.createElement("style");
const oDiv = document.createElement("div");
oStyle.id = "app-loading-style";
oStyle.innerHTML = styleContent;
oDiv.className = "app-loading-wrap";
oDiv.innerHTML = `<div class="${className}"><div></div></div>`;
return {
appendLoading() {
safeDOM.append(document.head, oStyle);
safeDOM.append(document.body, oDiv);
},
removeLoading() {
safeDOM.remove(document.head, oStyle);
safeDOM.remove(document.body, oDiv);
},
};
}
// ----------------------------------------------------------------------
const { appendLoading, removeLoading } = useLoading();
domReady().then(appendLoading);
window.onmessage = (ev) => {
ev.data.payload === "removeLoading" && removeLoading();
};
setTimeout(removeLoading, 3999);