cdn-experiments/ccp/js/outputwidgeteditorcontrolle...

123 lines
4.2 KiB
JavaScript

class CCPOutputWidgetEditorController extends HTMLElement {
#output = null
#index = null
#type = null
#delete_icon = `
<svg style="width:24px;height:24px;pointer-events: none;" viewBox="0 0 24 24">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
</svg>
`
constructor(){
super()
}
connectedCallback(controller){
}
get index(){
return this.#index
}
render(output, i){
this.#index = i
this.#output = output
this.#type = output.schema.enum ? "enum" : "string"
this.innerHTML = `
<details>
<summary class="mb-3">
<input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${this.#output.id}" title="Id of output"/>
<button data-index="${this.#index}" name="delete-output" title="Delete" class="btn btn-danger ccp-toolbar-button">
${this.#delete_icon}
</button>
</summary>
<div style="padding-left: 1rem;border-left: 1px solid gray;">
<div class="row mb-3">
<div class="col">
<div class="form-field" title="Title">
<input name="title" class="form-control" placeholder="title" value="${this.#output.title}" required="required"/>
</div>
</div>
</div>
<div class="mb-3">
<div class="form-field" title="Description">
<input name="description" class="form-control" placeholder="description" value="${this.#output.description}" required="required"/>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="form-field" title="Mininum cardinality">
<input value="${this.#output.minOccurs}" type="number" min="0" step="1" name="minOccurs" class="form-control" placeholder="minOccurs"/>
</div>
</div>
<div class="col">
<div class="form-field" title="Maximum cardinality">
<input value="${this.#output.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" class="form-control" placeholder="maxOccurs"/>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-3">
<div class="form-field" title="Type">
<select name="type" class="form-control" placeholder="type">
<option value="string">String</option>
</select>
</div>
</div>
<div class="col-3">
<div class="form-field" title="Mime type">
<input value="${this.#output.schema.contentMediaType}" name="contentMediaType" class="form-control" placeholder="mime"/>
</div>
</div>
${this.renderMetadata()}
</div>
</div>
</details>
`
this.addEventListener("input", ev=>{
const val = ev.target.value
const ename = ev.target.getAttribute("name")
if(ename === "id"){
this.#output.id = val
}
else if(ename === "title"){
this.#output.title = val
}
else if(ename === "description"){
this.#output.description = val
}
else if(ename === "minOccurs"){
this.#output.minOccurs = val
}
else if(ename === "maxOccurs"){
this.#output.maxOccurs = val
}
else if(ename === "contentMediaType"){
this.#output.schema.contentMediaType = val
}
else if(ename === "href"){
this.#output.metadata[0].href = val
this.#output.metadata[0].title = val
}
})
}
renderMetadata(output){
if(this.#output.metadata && this.#output.metadata.length > 0){
return `
<div class="col">
<div class="form-field" title="File path">
<input value="${this.#output.metadata[0].href}" name="href" class="form-control" placeholder="mime"/>
</div>
</div>
`
}else return ""
}
}
window.customElements.define('d4s-ccp-output-editor', CCPOutputWidgetEditorController);