Readd developers mode

hedyorg · Jan 7, 2025 · 6a3f7e9 · 6a3f7e9
1 parent d7042ed
commit 6a3f7e9
Show file tree

Hide file tree

Showing 44 changed files with 308 additions and 61 deletions.
diff --git a/static/js/app.ts b/static/js/app.ts
@@ -230,7 +230,8 @@ export function initializeCodePage(options: InitializeCodePageOptions) {
 
   const validAnchor = [...Object.keys(theAdventures), 'parsons', 'quiz'].includes(anchor) ? anchor : undefined;
   let tabs: any;
-  if (options.page == 'tryit') {
+  const isTryItPage = options.page == 'tryit';
+  if (isTryItPage) {
     tabs = new IndexTabs({
       // If we're opening an adventure from the beginning (either through a link to /hedy/adventures or through a saved program for an adventure), we click on the relevant tab.
       // We click on `level` to load a program associated with level, if any.
@@ -264,7 +265,7 @@ export function initializeCodePage(options: InitializeCodePageOptions) {
         adventure.save_info = 'local-storage';
       }
     }
-    reconfigurePageBasedOnTab(options.enforce_developers_mode);
+    reconfigurePageBasedOnTab(isTryItPage, options.enforce_developers_mode);
     checkNow();
     theLocalSaveWarning.switchTab();
   });
@@ -1426,6 +1427,7 @@ function createModal(level:number ){
   modal.repair(editor, 0, title);
 }
 
+// Remove this function when enabling the new design
 export function setDevelopersMode(event='click', enforceDevMode: boolean) {
   let enable: boolean = false;
   switch (event) {
@@ -1444,6 +1446,7 @@ export function setDevelopersMode(event='click', enforceDevMode: boolean) {
   toggleDevelopersMode(!!enforceDevMode)
 }
 
+// Remove this function when enabling the new design
 function toggleDevelopersMode(enforceDevMode: boolean) {
   const enable = window.localStorage.getItem('developer_mode') === 'true' || enforceDevMode;
   // DevMode hides the tabs and makes resizable elements track the appropriate size.
@@ -1454,8 +1457,9 @@ function toggleDevelopersMode(enforceDevMode: boolean) {
   $('#adventures').toggle(!enable || currentTab === 'quiz' || currentTab === 'parsons');
   // Parsons dont need a fixed height
   if (currentTab === 'parsons') return
-  $('[data-devmodeheight]').each((_, el) => {
-    const heights = $(el).data('devmodeheight').split(',') as string[];
+
+  $('[data-editorheight]').each((_, el) => {
+    const heights = $(el).data('editorheight').split(',') as string[];
     $(el).css('height', heights[enable ? 1 : 0]);
   });
 }
@@ -1693,13 +1697,15 @@ function resetWindow() {
  * Update page element visibilities/states based on the state of the current tab
  */
 function updatePageElements() {
-  const isCodeTab = !(currentTab === 'quiz' || currentTab === 'parsons');
-
-  // .toggle(bool) sets visibility based on the boolean
+  const isParsonsTab = currentTab === 'parsons'
+  const isCodeTab = !(currentTab === 'quiz' || isParsonsTab);
+ // .toggle(bool) sets visibility based on the boolean
 
   // Explanation area is visible for non-code tabs, or when we are NOT in developer's mode
   $('#adventures_tab').toggle(!(isCodeTab && $('#developers_toggle').is(":checked")));
   $('#developers_toggle_container').toggle(isCodeTab);
+  // this is for the new design, it needs to be removed once we ship it
+  $('#adventures').toggle(true);
   $('#level_header input').toggle(isCodeTab);
   $('#parsons_code_container').toggle(currentTab === 'parsons');
   $('#editor_area').toggle(isCodeTab || currentTab === 'parsons');
@@ -1763,20 +1769,37 @@ function updatePageElements() {
   }
 }
 
+/**
+ * Load parsons and update the editors height accordingly
+ */
+function configureParson() {
+  loadParsonsExercise(theLevel, 1);
+  // parsons could have 5 lines to arrange which requires more space, so remove the fixed height from the editor
+  document.getElementById('code_editor')!.style.height = '100%'
+  document.getElementById('code_output')!.style.height = '100%'
+}
+
 /**
  * After switching tabs, show/hide elements
  */
-function reconfigurePageBasedOnTab(enforceDevMode?: boolean) {
+function reconfigurePageBasedOnTab(isNewDesign?: boolean, enforceDevMode?: boolean) {
   resetWindow();
-
   updatePageElements();
-  toggleDevelopersMode(!!enforceDevMode);
+
   if (currentTab === 'parsons') {
-    loadParsonsExercise(theLevel, 1);
-    // remove the fixed height from the editor
-    document.getElementById('code_editor')!.style.height = '100%'
-    document.getElementById('code_output')!.style.height = '100%'
-    return;
+    configureParson();
+    show_editor();
+    $('#fold_in_toggle_container').hide();
+  } else {
+    if (isNewDesign) {
+      $('[data-editorheight]').each((_, el) => {
+        const height = $(el).data('editorheight');
+        $(el).css('height', height);
+      });
+    } else {
+      toggleDevelopersMode(!!enforceDevMode);
+    }
+    $('#fold_in_toggle_container').show();
   }
 
   const adventure = theAdventures[currentTab];

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -120762,7 +120762,8 @@ def note_with_error(value, err):
     const anchor = window.location.hash.substring(1);
     const validAnchor = [...Object.keys(theAdventures), "parsons", "quiz"].includes(anchor) ? anchor : void 0;
     let tabs;
-    if (options.page == "tryit") {
+    const isTryItPage = options.page == "tryit";
+    if (isTryItPage) {
       tabs = new IndexTabs({
         initialTab: validAnchor != null ? validAnchor : options.initial_tab,
         level: options.level
@@ -120786,7 +120787,7 @@ def note_with_error(value, err):
           adventure.save_info = "local-storage";
         }
       }
-      reconfigurePageBasedOnTab(options.enforce_developers_mode);
+      reconfigurePageBasedOnTab(isTryItPage, options.enforce_developers_mode);
       checkNow();
       theLocalSaveWarning.switchTab();
     });
@@ -121693,8 +121694,8 @@ def note_with_error(value, err):
     $("#adventures").toggle(!enable || currentTab === "quiz" || currentTab === "parsons");
     if (currentTab === "parsons")
       return;
-    $("[data-devmodeheight]").each((_, el3) => {
-      const heights = $(el3).data("devmodeheight").split(",");
+    $("[data-editorheight]").each((_, el3) => {
+      const heights = $(el3).data("editorheight").split(",");
       $(el3).css("height", heights[enable ? 1 : 0]);
     });
   }
@@ -121887,9 +121888,11 @@ def note_with_error(value, err):
   }
   function updatePageElements() {
     var _a3;
-    const isCodeTab = !(currentTab === "quiz" || currentTab === "parsons");
+    const isParsonsTab = currentTab === "parsons";
+    const isCodeTab = !(currentTab === "quiz" || isParsonsTab);
     $("#adventures_tab").toggle(!(isCodeTab && $("#developers_toggle").is(":checked")));
     $("#developers_toggle_container").toggle(isCodeTab);
+    $("#adventures").toggle(true);
     $("#level_header input").toggle(isCodeTab);
     $("#parsons_code_container").toggle(currentTab === "parsons");
     $("#editor_area").toggle(isCodeTab || currentTab === "parsons");
@@ -121935,15 +121938,29 @@ def note_with_error(value, err):
       $("#hand_in_button").hide();
     }
   }
-  function reconfigurePageBasedOnTab(enforceDevMode) {
+  function configureParson() {
+    loadParsonsExercise(theLevel, 1);
+    document.getElementById("code_editor").style.height = "100%";
+    document.getElementById("code_output").style.height = "100%";
+  }
+  function reconfigurePageBasedOnTab(isNewDesign, enforceDevMode) {
     resetWindow();
     updatePageElements();
     toggleDevelopersMode(!!enforceDevMode);
     if (currentTab === "parsons") {
-      loadParsonsExercise(theLevel, 1);
-      document.getElementById("code_editor").style.height = "100%";
-      document.getElementById("code_output").style.height = "100%";
-      return;
+      configureParson();
+      show_editor();
+      $("#fold_in_toggle_container").hide();
+    } else {
+      if (isNewDesign) {
+        $("[data-editorheight]").each((_, el3) => {
+          const height = $(el3).data("editorheight");
+          $(el3).css("height", height);
+        });
+      } else {
+        toggleDevelopersMode(!!enforceDevMode);
+      }
+      $("#fold_in_toggle_container").show();
     }
     const adventure = theAdventures[currentTab];
     if (adventure) {

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/templates/customize-class.html b/templates/customize-class.html
@@ -67,13 +67,16 @@ <h3 class="px-4"><u>{{_('other_settings')}}</u></h3>
                             </tr>
                         </thead>
                         <tbody>
+                            {% if not is_try_it %}
                             <tr>
                                 <td class="text-left border-t border-r border-gray-400">{{_('mandatory_mode')}}</td>
                                 <td class="border-t border-gray-400">
-                                    <input class="other_settings_checkbox" id="developers_mode" data-cy="developers_mode" type="checkbox" {%
-                                        if "developers_mode" in customizations['other_settings'] %}checked{% endif %}>
+                                    <input class="other_settings_checkbox" id="developers_mode" data-cy="developers_mode" type="checkbox"
+                                        {% if "developers_mode" in customizations['other_settings'] %}checked{%
+                                  endif %}>
                                 </td>
                             </tr>
+                            {% endif %}
                             <tr>
                                 <td class="text-left border-t border-r border-gray-400">{{_('all_class_highscores')}}
                                 </td>

diff --git a/templates/hedy-page/editor-and-output.html b/templates/hedy-page/editor-and-output.html
@@ -1,13 +1,9 @@
-{% if enforce_developers_mode %}
-  {% set editor_height='30rem' %}
-{% else %}
-  {% set editor_height='22rem' %}
-{% endif %}
+{% set editor_height='22rem' %}
 <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
 <div id="editor_area" class="relative grid grid-cols-1 lg:grid-cols-2 lg:grid-flow-row-dense gap-4">
 
   <!-- Row 1: editor, output pane -->
-  <div data-devmodeheight="{{editor_height}},36rem" class="flex flex-col order-1 relative" id="code_editor" style="height: {{editor_height}}">
+  <div data-editorheight="{{editor_height}}" class="flex flex-col order-1 relative" id="code_editor" style="height: {{editor_height}}">
       <!--The div below is used to send translation of search to Ace through the frontend-->
       <div id="search_placeholder" style="display: none":>{{_('search')}}</div>
       <!-- Status warning -->
@@ -77,7 +73,7 @@
         </div>
       </div>
   </div>
-  <div data-devmodeheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-hidden" id="code_output" style="height: {{editor_height}}">
+  <div data-editorheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-hidden" id="code_output" style="height: {{editor_height}}">
     <div id="output" data-cy="output" tabindex=0 class="flex-1 rounded p-2 px-3 color-white w-full text-lg overflow-auto" style="background: #272822; min-height: 3rem;"></div>
     <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
     <div class="overflow-auto flex-0 bottom-0 w-full z-20 bg-blue-100">
@@ -171,29 +167,6 @@
           </button>
         </div>
       </div>
-      <div class="flex-1"></div>
-      <div class="flex flex-row gap-2 flex-initial justify-between">
-        {% if raw or public_adventures_page %}
-          <div _="on load hedyApp.setDevelopersMode('load', false)"></div>
-        {% elif not enforce_developers_mode and not editor_readonly %}
-          <div class="blue-btn-new" 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.setDevelopersMode('load', false)
-                    on click hedyApp.setDevelopersMode('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.setDevelopersMode('load', true)"></div>
-        {% endif %}
-      </div>
     </div>
     {% if not raw %}
     <div id="not_logged_in_warning" data-cy="not_logged_in_warning" class="hidden bg-yellow-200 text-sm px-4 py-1 border-2 border-yellow-400 mb-4">

diff --git a/templates/incl/editor-and-output.html b/templates/incl/editor-and-output.html
@@ -8,7 +8,7 @@
      </div>
     </div>
     <!-- Row 1: editor, output pane -->
-    <div data-devmodeheight="{{editor_height}},36rem" class="flex flex-col order-1 relative" id="code_editor" style="height: {{editor_height}}">
+    <div data-editorheight="{{editor_height}},36rem" class="flex flex-col order-1 relative" id="code_editor" style="height: {{editor_height}}">
         <div id="fold_in_toggle_container" class="hidden md:flex absolute z-10 top-16 ltr:-right-1 rtl:-left-1 cursor-pointer" onclick="hedyApp.hide_editor();">
          <div id="text_field" class="bg-green-500 text-white py-3 rounded-lg text-sm">
              <span>←</span>
@@ -83,7 +83,7 @@
           </div>
         </div>
     </div>
-    <div data-devmodeheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-auto" id="code_output" style="height: {{editor_height}}">
+    <div data-editorheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-auto" id="code_output" style="height: {{editor_height}}">
       <div id="output" data-cy="output" tabindex=0 class="flex-1 rounded p-2 px-3 pb-10 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
       <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
       <div class="overflow-auto flex-0 bottom-0 w-full z-20 bg-blue-100">

diff --git a/translations/bg/LC_MESSAGES/messages.po b/translations/bg/LC_MESSAGES/messages.po
@@ -673,6 +673,9 @@ msgstr ""
 msgid "destroy_profile"
 msgstr "Изтриване на акаунта"
 
+msgid "developers_mode"
+msgstr ""
+
 #, fuzzy
 msgid "developers_mode"
 msgstr ""
@@ -1242,6 +1245,9 @@ msgstr ""
 msgid "male"
 msgstr "Мъжки"
 
+msgid "mandatory_mode"
+msgstr ""
+
 #, fuzzy
 msgid "mandatory_mode"
 msgstr ""

diff --git a/translations/bn/LC_MESSAGES/messages.po b/translations/bn/LC_MESSAGES/messages.po
@@ -692,6 +692,9 @@ msgstr ""
 msgid "destroy_profile"
 msgstr ""
 
+msgid "developers_mode"
+msgstr ""
+
 #, fuzzy
 msgid "developers_mode"
 msgstr ""
@@ -1294,6 +1297,9 @@ msgstr ""
 msgid "male"
 msgstr ""
 
+msgid "mandatory_mode"
+msgstr ""
+
 #, fuzzy
 msgid "mandatory_mode"
 msgstr ""

diff --git a/translations/cs/LC_MESSAGES/messages.po b/translations/cs/LC_MESSAGES/messages.po
@@ -677,6 +677,9 @@ msgstr ""
 msgid "destroy_profile"
 msgstr "Trvale odstranit účet"
 
+msgid "developers_mode"
+msgstr ""
+
 #, fuzzy
 msgid "developers_mode"
 msgstr ""
@@ -1255,6 +1258,9 @@ msgstr ""
 msgid "male"
 msgstr "Muž"
 
+msgid "mandatory_mode"
+msgstr ""
+
 #, fuzzy
 msgid "mandatory_mode"
 msgstr ""

diff --git a/translations/cy/LC_MESSAGES/messages.po b/translations/cy/LC_MESSAGES/messages.po
@@ -692,6 +692,9 @@ msgstr ""
 msgid "destroy_profile"
 msgstr ""
 
+msgid "developers_mode"
+msgstr ""
+
 #, fuzzy
 msgid "developers_mode"
 msgstr ""
@@ -1283,6 +1286,9 @@ msgstr ""
 msgid "male"
 msgstr ""
 
+msgid "mandatory_mode"
+msgstr ""
+
 #, fuzzy
 msgid "mandatory_mode"
 msgstr ""

diff --git a/translations/da/LC_MESSAGES/messages.po b/translations/da/LC_MESSAGES/messages.po
@@ -680,6 +680,9 @@ msgstr ""
 msgid "destroy_profile"
 msgstr ""
 
+msgid "developers_mode"
+msgstr ""
+
 #, fuzzy
 msgid "developers_mode"
 msgstr ""
@@ -1271,6 +1274,9 @@ msgstr ""
 msgid "male"
 msgstr ""
 
+msgid "mandatory_mode"
+msgstr ""
+
 #, fuzzy
 msgid "mandatory_mode"
 msgstr ""