change selects of public adventures

static/js/appbundle.js

@@ -93455,13 +93455,13 @@ def note_with_error(value, err):
   var openSearchPanel = (view) => {
     let state = view.state.field(searchState, false);
     if (state && state.panel) {
-      let searchInput2 = getSearchInput(view);
-      if (searchInput2 && searchInput2 != view.root.activeElement) {
+      let searchInput = getSearchInput(view);
+      if (searchInput && searchInput != view.root.activeElement) {
         let query = defaultQuery(view.state, state.query.spec);
         if (query.valid)
           view.dispatch({ effects: setSearchQuery.of(query) });
-        searchInput2.focus();
-        searchInput2.select();
+        searchInput.focus();
+        searchInput.select();
       }
     } else {
       view.dispatch({ effects: [
@@ -104589,7 +104589,7 @@ def note_with_error(value, err):
         throw new Error("HedySelect should only have one span element!");
       }
       span[0].dataset["value"] = label;
-      span[0].innerHTML = label;
+      span[0].textContent = label;
       updateLabelText(this.querySelector(".dropdown"));
     }
     onOptionClick(_event) {
@@ -124739,24 +124739,18 @@ def note_with_error(value, err):
   ZC({ Validation: Ch, Select: _r });
 
   // static/js/public-adventures.ts
-  var levelSelect;
-  var languageSelect;
-  var tagsSelect;
-  var searchInput;
-  function initializeVariables() {
-    levelSelect = document.getElementById("level-select");
-    languageSelect = document.getElementById("language-select");
-    tagsSelect = document.getElementById("tag-select");
-    searchInput = document.getElementById("search_adventure");
-  }
   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.getAttribute("data-value") || "";
-    const lanugage = languageSelect.getAttribute("data-value") || "";
-    const tags2 = tagsSelect.getAttribute("data-value") || "";
+    const level3 = levelSelect.selected[0];
+    const language2 = languageSelect.selected[0];
+    const tags2 = tagsSelect.selected.join(",");
     urlParams.set("level", level3);
-    urlParams.set("lang", lanugage);
+    urlParams.set("lang", language2);
     urlParams.set("tag", tags2);
     if (searchInput) {
       urlParams.set("search", searchInput.value);
@@ -124765,7 +124759,6 @@ def note_with_error(value, err):
   }
   document.addEventListener("updateTSCode", (e) => {
     setTimeout(() => {
-      initializeVariables();
       const js = e.detail;
       updateURL();
       initialize({

static/js/custom-elements.ts

@@ -46,9 +46,9 @@ export class HedySelect extends HTMLElement {
         const span = this.getElementsByTagName('span')
         if (span.length !== 1) {
             throw new Error('HedySelect should only have one span element!');
-        }
+        }        
         span[0].dataset['value'] = label;
-        span[0].innerHTML = label;
+        span[0].textContent = label;
         updateLabelText(this.querySelector('.dropdown')!)
     }
 

static/js/public-adventures.ts

@@ -1,41 +1,31 @@
+import { HedySelect } from "./custom-elements";
 import { initialize } from "./initialize";
 
-let levelSelect: HTMLElement;
-let languageSelect: HTMLElement;
-let tagsSelect: HTMLElement;
-let searchInput: HTMLInputElement;
-
-function initializeVariables() {
-    // Get and initialize needed variables
-    levelSelect = document.getElementById("level-select") as HTMLElement;
-    languageSelect = document.getElementById("language-select") as HTMLElement;
-    tagsSelect = document.getElementById("tag-select") as HTMLElement;
-    searchInput = document.getElementById('search_adventure') as HTMLInputElement;
-}
-
 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.getAttribute("data-value") || "";
-    const lanugage = languageSelect.getAttribute("data-value") || "";
-    const tags = tagsSelect.getAttribute("data-value") || "";
+    const level = levelSelect.selected[0];
+    const language = languageSelect.selected[0];
+    const tags = tagsSelect.selected.join(',');
 
     urlParams.set('level', level)
-    urlParams.set('lang', lanugage)
+    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(() => {
-        initializeVariables();
         const js = e.detail;
-
         updateURL();
         initialize({
             lang: js.lang, level: parseInt(js.level), keyword_language: js.lang,

templates/public-adventures/body.html

@@ -19,36 +19,7 @@
         </div>
         <div class="flex w-full sm:basis-1/2 gap-2">
             <div id="levels" class="flex-1">
-                <div class="dropdown relative" data-type="single" id="level-select" data-value="{{selectedLevel}}">
-                  <button class="toggle-button font-semibold rounded inline-flex justify-between 
-                     appearance-none w-full border border-gray-200 text-gray-700 p-2 rounded"
-                    onclick="$('#level_dropdown').slideToggle('medium');">
-                    <span class="label" data-value="{{_('select_levels')}}">{{selectedLevel or _('select_levels')}}</span>
-                    <svg id="keyword-arrow_level" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                    </svg>
-                  </button>
-                  <div class="dropdown-menu dropdown-blue z-30 mt-2 w-full" id="level_dropdown"
-                    style="display: none; width: 100%;"
-                    _="on mutation of @style
-                        set arrow to #keyword-arrow_level
-                        if *display == 'none'
-                            remove .rotate-180 from arrow
-                        else if not arrow.classList.contains('rotate-180')
-                            add .rotate-180 to arrow
-                        end">
-                    {% for level in customizations["available_levels"] %}
-                        <div class="option {% if selectedLevel|string == level|string %}selected{% endif %}"
-                            hx-post="/public-adventures/filter?level={{level}}&lang={{selectedLang}}&tag={{selectedTag}}&search={{currentSearch}}"
-                            hx-target="#public-adventures"
-                            data-value="{{level}}"
-                        >{{ level }}</div>
-                    {% endfor %}
-                  </div>
-                </div>
-            </div>
-            <div id="levels_test" class="flex-1">
-              <hedy-select>
+              <hedy-select id="level-select" data-label="{{_('select_levels')}}">
                 <select>
                   {% for level in customizations["available_levels"] %}
                       <option {% if selectedLevel|string == level|string %}selected{% endif %}
@@ -61,70 +32,37 @@
               </hedy-select>
             </div>              
             <div id="languages" class="flex-1">
-                <div class="dropdown relative" data-type="single" id="language-select" data-value="{{selectedLang}}">
-                  <button class="toggle-button font-semibold rounded inline-flex justify-between 
-                     appearance-none w-full border border-gray-200 text-gray-700 p-2 rounded"
-                    onclick="$('#lang_dropdown').slideToggle('medium');">
-                    <span class="label" data-value="{{_('select_lang')}}">{{lang_to_sym(selectedLang) if selectedLang else _('select_lang')}}</span>
-                    <svg id="keyword-arrow_lang" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                    </svg>
-                  </button>
-                  <div class="dropdown-menu dropdown-blue z-30 mt-2 w-full" id="lang_dropdown"
-                    style="display: none; width: 100%;"
-                    _="on mutation of @style
-                        set arrow to #keyword-arrow_lang
-                        if *display == 'none'
-                            remove .rotate-180 from arrow
-                        else if not arrow.classList.contains('rotate-180')
-                            add .rotate-180 to arrow
-                        end">
-                    <div class="option default"
-                        hx-post="/public-adventures/filter?lang=reset&level={{selectedLevel}}&tag={{selectedTag}}&search={{currentSearch}}"
-                        hx-target="#public-adventures"
-                        value="">{{_('select_lang')}}</div>
-                    {% for lang in available_languages %}
-                        <div class="option {% if lang == selectedLang %}selected{% endif %}"
-                            hx-post="/public-adventures/filter?lang={{lang}}&level={{selectedLevel}}&tag={{selectedTag}}&search={{currentSearch}}"
-                            hx-target="#public-adventures"
-                            data-value="{{lang}}">{{lang_to_sym(lang)}}</div>
-                    {% endfor %}
-                  </div>
-                </div>
+              <hedy-select id="language-select" data-label="{{ lang_to_sym(selectedLang) if selectedLang else _('select_lang') }}">
+                <select>
+                  <option
+                          hx-post="/public-adventures/filter?lang=reset&level={{selectedLevel}}&tag={{selectedTag}}&search={{currentSearch}}"
+                          hx-target="#public-adventures"
+                          value="">{{_('select_lang')}}</option>
+                      {% for lang in available_languages %}
+                          <option {% if lang == selectedLang %}selected{% endif %}
+                              hx-post="/public-adventures/filter?lang={{lang}}&level={{selectedLevel}}&tag={{selectedTag}}&search={{currentSearch}}"
+                              hx-target="#public-adventures"
+                              data-value="{{lang}}">{{lang_to_sym(lang)}}</option>
+                      {% endfor %}
+                </select>
+              </hedy-select>
             </div>
 
             <div id="tags" class="flex-1">
-                <div class="dropdown relative" id="tag-select" data-value="{{selectedTag}}">
-                  <button class="toggle-button font-semibold rounded inline-flex justify-between 
-                     appearance-none w-full border border-gray-200 text-gray-700 p-2 rounded"
-                    onclick="$('#tags_dropdown').slideToggle('medium');">
-                    <span class="label" data-value="{{_('select_tag')}}">{{selectedTag or _('select_tag')}}</span>
-                    <svg id="keyword-arrow_tag" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                    </svg>
-                  </button>
-                  <div class="dropdown-menu dropdown-blue z-30 mt-2 w-full" id="tags_dropdown"
-                    style="display: none; width: 100%;"
-                    _="on mutation of @style
-                        set arrow to #keyword-arrow_tag
-                        if *display == 'none'
-                            remove .rotate-180 from arrow
-                        else if not arrow.classList.contains('rotate-180')
-                            add .rotate-180 to arrow
-                        end">
-                      {% for tag in available_tags %}
-                          {% set selected = tag in selectedTag %}
-                          <div class="option {% if selected %}selected{% endif %}"
-                            {% if selected %}
-                              hx-post="/public-adventures/filter?tag={{tag}}&reset={{selectedTag}}&level={{selectedLevel}}&lang={{selectedLang}}&search={{currentSearch}}"
-                            {% else %}
-                              hx-post="/public-adventures/filter?tag={{tag + ',' +  selectedTag}}&level={{selectedLevel}}&lang={{selectedLang}}&search={{currentSearch}}"
-                            {% endif %}
-                            hx-target="#public-adventures"
-                            data-value="{{tag}}">{{tag}}</div>
-                      {% endfor %}
-                  </div>
-                </div>
+              <hedy-select id="tag-select" data-label="{{ _('select_tag') }}">
+                <select multiple>
+                  {% for tag in available_tags %}
+                    {% set selected = tag in selectedTag %}
+                    <option {% if selected %}selected{% endif %} 
+                    {% if selected %}
+                        hx-post="/public-adventures/filter?tag={{tag}}&reset={{selectedTag}}&level={{selectedLevel}}&lang={{selectedLang}}&search={{currentSearch}}"
+                      {% else %}
+                        hx-post="/public-adventures/filter?tag={{tag + ',' +  selectedTag}}&level={{selectedLevel}}&lang={{selectedLang}}&search={{currentSearch}}"
+                      {% endif %} 
+                      hx-target="#public-adventures" value="{{tag}}">{{tag}}</option>
+                  {% endfor %}
+                </select>
+              </hedy-select>
             </div>
 
         </div>