Hi all, quick question.
I added a simple <script> tag to my index.html file to keep the screen awake when the TiddlyWiki is open (I use this wiki as a recipe book, so would like to have my phone screen kept awake while viewing). This worked like a charm when I dropped the <script> section above the <body>, but then I noticed that it was not preserved across saves. As soon as I make a change in the TiddlyWiki and save (using any method) that <script> tag is blown away.
2 questions:
- How can I add generic, globally acting JS to my TW like this in such a way that it is preserved?
- There’s probably an easy way to do this from within TW, like in a javascript-type tiddler. What would that look like?
Thanks!
For reference, here’s the snippet of code:
<script>
// test support
let isSupported = false;
if ('wakeLock' in navigator) {
isSupported = true;
console.log('Screen Wake Lock API supported 🎉');
} else {
wakeButton.disabled = true;
console.log('Wake lock is not supported by this browser.');
}
if (isSupported) {
// create a reference for the wake lock
let wakeLock = null;
// create an async function to request a wake lock
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
// change up our interface to reflect wake lock active
console.log('locked');
// listen for our release event
wakeLock.onrelease = function(ev) {
console.log(ev);
}
wakeLock.addEventListener('release', () => {
// if wake lock is released alter the button accordingly
console.log('released');
});
} catch (err) {
// if wake lock request fails - usually system related, such as battery
wakeButton.dataset.status = 'off';
wakeButton.textContent = 'Turn Wake Lock ON';
statusElem.textContent = `${err.name}, ${err.message}`;
}
} // requestWakeLock()
requestWakeLock();
const handleVisibilityChange = () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
requestWakeLock();
}
}
document.addEventListener('visibilitychange', handleVisibilityChange);
}
</script>