Mercurial > code > home > repos > light9
view light9/effect/listing/web/Light9EffectListing.ts @ 2101:4248f40ddcae
effects/ is now at effectListing/
author | drewp@bigasterisk.com |
---|---|
date | Tue, 31 May 2022 23:38:40 -0700 |
parents | light9/web/effects/effects.coffee@3b7ff54a41a9 |
children | 0c6c590664ad |
line wrap: on
line source
import debug from "debug"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators.js"; import { NamedNode } from "n3"; import { sortBy } from "underscore"; import { getTopGraph } from "../../../web/RdfdbSyncedGraph"; import { SyncedGraph } from "../../../web/SyncedGraph"; export {ResourceDisplay} from "../../../web/ResourceDisplay" debug.enable("*"); const log = debug("listing"); @customElement("light9-effect-listing") export class Light9EffectListing extends LitElement { render() { return html` <h1>Effects</h1> <rdfdb-synced-graph></rdfdb-synced-graph> ${this.effectClasses.map((e: NamedNode) => html`<light9-effect-class .uri=${e}></light9-effect-class>`)} `; } graph!: SyncedGraph; effectClasses: NamedNode[] = []; constructor() { super(); getTopGraph().then((g) => { this.graph = g; this.graph.runHandler(this.getClasses.bind(this), "getClasses"); }); } getClasses() { const U = this.graph.U(); this.effectClasses = this.graph.subjects(U("rdf:type"), U(":Effect")) as NamedNode[]; this.effectClasses = sortBy(this.effectClasses, (ec: any) => this.graph.stringValue(ec, U("rdfs:label"))); this.requestUpdate(); } } @customElement("light9-effect-class") export class Light9EffectClass extends LitElement { static styles = [ css` :host { display: block; padding: 5px; border: 1px solid green; background: #1e271e; margin-bottom: 3px; } a { color: #7992d0; background: #00000859; min-width: 4em; min-height: 2em; display: inline-block; text-align: center; vertical-align: middle; } resource-display { min-width: 12em; font-size: 180%; } `, ]; render() { if (!this.uri) { return html`loading...`; } return html` Effect <resource-display .uri=${this.uri} rename></resource-display> <a href="../live?effect=${this.uri.value}">Edit</a> <iron-ajax id="songEffects" url="/effectEval/songEffects" method="POST" content-type="application/x-www-form-urlencoded"></iron-ajax> <span style="float:right"> <button disabled @click=${this.onAdd}>Add to current song</button> <button disabled @mousedown=${this.onMomentaryPress} @mouseup=${this.onMomentaryRelease}>Add momentary</button> </span> `; } graph!: SyncedGraph; uri?: NamedNode; onAdd() { // this.$.songEffects.body = { drop: this.uri.value }; // this.$.songEffects.generateRequest(); } onMomentaryPress() { // this.$.songEffects.body = { drop: this.uri.value, event: "start" }; // this.lastPress = this.$.songEffects.generateRequest(); // return this.lastPress.completes.then((request: { response: { note: any } }) => { // return (this.lastMomentaryNote = request.response.note); // }); } onMomentaryRelease() { // if (!this.lastMomentaryNote) { // return; // } // this.$.songEffects.body = { drop: this.uri.value, note: this.lastMomentaryNote }; // this.lastMomentaryNote = null; // return this.$.songEffects.generateRequest(); } }