ver 1.4.0
This commit is contained in:
dwindown
395
assets/admin-editor.js
Normal file
395
assets/admin-editor.js
Normal file
@@ -0,0 +1,395 @@
|
||||
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(`
|
||||
<textarea id="link_data" class="form-control w-100 d-none">${JSON.stringify(result)}</textarea>
|
||||
`);
|
||||
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 += '<option value="'+k+'">'+k+'</option>';
|
||||
});
|
||||
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(`
|
||||
<textarea id="link_data" class="form-control w-100">Loading Data....</textarea>
|
||||
`);
|
||||
},
|
||||
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(`
|
||||
<div class="dw-checker-field">
|
||||
<label for="`+$(p).find('.field-id').val()+`" style="color: `+$('.field-label-color').val()+`;display: `+$('.field-display-label').val()+`;">`+$(p).find('.field-label').val()+`</label>
|
||||
<input name="`+$(p).find('field-id').val()+`" placeholder="`+$(p).find('.field-placeholder').val()+`"/>
|
||||
</div>
|
||||
`);
|
||||
}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 += '<option value="'+r+'">'+r+'</option>';
|
||||
});
|
||||
var exist = $('.dw-checker-field');
|
||||
$('.dw-checker-form-fields').append(`
|
||||
<div class="dw-checker-field">
|
||||
<label for="`+$(p).find('field-id').val()+`" style="color: `+$('.field-label-color').val()+`;display: `+$('.field-display-label').val()+`;">`+$(p).find('.field-label').val()+`</label>
|
||||
<select name="`+$(p).find('field-id').val()+`" placeholder="`+$(p).find('.field-placeholder').val()+`">
|
||||
<option value="">`+$(p).find('.field-placeholder').val()+`</option>
|
||||
`+options+`
|
||||
</select>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
});
|
||||
}
|
||||
$('.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 += '<table class="dw-checker-result-table" style="border-color: '+$('.result-divider').val()+'; border-width: '+$('.result-divider-width').val()+'px;"><tbody>';
|
||||
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 = '<button href="'+r+'" class="dw-checker-value-button">'+$('#output-buttontext-'+id).val()+'</button>';
|
||||
}
|
||||
resultDiv += '<tr>';
|
||||
resultDiv += '<th style="border-color: '+$('.result-divider').val()+'; border-width: '+$('.result-divider-width').val()+'px;"><span class="dw-checker-result-header" style="color:'+header_color+'">'+q+'</span></th>';
|
||||
resultDiv += '<td style="border-color: '+$('.result-divider').val()+'; border-width: '+$('.result-divider-width').val()+'px;"><span class="dw-checker-result-value" style="color:'+value_color+'">'+prefix+r+'</span></td>';
|
||||
resultDiv += '</tr>';
|
||||
});
|
||||
resultDiv += '</tbody></table>';
|
||||
}
|
||||
});
|
||||
}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 = '<a href="'+r+'" class="dw-checker-value-button">'+$('#output-buttontext-'+id).val()+'</a>';
|
||||
}
|
||||
resultDiv += '<div class="dw-checker-result-div" style="border-bottom-color: '+$('.result-divider').val()+'; border-bottom-width: '+$('.result-divider-width').val()+'px;">';
|
||||
resultDiv += '<div class="result-header"><span class="dw-checker-result-header" style="color:'+header_color+';">'+q+'</span></div>';
|
||||
resultDiv += '<div class="result-value"><span class="dw-checker-result-value" style="color:'+value_color+';">'+prefix+r+'</span></div>';
|
||||
resultDiv += '</div>';
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
$('.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('<div class="card shadow repeater-card gap-2">'+content+'</div>');
|
||||
$('.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();
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user