Skip to content

Instantly share code, notes, and snippets.

@zazk
Forked from nelsson/questionsInWP.js
Last active March 30, 2020 19:27
Show Gist options
  • Save zazk/ee4964ca03c2b9144499fb02b00bffc6 to your computer and use it in GitHub Desktop.
Save zazk/ee4964ca03c2b9144499fb02b00bffc6 to your computer and use it in GitHub Desktop.
in process
$ = jQuery.noConflict();
function menuRespuesta(id){
var htmlTextArea = `<div class="c-wrap-menu b1">
<span class="c-open-menu">
<span class="fa fa-caret-down"></span>
</span>
<div class="c-menu-desplegable">
<h3 class="c-menu-title">Tipo de respuesta</h3>
<ul class="c-menu-list">
<li>
<a data-id="'+id+'" data-type="textarea" class="c-select-tipo active">Área de texto</a>
</li>
<li>
<a data-id="'+id+'" data-type="checkbox" onclick="openModal(this)" class="c-select-tipo c-open-modal">Checkbox</a>
</li>
<li>
<a data-id="'+id+'" data-type="option" onclick="openModal(this)" class="c-select-tipo c-open-modal">Seleccionar opción</a>
</li>
</ul>
</div>
</div>`;
return htmlTextArea;
}
function modalBox(id,textButton,typeResponse){
var htmlModalBox = '<div class="modalWrap modal-cuestionario">'+
'<div class="modalOverlay"></div>'+
'<div class="wrapBoxInner">'+
'<div class="boxContent">'+
'<h3 class="c-title-filling">Tipo de Respuesta:<span>'+textButton+'</span></h3>'+
'<div class="c-wrap-filling" data-id="'+id+'">'+
'<div class="c-inputs-fill">'+
'<div class="c-input-fill-item">'+
'<input type="text" placeholder="Escriba una opcion">'+
'</div>'+
'</div>'+
'<div class="c-input-buttons right">'+
'<button onclick="addMoreInput()" class="c-btn">Agregar +</button>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="boxControls">'+
'<button data-id="'+id+'" data-type="'+typeResponse+'" onclick="saveModal(this)" class="saved-modal c-btn">'+
'Guardar'+
'</button>'+
'<button data-id="'+id+'" onclick="cancelModal()" class="cancel-modal c-btn">'+
'Cancelar'+
'</button>'+
'</div>'+
'</div>'+
'</div>';
return htmlModalBox;
}
function addMoreInput(){
var currentInput = document.querySelectorAll(".c-input-fill-item");
var lastInput = currentInput.length - 1;
var htmlInput ='<div class="c-input-fill-item">'+
'<input type="text" placeholder="Escriba una opcion">'+
'</div>';
currentInput[lastInput].insertAdjacentHTML('afterend', htmlInput);
console.log("lastInput",lastInput)
}
function openModal(event){
var dataId = event;
var id = dataId.getAttribute("data-id");
var textButton = dataId.textContent;
var typeResponse = dataId.getAttribute("data-type")
var ubicationModal = document.querySelector("#wpwrap");
console.log("body",textButton)
ubicationModal.insertAdjacentHTML('afterend', modalBox(id,textButton,typeResponse));
console.log("idxxdataid",dataId)
console.log("idxx",id)
}
function cancelModal(){
var elementModal = document.querySelector(".modalWrap");
elementModal.remove();
}
function saveModal(event){
var btnSave = event;
var btnSaveId = btnSave.getAttribute("data-id");
var typeValueResponse = btnSave.getAttribute("data-type");
console.log("btnSave",btnSaveId);
var inputsElements = document.querySelectorAll(".c-input-fill-item input");
console.log("inputsElements",inputsElements)
var inputValuesData ={
options:[],
parameters:typeValueResponse
};
if (inputsElements[0].value.trim() === "") {
alert("Debe llenar al menos una opción");
}else{
for(var e = 0; e < inputsElements.length; e++ ){
var inputValue = inputsElements[e];
if (inputValue.value.trim() === "") {
}else{
console.log("ddddd",inputValue.value);
var infod ={};
infod['value'] = inputValue.value;
console.log("infod",infod)
inputValuesData.options.push(infod);
}
}
var dataForSaved = document.querySelector('textarea[id="'+btnSaveId+'"]');
dataForSaved.value = JSON.stringify(inputValuesData);
cancelModal();
console.log("inputValuesData",inputValuesData)
}
}
// bloque 1: recorriendo los inputs para agregar menu tipo de respuesta
var itemsQuestions = document.querySelectorAll(".tipo_respuesta textarea");
for(var i = 0; i < itemsQuestions.length; i++ ){
var element = itemsQuestions[i];
var hasValue = element.value
var parentTextarea = element.closest(".acf-input");
var idElement = element.getAttribute("id");
if (hasValue.length > 0) {
parentTextarea.insertAdjacentHTML('afterend', menuRespuesta(idElement));
}
}
$(document).ready(function() {
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment