FreeDATA/gui/electron/preload/index.ts

206 lines
6.8 KiB
TypeScript
Raw Normal View History

2023-10-22 08:12:00 +00:00
import { ipcRenderer } from "electron";
import { autoUpdater } from "electron-updater";
2023-10-08 17:58:35 +00:00
2023-10-22 08:12:00 +00:00
function domReady(
condition: DocumentReadyState[] = ["complete", "interactive"],
) {
2023-10-04 17:54:50 +00:00
return new Promise((resolve) => {
2023-09-02 11:37:03 +00:00
if (condition.includes(document.readyState)) {
2023-10-22 08:12:00 +00:00
resolve(true);
2023-09-02 11:37:03 +00:00
} else {
2023-10-22 08:12:00 +00:00
document.addEventListener("readystatechange", () => {
2023-09-02 11:37:03 +00:00
if (condition.includes(document.readyState)) {
2023-10-22 08:12:00 +00:00
resolve(true);
2023-09-02 11:37:03 +00:00
}
2023-10-22 08:12:00 +00:00
});
2023-09-02 11:37:03 +00:00
}
2023-10-22 08:12:00 +00:00
});
2023-09-02 11:37:03 +00:00
}
const safeDOM = {
append(parent: HTMLElement, child: HTMLElement) {
2023-10-22 08:12:00 +00:00
if (!Array.from(parent.children).find((e) => e === child)) {
return parent.appendChild(child);
2023-09-02 11:37:03 +00:00
}
},
remove(parent: HTMLElement, child: HTMLElement) {
2023-10-22 08:12:00 +00:00
if (Array.from(parent.children).find((e) => e === child)) {
return parent.removeChild(child);
2023-09-02 11:37:03 +00:00
}
},
2023-10-22 08:12:00 +00:00
};
2023-09-02 11:37:03 +00:00
/**
* https://tobiasahlin.com/spinkit
* https://connoratherton.com/loaders
* https://projects.lukehaas.me/css-loaders
* https://matejkustec.github.io/SpinThatShit
*/
function useLoading() {
2023-10-22 08:12:00 +00:00
const className = `loaders-css__square-spin`;
2023-09-02 11:37:03 +00:00
const styleContent = `
@keyframes square-spin {
0% {
transform: rotate(0deg);
2023-10-08 08:37:14 +00:00
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);
2023-10-08 08:37:14 +00:00
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);
2023-10-08 08:37:14 +00:00
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);
2023-10-08 08:37:14 +00:00
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);
2023-10-08 08:37:14 +00:00
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 */
}
2023-09-02 11:37:03 +00:00
}
.${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;
2023-09-02 11:37:03 +00:00
}
.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;
2023-09-02 11:37:03 +00:00
}
2023-10-22 08:12:00 +00:00
`;
const oStyle = document.createElement("style");
const oDiv = document.createElement("div");
2023-09-02 11:37:03 +00:00
2023-10-22 08:12:00 +00:00
oStyle.id = "app-loading-style";
oStyle.innerHTML = styleContent;
oDiv.className = "app-loading-wrap";
oDiv.innerHTML = `<div class="${className}"><div></div></div>`;
2023-09-02 11:37:03 +00:00
return {
appendLoading() {
2023-10-22 08:12:00 +00:00
safeDOM.append(document.head, oStyle);
safeDOM.append(document.body, oDiv);
2023-09-02 11:37:03 +00:00
},
removeLoading() {
2023-10-22 08:12:00 +00:00
safeDOM.remove(document.head, oStyle);
safeDOM.remove(document.body, oDiv);
2023-09-02 11:37:03 +00:00
},
2023-10-22 08:12:00 +00:00
};
2023-09-02 11:37:03 +00:00
}
// ----------------------------------------------------------------------
2023-10-22 08:12:00 +00:00
const { appendLoading, removeLoading } = useLoading();
domReady().then(appendLoading);
2023-10-08 17:58:35 +00:00
2023-10-04 17:54:50 +00:00
window.onmessage = (ev) => {
2023-10-22 08:12:00 +00:00
ev.data.payload === "removeLoading" && removeLoading();
};
2023-10-08 17:58:35 +00:00
2023-10-22 08:12:00 +00:00
setTimeout(removeLoading, 4999);
2023-10-08 17:58:35 +00:00
window.addEventListener("DOMContentLoaded", () => {
2023-10-22 08:12:00 +00:00
// we are using this area for implementing the electron runUpdater
// we need access to DOM for displaying updater results in GUI
// close app, update and restart
2023-10-08 17:58:35 +00:00
document
.getElementById("update_and_install")
.addEventListener("click", () => {
ipcRenderer.send("request-restart-and-install-update");
});
2023-10-22 08:12:00 +00:00
});
2023-10-08 17:58:35 +00:00
// IPC ACTION FOR AUTO UPDATER
ipcRenderer.on("action-updater", (event, arg) => {
if (arg.status == "download-progress") {
var progressinfo =
"(" +
Math.round(arg.progress.transferred / 1024) +
"kB /" +
Math.round(arg.progress.total / 1024) +
"kB)" +
" @ " +
Math.round(arg.progress.bytesPerSecond / 1024) +
"kByte/s";
document.getElementById("UpdateProgressInfo").innerHTML = progressinfo;
document
.getElementById("UpdateProgressBar")
.setAttribute("aria-valuenow", arg.progress.percent);
document
.getElementById("UpdateProgressBar")
.setAttribute("style", "width:" + arg.progress.percent + "%;");
}
if (arg.status == "checking-for-update") {
//document.title = document.title + ' - v' + arg.version;
2023-10-20 18:56:52 +00:00
//updateTitle(
// config.myCall,
// config.tnc_host,
// config.tnc_port,
// " -v " + arg.version,
//);
2023-10-08 17:58:35 +00:00
document.getElementById("updater_status").innerHTML =
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
document.getElementById("updater_status").className =
"btn btn-secondary btn-sm";
document.getElementById("update_and_install").style.display = "none";
}
if (arg.status == "update-downloaded") {
document.getElementById("update_and_install").removeAttribute("style");
document.getElementById("updater_status").innerHTML =
'<i class="bi bi-cloud-download ms-1 me-1" style="color: white;"></i>';
document.getElementById("updater_status").className =
"btn btn-success btn-sm";
// HERE WE NEED TO RUN THIS SOMEHOW...
//mainLog.info('quit application and install update');
//autoUpdater.quitAndInstall();
}
if (arg.status == "update-not-available") {
2023-10-22 08:12:00 +00:00
document.getElementById("updater_last_version").innerHTML =
arg.info.releaseName;
document.getElementById("updater_last_update").innerHTML =
arg.info.releaseDate;
document.getElementById("updater_release_notes").innerHTML =
arg.info.releaseNotes;
2023-10-20 18:56:52 +00:00
2023-10-08 17:58:35 +00:00
document.getElementById("updater_status").innerHTML =
'<i class="bi bi-check2-square ms-1 me-1" style="color: white;"></i>';
document.getElementById("updater_status").className =
"btn btn-success btn-sm";
document.getElementById("update_and_install").style.display = "none";
}
if (arg.status == "update-available") {
document.getElementById("updater_status").innerHTML =
'<i class="bi bi-hourglass-split ms-1 me-1" style="color: white;"></i>';
document.getElementById("updater_status").className =
"btn btn-warning btn-sm";
document.getElementById("update_and_install").style.display = "none";
}
if (arg.status == "error") {
document.getElementById("updater_status").innerHTML =
'<i class="bi bi-exclamation-square ms-1 me-1" style="color: white;"></i>';
document.getElementById("updater_status").className =
"btn btn-danger btn-sm";
document.getElementById("update_and_install").style.display = "none";
}
});