🧹 Add HedySelect custom element

build-tools/heroku/generate-client-messages.py

@@ -26,6 +26,8 @@
     'adventures_restored',
     'multiple_keywords_warning',
     'selected',
+    'select_all',
+    'one_level_error',
     'adventures_tried',
     'graph_title',
     'errors',

content/client-messages.txt

@@ -8,9 +8,11 @@ gettext('disabled')
 gettext('adventures_restored')
 gettext('multiple_keywords_warning')
 gettext('selected')
+gettext('select_all')
+gettext('one_level_error')
 gettext('adventures_tried')
 gettext('graph_title')
 gettext('errors')
 gettext('adventures_completed')
 gettext('number_of_errors')
-gettext('successful_runs')
+gettext('successful_runs')

messages.pot

@@ -284,6 +284,9 @@ msgstr ""
 msgid "ask_needs_var"
 msgstr ""
 
+msgid "available_in"
+msgstr ""
+
 msgid "become_a_sponsor"
 msgstr ""
 
@@ -632,9 +635,6 @@ msgstr ""
 msgid "expiration_date"
 msgstr ""
 
-msgid "explore_explanation"
-msgstr ""
-
 msgid "explore_programs"
 msgstr ""
 
@@ -1157,6 +1157,9 @@ msgstr ""
 msgid "ok"
 msgstr ""
 
+msgid "one_level_error"
+msgstr ""
+
 msgid "only_you_can_see"
 msgstr ""
 

static/js/adventure.ts

@@ -8,6 +8,7 @@ import TRADUCTION_IMPORT from '../../highlighting/highlighting-trad.json';
 import { convert } from "./utils";
 import { ClientMessages } from "./client-messages";
 import { autoSave } from "./autosave";
+import { HedySelect } from "./custom-elements";
 
 declare let window: CustomWindow;
 
@@ -23,7 +24,7 @@ export async function initializeCustomAdventurePage(_options: InitializeCustomiz
     const editorContainer = document.querySelector('#adventure-editor') as HTMLElement;
     const editorSolutionExampleContainer = document.querySelector('#adventure-solution-editor') as HTMLElement;
     // Initialize the editor with the default language
-    let lang =  document.querySelector('#languages_dropdown> .option.selected')!.getAttribute('data-value') as string
+    let lang = (document.querySelector('#languages_dropdown') as HedySelect).selected[0]
     const TRADUCTIONS = convert(TRADUCTION_IMPORT) as Map<string, Map<string,string>>;    
     if (!TRADUCTIONS.has(lang)) { lang = 'en'; }
     let TRADUCTION = TRADUCTIONS.get(lang) as Map<string,string>;
@@ -38,22 +39,23 @@ export async function initializeCustomAdventurePage(_options: InitializeCustomiz
     }
 
     $('#language').on('change', () => {
-        let lang = document.querySelector('#languages_dropdown> .option.selected')!.getAttribute('data-value') as string
+        let lang = (document.querySelector('#languages_dropdown') as HedySelect).selected[0]
         if (!TRADUCTIONS.has(lang)) { lang = 'en'; }
         TRADUCTION = TRADUCTIONS.get(lang) as Map<string,string>;
     })
+
     // Autosave customize adventure page
     autoSave("customize_adventure")
 
-    showWarningIfMultipleLevels()    
-    document.querySelectorAll('#levels_dropdown > .option').forEach((el) => {
+    showWarningIfMultipleLevels()
+    document.querySelectorAll('#levels_dropdown div div .option').forEach((el) => {
         el.addEventListener('click', () => {
-            setTimeout(showWarningIfMultipleLevels, 100)            
+            setTimeout(showWarningIfMultipleLevels, 100)
         })
     })
 }
 function showWarningIfMultipleLevels() {
-    const numberOfLevels = document.querySelectorAll('#levels_dropdown > .option.selected').length;
+    const numberOfLevels = (document.querySelector('#levels_dropdown') as HedySelect).selected.length;
     const numberOfSnippets = document.querySelectorAll('pre[data-language="Hedy"]').length
     if(numberOfLevels > 1 && numberOfSnippets > 0) {
         $('#warningbox').show()
@@ -208,7 +210,7 @@ export function addCurlyBracesToCode(code: string, level: number, language: stri
 }
 
 export function addCurlyBracesToKeyword(name: string) {
-    let lang =  document.querySelector('#languages_dropdown> .option.selected')!.getAttribute('data-value') as string
+    let lang =  (document.querySelector('#languages_dropdown') as HedySelect).selected[0]
     const TRADUCTIONS = convert(TRADUCTION_IMPORT) as Map<string, Map<string,string>>;    
     if (!TRADUCTIONS.has(lang)) { lang = 'en'; }
     let TRADUCTION = TRADUCTIONS.get(lang) as Map<string,string>;

static/js/app.ts

@@ -25,7 +25,6 @@ import { stopDebug } from "./debugging";
 import { HedyCodeMirrorEditorCreator } from './cm-editor';
 import { initializeTranslation } from './lezer-parsers/tokens';
 import { initializeActivity } from './user-activity';
-
 export let theGlobalDebugger: any;
 export let theGlobalEditor: HedyEditor;
 export let theModalEditor: HedyEditor;
@@ -118,6 +117,7 @@ const slides_template = `
 </html>
 `;
 
+
 export interface InitializeAppOptions {
   readonly level: number;
   readonly keywordLanguage: string;
@@ -2023,4 +2023,4 @@ export function goToLevel(level: any) {
   }
   window.location.pathname = newPath
   window.location.hash = hash
-}
+}