@@ -0,0 +1,141 @@
$ = 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 ( ) {
} ) ;
zazk revised this gist
nelsson revised this gist