[UI] Developer mode toggle (#4824)

Fixes #4719 . Developer's mode stays the same when reloading the page and adventures are not shown.

How to test: toggle the developers mode toggle and refresh the page.
<img width="1440" alt="Screenshot 2023-12-07 at 14 18 04" src="https://github.com/hedyorg/hedy/assets/48122190/37d61b06-df78-4fc3-922f-6c99a34eeb67">

static/js/app.ts

@@ -1571,27 +1571,41 @@ function createModal(level:number ){
   modal.repair(editor, 0, title);
 }
 
-export function toggle_developers_mode(enforced: boolean) {
-  if ($('#developers_toggle').is(":checked") || enforced) {
-      $('#adventures-tab').hide();
-      $('#blur_toggle_container').show();
+export function toggleDevelopersMode(event='click', enforce_dev_mode:boolean) {
+  let dev_mode = window.localStorage.getItem('developer_mode') === 'true';
+  if (enforce_dev_mode || (event === 'click' && !dev_mode) || (event === 'load' && dev_mode)) {
+    if (event === 'click') {
+      window.localStorage.setItem('developer_mode', 'true');
       pushAchievement("lets_focus");
+    } else {
+      $('#developers_toggle').prop('checked', true);
+    }
+    const adventures = document.getElementById('adventures');
+    const editorArea = document.getElementById('editor-area');
+    const codeEditor = document.getElementById('code_editor');
+    const codeOutput = document.getElementById('code_output');
+    if (adventures && editorArea && codeEditor && codeOutput && theGlobalEditor) {
+      adventures.style.display = 'none';
+      editorArea.classList.remove('mt-5');
+      codeOutput.style.height = '36em';
+      theGlobalEditor.resize(576);
+    }
   } else {
-      $('#blur_toggle_container').hide();
-      $('#adventures-tab').show();
-  }
-
-  if ($('#adventures-tab').is(":hidden")) {
-    $('#editor-area').removeClass('mt-5');
-    $('#code_editor').css('height', 36 + "em");
-    $('#code_output').css('height', 36 + "em");
-    theGlobalEditor.resize(576);
-  } else {
-    $('#editor-area').addClass('mt-5');
-    $('#code_editor').height('22rem');
-    $('#code_output').height('22rem');
-    theGlobalEditor.resize(352);
-  }
+    if (event === 'click') {
+      window.localStorage.setItem('developer_mode', 'false');
+    }
+    const adventures = document.getElementById('adventures');
+    const editorArea = document.getElementById('editor-area');
+    const codeEditor = document.getElementById('code_editor');
+    const codeOutput = document.getElementById('code_output');
+    if (adventures && editorArea && codeEditor && codeOutput && theGlobalEditor) {
+      adventures.style.display = 'block';
+      editorArea.classList.add('mt-5');
+      codeEditor.style.height = '22rem';
+      codeOutput.style.height = '22rem';
+      theGlobalEditor.resize(352);
+    }
+  } 
 }
 
 /**

templates/incl/editor-and-output.html

@@ -244,17 +244,23 @@
     </div>
   </div>
 <!-- developer mode toggle -->
-{% if not raw %}
-<div class="mx-auto mt-4 w-64 border-gray-400 border-2 rounded-full py-2 px-4{% if editor_readonly or enforce_developers_mode %} hidden{% endif %}" id="developers_toggle_container">
-  <label for="developers_toggle" class="flex flex-row items-center justify-center cursor-pointer">
-    <div class="relative">
-      <input id="developers_toggle" type="checkbox" onclick="hedyApp.toggle_developers_mode(false)" class="sr-only" />
-      <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" id="dev_toggle"></div>
-      <div class="toggle-circle absolute w-6 h-6 bg-white rounded-full shadow ltr:-left-1 rtl:-right-1 -top-1 transition" id="toggle_circle" style="top: -5px;"></div>
-    </div>
-    <div class="ltr:ml-3 rtl:mr-3">{{_('developers_mode')}}</div>
-  </label>
-</div>
+{% if not enforce_developers_mode and not raw and not editor_readonly %}
+  <div class="mx-auto mt-4 w-64 border-gray-400 border-2 rounded-full py-2 px-4" id="developers_toggle_container">
+    <label for="developers_toggle" class="flex flex-row items-center justify-center cursor-pointer">
+      <div class="relative">
+        <input id="developers_toggle" type="checkbox" class="sr-only"
+        _="on load hedyApp.toggleDevelopersMode('load', false)
+          on click hedyApp.toggleDevelopersMode('click', false)">
+        <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" id="dev_toggle"></div>
+        <div
+          id="toggle_circle"
+          class="toggle-circle absolute w-6 h-6 bg-white rounded-full shadow ltr:-left-1 rtl:-right-1 -top-1 transition" style="top: -5px;"></div>
+      </div>
+      <div class="ltr:ml-3 rtl:mr-3">{{_('developers_mode')}}</div>
+    </label>
+  </div>
+{% else %}
+<div _="on load hedyApp.toggleDevelopersMode('load', true)"></div>
 {% endif %}
 <script>
 // FIXME: Stop using inline JavaScript
@@ -326,12 +332,3 @@
      });
  });
 </script>
-<!-- If we enforce the developer's mode in customizations -> hide adventures, increase editor and output height -->
-{% if enforce_developers_mode %}
-<script>
-// FIXME: Stop using inline JavaScript
-$(document).ready(function () {
-    hedyApp.toggle_developers_mode(true);
-});
-</script>
-{% endif %}

tests/cypress/e2e/hedy_page/developers_mode_switch.cy.js

@@ -0,0 +1,35 @@
+import { loginForStudent, loginForTeacher, logout } from "../tools/login/login";
+import { goToHedyPage } from "../tools/navigation/nav";
+import { createClassAndAddStudents, navigateToClass } from '../tools/classes/class.js'
+
+let classname;
+let students;
+
+describe('Developers mode', () => {
+    it('Should toggle on and off', () => {
+      goToHedyPage();
+
+      cy.get('#toggle_circle').click(); // Developers mode is switched on
+      cy.get('#adventures').should('not.be.visible');
+
+      cy.get('#toggle_circle').click(); // Developers mode is switched off
+      cy.get('#adventures').should('be.visible');
+    })
+
+    it('Should be enforced developer mode', () => {
+      goToHedyPage();
+      loginForTeacher();
+      ({classname, students} = createClassAndAddStudents());
+      navigateToClass(classname);
+
+      cy.get("#customize-class-button").click();
+      cy.get("#developers_mode").click(); // Enforced developer mode is switched on
+      cy.getBySel("save_customizations").click();
+
+      logout();
+      loginForStudent(students[0]);
+      goToHedyPage();
+
+      cy.get('#adventures').should('not.be.visible');
+    })
+})