Mercurial > code > home > repos > light9
annotate web/effects/Light9EffectListing.ts @ 2376:4556eebe5d73
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
| author | drewp@bigasterisk.com |
|---|---|
| date | Sun, 12 May 2024 19:02:10 -0700 |
| parents | light9/web/effects/Light9EffectListing.ts@06bf6dae8e64 |
| children |
| rev | line source |
|---|---|
| 2101 | 1 import debug from "debug"; |
| 2 import { css, html, LitElement } from "lit"; | |
| 2244 | 3 import { customElement } from "lit/decorators.js"; |
| 2101 | 4 import { NamedNode } from "n3"; |
| 5 import { sortBy } from "underscore"; | |
|
2372
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2244
diff
changeset
|
6 import { getTopGraph } from "../RdfdbSyncedGraph"; |
|
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2244
diff
changeset
|
7 import { SyncedGraph } from "../SyncedGraph"; |
|
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2244
diff
changeset
|
8 export { ResourceDisplay } from "../ResourceDisplay"; |
| 2244 | 9 |
| 2101 | 10 debug.enable("*"); |
| 11 const log = debug("listing"); | |
| 12 | |
| 13 @customElement("light9-effect-listing") | |
| 14 export class Light9EffectListing extends LitElement { | |
| 15 render() { | |
| 16 return html` | |
| 17 <h1>Effects</h1> | |
| 18 <rdfdb-synced-graph></rdfdb-synced-graph> | |
|
1589
21a52ce16954
new effects2.html polymer port
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
19 |
| 2244 | 20 ${this.effects.map((e: NamedNode) => html`<light9-effect-class .uri=${e}></light9-effect-class>`)} |
| 2101 | 21 `; |
| 22 } | |
| 23 graph!: SyncedGraph; | |
| 2244 | 24 effects: NamedNode[] = []; |
|
1997
3b7ff54a41a9
effects/ listing sorts by label, not uri
drewp@bigasterisk.com
parents:
1805
diff
changeset
|
25 |
| 2101 | 26 constructor() { |
| 27 super(); | |
| 28 getTopGraph().then((g) => { | |
| 29 this.graph = g; | |
| 30 this.graph.runHandler(this.getClasses.bind(this), "getClasses"); | |
| 31 }); | |
| 32 } | |
| 33 | |
| 34 getClasses() { | |
| 35 const U = this.graph.U(); | |
| 2244 | 36 this.effects = this.graph.subjects(U("rdf:type"), U(":Effect")) as NamedNode[]; |
| 37 this.effects = sortBy(this.effects, (ec: NamedNode) => { | |
| 38 try { | |
| 39 return this.graph.stringValue(ec, U("rdfs:label")); | |
| 40 } catch (e) { | |
| 41 return ec.value; | |
| 42 } | |
| 43 }); | |
| 2101 | 44 this.requestUpdate(); |
| 45 } | |
| 46 } | |
|
1589
21a52ce16954
new effects2.html polymer port
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
47 |
| 2101 | 48 @customElement("light9-effect-class") |
| 49 export class Light9EffectClass extends LitElement { | |
| 50 static styles = [ | |
| 51 css` | |
| 52 :host { | |
| 53 display: block; | |
| 54 padding: 5px; | |
| 55 border: 1px solid green; | |
| 56 background: #1e271e; | |
| 57 margin-bottom: 3px; | |
| 58 } | |
| 59 a { | |
| 60 color: #7992d0; | |
| 61 background: #00000859; | |
| 62 min-width: 4em; | |
| 63 min-height: 2em; | |
| 64 display: inline-block; | |
| 65 text-align: center; | |
| 66 vertical-align: middle; | |
| 67 } | |
| 68 resource-display { | |
| 69 min-width: 12em; | |
| 70 font-size: 180%; | |
| 71 } | |
| 72 `, | |
| 73 ]; | |
| 74 render() { | |
| 75 if (!this.uri) { | |
| 76 return html`loading...`; | |
| 77 } | |
| 78 return html` | |
| 79 Effect | |
| 80 <resource-display .uri=${this.uri} rename></resource-display> | |
| 81 <a href="../live?effect=${this.uri.value}">Edit</a> | |
| 82 <iron-ajax id="songEffects" url="/effectEval/songEffects" method="POST" content-type="application/x-www-form-urlencoded"></iron-ajax> | |
| 83 <span style="float:right"> | |
| 84 <button disabled @click=${this.onAdd}>Add to current song</button> | |
| 85 <button disabled @mousedown=${this.onMomentaryPress} @mouseup=${this.onMomentaryRelease}>Add momentary</button> | |
| 86 </span> | |
| 87 `; | |
| 88 } | |
| 89 graph!: SyncedGraph; | |
| 90 uri?: NamedNode; | |
| 91 | |
| 92 onAdd() { | |
| 93 // this.$.songEffects.body = { drop: this.uri.value }; | |
| 94 // this.$.songEffects.generateRequest(); | |
| 95 } | |
| 96 | |
| 97 onMomentaryPress() { | |
| 98 // this.$.songEffects.body = { drop: this.uri.value, event: "start" }; | |
| 99 // this.lastPress = this.$.songEffects.generateRequest(); | |
| 100 // return this.lastPress.completes.then((request: { response: { note: any } }) => { | |
| 101 // return (this.lastMomentaryNote = request.response.note); | |
| 102 // }); | |
| 103 } | |
| 104 | |
| 105 onMomentaryRelease() { | |
| 106 // if (!this.lastMomentaryNote) { | |
| 107 // return; | |
| 108 // } | |
| 109 // this.$.songEffects.body = { drop: this.uri.value, note: this.lastMomentaryNote }; | |
| 110 // this.lastMomentaryNote = null; | |
| 111 // return this.$.songEffects.generateRequest(); | |
| 112 } | |
| 113 } |