Did a crapton of work

hedyorg · Jan 4, 2025 · b86b36d · b86b36d
1 parent f095090
commit b86b36d
Show file tree

Hide file tree

Showing 77 changed files with 1,090 additions and 214 deletions.
diff --git a/messages.pot b/messages.pot
@@ -1,7 +1,7 @@
 # Translations template for PROJECT.
-# Copyright (C) 2024 ORGANIZATION
+# Copyright (C) 2025 ORGANIZATION
 # This file is distributed under the same license as the PROJECT project.
-# FIRST AUTHOR <EMAIL@ADDRESS>, 2024.
+# FIRST AUTHOR <EMAIL@ADDRESS>, 2025.
 #
 #, fuzzy
 msgid ""
@@ -20,6 +20,12 @@ msgstr ""
 msgid "Access Before Assign"
 msgstr ""
 
+msgid "Adventure"
+msgstr ""
+
+msgid "Answer"
+msgstr ""
+
 msgid "Cyclic Var Definition"
 msgstr ""
 
@@ -146,6 +152,9 @@ msgstr ""
 msgid "Wrong Number of Arguments"
 msgstr ""
 
+msgid "about_this_adventure"
+msgstr ""
+
 msgid "account_overview"
 msgstr ""
 
@@ -374,6 +383,9 @@ msgstr ""
 msgid "constant_variable_role"
 msgstr ""
 
+msgid "containing"
+msgstr ""
+
 msgid "content_invalid"
 msgstr ""
 

diff --git a/static/css/generated.full.css b/static/css/generated.full.css
@@ -347069,6 +347069,10 @@ div[class^="ace_incorrect_hedy_code"] {
 }
 
 @media (min-width: 1024px) {
+  .lg\:order-2 {
+    order: 2;
+  }
+
   .lg\:order-3 {
     order: 3;
   }
@@ -347103,6 +347107,10 @@ div[class^="ace_incorrect_hedy_code"] {
     display: flex;
   }
 
+  .lg\:grid {
+    display: grid;
+  }
+
   .lg\:hidden {
     display: none;
   }

diff --git a/static/js/app.ts b/static/js/app.ts
@@ -449,14 +449,20 @@ function convertPreviewToEditor(preview: HTMLPreElement, container: HTMLElement,
       clearOutput();
     });
   }
-  const levelStr = $(preview).attr('level');
-  const lang = $(preview).attr('lang');
-  if (levelStr && lang) {
-    initializeTranslation({
-      keywordLanguage: lang,
-      level: parseInt(levelStr, 10),
-    })
-    exampleEditor.setHighlighterForLevel(parseInt(levelStr, 10));
+
+  // Try to find the level for this code block. We first look at the 'level'
+  // attribute on the <pre> element itself.  This is to preserve legacy
+  // behavior, I'm not sure where this is still used. The modern way is to look
+  // for 'data-level' attributes on the element itself and any containing element.
+  // Same for 'lang' and 'data-lang'.
+  const levelStr = $(preview).attr('level') ?? $(preview).closest('[data-level]').attr('data-level');
+  const lang = $(preview).attr('lang') ?? $(preview).closest('[data-lang]').attr('data-lang');
+  if (levelStr) {
+    const level = parseInt(levelStr, 10);
+    if (lang) {
+      initializeTranslation({ keywordLanguage: lang, level })
+    }
+    exampleEditor.setHighlighterForLevel(level);
   }
 }
 
