add presentation mode

breakpoints.html

@@ -85,7 +85,7 @@ <h2>Trick of the day:</h2>
  document.getElementById('next').onclick = e => {
  var allowed = false;
  console.log('Allowed', allowed);
- if (!allowed) {
+ if (!allowed && !localStorage.presentationMode) {
  alert('You shall not pass!')
  e.preventDefault();
  }
@@ -99,5 +99,6 @@ <h2>Trick of the day:</h2>
 <footer class="container">
  WebCore 2021
 </footer>
+<script src="js/mode-switch.js"></script>
 </body>
 </html>

index.html

@@ -59,5 +59,6 @@ <h1 class="title">Unorthodox ways to debug JS</h1>
  <footer class="container">
  WebCore 2021
  </footer>
+ <script src="js/mode-switch.js"></script>
 </body>
 </html>

js/log-debugger.js

@@ -7,7 +7,7 @@ termsCheckbox.onchange = () => {
 };
 
 function next() {
- if (termsAccepted !== true) {
+ if (termsAccepted !== true && !localStorage.presentationMode) {
  console.log('termsAccepted:', termsAccepted);
  termsCheckbox.setAttribute('aria-invalid', 'true');
  alert('Accept terms first!');

js/mode-switch.js

@@ -0,0 +1,18 @@
+// add toggle element
+const footer = document.querySelector('footer');
+footer.innerHTML += `, <a id="mode-switch" onclick="toggleMode()">presentation mode</a>`;
+
+function renderModeSwitch() {
+ const modeSwitch = document.querySelector('#mode-switch');
+ modeSwitch.innerText = (localStorage.presentationMode ? 'disable' : 'enable') + ' presentation mode';
+}
+
+function toggleMode() {
+ if (localStorage.presentationMode) {
+ delete localStorage.presentationMode;
+ } else {
+ localStorage.presentationMode = 'true';
+ }
+ renderModeSwitch();
+}
+renderModeSwitch();

log-debugger.html

@@ -100,5 +100,6 @@ <h1>Nice modal bro</h1>
  <footer class="container">
  WebCore 2021
  </footer>
+ <script src="js/mode-switch.js"></script>
 </body>
 </html>

other-breakpoints.html

@@ -40,6 +40,7 @@ <h2>XHR Fetch breakpoints</h2>
 
  <h2>Event listeners breakpoints</h2>
  <p>Will stop on any event you like!</p>
+ <!-- TODO: example with break on page load ??? -->
  </article>
 
  <div class="grid">
@@ -58,5 +59,6 @@ <h2>Event listeners breakpoints</h2>
 <footer class="container">
  WebCore 2021
 </footer>
+<script src="js/mode-switch.js"></script>
 </body>
 </html>