| 1 |
function __tagembed__dialog_form(option = { popupSize: "__tagembed__popup_sm", title: "Action", form: { method: '', cancelButtonText: '', cancelButtonClass: '', buttonText: '', buttonClass: '' }, inputs: [], action: null, cancelAction: null }) { |
| 2 |
let elemId = '__tagembed__dialog_form_id_'; |
| 3 |
let id = (option.form.id) ? option.form.id : ''; |
| 4 |
let name = (option.form.name) ? option.form.name : ''; |
| 5 |
let method = (option.form.method) ? option.form.method : 'post'; |
| 6 |
let cancelButtonText = (option.form.cancelButtonText) ? option.form.cancelButtonText : 'Cancel'; |
| 7 |
let cancelButtonClass = (option.form.cancelButtonClass) ? option.form.cancelButtonClass : ''; |
| 8 |
let buttonText = (option.form.buttonText) ? option.form.buttonText : 'Submit'; |
| 9 |
let buttonClass = (option.form.buttonClass) ? option.form.buttonClass : ''; |
| 10 |
let elemHTML = `<div id="${elemId}" class="__tagembed__overlay">`; |
| 11 |
elemHTML = `${elemHTML}<div class="__tagembed__popupwrap ${option.popupSize}">`; |
| 12 |
elemHTML = `${elemHTML}<div class="__tagembed__popupinn"><div class="__tagembed__header">`; |
| 13 |
elemHTML = `${elemHTML}<h2>${option.title}</h2>`; |
| 14 |
elemHTML = `${elemHTML}</div>`; |
| 15 |
if (option.inputs instanceof Array && option.inputs.length > 0) { |
| 16 |
elemHTML = `${elemHTML}<hr class="__tagembed__horizontaborder" />`; |
| 17 |
} |
| 18 |
elemHTML = `${elemHTML}<form method="${method}" autocomplete="off"><div class="__tagembed__formwbody">`; |
| 19 |
if (option.inputs instanceof Array && option.inputs.length > 0) { |
| 20 |
let count = 0; |
| 21 |
for (let input of option.inputs) { |
| 22 |
let id = (input.id) ? input.id : ''; |
| 23 |
let label = (input.label) ? input.label : ''; |
| 24 |
let name = (input.name) ? input.name : ''; |
| 25 |
let type = (input.type) ? input.type : ''; |
| 26 |
let value = (input.value) ? input.value : ''; |
| 27 |
let otherClass = (input.type === 'checkbox' || input.type === 'radio') ? ' __tagembed__checkboxrow' : ''; |
| 28 |
let placeholder = (input.placeholder) ? input.placeholder : ''; |
| 29 |
let jsFunction = (input.jsFunction) ? input.jsFunction : ''; |
| 30 |
let jsSearchBtnFunction = (input.jsSearchBtnFunction) ? input.jsSearchBtnFunction : ''; |
| 31 |
let extraTag = (input.extraTag) ? input.extraTag : ''; |
| 32 |
let searchBtn = (input.searchBtn) ? input.searchBtn : ''; |
| 33 |
let inputLoader = (input.inputLoader) ? input.inputLoader : ''; |
| 34 |
let tagembedformwrowId = (input.tagembedformwrowId) ? input.tagembedformwrowId : ''; |
| 35 |
elemHTML = `${elemHTML} <div id="${tagembedformwrowId}" class="__tagembed__formwrow ${otherClass}" style="${type == "hidden" ? "margin-bottom:0px" : ''}">`; |
| 36 |
if (label) |
| 37 |
elemHTML = `${elemHTML}<label>${label} </label>`; |
| 38 |
if (!["textarea", "file", "select", "checkbox", "radio"].includes(type)) { |
| 39 |
elemHTML = `${elemHTML} <input id="${id}" ${jsFunction} name="${name}" value ="${value}" type ="${type}" placeholder="${placeholder}"/>`; |
| 40 |
|
| 41 |
} else if (["textarea"].includes(type)) { |
| 42 |
elemHTML = `${elemHTML} <textarea id="${id}" ${jsFunction} name="${name}" value ="${value}" type="${type}" placeholder="${placeholder}" rows="5"></textarea>`; |
| 43 |
} else if (["select"].includes(type)) { |
| 44 |
elemHTML = `${elemHTML} <select id="${id}" ${jsFunction} name="${name}">`; |
| 45 |
for (let index in input.options) |
| 46 |
elemHTML = `${elemHTML} <option value="${input.options[index].value}"> ${input.options[index].name} </option>`; |
| 47 |
elemHTML = `${elemHTML}'</select>`; |
| 48 |
} else if (["checkbox"].includes(type)) { |
| 49 |
elemHTML = `${elemHTML} <input id="${id}" ${jsFunction} type="${type}" name="${name}" value ="${value}"/>`; |
| 50 |
} else if (["radio"].includes(type)) { |
| 51 |
for (let index in input.options) { |
| 52 |
elemHTML = `${elemHTML} <div>`; |
| 53 |
if (input.options[index].label) { |
| 54 |
elemHTML = `${elemHTML} <label style="margin-right:5px;margin-left: 5px;">${input.options[index].label} </label></div>`; |
| 55 |
} |
| 56 |
let checked = (input.options[index].checked) ? 'checked' : ''; |
| 57 |
elemHTML = `${elemHTML} <input id="${id}" ${jsFunction} name="${name}" type="${type}" value="${input.options[index].value}" ${checked}/>`; |
| 58 |
} |
| 59 |
} |
| 60 |
|
| 61 |
if (searchBtn) |
| 62 |
elemHTML = `${elemHTML} <i class="fas fa-search" ${jsSearchBtnFunction} id="__tagembed__input_search_${searchBtn}" aria-hidden="true"></i>`; |
| 63 |
|
| 64 |
if (extraTag) |
| 65 |
elemHTML = `${elemHTML} <span class="__tagembed__extratag" id="__tagembed__${extraTag}"></span>`; |
| 66 |
if (inputLoader) |
| 67 |
elemHTML = `${elemHTML} <span id="__tagembed__${inputLoader}" class="__tagembed__inputLoader"><img src="${__tagembed__plugin_url_for_js}assets/images/loader.gif" alt="loader"></span>`; |
| 68 |
elemHTML = `${elemHTML} <span id="__tagembed__${name}_error" class = "__tagembed__error" ></span> </div>`; |
| 69 |
count++; |
| 70 |
} |
| 71 |
} |
| 72 |
elemHTML = `${elemHTML}</div>`; |
| 73 |
elemHTML = `${elemHTML}<div class ="__tagembed__btnwrap">`; |
| 74 |
elemHTML = `${elemHTML}<button type="submit" class="__tagembed__okaybtn ${buttonClass}" id="${elemId}OkayButton">${buttonText}</button>`; |
| 75 |
elemHTML = `${elemHTML}<button class="__tagembed__cancelbtn ${cancelButtonClass}" id="${elemId}CancelButton">${cancelButtonText}</button>`; |
| 76 |
elemHTML = `${elemHTML}</form></div></div>`; |
| 77 |
let elem = document.createElement('div'); |
| 78 |
elem.innerHTML = elemHTML; |
| 79 |
elem.querySelector('#' + elemId + 'CancelButton').onclick = function () { |
| 80 |
if (option["cancelAction"]) |
| 81 |
option["cancelAction"](); |
| 82 |
document.querySelector('#' + elemId).remove(); |
| 83 |
}; |
| 84 |
let formEl = elem.querySelector('form'); |
| 85 |
formEl.addEventListener("submit", function (event) { |
| 86 |
event.preventDefault(); |
| 87 |
option["action"](event, new FormData(formEl)); |
| 88 |
}); |
| 89 |
document.body.appendChild(elem.firstChild); |
| 90 |
} |
| 91 |
|
| 92 |
|
