added password_toggle
This commit is contained in:
parent
08ce5266a7
commit
73d00edb45
|
@ -125,8 +125,9 @@ class SimpleInputRenderer extends Renderer{
|
||||||
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
||||||
</label>
|
</label>
|
||||||
<input class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
|
<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>
|
</div>
|
||||||
`
|
`
|
||||||
return this.#html
|
return this.#html
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -139,16 +140,28 @@ class SecretInputRenderer extends Renderer{
|
||||||
super(input)
|
super(input)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
let required = this.required ? 'required="required"' : ""
|
let required = this.required ? 'required="required"' : ""
|
||||||
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
|
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
|
||||||
this.#html = `
|
this.#html = `
|
||||||
<div class="ccp-input-widget form-field">
|
<div class="ccp-input-widget ccp-input-widget form-field">
|
||||||
<label>
|
<label>
|
||||||
${this.title}
|
${this.title}
|
||||||
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="password" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
|
<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;left:90%;cursor:pointer" name="password_toggle">👁</span>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
return this.#html
|
return this.#html
|
||||||
|
|
|
@ -9,7 +9,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
|
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
|
||||||
</svg>
|
</svg>
|
||||||
`
|
`
|
||||||
|
|
||||||
constructor(){
|
constructor(){
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
@ -101,12 +101,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
<div name="input-default" class="mb-3">
|
<div name="input-default" class="mb-3">
|
||||||
<div class="form-field" title="Default value">
|
<div class="form-field" title="Default value">
|
||||||
<input value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>
|
<input value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>
|
||||||
|
<span style="user-select:none;position:relative;top:-1.6rem;left:95%;cursor:pointer" name="password_toggle" class="d-none">👁</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
`
|
`
|
||||||
|
|
||||||
|
this.addEventListener("click", ev=>{
|
||||||
|
const ename = ev.target.getAttribute("name")
|
||||||
|
if(ename === "password_toggle"){
|
||||||
|
const w = this.querySelector("div[name=input-default] input[name=default]")
|
||||||
|
w.type = (w.type === "password" ? "" : "password")
|
||||||
|
ev.preventDefault()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
this.addEventListener("input", ev=>{
|
this.addEventListener("input", ev=>{
|
||||||
const val = ev.target.value
|
const val = ev.target.value
|
||||||
const ename = ev.target.getAttribute("name")
|
const ename = ev.target.getAttribute("name")
|
||||||
|
@ -127,8 +137,17 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
}
|
}
|
||||||
else if(ename === "format"){
|
else if(ename === "format"){
|
||||||
this.#input.schema.format = val
|
this.#input.schema.format = val
|
||||||
|
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"){
|
if(this.#input.schema.format === "secret"){
|
||||||
this.querySelector("div[name=input-default] input[name=default]").type = "password"
|
this.querySelector("div[name=input-default] input[name=default]").type = "password"
|
||||||
|
this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none")
|
||||||
|
}else if(this.#input.schema.format === "date"){
|
||||||
|
this.querySelector("div[name=input-default] input[name=default]").type = "date"
|
||||||
|
}else if(this.#input.schema.format === "time"){
|
||||||
|
this.querySelector("div[name=input-default] input[name=default]").type = "time"
|
||||||
|
}else if(this.#input.schema.format === "dateTime"){
|
||||||
|
this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(ename === "contentMediaType"){
|
else if(ename === "contentMediaType"){
|
||||||
|
|
Loading…
Reference in New Issue