Projects selector

app/javascript/application.js

@@ -4,3 +4,7 @@ import "controllers"
 
 import "trix"
 import "@rails/actiontext"
+
+import {ProjectsSelector} from 'elements/project_selector'
+
+customElements.define('projects-selector', ProjectsSelector)

app/javascript/elements/project_selector.js

@@ -0,0 +1,40 @@
+import {html, css, LitElement} from 'lit'
+
+export class ProjectsSelector extends LitElement {
+    static style=css`
+    slot {
+        display: none;
+    }
+    `
+
+    static properties = {
+        frame: {type: String},
+        _options: {type: Array, state: true}
+    }
+
+    render() {
+        return html`
+            <slot @slotchange=${this._handleUpdatedElements} style="display: none"></slot>
+            <select @change=${this._handleSelect}>
+                ${(this._options || []).map(option => this._renderOption(option))}
+            </select>
+        `
+    }
+
+    _handleUpdatedElements(e) {
+        const childNodes = e.target.assignedElements({flatten: true})
+        this._options = childNodes.map(e => {
+            return {name: e.innerText, href: e.getAttribute('href'), selected: !!e.getAttribute('selected')}
+        })
+    }
+
+    _renderOption(option) {
+        const {name, href, selected} = option
+        return html`<option value="${href}" ?selected="${selected}">${name}</option>`
+    }
+
+    _handleSelect(e) {
+        const href = e.target.value
+        Turbo.visit(href, {action: 'advance', frame: this.frame})
+    }
+}