web-components/ccp/js/inputwidgetcontroller.js

203 lines
5.1 KiB
JavaScript
Raw Normal View History

2022-03-25 15:39:39 +01:00
class CCPInputWidgetController extends HTMLElement {
#input = null;
#renderer = null;
#rootdoc = null;
constructor(){
super()
this.#input = JSON.parse(this.getAttribute("input"))
this.#renderer = Renderer.instance(this.#input)
}
connectedCallback(){
console.log("Widget connected")
this.innerHTML = this.render()
this.#renderer.connectedCallback(this)
}
render(){
return this.#renderer.render()
}
}
window.customElements.define('d4s-ccp-input', CCPInputWidgetController);
class Renderer{
#input = null;
constructor(input){
this.#input = input
}
connectedCallback(controller){
}
get schema(){
return this.#input.schema
}
get name(){
return this.#input.id
}
get title(){
return this.#input.title
}
get description(){
return this.#input.description
}
get required(){
return this.#input.minOccurs > 0
}
static instance(input){
if(this.isEnum(input)){
return new EnumInputRenderer(input)
}
if(this.isCode(input)){
return new CodeInputRenderer(input)
}
if(this.isDateTime(input)){
return new DateTimeInputRenderer(input)
}
return new SimpleInputRenderer(input)
}
static isEnum(input){
return (input.schema.type === "string") && ("enum" in input.schema)
}
static isCode(input){
return (input.schema.type === "string") && ("format" in input.schema) && (input.schema.format.toLowerCase() === "code")
}
static isDateTime(input){
return (input.schema.type === "string") && ("format" in input.schema) &&
(["date", "time", "datetime"].indexOf(input.schema.format.toLowerCase()) !== -1)
}
}
class SimpleInputRenderer extends Renderer{
#html = null;
constructor(input){
super(input)
}
render(){
let required = this.required ? 'required="required"' : ""
2022-03-29 16:11:12 +02:00
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
2022-03-25 15:39:39 +01:00
this.#html = `
<div class="ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
2022-03-29 16:11:12 +02:00
<input class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
2022-03-25 15:39:39 +01:00
</div>
`
return this.#html
}
}
class DateTimeInputRenderer extends Renderer{
#html = null;
constructor(input){
super(input)
}
render(){
let required = this.required ? 'required="required"' : ""
2022-03-29 16:11:12 +02:00
let readonly = this.schema.readOnly ? 'readonly="readOnly"' : ""
2022-03-25 15:39:39 +01:00
let t = this.schema.format.toLowerCase() === "datetime" ? "datetime-local" : this.schema.format.toLowerCase()
this.#html = `
<div class="ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
2022-03-29 16:11:12 +02:00
<input type="${t}" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
2022-03-25 15:39:39 +01:00
</div>
`
return this.#html
}
}
class EnumInputRenderer extends Renderer{
#html = null;
constructor(input){
super(input)
}
render(){
let options = this.schema.enum.map(e => {
return e === this.schema.default ?
`<option name="${e}" value="${e}" selected="selected">${e}</option>` :
`<option name="${e}" value="${e}">${e}</option>`
})
let required = this.required ? 'required="required"' : ""
2022-03-29 16:11:12 +02:00
let readonly = this.schema.readOnly ? 'readonly="readOnly"' : ""
2022-03-25 15:39:39 +01:00
this.#html = `
<div class="ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
2022-03-29 16:11:12 +02:00
<select class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required}>
2022-03-25 15:39:39 +01:00
${options.join("")}
</select>
</div>
`
return this.#html
}
}
class CodeInputRenderer extends Renderer{
#html = null;
#codemirror = null;
constructor(input){
super(input)
}
connectedCallback(controller){
2022-03-28 16:42:02 +02:00
/*const ta = controller.querySelector("textarea")
2022-03-25 15:39:39 +01:00
const opts = {
lineNumbers: true,
indentUnit: 4,
matchBrackets: true,
mode: this.schema.contentMediaType,
readOnly : this.schema.readOnly ? true : false
}
this.#codemirror = CodeMirror.fromTextArea(ta, opts)
this.#codemirror.setValue(this.schema.default)
2022-03-28 16:42:02 +02:00
this.#codemirror.refresh()*/
2022-03-25 15:39:39 +01:00
}
render(){
let required = this.required ? 'required="required"' : ""
2022-03-29 16:11:12 +02:00
let readonly = this.schema.readOnly ? 'readonly="readOnly"' : ""
2022-03-25 15:39:39 +01:00
this.#html = `
<div class="ccp-input-widget form-field">
<label>
${this.title}
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
</label>
2022-03-29 16:11:12 +02:00
<textarea class="ccp-input-widget form-control" ${required} ${readonly}>${this.schema.default}</textarea>
2022-03-25 15:39:39 +01:00
</div>
`
return this.#html
}
2022-03-29 16:11:12 +02:00
}