diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js index 9adf5d5..ab47a2a 100644 --- a/ccp/js/inputwidgeteditorcontroller.js +++ b/ccp/js/inputwidgeteditorcontroller.js @@ -1,103 +1,103 @@ -class CCPInputWidgetEditorController extends HTMLElement{ - +class CCPInputWidgetEditorController extends HTMLElement { + #input = null #index = null #type = null #messages = { - "en" : { - "input_id_help" : "The Id of the input. This has to be unique accross all the inputs the method. This is used as variable expansion in scripts.", - "input_delete_help" : "Delete this input", - "title" : "Title", - "title_help" : "Title of the input. This is how the input will appear in forms.", - "description" : "Description", - "description_help" : "A description for this input", - "min_occurs" : "Min. count", - "max_occurs" : "Max. count", - "min_occurs_help" : "Minimum cardinality of this input", - "max_occurs_help" : "Maximum cardinality of this input", - "type" : "Type", - "type_help" : "Set the type of the input. Either String or Enumeration", - "mime" : "Mime", - "mime_help" : "Set MIME type of expected input", - "format" : "Format", - "format_help" : "Set specific format to tune the widget that will be used in forms", - "readonly" : "Read only", - "readonly_help" : "If enabled this input will not be editable in forms", - "string" : "String", - "enum" : "Enumerated", - "options" : "Options", - "options_help" : "A comma separated list of options for this enumerated input", - "options_ext_help" : "Comma separated list of options", - "choice" : "Single choice", - "multichoice" : "Multiple choices", - "default" : "Default value", - "default_help" : "The default value applied for this input when nothing is set explicitly" + "en": { + "input_id_help": "The Id of the input. This has to be unique accross all the inputs the method. This is used as variable expansion in scripts.", + "input_delete_help": "Delete this input", + "title": "Title", + "title_help": "Title of the input. This is how the input will appear in forms.", + "description": "Description", + "description_help": "A description for this input", + "min_occurs": "Min. count", + "max_occurs": "Max. count", + "min_occurs_help": "Minimum cardinality of this input", + "max_occurs_help": "Maximum cardinality of this input", + "type": "Type", + "type_help": "Set the type of the input. Either String or Enumeration", + "mime": "Mime", + "mime_help": "Set MIME type of expected input", + "format": "Format", + "format_help": "Set specific format to tune the widget that will be used in forms", + "readonly": "Read only", + "readonly_help": "If enabled this input will not be editable in forms", + "string": "String", + "enum": "Enumerated", + "options": "Options", + "options_help": "A comma separated list of options for this enumerated input", + "options_ext_help": "Comma separated list of options", + "choice": "Single choice", + "multichoice": "Multiple choices", + "default": "Default value", + "default_help": "The default value applied for this input when nothing is set explicitly" } } - + #delete_icon = ` ` - - constructor(){ + + constructor() { super(); - + } - - connectedCallback(){ - + + connectedCallback() { + } - - getLabel(key, localehint){ + + getLabel(key, localehint) { const locale = localehint ? localehint : navigator.language const actlocale = this.#messages[locale] ? locale : "en" const msg = this.#messages[actlocale][key] return msg == null || msg == undefined ? key : this.#messages[actlocale][key] } - get index(){ + get index() { return this.#index } - - isSelectedFormat(fmt){ + + isSelectedFormat(fmt) { return this.#input.schema.format === fmt } - - renderDefaultByType(){ + + renderDefaultByType() { return `` } - renderDeleteButton(){ - return `` } - render(input, i, reopen){ + render(input, i, reopen) { this.#index = i this.#input = input this.#type = input.schema.enum ? "enum" : "string" const minOccurs = input.minOccurs = Number(input.minOccurs) ? Number(input.minOccurs) : 0 const maxOccurs = input.maxOccurs = Number(input.maxOccurs) ? Number(input.maxOccurs) : 0 this.innerHTML = ` -
+
- - ${ input.id !== 'ccpimage' ? this.renderDeleteButton() : ''} + + ${input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}
- +
- +
@@ -106,20 +106,20 @@ class CCPInputWidgetEditorController extends HTMLElement{
- +
- +
@@ -133,7 +133,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
- @@ -152,7 +152,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
- +
@@ -165,7 +165,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
@@ -178,10 +178,10 @@ class CCPInputWidgetEditorController extends HTMLElement{
- ` - this.addEventListener("click", ev=>{ + ` + this.addEventListener("click", ev => { const ename = ev.target.getAttribute("name") - if(ename === "password_toggle"){ + if (ename === "password_toggle") { const w = this.querySelector("div[name=input-default] input[name=default]") w.type = (w.type === "password" ? "" : "password") ev.preventDefault() @@ -189,17 +189,17 @@ class CCPInputWidgetEditorController extends HTMLElement{ }) const defaultinp = this.querySelector("div[name='input-default']") - defaultinp.addEventListener("input", ev=>{ + defaultinp.addEventListener("input", ev => { const inp = this.querySelector("d4s-ccp-input") this.#input.schema.default = inp.value }) - defaultinp.addEventListener("change", ev=>{ + defaultinp.addEventListener("change", ev => { const inp = this.querySelector("d4s-ccp-input") this.#input.schema.default = inp.value }) - defaultinp.addEventListener("click", ev=>{ + defaultinp.addEventListener("click", ev => { const src = ev.target.getAttribute("name") if (src === "plus" || src === "minus") { const inp = this.querySelector("d4s-ccp-input") @@ -207,60 +207,123 @@ class CCPInputWidgetEditorController extends HTMLElement{ } }) - this.addEventListener("input", ev=>{ + this.addEventListener("input", ev => { const val = ev.target.value const ename = ev.target.getAttribute("name") const display = this.querySelector("div[name='default-container']") - if(ename === "id"){ + if (ename === "id") { this.#input.id = val } - else if(ename === "title"){ + else if (ename === "title") { this.#input.title = val - display.innerHTML = this.renderDefaultByType() + display.innerHTML = this.renderDefaultByType() } - else if(ename === "description"){ + else if (ename === "description") { this.#input.description = val display.innerHTML = this.renderDefaultByType() } - else if(ename === "minOccurs"){ + else if (ename === "minOccurs") { this.#input.minOccurs = Number(val) ? Number(val) : 0 display.innerHTML = this.renderDefaultByType() } - else if(ename === "maxOccurs"){ + else if (ename === "maxOccurs") { this.#input.maxOccurs = Number(val) ? Number(val) : 0 display.innerHTML = this.renderDefaultByType() } - else if(ename === "format"){ + else if (ename === "format") { + this.#input.schema.default = this.formatConversion(this.#input.schema.format, this.#input.schema.default, val) this.#input.schema.format = val display.innerHTML = this.renderDefaultByType() } - else if(ename === "contentMediaType"){ + else if (ename === "contentMediaType") { this.#input.schema.contentMediaType = val display.innerHTML = this.renderDefaultByType() } - else if(ename === "options"){ + else if (ename === "options") { this.#input.schema.enum = val.split(",") + if (this.#input.schema.enum.indexOf(this.#input.schema.default) === -1) { + this.#input.schema.default = this.#input.schema.enum[0] + } display.innerHTML = this.renderDefaultByType() } - else if(ename === "readonly"){ + else if (ename === "readonly") { this.#input.schema.readOnly = ev.target.checked display.innerHTML = this.renderDefaultByType() } - else if(ename === "type"){ + else if (ename === "type") { this.#type = ev.target.value - if(this.#type === "enum"){ + if (this.#type === "enum") { this.querySelector("div[name=string-input]").classList.add("d-none") this.querySelector("div[name=enum-input]").classList.remove("d-none") + this.querySelector("div[name=enum-input] select[name=format]").value = "select" + this.#input.schema.format = "select" this.#input.schema.enum = this.querySelector("input[name=options]").value.split(",") - }else if(this.#type === "string"){ + if (this.#input.schema.enum.indexOf(this.#input.schema.default) === -1) { + this.#input.schema.default = this.#input.schema.enum[0] + } + } else if (this.#type === "string") { this.querySelector("div[name=enum-input]").classList.add("d-none") this.querySelector("div[name=string-input]").classList.remove("d-none") + this.#input.schema.format = "none" delete this.#input.schema['enum'] } - display.innerHTML = this.renderDefaultByType() + display.innerHTML = this.renderDefaultByType() } }) } - + + boolean2number(prev){ + if(Array.isArray(prev)){ + return prev.map(v=>(v === "true" || v === true ? "1" : "0")) + } else return prev === "true" || prev === true ? "1" : "0" + } + + none2number(prev){ + if(Array.isArray(prev)){ + return prev.map(v=>(isNaN(Number(v)) ? "0" : v)) + } else return isNaN(Number(prev)) ? "0" : prev + } + + number2boolean(prev){ + if(Array.isArray(prev)){ + return prev.map(v=>(Number(v) !== 0 ? "true" : "false")) + } else return Number(prev) !== 0 ? "true" : "false" + } + + none2boolean(prev){ + if(Array.isArray(prev)){ + return prev.map(v=>(["true", "false"].indexOf(v.toLowerCase()) !== -1 ? v.toLowerCase() : "false")) + } else return ["true", "false"].indexOf(prev.toLowerCase()) !== -1 ? prev.toLowerCase() : "false" + } + + any2boolean(prev){ + if(Array.isArray(prev)){ + return prev.map(v=>String(!!v)) + } else return String(!!v); + } + + any2empty(prev){ + if(Array.isArray(prev)){ + return prev.map(v=>"") + } else return ""; + } + + formatConversion(prevformat, prevvalue, format){ + if(format === "none"){ + return prevvalue; + } + if(format === "number"){ + if(prevformat === "boolean") return this.boolean2number(prevvalue); + if(!prevformat || prevformat === "none") return this.none2number(prevvalue); + return "0"; + } + if(format === "boolean"){ + if(prevformat === "number") return this.number2boolean(prevvalue) + if(!prevformat || prevformat === "none") return this.none2boolean(prevvalue) + return this.any2boolean(prevvalue) + } + return this.any2empty(prevvalue) + } + } window.customElements.define('d4s-ccp-input-editor', CCPInputWidgetEditorController);