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"' : "" let readonly = this.readOnly ? 'readonly="readOnly"' : "" this.#html = `
` return this.#html } } class DateTimeInputRenderer extends Renderer{ #html = null; constructor(input){ super(input) } render(){ let required = this.required ? 'required="required"' : "" let readonly = this.schema.readOnly ? 'readonly="readOnly"' : "" let t = this.schema.format.toLowerCase() === "datetime" ? "datetime-local" : this.schema.format.toLowerCase() this.#html = ` ` 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 ? `` : `` }) let required = this.required ? 'required="required"' : "" let readonly = this.schema.readOnly ? 'readonly="readOnly"' : "" this.#html = ` ` return this.#html } } class CodeInputRenderer extends Renderer{ #html = null; #codemirror = null; constructor(input){ super(input) } connectedCallback(controller){ /*const ta = controller.querySelector("textarea") 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) this.#codemirror.refresh()*/ } render(){ let required = this.required ? 'required="required"' : "" let readonly = this.schema.readOnly ? 'readonly="readOnly"' : "" this.#html = ` ` return this.#html } }