Mercurial > code > home > repos > light9
annotate web/EditChoice.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/EditChoice.ts@2aeceb6f03aa |
| children |
| rev | line source |
|---|---|
| 2086 | 1 // see light9/editchoice.py for gtk version |
| 2 import debug from "debug"; | |
| 3 import { css, html, LitElement } from "lit"; | |
| 4 import { customElement, property } from "lit/decorators.js"; | |
| 5 import { NamedNode } from "n3"; | |
| 2232 | 6 import { $V, Vector } from "sylvester"; |
|
2104
6a9f9af9d3b8
EditChoice sends new choice in event
drewp@bigasterisk.com
parents:
2086
diff
changeset
|
7 export { ResourceDisplay } from "../web/ResourceDisplay"; |
| 2086 | 8 const log = debug("editchoice"); |
| 9 const RDFS = "http://www.w3.org/2000/01/rdf-schema#"; | |
| 10 | |
| 11 function setupDrop( | |
| 12 senseElem: HTMLElement, | |
| 13 highlightElem: HTMLElement, | |
| 14 coordinateOriginElem: HTMLElement | null, | |
| 15 onDrop: (uri: NamedNode, pos: Vector | null) => void | |
| 16 ) { | |
| 17 const highlight = () => highlightElem.classList.add("dragging"); | |
| 18 const unhighlight = () => highlightElem.classList.remove("dragging"); | |
| 19 | |
| 2331 | 20 senseElem.addEventListener("drag", (event: DragEvent) => { }); |
| 2086 | 21 |
| 2331 | 22 senseElem.addEventListener("dragstart", (event: DragEvent) => { }); |
| 2086 | 23 |
| 2331 | 24 senseElem.addEventListener("dragend", (event: DragEvent) => { }); |
| 2086 | 25 |
| 26 senseElem.addEventListener("dragover", (event: DragEvent) => { | |
| 27 event.preventDefault(); | |
| 28 event.dataTransfer!.dropEffect = "copy"; | |
| 29 highlight(); | |
| 30 }); | |
| 31 | |
| 32 senseElem.addEventListener("dragenter", (event: DragEvent) => { | |
| 33 highlight(); | |
| 34 }); | |
| 35 | |
| 36 senseElem.addEventListener("dragleave", (event: DragEvent) => { | |
| 37 unhighlight(); | |
| 38 }); | |
| 39 | |
| 40 senseElem.addEventListener("drop", (event: DragEvent) => { | |
| 41 event.preventDefault(); | |
| 42 const uri = new NamedNode(event.dataTransfer!.getData("text/uri-list")); | |
| 43 | |
| 44 let pos: Vector | null = null; | |
| 45 if (coordinateOriginElem != null) { | |
| 46 const root = coordinateOriginElem.getBoundingClientRect(); | |
| 47 pos = $V([event.pageX - root.left, event.pageY - root.top]); | |
| 48 } | |
|
1378
64239c6651de
start edit-choice polymer version
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
49 |
| 2086 | 50 try { |
| 51 onDrop(uri, pos); | |
| 52 } catch (e) { | |
| 53 log(e); | |
| 54 } | |
| 55 unhighlight(); | |
| 56 }); | |
| 57 } | |
| 58 | |
| 59 // Picks a URI based on the caller setting the property OR | |
| 60 // the user drag-and-dropping a text/uri-list resource (probably | |
| 61 // an <resource-display> or <a href> tag) | |
| 62 @customElement("edit-choice") | |
| 63 export class EditChoice extends LitElement { | |
|
2294
4031e511bca9
resource-display uri can no longer be a string
drewp@bigasterisk.com
parents:
2232
diff
changeset
|
64 @property() uri?: NamedNode |
| 2326 | 65 @property({ type: Boolean }) nounlink = false; |
|
2332
2aeceb6f03aa
edit-choice defaults to no 'rename' button
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
66 @property({ type: Boolean }) rename = false; |
| 2086 | 67 static styles = [ |
| 68 css` | |
| 69 :host { | |
| 70 display: inline-block; | |
| 71 background: #141448; | |
|
2332
2aeceb6f03aa
edit-choice defaults to no 'rename' button
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
72 /* min-width: 10em; */ |
| 2086 | 73 padding: 3px 8px; |
| 74 } | |
| 75 .dragging { | |
| 76 background: rgba(126, 52, 245, 0.0784313725490196); | |
| 77 box-shadow: 0 0 20px #ffff00; | |
| 78 } | |
| 79 a { | |
| 80 color: #8e8eff; | |
| 81 padding: 3px; | |
| 82 display: inline-block; | |
| 83 font-size: 145%; | |
| 84 } | |
| 85 `, | |
| 86 ]; | |
| 87 render() { | |
| 2326 | 88 const unlink = html` |
| 89 <button @click=${this.unlink}>Unlink</button> | |
| 90 ` | |
| 2086 | 91 return html` |
|
2332
2aeceb6f03aa
edit-choice defaults to no 'rename' button
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
92 <resource-display .uri=${this.uri} ?rename=${this.rename}></resource-display> |
| 2326 | 93 ${this.nounlink ? html`` : unlink} |
| 2086 | 94 `; |
| 95 } | |
| 96 | |
| 97 constructor() { | |
| 98 super(); | |
| 99 setupDrop(this, this, null, this._setUri.bind(this)); | |
| 100 } | |
| 101 | |
| 102 // updated(changedProperties: PropertyValues) { | |
| 103 // log('cp' ,changedProperties) | |
| 104 // if (changedProperties.has("box")) { | |
| 105 // log('setupdrop', this.box) | |
| 106 // setupDrop(this.box, this.box, null, this._setUri.bind(this)); | |
| 107 // } | |
| 108 // } | |
| 109 | |
|
2294
4031e511bca9
resource-display uri can no longer be a string
drewp@bigasterisk.com
parents:
2232
diff
changeset
|
110 _setUri(u?: NamedNode) { |
| 2086 | 111 this.uri = u; |
| 2331 | 112 this.dispatchEvent(new CustomEvent("edited", { detail: { newValue: u } })); |
| 2086 | 113 } |
| 114 | |
| 115 unlink() { | |
|
2294
4031e511bca9
resource-display uri can no longer be a string
drewp@bigasterisk.com
parents:
2232
diff
changeset
|
116 return this._setUri(undefined); |
| 2086 | 117 } |
| 118 } |