Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) { switch (operator) { case '==': return (v1 == v2) ? options.fn(this) : options.inverse(this); case '===': return (v1 === v2) ? options.fn(this) : options.inverse(this); case '!=': return (v1 != v2) ? options.fn(this) : options.inverse(this); case '!==': return (v1 !== v2) ? options.fn(this) : options.inverse(this); case '<': return (v1 < v2) ? options.fn(this) : options.inverse(this); case '<=': return (v1 <= v2) ? options.fn(this) : options.inverse(this); case '>': return (v1 > v2) ? options.fn(this) : options.inverse(this); case '>=': return (v1 >= v2) ? options.fn(this) : options.inverse(this); default: return options.inverse(this); } }); jQuery(document).ready(function($){ function get_the_header(data) { var link_format = $('.sheet-url').val(); if (link_format === '') { return false; } // Determine the format by checking the last few characters var the_format = link_format.slice(-3); var lines = data.split("\n"); var result = []; var delimiter = ','; // Set the correct delimiter based on the format if (the_format === 'csv') { delimiter = ','; } else if (the_format === 'tsv') { delimiter = "\t"; } // Read headers var headers = lines[0].split(delimiter).map(header => header.trim()); // Trim any whitespace // Process each line and create objects for (var i = 1; i < lines.length; i++) { var obj = {}; var currentLine = lines[i].split(delimiter); // Only process if the line has data if (currentLine.length > 1 || currentLine[0] !== '') { for (var j = 0; j < headers.length; j++) { obj[headers[j]] = (currentLine[j] !== undefined) ? currentLine[j].trim() : null; // Handle missing values } result.push(obj); } } setfields(result); // Append the result as a JSON string in a textarea $('.checker-preview').append(` `); append_fields_to_preview(); } function setfields(data){ $.each(data, function(i, j){ if(i == 0){ var options = ''; $.each(j, function(k,l){ var id = 'checker-item-'+k.replace(' ', '_').replace('.', '_').toLowerCase(); options += ''; }); var exist = $('.repeater-card'); if(!$('#post_id').val()){ $('.repeater-form-field').append($('#repeater-template-empty').html()); $('.select-kolom, .field-placeholder').trigger('change'); append_fields_to_preview(); }else{ setTimeout(() => { $.ajax({ type: 'post', url: '/wp-admin/admin-ajax.php', data: { action: 'load_repeater_field_card', pid: $('#post_id').val(), json: $('#link_data').val() }, success: function (response) { console.log(response); // renderRepeaterFields(response); // Ambil template dari script di atas var source = $("#repeater-template").html(); var template = Handlebars.compile(source); // Render template dengan data respons dari server var html = template({ fields: response }); // Masukkan hasil render ke dalam DOM $('.repeater-form-field').html(html); append_fields_to_preview(); // Panggil fungsi tambahan setelah render } }); }, 2500); } $('.checker-preview > *').removeClass('d-none'); setTimeout(() => { $.ajax({ type: 'post', url: '/wp-admin/admin-ajax.php', data: { action: 'load_output_setting', pid: $('#post_id').val(), json: $('#link_data').val() }, success: function (response) { if (response.success) { // Compile the Handlebars template var source = $("#output-template").html(); var template = Handlebars.compile(source); // Pass data to the template var html = template(response.data); // Append the rendered HTML $('.result-value-output').html(html); // You can call other functions after the template is rendered append_fields_to_preview(); } else { console.log('Error: ', response.data); } } }); }, 2500); } }); } $('.sheet-url').on('change', function(){ if($(this).is(':valid') && $(this).val() !== ''){ $('tr.has-link').slideDown(); $('#checker_preview.postbox').slideDown(); $('#dummy').hide(); $.ajax({ type: "GET", url: $(this).val(), dataType: "text", beforeSend: function(){ $('.checker-preview').append(` `); }, success: function(data) { console.log(data); $('.checker-preview textarea').remove(); get_the_header(data); } }); }else{ $('tr.has-link').slideUp(); $('#dummy').show(); $('#checker_preview.postbox').slideUp(); } }); $('.sheet-url').trigger('change'); function append_fields_to_preview() { var form_card = $('.repeater-card'); $('.dw-checker-form-fields').html(''); if(form_card.length > 0){ $.each(form_card, function(o,p){ if($(p).find('.select-field-type').val() == 'text'){ $('.dw-checker-form-fields').append(`
`); }else if($(p).find('.select-field-type').val() == 'select') { var jsonData = JSON.parse($('#link_data').val()); var uniqueValues = []; $.each(jsonData, function(index, item) { var skema = item[$(p).find('.select-kolom').val()]; if ($.inArray(skema, uniqueValues) === -1) { uniqueValues.push(skema); } }); // console.log(uniqueValues); var options = ''; $.each(uniqueValues, function(q, r){ options += ''; }); var exist = $('.dw-checker-field'); $('.dw-checker-form-fields').append(`
`); } }); } $('.dw-checker-wrapper').attr('style', 'background-color:'+$('.card-background').val()+$('.card-bg-opacity').val()+'; padding: '+$('.card-padding').val()+'em; border-radius: '+$('.card-border-radius').val()+'em; width: '+$('.card-width').val()+'px; box-shadow: '+$('.card-box-shadow').val()+' '+$('.card-box-shadow-color').val()+';'); $('.dw-checker-title').attr('style', 'color: '+$('.card-title').val()+';text-align: '+$('.card-title-align').val()+';').text($('#title').val()); $('.dw-checker-description').attr('style', 'color: '+$('.card-description').val()+';text-align: '+$('.card-description-align').val()+';').html($('#description').val()); $('.dw-checker-divider').attr('style', 'opacity: .25; border-color: '+$('.card-divider').val()+'; border-width: '+$('.card-divider-width').val()+';'); $('.search-button').text($('.search-btn-text').val()).attr('style', 'background-color: '+$('.search-btn-bg-color').val()+'; color: '+$('.search-btn-text-color').val()+';'); $('.dw-checker-form-button').attr('style', 'justify-content: '+$('.search-btn-position').val() ); $('.back-button').text($('.back-btn-text').val()).attr('style', 'background-color: '+$('.back-btn-bg-color').val()+'; color: '+$('.back-btn-text-color').val()+';'); $('.dw-checker-result-button').attr('style', 'justify-content: '+$('.back-btn-position').val() ); if($('#link_data').val()){ var jsonData = JSON.parse($('#link_data').val()); var resultData = []; var resultDiv = ''; if($('.result-display-type').val() == 'table'){ $.each(jsonData, function(index, item) { if(index == 0){ resultData = item; resultDiv += ''; var header_color = $('#result_header').val(); var value_color = $('#result_value').val(); $.each(item, function(q,r){ var id = q.replace(' ', '_').replace('.', '_').toLowerCase(); var prefix = ''; if($('#output-prefix-'+id).val()){ prefix = $('#output-prefix-'+id).val(); } if($('#output-visibility-'+id).val() == 'yes'){ return; } if($('#output-type-'+id).val() == 'link_button'){ r = ''; } resultDiv += ''; resultDiv += ''; resultDiv += ''; resultDiv += ''; }); resultDiv += '
'+q+''+prefix+r+'
'; } }); }else if($('.result-display-type').val() == 'div') { $.each(jsonData, function(index, item) { if(index == 0){ resultData = item; var header_color = $('#result_header').val(); var value_color = $('#result_value').val(); $.each(item, function(q,r){ var id = q.replace(' ', '_').replace('.', '_').toLowerCase(); var prefix = ''; if($('#output-prefix-'+id).val()){ prefix = $('#output-prefix-'+id).val(); } if($('#output-visibility-'+id).val() == 'yes'){ return; } if($('#output-type-'+id).val() == 'link_button'){ r = ''+$('#output-buttontext-'+id).val()+''; } resultDiv += '
'; resultDiv += '
'+q+'
'; resultDiv += '
'+prefix+r+'
'; resultDiv += '
'; }); } }); } $('.dw-checker-results').html(resultDiv); } $('.dw-checker-value-button').attr('style', 'background-color: '+$('.search-btn-bg-color').val()+'; color: '+$('.search-btn-text-color').val()+';'); } setInterval(() => { if($('#link').val() !== '' && $('#link_data').val() !== ''){ append_fields_to_preview(); } }, $('#preview-interval').val() * 1000); $('.set-preview').on('click', function(e){ e.preventDefault(); append_fields_to_preview(); }); $(document).on('click', '.add-form-card', function(e){ e.preventDefault(); // var content = $(this).parents('.card').html(); var content = $('#repeater-template').html(); $('.repeater-form-field').append('
'+content+'
'); $('.select-kolom').trigger('change'); }); $(document).on('click', '.delete-form-card', function(e){ e.preventDefault(); $(this).parents('.card').remove(); }); $(document).on('change', '.select-kolom', function(){ $(this).parents('.card').find('.field-id').val('_'+$(this).val().replace(' ', '_').replace('.', '_').toLowerCase()).trigger('change'); $(this).parents('.card').find('.field-label').val($(this).val()); $(this).parents('.card').find('.field-placeholder').val($(this).val()); }); $(document).on('change', '.field-id', function(){ var value = $(this).val(); var card = $(this).parents('.card'); card.find('.select-kolom').attr('name', 'checker[fields]['+value+'][kolom]'); card.find('.select-field-type').attr('name', 'checker[fields]['+value+'][type]'); card.find('.field-label').attr('name', 'checker[fields]['+value+'][label]'); card.find('.field-placeholder').attr('name', 'checker[fields]['+value+'][placeholder]'); card.find('.select-match-type').attr('name', 'checker[fields]['+value+'][match]'); }); $(".repeater-form-field").sortable({ change: function(event, ui) { ui.placeholder.css({ visibility: 'visible', border : '2px dashed #cccccc', borderRadius: '5px', height: '15rem' }); } }); $('#title').on('input', function(){ $('.dw-checker-title').text($(this).val()); }); $('#description').on('input', function(){ $('.dw-checker-description').html($(this).val()); }); $(document).on('click', '.output-value-visibility', function(){ if($(this).is(':checked')){ $(this).val('yes'); }else{ $(this).val('no'); } }); $(document).on('change', '.output-type', function(){ if($(this).val().includes('button')){ $(this).closest('.row').siblings('.type-button-link').show(); }else{ $(this).closest('.row').siblings('.type-button-link').hide(); } }); $('.option-nav-menu').on('click', function(){ var table = $(this).data('table'); $('.option-nav-menu').removeClass('active'); $(this).addClass('active'); $('.checker-settings-table').hide(); if(table == '#checker-card'){ $('#checker-card').show(); }else if(table == '#checker-result'){ $('#checker-result').show(); }else if(table == '#checker-security'){ $('#checker-security').show(); }else if(table == '#checker-form'){ $('#checker-form').show(); } }); $('.result-display-type').on('change', function(){ $('tr.setting-card-column').hide(); if($(this).val() == 'card'){ $('tr.setting-card-column').show(); } }); });