Mercurial > code > home > repos > light9

annotate web/live/Light9Listbox.ts @ 2427:cc69faa87c27

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
tear up and rewrite ascoltami to emit player state into the graph. web ui works but displays nothing but songs
author drewp@bigasterisk.com
date Sat, 25 May 2024 15:44:11 -0700
parents 4556eebe5d73
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2083
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
1 import debug from "debug";
2084
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
2 import { css, html, LitElement, PropertyValues } from "lit";
2083
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
3 import { customElement, property } from "lit/decorators.js";
2238
91ae65157e5f logging and comments
drewp@bigasterisk.com
parents: 2235
diff changeset
4 const log = debug("listbox");
91ae65157e5f logging and comments
drewp@bigasterisk.com
parents: 2235
diff changeset
5 export type Choice = { uri: string; label: string };
91ae65157e5f logging and comments
drewp@bigasterisk.com
parents: 2235
diff changeset
6
2083
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
7 @customElement("light9-listbox")
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
8 export class Light9Listbox extends LitElement {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
9 static styles = [
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
10 css`
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
11 paper-listbox {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
12 --paper-listbox-background-color: none;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
13 --paper-listbox-color: white;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
14 --paper-listbox: {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
15 /* measure biggest item? use flex for columns? */
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
16 column-width: 9em;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
17 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
18 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
19 paper-item {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
20 --paper-item-min-height: 0;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
21 --paper-item: {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
22 display: block;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
23 border: 1px outset #0f440f;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
24 margin: 0 1px 5px 0;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
25 background: #0b1d0b;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
26 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
27 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
28 paper-item.iron-selected {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
29 background: #7b7b4a;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
30 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
31 `,
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
32 ];
2081
c57cf4049004 dice up the live/ elements and code into ts files (no conversion yet except auto coffee->ts)
drewp@bigasterisk.com
parents:
diff changeset
33
2083
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
34 render() {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
35 return html`
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
36 <paper-listbox id="list" selected="{{value}}" attr-for-selected="uri" on-focus-changed="selectOnFocus">
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
37 <paper-item on-focus="selectOnFocus">None</paper-item>
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
38 <template is="dom-repeat" items="{{choices}}">
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
39 <paper-item on-focus="selectOnFocus" uri="{{item.uri}}">{{item.label}}</paper-item>
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
40 </template>
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
41 </paper-listbox>
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
42 `;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
43 }
2084
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
44 @property() choices: Array<Choice> = [];
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
45 @property() value: String | null = null;
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
46
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
47 constructor() {
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
48 super();
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
49 }
2083
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
50 selectOnFocus(ev) {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
51 if (ev.target.uri === undefined) {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
52 // *don't* clear for this, or we can't cycle through all choices (including none) with up/down keys
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
53 //this.clear();
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
54 //return;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
55 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
56 this.value = ev.target.uri;
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
57 }
2084
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
58 updated(changedProperties: PropertyValues) {
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
59 if (changedProperties.has("value")) {
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
60 if (this.value === null) {
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
61 this.clear();
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
62 }
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
63 }
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
64 }
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
65 onValue(value: String | null) {
2083
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
66 if (value === null) {
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
67 this.clear();
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
68 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
69 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
70 clear() {
2084
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
71 this.querySelectorAll("paper-item").forEach(function (item) {
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
72 item.blur();
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
73 });
c4eab47d3c83 WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents: 2083
diff changeset
74 this.value = null;
2083
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
75 }
ad7ab7027907 clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents: 2081
diff changeset
76 }