107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
type dataItems = {
|
|
name: string;
|
|
value: any;
|
|
id: string;
|
|
type?: "text" | "button" | "radio" | "checkbox";
|
|
placeholder?: string;
|
|
}
|
|
type data = Array<dataItems>
|
|
|
|
class settingsForm {
|
|
container;
|
|
constructor(containerId?: string) {
|
|
this.container = containerId
|
|
}
|
|
static getInstance(containerId?: string) {
|
|
return new this(containerId);
|
|
}
|
|
setContainer(selector: string): settingsForm {
|
|
this.container = selector;
|
|
return this;
|
|
}
|
|
create(containerEle: HTMLElement, element: dataItems) {
|
|
let label = this._createLabel(element.name, element.id)
|
|
let input = this._createInput(element);
|
|
//let saveBtn = this._createSaveBtn(element.id);
|
|
let cancelBtn = this._createCancelBtn("has-content");
|
|
let wrapper = this._createContainer(element.id);
|
|
[label, input, cancelBtn].forEach(ele => {
|
|
wrapper.appendChild(ele);
|
|
})
|
|
return containerEle.prepend(wrapper);
|
|
}
|
|
|
|
createInputGroup(keyId: string, valueId: string): HTMLElement {
|
|
let div = this._createContainer(keyId + "-container")
|
|
let items: dataItems = {
|
|
id: keyId,
|
|
name: '',
|
|
value: ''
|
|
}
|
|
div.appendChild(this._createInput(items));
|
|
items.id = valueId
|
|
div.appendChild(this._createInput(items));
|
|
div.appendChild(this._createCancelBtn());
|
|
return div;
|
|
}
|
|
|
|
_createContainer(id: string): HTMLElement {
|
|
let div = document.createElement("div");
|
|
div.setAttribute("id",id);
|
|
div.classList.add("autocomplete-container")
|
|
return div;
|
|
}
|
|
_createCancelBtn(className = ''): HTMLElement {
|
|
let button = document.createElement("button");
|
|
if (className)
|
|
button.classList.add(className);
|
|
//button.setAttribute("type",'button')
|
|
button.classList.add("icon-close");
|
|
button.addEventListener("click", function () {
|
|
let container = this.parentNode as HTMLElement
|
|
container.remove()
|
|
})
|
|
return button;
|
|
}
|
|
_createSaveBtn(id: string): HTMLElement {
|
|
let button = document.createElement("input");
|
|
button.setAttribute('type', 'button');
|
|
button.setAttribute('value', 'save');
|
|
button.setAttribute("data-rel", id + "-container");
|
|
return button;
|
|
}
|
|
_createLabel(name: string, id: string): HTMLElement {
|
|
name = name.replace('_', '-');
|
|
let label = document.createElement("label");
|
|
label.setAttribute("for", id);
|
|
let text = document.createTextNode(name);
|
|
label.appendChild(text);
|
|
return label;
|
|
}
|
|
_createInput(data: dataItems): HTMLElement {
|
|
let input = document.createElement('input');
|
|
let type = data.type || "text";
|
|
let placeholder = data.placeholder || 'Leave empty if no value needed';
|
|
let value = data.value || '';
|
|
input.setAttribute('type', type);
|
|
input.setAttribute('id', data.id);
|
|
input.setAttribute("name", data.name || data.id);
|
|
if (type === 'text') {
|
|
input.setAttribute('value', value);
|
|
input.setAttribute('placeholder', placeholder);
|
|
}
|
|
input.classList.add('form-input-' + type);
|
|
return input;
|
|
}
|
|
render(data: data) {
|
|
let container = document.getElementById(this.container)
|
|
if (!container) {
|
|
throw this.container + " is not found"
|
|
}
|
|
for (const element of data) {
|
|
this.create(container, element)
|
|
}
|
|
}
|
|
}
|
|
|
|
export default settingsForm |