Merge pull request 'ccp-features' (#10) from ccp-features into master
Reviewed-on: gCubeSystem/cdn-experiments#10
This commit is contained in:
commit
e45228b996
|
|
@ -61,7 +61,7 @@ class CCPExecutionForm extends HTMLElement{
|
|||
<h5>Inputs</h5>
|
||||
</div>
|
||||
<div class="card-body ccp-inputs">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="form-group"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,181 +1,382 @@
|
|||
class CCPInputWidgetController extends HTMLElement {
|
||||
|
||||
#input = null;
|
||||
#renderer = null;
|
||||
|
||||
#data = null;
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
this.#input = JSON.parse(this.getAttribute("input"))
|
||||
this.#renderer = Renderer.instance(this.#input)
|
||||
super()
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
console.log("Widget connected")
|
||||
this.innerHTML = this.render()
|
||||
this.#renderer.connectedCallback(this)
|
||||
this.#data = JSON.parse(this.getAttribute("input"))
|
||||
|
||||
if(this.isChecklist()){
|
||||
|
||||
const opts = this.#data.schema.enum.join(",")
|
||||
this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
|
||||
|
||||
} else if(this.isEnum()){
|
||||
|
||||
const opts = this.#data.schema.enum.join(",")
|
||||
this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-enum>`
|
||||
}else if(this.isCode()){
|
||||
this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
|
||||
|
||||
}else if(this.isDateTime()){
|
||||
const t = this.#data.schema.format.toLowerCase() === "datetime" ?
|
||||
"datetime-local" : this.#data.schema.format.toLowerCase()
|
||||
this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
|
||||
}else if(this.isFile()){
|
||||
this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-file>`
|
||||
|
||||
}else if(this.isSecret()){
|
||||
this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-secret>`
|
||||
|
||||
}else{
|
||||
this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
return this.#renderer.render()
|
||||
}
|
||||
|
||||
get name(){
|
||||
return this.#renderer.name
|
||||
set value(value){
|
||||
this.firstElementChild.value = value
|
||||
}
|
||||
|
||||
get value(){
|
||||
return this.#renderer.getValue(this)
|
||||
return this.firstElementChild.value.length === 1 ?
|
||||
this.firstElementChild.value[0] :
|
||||
this.firstElementChild.value
|
||||
}
|
||||
|
||||
set value(v){
|
||||
return this.#renderer.setValue(this, v)
|
||||
get name(){
|
||||
return this.firstElementChild.name
|
||||
}
|
||||
|
||||
isChecklist(){
|
||||
return this.isEnum() && (this.#data.schema.format === "checklist")
|
||||
}
|
||||
|
||||
isEnum(){
|
||||
return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
|
||||
}
|
||||
|
||||
isSecret(){
|
||||
return (this.#data.schema.type === "string") &&
|
||||
("format" in this.#data.schema) &&
|
||||
(this.#data.schema.format != null) &&
|
||||
(this.#data.schema.format.toLowerCase() === "secret")
|
||||
}
|
||||
|
||||
isCode(){
|
||||
return (this.#data.schema.type === "string") &&
|
||||
("format" in this.#data.schema) &&
|
||||
(this.#data.schema.format != null) &&
|
||||
(this.#data.schema.format.toLowerCase() === "code")
|
||||
}
|
||||
|
||||
isFile(){
|
||||
return (this.#data.schema.type === "string") &&
|
||||
("format" in this.#data.schema) &&
|
||||
(this.#data.schema.format != null) &&
|
||||
(this.#data.schema.format.toLowerCase() === "file")
|
||||
}
|
||||
|
||||
isDateTime(){
|
||||
return (this.#data.schema.type === "string") &&
|
||||
("format" in this.#data.schema) &&
|
||||
(this.#data.schema.format != null) &&
|
||||
(["date", "time", "datetime"].indexOf(this.#data.schema.format.toLowerCase()) !== -1)
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input', CCPInputWidgetController);
|
||||
|
||||
class Renderer{
|
||||
class CCPBaseInputWidgetController extends HTMLElement{
|
||||
#rootdoc = null;
|
||||
#minOccurs = 1;
|
||||
#maxOccurs = 1;
|
||||
#description = ""
|
||||
#title = ""
|
||||
#name = ""
|
||||
#default = null
|
||||
#options = null
|
||||
#value = null
|
||||
#readonly = false
|
||||
|
||||
#input = null;
|
||||
//useful to avoid having a custom element for every basic input type
|
||||
#type = null
|
||||
|
||||
constructor(input){
|
||||
this.#input = input
|
||||
}
|
||||
#count = 1
|
||||
|
||||
connectedCallback(controller){
|
||||
constructor(){
|
||||
super()
|
||||
this.#rootdoc = this//this.attachShadow({ mode: "open" });
|
||||
this.#name = this.getAttribute("name")
|
||||
this.#title = this.getAttribute("title")
|
||||
this.#description = this.getAttribute("description")
|
||||
this.#default = this.getAttribute("default")
|
||||
this.#minOccurs = Number(this.getAttribute("minoccurs") ? this.getAttribute("minoccurs") : 1)
|
||||
this.#maxOccurs = Number(this.getAttribute("maxoccurs") ? this.getAttribute("maxoccurs") : 1)
|
||||
this.#readonly = this.getAttribute("readonly") === "true"
|
||||
|
||||
// coalesce all basic input types
|
||||
this.#type = this.getAttribute("type")
|
||||
|
||||
// Handle enum case
|
||||
this.#options = (this.getAttribute("options") ? this.getAttribute("options").split(",") : null)
|
||||
|
||||
this.value = Array(Math.max(this.#minOccurs,1)).fill(this.#default)
|
||||
}
|
||||
|
||||
get schema(){
|
||||
return this.#input.schema
|
||||
setValue(v){
|
||||
this.#value = v
|
||||
this.render()
|
||||
}
|
||||
|
||||
get name(){
|
||||
return this.#input.id
|
||||
}
|
||||
|
||||
get title(){
|
||||
return this.#input.title
|
||||
set value(v){
|
||||
const actual = Array.isArray(v) ? v : [v]
|
||||
if(actual.length < this.#minOccurs || actual.length > this.#maxOccurs){
|
||||
throw `Value with length ${v.length} does not respect bounds [${this.minOccurs},${this.maxOccurs}]`
|
||||
}
|
||||
this.#value = actual
|
||||
this.render()
|
||||
}
|
||||
|
||||
get description(){
|
||||
return this.#input.description
|
||||
get value(){
|
||||
return this.#value
|
||||
}
|
||||
|
||||
get rootdoc(){
|
||||
return this.#rootdoc
|
||||
}
|
||||
|
||||
get required(){
|
||||
return this.#input.minOccurs > 0
|
||||
}
|
||||
|
||||
get readOnly(){
|
||||
return this.#input.schema.readOnly
|
||||
return this.#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)
|
||||
}
|
||||
if(this.isSecret(input)){
|
||||
return new SecretInputRenderer(input)
|
||||
}
|
||||
if(this.isFile(input)){
|
||||
return new FileInputRenderer(input)
|
||||
}
|
||||
return new SimpleInputRenderer(input)
|
||||
get readonly(){
|
||||
return this.#readonly
|
||||
}
|
||||
|
||||
static isEnum(input){
|
||||
return (input.schema.type === "string") && ("enum" in input.schema)
|
||||
}
|
||||
|
||||
static isSecret(input){
|
||||
return (input.schema.type === "string") &&
|
||||
("format" in input.schema) &&
|
||||
(input.schema.format != null) &&
|
||||
(input.schema.format.toLowerCase() === "secret")
|
||||
isIncrementable(){
|
||||
return this.#value.length < this.#maxOccurs
|
||||
}
|
||||
|
||||
static isCode(input){
|
||||
return (input.schema.type === "string") &&
|
||||
("format" in input.schema) &&
|
||||
(input.schema.format != null) &&
|
||||
(input.schema.format.toLowerCase() === "code")
|
||||
}
|
||||
|
||||
static isFile(input){
|
||||
return (input.schema.type === "string") &&
|
||||
("format" in input.schema) &&
|
||||
(input.schema.format != null) &&
|
||||
(input.schema.format.toLowerCase() === "file")
|
||||
isDecrementable(){
|
||||
return this.#value.length > this.#minOccurs && this.#value.length > 1
|
||||
}
|
||||
|
||||
static isDateTime(input){
|
||||
return (input.schema.type === "string") &&
|
||||
("format" in input.schema) &&
|
||||
(input.schema.format != null) &&
|
||||
(["date", "time", "datetime"].indexOf(input.schema.format.toLowerCase()) !== -1)
|
||||
}
|
||||
}
|
||||
|
||||
class SimpleInputRenderer extends Renderer{
|
||||
|
||||
#html = null;
|
||||
|
||||
constructor(input){
|
||||
super(input)
|
||||
get count(){
|
||||
return this.#count
|
||||
}
|
||||
|
||||
getValue(parent){
|
||||
return parent.querySelector("input").value
|
||||
get name(){
|
||||
return this.#name
|
||||
}
|
||||
|
||||
setValue(parent, v){
|
||||
parent.querySelector("input").value = v
|
||||
get title(){
|
||||
return this.#title
|
||||
}
|
||||
|
||||
get description(){
|
||||
return this.#description
|
||||
}
|
||||
|
||||
get default(){
|
||||
return this.#default
|
||||
}
|
||||
|
||||
get options(){
|
||||
return this.#options
|
||||
}
|
||||
|
||||
set default(v){
|
||||
this.#default = v
|
||||
}
|
||||
|
||||
get type(){
|
||||
return this.#type
|
||||
}
|
||||
|
||||
render(){
|
||||
let required = this.required ? 'required="required"' : ""
|
||||
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
|
||||
this.#html = `
|
||||
<div class="ccp-input-widget form-field">
|
||||
<label>
|
||||
this.rootdoc.innerHTML = `
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<div name="root" class="my-3 ccp-input-widget form-field row">
|
||||
<label class="form-label">
|
||||
${this.required ? `<span title="Required" class="p-1 text-danger">*</span>` : ``}
|
||||
${this.title}
|
||||
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
||||
<span class="badge text-primary" title="${this.#description}" alt="${this.#description}">?</span>
|
||||
<div style="float:right">
|
||||
${this.isIncrementable() ? `<span name="plus" title="add one" class="badge text-success border-success btn">+</span>` : ``}
|
||||
${this.isDecrementable() ? `<span name="minus" title="remove one" class="badge border border-danger text-danger btn">-</span>` : ``}
|
||||
</div>
|
||||
${this.content()}
|
||||
</label>
|
||||
<input class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
|
||||
<span style="user-select:none;position:relative;top:-1.6rem;left:95%;cursor:pointer" name="password_toggle" class="d-none">👁</span>
|
||||
</div>
|
||||
`
|
||||
return this.#html
|
||||
</div>
|
||||
`
|
||||
this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev=>{
|
||||
const src = ev.target.getAttribute("name")
|
||||
if(src === "plus"){
|
||||
this.#value.push(this.#default)
|
||||
this.render()
|
||||
}else if(src === "minus"){
|
||||
this.#value.pop()
|
||||
this.render()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
class FileInputRenderer extends Renderer{
|
||||
|
||||
#html = null;
|
||||
#content = null;
|
||||
|
||||
constructor(input){
|
||||
super(input)
|
||||
class CCPSimpleInputWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
connectedCallback(controller){
|
||||
controller.querySelector(`input[name=${this.name}]`).addEventListener("change", ev=>{
|
||||
connectedCallback(){
|
||||
this.rootdoc.addEventListener("input", ev=>{
|
||||
if(ev.target.getAttribute("name") === this.name){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
this.value[index] = ev.target.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
content(){
|
||||
if(this.value.length <= 1){
|
||||
return `<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
return `
|
||||
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input-simple', CCPSimpleInputWidgetController);
|
||||
|
||||
class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.rootdoc.addEventListener("change", ev=>{
|
||||
if(ev.target.getAttribute("name") === this.name){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
this.value[index] = ev.target.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
content(){
|
||||
const opts = this.options.map(o=>`<option value="${o}">${o}</option>`).join("\n")
|
||||
if(this.value.length <= 1){
|
||||
return `<select data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
return `
|
||||
<select data-index="${i}" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input-enum', CCPEnumInputWidgetController);
|
||||
|
||||
class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.rootdoc.addEventListener("change", ev=>{
|
||||
if(ev.target.getAttribute("name") === this.name){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
|
||||
const elems = Array.prototype.slice.call(ev.currentTarget.querySelectorAll(`input[name='${this.name}'][data-index='${index}']`))
|
||||
|
||||
this.value[index] = elems.filter(e=>e.checked).map(e=>e.value).join(",")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
buildOpts(index, selections){
|
||||
return this.options.map(o=>`
|
||||
<div class="form-check form-switch form-check-inline">
|
||||
<label>${o}</label>
|
||||
<input data-index="${index}" class="form-check-input" type="checkbox" name="${this.name}" value="${o}" ${this.readonly ? 'readonly' : ''} ${selections.indexOf(o) > -1 ? 'checked' : ''}/></div>
|
||||
`).join("\n")
|
||||
}
|
||||
|
||||
content(){
|
||||
if(this.value.length === 1){
|
||||
const opts = this.buildOpts(0, this.value.length ? this.value[0].split(",") : [])
|
||||
return `
|
||||
<div class="my-2">
|
||||
${opts}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
const opts = this.buildOpts(i, c.split(","))
|
||||
return `
|
||||
<div class="my-2">
|
||||
${opts}
|
||||
</div>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input-checklist', CCPChecklistInputWidgetController);
|
||||
|
||||
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.rootdoc.addEventListener("input", ev=>{
|
||||
if(ev.target.getAttribute("name") === this.name){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
this.value[index] = ev.target.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
content(){
|
||||
if(this.value.length <= 1){
|
||||
return `<textarea data-index="0" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" rows="5" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}>${this.value.length ? this.value[0] : ''}</textarea>`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
return `
|
||||
<textarea name="${this.name}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" rows="5" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}>${c}</textarea>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input-textarea', CCPTextAreaWidgetController);
|
||||
|
||||
class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.rootdoc.addEventListener("change", ev=>{
|
||||
const tgt = ev.target
|
||||
const ename = tgt.getAttribute("name")
|
||||
if(ename === this.name){
|
||||
if(tgt.getAttribute("name") === this.name){
|
||||
const index = Number(tgt.getAttribute("data-index"))
|
||||
const file = ev.target.files[0]
|
||||
/*if(file.type !== this.schema.contentMediaType){
|
||||
alert("Unsupported media type. Must be " + this.schema.contentMediaType)
|
||||
ev.stopPropagation()
|
||||
ev.preventDefault()
|
||||
tgt.value = null
|
||||
return false
|
||||
}*/
|
||||
if(file.size > 100*1024){
|
||||
alert("This input allows only small files (100K). Use references instead ")
|
||||
ev.stopPropagation()
|
||||
|
|
@ -189,197 +390,77 @@ class FileInputRenderer extends Renderer{
|
|||
if ((encoded.length % 4) > 0) {
|
||||
encoded += '='.repeat(4 - (encoded.length % 4));
|
||||
}
|
||||
this.#content = encoded
|
||||
this.value[index] = encoded
|
||||
this.querySelector("small[name=preview]").textContent = encoded.substr(0,5) + "..." + encoded.substr(encoded.length-5)
|
||||
})
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getValue(parent){
|
||||
return this.#content
|
||||
}
|
||||
|
||||
setValue(parent, v){
|
||||
parent.querySelector("input").value = v
|
||||
}
|
||||
|
||||
render(){
|
||||
let required = this.required ? 'required="required"' : ""
|
||||
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
|
||||
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>
|
||||
<input type="file" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
|
||||
</div>
|
||||
`
|
||||
return this.#html
|
||||
content(){
|
||||
if(this.value.length <= 1){
|
||||
const v = this.value.length ? this.value[0] : ''
|
||||
return `
|
||||
<input type="file" data-index="0" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required && !v ? 'required' : ''} value="${v}"/>
|
||||
<small name ="preview" class="form-text text-muted">${v.substr(0,5) + "..." + v.substr(v.length-5)}</small>
|
||||
`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
return `
|
||||
<input type="file" data-index="${i}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''} value="${c}"/>
|
||||
<small name ="preview" class="form-text text-muted">${c.substr(0,5) + "..." + c.substr(s.length-5)}</small>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController);
|
||||
|
||||
class SecretInputRenderer extends Renderer{
|
||||
|
||||
#html = null;
|
||||
|
||||
constructor(input){
|
||||
super(input)
|
||||
class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
getValue(parent){
|
||||
return parent.querySelector("input").value
|
||||
}
|
||||
|
||||
setValue(parent, v){
|
||||
parent.querySelector("input").value = v
|
||||
}
|
||||
|
||||
connectedCallback(controller){
|
||||
controller.addEventListener("click", ev=>{
|
||||
const ename = ev.target.getAttribute("name")
|
||||
if(ename === "password_toggle"){
|
||||
const w = controller.querySelector("div.ccp-input-widget input")
|
||||
w.type = (w.type === "password" ? "" : "password")
|
||||
ev.preventDefault()
|
||||
connectedCallback(){
|
||||
this.rootdoc.addEventListener("input", ev=>{
|
||||
if(ev.target.getAttribute("name") === this.name){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
this.value[index] = ev.target.value
|
||||
}
|
||||
})
|
||||
|
||||
this.rootdoc.addEventListener("click", ev=>{
|
||||
if(ev.target.getAttribute("name") === "password_toggle"){
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
const field = this.rootdoc.querySelector(`input[data-index='${index}']`)
|
||||
if(field.type === "text") field.type="password";
|
||||
else field.type = "text";
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
let required = this.required ? 'required="required"' : ""
|
||||
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
|
||||
this.#html = `
|
||||
<div class="ccp-input-widget ccp-input-widget form-field">
|
||||
<label>
|
||||
${this.title}
|
||||
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
||||
</label>
|
||||
<input type="password" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
|
||||
<span style="user-select:none;position:relative;top:-1.6rem;float:right;cursor:pointer" name="password_toggle">👁</span>
|
||||
</div>
|
||||
`
|
||||
return this.#html
|
||||
}
|
||||
}
|
||||
|
||||
class DateTimeInputRenderer extends Renderer{
|
||||
|
||||
#html = null;
|
||||
|
||||
constructor(input){
|
||||
super(input)
|
||||
}
|
||||
|
||||
getValue(parent){
|
||||
return parent.querySelector("input").value
|
||||
}
|
||||
|
||||
setValue(parent, v){
|
||||
parent.querySelector("input").value = v
|
||||
}
|
||||
|
||||
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 = `
|
||||
<div class="ccp-input-widget form-field">
|
||||
<label>
|
||||
${this.title}
|
||||
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
||||
</label>
|
||||
<input type="${t}" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
|
||||
</div>
|
||||
`
|
||||
return this.#html
|
||||
}
|
||||
}
|
||||
|
||||
class EnumInputRenderer extends Renderer{
|
||||
|
||||
#html = null;
|
||||
|
||||
constructor(input){
|
||||
super(input)
|
||||
}
|
||||
|
||||
getValue(parent){
|
||||
return parent.querySelector("select").value
|
||||
}
|
||||
|
||||
setValue(parent, v){
|
||||
parent.querySelector("select").value = v
|
||||
}
|
||||
|
||||
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"' : ""
|
||||
let readonly = this.schema.readOnly ? 'readonly="readOnly"' : ""
|
||||
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>
|
||||
<select class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required}>
|
||||
${options.join("")}
|
||||
</select>
|
||||
</div>
|
||||
`
|
||||
return this.#html
|
||||
}
|
||||
}
|
||||
|
||||
class CodeInputRenderer extends Renderer{
|
||||
|
||||
#html = null;
|
||||
#codemirror = null;
|
||||
|
||||
constructor(input){
|
||||
super(input)
|
||||
}
|
||||
|
||||
getValue(parent){
|
||||
return parent.querySelector("textarea").value
|
||||
}
|
||||
|
||||
setValue(parent, v){
|
||||
parent.querySelector("textarea").value = v
|
||||
}
|
||||
|
||||
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 = `
|
||||
<div class="ccp-input-widget form-field">
|
||||
<label>
|
||||
${this.title}
|
||||
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
||||
</label>
|
||||
<textarea class="ccp-input-widget form-control" ${required} ${readonly}>${this.schema.default}</textarea>
|
||||
</div>
|
||||
`
|
||||
return this.#html
|
||||
content(){
|
||||
if(this.value.length <= 1){
|
||||
return `
|
||||
<div style="position:relative">
|
||||
<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
||||
<span data-index="0" class="btn" style="position:absolute; right:0; bottom:0" name="password_toggle">👁</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
return `
|
||||
<div style="position:relative">
|
||||
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
||||
<span data-index="${i}" class="btn" style="position:absolute; right:0; bottom:0" name="password_toggle">👁</span>
|
||||
</div>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-input-secret', CCPSecretInputWidgetController);
|
||||
|
|
@ -65,42 +65,48 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
|||
this.innerHTML = `
|
||||
<details ${ reopen ? 'open' : ''}>
|
||||
<summary class="mb-3">
|
||||
<input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${this.#input.id}" title="Id of input" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
<input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${input.id}" title="Id of input" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
${ input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}
|
||||
</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.#input.title}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
<input name="title" class="form-control" placeholder="title" value="${input.title}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-field" title="description">
|
||||
<input name="description" class="form-control" placeholder="description" value="${this.#input.description}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
<input name="description" class="form-control" placeholder="description" value="${input.description}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-3">
|
||||
<div class="form-field" title="Type">
|
||||
<label>Type</label>
|
||||
<select name="type" class="form-control" placeholder="type" value="${this.#input.schema.type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
||||
<option value="string">String</option>
|
||||
<option value="enum">Enum</option>
|
||||
<select name="type" class="form-control" placeholder="type" value="${this.#type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
||||
<option value="string" ${this.#type === "string" ? "selected" : ""}>String</option>
|
||||
<option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-field" title="Minimum">
|
||||
<label>Min</label>
|
||||
<input value="${this.#input.minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${this.#input.minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
<div class="form-field" title="Minimum occurrences">
|
||||
<label>Min occurs</label>
|
||||
<input value="${input.minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${input.minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-field" title="Maximum">
|
||||
<label>Max</label>
|
||||
<input value="${this.#input.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${this.#input.maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
<div class="form-field" title="Maximum occurrences">
|
||||
<label>Max occurs</label>
|
||||
<input value="${input.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${input.maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" title="Read only">
|
||||
<label>Read only</label>
|
||||
<div class="form-field">
|
||||
<input type="checkbox" ${input.schema.readOnly ? 'checked' : ''} name="readonly" class="form-check-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,7 +114,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
|||
<div class="col-3">
|
||||
<div class="form-field" title="Format">
|
||||
<label>Format</label>
|
||||
<select value="${this.#input.schema.format}" name="format" class="form-control" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
||||
<select value="${input.schema.format}" name="format" class="form-control" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
||||
<option value="none" ${this.isSelectedFormat('none') ? "selected" : ""}>None</option>
|
||||
<option value="date" ${this.isSelectedFormat('date') ? "selected" : ""}>Date</option>
|
||||
<option value="time" ${this.isSelectedFormat('time') ? "selected" : ""}>Time</option>
|
||||
|
|
@ -116,32 +122,34 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
|||
<option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
|
||||
<option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
|
||||
<option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
|
||||
<option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" title="Mime type">
|
||||
<label>Mime</label>
|
||||
<div class="form-field">
|
||||
<input value="${this.#input.schema.contentMediaType}" name="contentMediaType" class="form-control" placeholder="mime" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" title="Read only">
|
||||
<label>Read only</label>
|
||||
<div class="form-field">
|
||||
<input type="checkbox" ${this.#input.schema.readOnly ? 'checked' : ''} name="readonly" class="form-check-input">
|
||||
<input value="${input.schema.contentMediaType}" name="contentMediaType" class="form-control" placeholder="mime" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div name="enum-input" class="${this.#type !== 'enum' ? 'd-none' : ''} mb-3">
|
||||
<div class="form-field" title="options">
|
||||
<input name="options" class="form-control" type="text" placeholder="option" value="${this.#input.schema.enum ? this.#input.schema.enum.join(',') : ''}"/>
|
||||
<input name="options" class="form-control" type="text" placeholder="option" value="${input.schema.enum ? input.schema.enum.join(',') : ''}"/>
|
||||
<small class="form-text text-muted">Comma separated list of options</small>
|
||||
</div>
|
||||
<div class="form-field" title="Format">
|
||||
<label>Format</label>
|
||||
<select value="${input.schema.format}" name="format" class="form-control">
|
||||
<option value="select" ${this.isSelectedFormat('select') ? "selected" : ""}>Choice</option>
|
||||
<option value="checklist" ${this.isSelectedFormat('checklist') ? "selected" : ""}>Multi Choice</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div name="input-default" class="mb-3">
|
||||
<div class="form-field" title="Default value">
|
||||
${this.renderDefaultByType()}
|
||||
<span style="user-select:none;position:relative;top:-1.6rem;float:right;cursor:pointer" name="password_toggle" class="${this.isSelectedFormat('secret') ? 'inline' : 'd-none'}">👁</span>
|
||||
<span style="user-select:none;position:relative;top:-1.6rem;float:right;cursor:pointer" name="password_toggle" class="${this.isSelectedFormat('secret') ? 'inline' : 'd-none'}">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -176,7 +184,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
|||
}
|
||||
else if(ename === "format"){
|
||||
this.#input.schema.format = val
|
||||
this.render(this.#input, this.#index, true)
|
||||
//this.render(this.#input, this.#index, true)
|
||||
/*this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none")
|
||||
this.querySelector("div[name=input-default] input[name=default]").type = ""
|
||||
if(this.#input.schema.format === "secret"){
|
||||
|
|
|
|||
Loading…
Reference in New Issue