@@ -474,8 +480,8 @@ export function stopit() {
   document.onkeydown = null;
   $('#keybinding_modal').hide();
   $('#sleep_modal').hide();
-  
-  if (sleepRunning) {    
+
+  if (sleepRunning) {
     sleepRunning = false;
   }
 
@@ -586,7 +592,7 @@ export async function runit(level: number, lang: string, raw: boolean, disabled_
           error.showWarning(response.Warning);
         }
 
-        
+
         if (adventure && response.save_info) {
           adventure.save_info = response.save_info;
           adventure.editor_contents = code;
@@ -676,7 +682,7 @@ function updateProgramCount() {
   const countText = programCountDiv.text();
   const regex = /(\d+)/;
   const match = countText.match(regex);
-  
+
   if (match && match.length > 0) {
     const currentCount = parseInt(match[0]);
     const newCount = currentCount - 1;
@@ -688,7 +694,7 @@ function updateProgramCount() {
 function updateSelectOptions(selectName: string) {
   let optionsArray: string[] = [];
   const select = $(`select[name='${selectName}']`);
-  
+
   // grabs all the levels and names from the remaining adventures
   $(`[id="program_${selectName}"]`).each(function() {
       const text = $(this).text().trim();
@@ -725,8 +731,8 @@ export async function delete_program(id: string, prompt: string) {
     updateSelectOptions('adventure');
     // this function decreases the total programs saved
     updateProgramCount();
-    const response = await postJson('/programs/delete', { id });    
-    
+    const response = await postJson('/programs/delete', { id });
+
     // issue request on the Bar component.
     modal.notifySuccess(response.message);
   });
@@ -1002,7 +1008,7 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
         $('#stopit').hide();
         $('#runit').show();
         $('#runit').show();
-        if (Sk.execLimit != 1) {          
+        if (Sk.execLimit != 1) {
           return ClientMessages ['Program_too_long'];
         } else {
           return null;
@@ -1051,7 +1057,7 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
       }
 
       // Check if the program was correct but the output window is empty: Return a warning
-      if ((!hasClear) && $('#output').is(':empty') && $('#turtlecanvas').is(':empty') && !hasMusic) {        
+      if ((!hasClear) && $('#output').is(':empty') && $('#turtlecanvas').is(':empty') && !hasMusic) {
         error.showWarning(ClientMessages['Empty_output']);
         return;
       }
@@ -1186,7 +1192,7 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
   function builtinRead(x: string) {
     if (x in skulptExternalLibraries) {
       const tmpPath = skulptExternalLibraries[x]["path"];
-      
+
       let request = new XMLHttpRequest();
       request.open("GET", tmpPath, false);
       request.send();
@@ -1762,7 +1768,7 @@ function updatePageElements() {
     $('#commands_dropdown_container').show()
     $('#hand_in_button').show()
   }
-  if (currentTab === 'parsons'){    
+  if (currentTab === 'parsons'){
     $('#share_program_button').hide()
     $('#read_outloud_button_container').hide()
     $('#cheatsheet_dropdown_container').hide()

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -78133,7 +78133,9 @@ ${o3}` : i3;
         beforeSwitch: true,
         afterSwitch: true
       });
-      $("*[data-tab]").on("click", (e) => {
+      var _a3;
+      const root = $((_a3 = options.where) != null ? _a3 : document.body);
+      root.find("*[data-tab]").on("click", (e) => {
         const tab = $(e.target);
         const tabName = tab.data("tab");
         e.preventDefault();
@@ -78145,7 +78147,7 @@ ${o3}` : i3;
         initialTab = hashFragment;
       }
       if (!initialTab) {
-        initialTab = $(".tab:first").attr("data-tab");
+        initialTab = root.find(".tab:first").attr("data-tab");
       }
       if (initialTab) {
         this.switchToTab(initialTab);
@@ -120847,6 +120849,7 @@ def note_with_error(value, err):
     }
   }
   function convertPreviewToEditor(preview, container, dir) {
+    var _a3, _b;
     const codeNode = preview.querySelector("code");
     let code;
     if (codeNode) {
@@ -120875,14 +120878,14 @@ def note_with_error(value, err):
         clearOutput();
       });
     }
-    const levelStr = $(preview).attr("level");
-    const lang = $(preview).attr("lang");
-    if (levelStr && lang) {
-      initializeTranslation({
-        keywordLanguage: lang,
-        level: parseInt(levelStr, 10)
-      });
-      exampleEditor.setHighlighterForLevel(parseInt(levelStr, 10));
+    const levelStr = (_a3 = $(preview).attr("level")) != null ? _a3 : $(preview).closest("[data-level]").attr("data-level");
+    const lang = (_b = $(preview).attr("lang")) != null ? _b : $(preview).closest("[data-lang]").attr("data-lang");
+    if (levelStr) {
+      const level3 = parseInt(levelStr, 10);
+      if (lang) {
+        initializeTranslation({ keywordLanguage: lang, level: level3 });
+      }
+      exampleEditor.setHighlighterForLevel(level3);
     }
   }
   function getHighlighter(level3) {
@@ -122064,6 +122067,7 @@ def note_with_error(value, err):
   });
   htmx.onLoad((content2) => {
     initializeHighlightedCodeBlocks(content2, true);
+    new Tabs({ where: content2 });
     var sortables2 = content2.querySelectorAll(".sortable");
     for (let i = 0; i < sortables2.length; i++) {
       var sortable = sortables2[i];
@@ -127492,35 +127496,15 @@ def note_with_error(value, err):
   ZC({ Validation: Ch, Select: _r });
 
   // static/js/public-adventures.ts
-  function updateURL() {
-    const levelSelect = document.getElementById("level_select");
-    const languageSelect = document.getElementById("language_select");
-    const tagsSelect = document.getElementById("tag_select");
-    const searchInput = document.getElementById("search_adventure");
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const level3 = levelSelect.selected[0];
-    const language2 = languageSelect.selected[0] || "";
-    const tags2 = tagsSelect.selected.join(",");
-    urlParams.set("level", level3);
-    urlParams.set("lang", language2);
-    urlParams.set("tag", tags2);
-    if (searchInput) {
-      urlParams.set("search", searchInput.value);
-    }
-    window.history.pushState({}, "", `${window.location.pathname}?${urlParams.toString()}`);
-  }
   document.addEventListener("updateTSCode", (e) => {
-    setTimeout(() => {
-      const js = e.detail;
-      updateURL();
-      initialize({
-        lang: js.lang,
-        level: parseInt(js.level),
-        keyword_language: js.lang,
-        javascriptPageOptions: js
-      });
-    }, 1e3);
+    console.log("updateTSCode", e);
+    const js = e.detail;
+    initialize({
+      lang: js.lang,
+      level: parseInt(js.level),
+      keyword_language: js.lang,
+      javascriptPageOptions: js
+    });
   });
 
   // static/js/microbit.ts

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/static/js/htmx-integration.ts b/static/js/htmx-integration.ts
@@ -5,6 +5,7 @@ import { initializeHighlightedCodeBlocks } from './app';
 import { ClientMessages } from './client-messages';
 import { modal } from './modal';
 import Sortable from 'sortablejs';
+import { Tabs } from './tabs';
 
 declare const htmx: typeof import('./htmx');
 
@@ -34,10 +35,15 @@ htmx.defineExtension('disable-element', {
 /**
  * We have some custom JavaScript to run on new content that's loaded into the DOM.
  *
- * (Notably: turning <pre>s into Ace editors)
+ * What we do:
+ *
+ * - Turning <pre>s into Ace editors
+ * - Make tabs active
+ * - Initialize sortables
  */
 htmx.onLoad((content) => {
     initializeHighlightedCodeBlocks(content, true);
+    new Tabs({ where: content });
     var sortables =  content.querySelectorAll('.sortable');
     for (let i = 0; i < sortables.length; i++) {
         var sortable = sortables[i] as HTMLElement;

diff --git a/static/js/public-adventures.ts b/static/js/public-adventures.ts
@@ -1,35 +1,12 @@
-import { HedySelect } from "./custom-elements";
 import { initialize } from "./initialize";
 
-function updateURL() {
-    const levelSelect = document.getElementById("level_select") as HedySelect;
-    const languageSelect = document.getElementById("language_select") as HedySelect;
-    const tagsSelect = document.getElementById("tag_select") as HedySelect;
-    const searchInput = document.getElementById('search_adventure') as HTMLInputElement;
-
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const level = levelSelect.selected[0];
-    const language = languageSelect.selected[0] || "";
-    const tags = tagsSelect.selected.join(',');
-
-    urlParams.set('level', level)
-    urlParams.set('lang', language)
-    urlParams.set('tag', tags)
-    if (searchInput) {
-        urlParams.set('search', searchInput.value)
-    }
-    window.history.pushState({}, '', `${window.location.pathname}?${urlParams.toString()}`);
-}
-
-
 document.addEventListener("updateTSCode", (e: any) => {
-    setTimeout(() => {
-        const js = e.detail;
-        updateURL();
-        initialize({
-            lang: js.lang, level: parseInt(js.level), keyword_language: js.lang,
-            javascriptPageOptions: js
-        });
-    }, 1000);
+    console.log('updateTSCode', e);
+    const js = e.detail;
+    initialize({
+        lang: js.lang,
+        level: parseInt(js.level),
+        keyword_language: js.lang,
+        javascriptPageOptions: js
+    });
 })
diff --git a/static/js/tabs.ts b/static/js/tabs.ts
@@ -12,6 +12,11 @@ export interface TabEvents {
 
 export interface TabOptions {
   readonly initialTab?: string;
+
+  /**
+   * Only activate tabs inside this scope
+   */
+  readonly where?: Element;
 }
 
 /**
@@ -41,7 +46,9 @@ export class Tabs {
   });
 
   constructor(options: TabOptions={}) {
-    $('*[data-tab]').on('click', (e) => {
+    const root = $(options.where ?? document.body);
+
+    root.find('*[data-tab]').on('click', (e) => {
       const tab = $(e.target);
       const tabName = tab.data('tab') as string;
 
@@ -59,7 +66,7 @@ export class Tabs {
       initialTab = hashFragment;
     }
     if (!initialTab) {
-      initialTab = $('.tab:first').attr('data-tab');
+      initialTab = root.find('.tab:first').attr('data-tab');
     }
 
     if (initialTab) {