barf: better network transactions, and make people wait for clippy
This commit is contained in:
parent
a25ba9aef6
commit
5a3e9173c6
1 changed files with 37 additions and 2 deletions
|
@ -500,6 +500,19 @@ body.all-done .now-safe {
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
right: 100%;
|
right: 100%;
|
||||||
}
|
}
|
||||||
|
#clickshield {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.network-transaction #clickshield {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
cursor: wait;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
#page {
|
#page {
|
||||||
|
@ -571,6 +584,7 @@ body.all-done .now-safe {
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="clickshield"></div>
|
||||||
<div id="page">
|
<div id="page">
|
||||||
<div id="header">
|
<div id="header">
|
||||||
BARF<span class="xp">xp</span>
|
BARF<span class="xp">xp</span>
|
||||||
|
@ -926,6 +940,23 @@ class BARF {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setNetworkTransaction(state) {
|
||||||
|
if (state) {
|
||||||
|
document.body.classList.add('network-transaction');
|
||||||
|
} else {
|
||||||
|
document.body.classList.remove('network-transaction');
|
||||||
|
}
|
||||||
|
for (const el of document.body.querySelectorAll('input, textarea, button')) {
|
||||||
|
if (state) {
|
||||||
|
if (!el.dataset.previouslyDisabled) el.dataset.previouslyDisabled = el.disabled;
|
||||||
|
el.disabled = state;
|
||||||
|
} else {
|
||||||
|
el.disabled = el.dataset.previouslyDisabled === 'true';
|
||||||
|
delete el.dataset.previouslyDisabled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
runAssistant() {
|
runAssistant() {
|
||||||
if (this.assistantQueue.length === 0) {
|
if (this.assistantQueue.length === 0) {
|
||||||
this.assistantRunning = false;
|
this.assistantRunning = false;
|
||||||
|
@ -935,10 +966,12 @@ class BARF {
|
||||||
const assistantActuallyRendering = window.getComputedStyle(document.querySelector('#assistant')).display !== 'none';
|
const assistantActuallyRendering = window.getComputedStyle(document.querySelector('#assistant')).display !== 'none';
|
||||||
if (!this.assistantShown) {
|
if (!this.assistantShown) {
|
||||||
if (assistantActuallyRendering) {
|
if (assistantActuallyRendering) {
|
||||||
|
this.setNetworkTransaction(true);
|
||||||
this.assistantQueue.splice(0, 0, {
|
this.assistantQueue.splice(0, 0, {
|
||||||
what: 'playVideo',
|
what: 'playVideo',
|
||||||
video: 'intro',
|
video: 'intro',
|
||||||
callback: () => {
|
callback: () => {
|
||||||
|
this.setNetworkTransaction(false);
|
||||||
this.assistantShown = true;
|
this.assistantShown = true;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -1092,13 +1125,13 @@ class BARF {
|
||||||
}
|
}
|
||||||
|
|
||||||
doSave() {
|
doSave() {
|
||||||
document.body.classList.add('network-transaction');
|
this.setNetworkTransaction(true);
|
||||||
return fetch(window.location, {
|
return fetch(window.location, {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: {'Content-Type': 'application/json'},
|
headers: {'Content-Type': 'application/json'},
|
||||||
body: JSON.stringify(this.dataset),
|
body: JSON.stringify(this.dataset),
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
document.body.classList.remove('network-transaction');
|
this.setNetworkTransaction(false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1162,6 +1195,8 @@ class BARF {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}, (err) => {
|
||||||
|
this.panic('Something went wrong saving your form responses: ' + err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue