Eel
Eel copied to clipboard
python-eel
"close_callback" not working.
General
I am trying to stop the complete app once browser window closed. Apparently close_callback is not working or the function provided is not even being triggered. I found by trying to enter a forced error as well just to check if its my code and syntax error or its not just working. I found it is just not working.
I just want to close the app completely once browser window is closed.
Code
main.py
import eel
import sys
def exit_code():
sys.exit()
eel.init('web')
eel.start('main.html', close_callback=exit_code)
web\index.html
<html>
<head>
<title>Recall - Project Management Tool</title>
<link rel="fav icon" href="icon.png">
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Montserrat&display=swap');
:root
{
--hf: 'Fredoka One', cursive;
--pf: 'Montserrat', sans-serif;
--fs: 24px;
--bg: #0A1427;
--dc: #B6ACE8;
--ec: #5A53B1;
--hc: #7D92C9;
}
::selection {
color: #ffffff;
}
* {
background: var(--bg);
color: var(--dc);
cursor: default;
transition: 0.15s;
}
h1,
h2,
h3,
h4,
h5,
h6
{
margin: 0;
padding: 0;
font-family: var(--hf);
color: var(--hc);
}
p,
em,
strong
{
margin: 0;
padding: 0;
font-family: var(--pf);
font-size: var(--fs);
color: var(--dc);
}
h1 {
font-size: calc(var(--fs) * 6);
}
h2 {
font-size: calc(var(--fs) * 2);
}
#coll {
display: inline-flex;
}
.list {
border: 5px solid var(--ec);
border-radius: 10px;
padding: 10px;
width: 300px;
overflow-x: scroll;
margin-right: 10px;
}
.item {
border: 5px solid var(--ec);
border-radius: 10px;
padding: 10px;
width: 270px;
overflow-x: scroll;
margin: 0;
}
button {
background: var(--dc);
color: var(--bg);
border: none;
border-radius: 10px;
cursor: pointer;
transition: 0.15s;
font-size: calc(var(--fs)*1);
padding: 10px;
outline: none;
font-family: var(--hf);
margin-right: 10px;
}
button:hover {
transition: 0.15s;
font-size: calc(var(--fs)*1.25);
}
div {
margin-top: 15px;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
background: var(--bg);
}
::-webkit-scrollbar-track {
background: var(--bg);
border-radius: 20px;
}
::-webkit-scrollbar-thumb {
background: var(--hc);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ec);
}
</style>
<script>
window.addEventListener('contextmenu', e => e.preventDefault());
</script>
</head>
<body>
<div id="_TEMP">
<h1>RECALL</h1>
<p>Recall is a simple project management tool which is completely free!</p>
<div id="all_projects"><button id="new-button" onclick="create();">+ New Project</button></div>
</div>
</body>
<script>
var state = "def";
const ls = localStorage;
const doc = document;
if ( ls.getItem('ASTOTAL') === null ) {
ls.setItem('ASTOTAL', 'null');
}
function hasChar(str, char) {
for ( let c of str.split('') ) {
if ( c === char ) {
return true;
}
}
}
for ( let c of location.href.split('') ) {
if ( c == "?" ) {
state = location.href.split("?")[1];
break;
}
}
if ( state === "def" ) {
console.log('RECALL - Home Page');
console.log('RECALL - Attachment Studios Basic License(c)V3');
home_render();
} else {
if ( String(ls.getItem(state)).toLowerCase() === "null" ) {
location.replace(location.href.split("?")[0]);
} else {
render();
}
}
function create() {
let name = "";
let valid = false;
while ( !(valid) ) {
name = prompt('Project Name:');
if ( name === null ) {
break;
} else {
let chars = "\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\", \"h\", \"i\", \"j\", \"k\", \"l\", \"m\", \"n\", \"o\", \"p\", \"q\", \"r\", \"s\", \"t\", \"u\", \"v\", \"w\", \"x\", \"y\", \"z\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\", \"K\", \"L\", \"M\", \"N\", \"O\", \"P\", \"Q\", \"R\", \"S\", \"T\", \"U\", \"V\", \"W\", \"X\", \"Y\", \"Z\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"-\", \".\"";
if ( name.replaceAll(' ') === '' ) {
alert('Invalid Name!\nAvailable Characters:\n' + chars);
} else {
valid = true;
for ( let c of name ) {
if (!( hasChar(chars.replaceAll('"', '').replaceAll(' ', '').replaceAll(',', ''), c) )) {
alert('Invalid Name!\nAvailable Characters:\n' + chars);
valid = false;
break;
}
}
}
}
}
if ( valid ) {
if ( ls.getItem(name) === null || ls.getItem(name) === '' ) {
if ( name !== 'ASTOTAL' ) {
ls.setItem(name, '');
ls.setItem('ASTOTAL', ls.getItem('ASTOTAL') + '?' + name + '?null');
location.replace(location.href + '?' + name);
location.reload();
alert('Project created!');
} else {
alert('Name reserved!');
}
} else {
alert('Project with same name already exists!');
}
}
}
function remove(id) {
if ( confirm('Delete Project?') ) {
ls.setItem('ASTOTAL', ls.getItem('ASTOTAL').replace('?' + id + '?', '?'));
ls.setItem(id, '');
location.reload();
}
}
function home_render() {
prj = doc.getElementById('all_projects');
for ( let n of ls.getItem('ASTOTAL').split('?') ) {
if ( String(n) !== 'null' ) {
prj.innerHTML = prj.innerHTML + `<button oncontextmenu="remove('${n}');" onclick="location.replace(location.href + '?' + '${n}');">${n}</button>`
}
}
}
function render() {
doc.title = state + ' - Recall - Project Management Tool';
doc.body.innerHTML = `
<button onclick="location.replace(location.href.split('?')[0]);">Home</button>
<div id="title">
<h1>${state}</h1>
</div>
<button onclick="newlist();">+ New List</button>
<br>
<div id="coll">
</div>
`;
let list_names = ls.getItem(state).split('!');
let coll = doc.getElementById('coll');
for ( let n of list_names ) {
let allowed = true;
if ( n !== 'null' && n !== '' && allowed ) {
coll.innerHTML = coll.innerHTML + `
<div class="list" id="${n}">
<h2 oncontextmenu="removelist('${n}');">${n}</h2>
<button onclick="newitem('${n}');">+ New Item</button>
<div id="${n}-items"></div>
</div>
`;
for ( let v of ls.getItem(state + n).split('==--!--==') ) {
let itar = doc.getElementById(n + '-items');
if ( v !== '' ) {
itar.innerHTML = itar.innerHTML + `<p class="item" id="${state}-${n}-${v}" oncontextmenu="removeitem('${state}-${n}-${v}');">${v}</p>`;
}
}
}
}
}
function newlist() {
let name = "";
let valid = false;
while ( !(valid) ) {
name = prompt('List Name:');
if ( name === null ) {
break;
} else {
let chars = "\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\", \"h\", \"i\", \"j\", \"k\", \"l\", \"m\", \"n\", \"o\", \"p\", \"q\", \"r\", \"s\", \"t\", \"u\", \"v\", \"w\", \"x\", \"y\", \"z\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\", \"K\", \"L\", \"M\", \"N\", \"O\", \"P\", \"Q\", \"R\", \"S\", \"T\", \"U\", \"V\", \"W\", \"X\", \"Y\", \"Z\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"-\", \".\", \" \"";
if ( name.replaceAll(' ') === '' ) {
alert('Invalid Name!\nAvailable Characters:\n' + chars);
} else {
valid = true;
for ( let c of name ) {
if (!( hasChar(chars.replaceAll('"', '').replaceAll(' ', '').replaceAll(',', ''), c) )) {
alert('Invalid Name!\nAvailable Characters:\n' + chars);
valid = false;
break;
}
}
}
}
}
if ( valid ) {
if ( ls.getItem(state + name) === null || ls.getItem(state + name) === '' ) {
if ( true ) {
ls.setItem(state + name, '');
ls.setItem(state, 'null!' + name + '!null!' + ls.getItem(state));
render();
alert('List created!');
}
} else {
alert('List with same name already exists!');
}
}
}
function newitem(id) {
let name = prompt('Item:');
if ( name !== null ) {
ls.setItem(state + id, ls.getItem(state + id) + '==--!--==' + name + '==--!--==');
render();
}
}
function removelist(id) {
if ( confirm('Delete List?') ) {
ls.setItem(state, ls.getItem(state).replace('null!' + id + '!', ''));
ls.setItem(state + id, '');
render();
}
}
function removeitem(id) {
let s = id.split('-')[0];
let n = id.split('-')[1];
let v = id.split('-')[2];
ls.setItem(s+n, ls.getItem(s+n).replace(v, ''));
render();
}
</script>
</html>
System
- OS: Windows 11
- Browser: Chome(on export to exe without logo it shows chrome logo...)
Thanks, :D
Just In Case The Force Error I Used To Check Was:
import eel
import sys
def exit_code():
err = int("hopefully error")
eel.init('web')
eel.start('main.html', close_callback=exit_code)