Shortcode – Sluk ikke telefonen ved inaktivitet

Denne shortcode tilføjer en toggle som kan gøre således at brugerens telefon ikke slukker når den er inaktiv, den fungere derfor godt til løsningerne hvor der vises en mad opskrift da telefonen ofte bare ligger på bordet.

Indsæt i pluginnet "Snippets"

add_shortcode('wake_lock_toggle', function () {
   ob_start(); ?>
   <button id="toggleWakeLock" style="margin:10px;">Keep Screen Awake</button>
   <script>
   jQuery(document).ready(function ($) {
       let wakeLock = null;
       let wakeLockActive = false;
 
       async function requestWakeLock() {
           try {
               wakeLock = await navigator.wakeLock.request('screen');
               wakeLockActive = true;
              wakeLock.addEventListener('release', () => {
                   wakeLockActive = false;
                   updateButton();
               });
           } catch (err) {
               console.error(`${err.name}, ${err.message}`);
           }
           updateButton();
       }
 
       function releaseWakeLock() {
           if (wakeLock !== null) {
               wakeLock.release();
               wakeLock = null;
               wakeLockActive = false;
           }
           updateButton();
       }
 
       function updateButton() {
           const btn = document.getElementById('toggleWakeLock');
           if (btn) btn.textContent = wakeLockActive ? 'Sluk skærmen' : 'Sluk ikke skærmen';
       }
 
       $('#toggleWakeLock').on('click', function () {
           if (wakeLockActive) {
               releaseWakeLock();
           } else {
               requestWakeLock();
           }
       });
 
      document.addEventListener('visibilitychange', () => {
           if (wakeLockActive && document.visibilityState === 'visible') {
               requestWakeLock();
           }
       });
   });
   </script>
   <?php
   return ob_get_clean();
});