🧹 Add HedySelect custom element

[jpelay]

One of the advantages of frameworks is that they allow you to define custom HTML elements and couple them with JavaScript behavior. Since a few years ago, vanilla JavaScript now supports the notion of custom elements as part of the wider technologies used to support web components. The basic notion here is that we can define a template that will hold the HTML code for our element, and then clone that template and attach it to our DOM, at the same time executing a function that will be called once the component is connected.

There's another way to show the component, by using the shadow DOM. This will further encapsulate the element, by hiding it's inner components from the general application, however this has the disadvantage of not being able to use tailwind in this component, since it can't access the CSS stylesheets from the application. Due to this limitation I decided to just attach the element to the old fashioned DOM.

The basic structure of the components is the following:

• A template defined in custom-element-templates.html
• A class defined in custom-elements.ts
• The class is registered in the customElements registry.

After doing this we can just use the component within our HTML like we'd do with any other component. With the example of the selects, we used to have a prepareDropdowns function that was called on page load. Now, that function is called for every select once they're connected using the connectedCallback property. The usage of the select in the HTML is like this:

<hedy-select id="select_id">
    <select multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</hedy-select>

That inner select will be used to generate the appropriate divs that will make the options, and will eventually be hidden from the document.

To get the selected items, we just need to query our desired hedy-select and use the selected property; this will return a string array with the selected options. Notice that if the select is single, you can just select the first element of the array.

(document.querySelector('#levels_dropdown') as HedySelect).selected

Going forward we can use this idea to replace other parts of our code base that can be made into single, reusable components. Do you guys have any ideas about this?

How to test

Everything should work normally

[jpelay]

@jpelay one point we also need to implement is when the select element is required; e.g,. in the level select in the customize-adventure page. Would that be possible?

I actually handle it on case by case basis, on that particular case in the function update_db_adventure I check if there are no selected levels and notify the user if that is the case.

[jpelay]

I addressed every comment!

All addressed now!

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).