ver 1.4.0
This commit is contained in:
dwindown
753
assets/admin-editor-interactions.js
Normal file
753
assets/admin-editor-interactions.js
Normal file
@@ -0,0 +1,753 @@
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
// Register the 'formatValue' helper to replace empty values with a dash
|
||||
Handlebars.registerHelper('formatValue', function (value) {
|
||||
return value === undefined || value === null || value.trim() === '' ? '-' : value;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('eq', function(a, b) {
|
||||
return a === b; // Return true or false
|
||||
});
|
||||
|
||||
// Register the 'getStyle' helper for general border styles
|
||||
Handlebars.registerHelper('getStyle', function (borderColor, borderWidth) {
|
||||
const safeBorderColor = borderColor || 'black'; // Default fallback color
|
||||
const safeBorderWidth = borderWidth || '1'; // Default fallback width
|
||||
return `style="border-color: ${safeBorderColor}; border-width: ${safeBorderWidth}px;"`;
|
||||
});
|
||||
|
||||
// Register the 'getStyleHeader' helper for header-specific styles
|
||||
Handlebars.registerHelper('getStyleHeader', function (borderColor, borderWidth, headerColor) {
|
||||
const safeBorderColor = borderColor || 'black'; // Default fallback color
|
||||
const safeBorderWidth = borderWidth || '1'; // Default fallback width
|
||||
const safeHeaderColor = headerColor || 'black'; // Default fallback text color
|
||||
return `style="border-color: ${safeBorderColor}; border-width: ${safeBorderWidth}px; color: ${safeHeaderColor};"`;
|
||||
});
|
||||
|
||||
// Register the 'getStyleValue' helper for value-specific styles
|
||||
Handlebars.registerHelper('getStyleValue', function (borderColor, borderWidth, valueColor) {
|
||||
const safeBorderColor = borderColor || 'black'; // Default fallback color
|
||||
const safeBorderWidth = borderWidth || '1'; // Default fallback width
|
||||
const safeValueColor = valueColor || 'black'; // Default fallback text color
|
||||
return `style="border-color: ${safeBorderColor}; border-width: ${safeBorderWidth}px; color: ${safeValueColor};"`;
|
||||
});
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
|
||||
// Function to fetch and process Google Sheet data
|
||||
function fetchAndStoreSheetData() {
|
||||
const sheetUrl = $('#link').val(); // Get the URL from the input field
|
||||
const isTSV = sheetUrl.includes('output=tsv'); // Detect format (TSV or CSV)
|
||||
|
||||
$.ajax({
|
||||
url: sheetUrl,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
const parsedData = parseSheetData(response, isTSV ? '\t' : ',');
|
||||
const headers = parsedData.shift().map(header => header.trim()); // Clean headers
|
||||
|
||||
// Clean data rows and create an array of objects
|
||||
const cleanedData = parsedData.map(row => {
|
||||
return row.reduce((obj, value, index) => {
|
||||
obj[headers[index]] = value.trim(); // Clean each value
|
||||
return obj;
|
||||
}, {});
|
||||
});
|
||||
|
||||
// Store headers and full data in localStorage
|
||||
localStorage.setItem('sheetHeaders', JSON.stringify(headers));
|
||||
localStorage.setItem('sheetData', JSON.stringify(cleanedData));
|
||||
|
||||
// console.log('Headers:', headers); // For debugging
|
||||
// console.log('Complete Data:', cleanedData); // For debugging
|
||||
},
|
||||
error: function (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to parse raw data into an array using a delimiter
|
||||
function parseSheetData(data, delimiter) {
|
||||
return data.split('\n').map(row => row.split(delimiter));
|
||||
}
|
||||
|
||||
$('#link').on('change', function(){
|
||||
if($(this).val() !== ''){
|
||||
$('tr.has-link').slideDown();
|
||||
$('#checker_preview.postbox').slideDown();
|
||||
$('#dummy').hide();
|
||||
fetchAndStoreSheetData();
|
||||
}else{
|
||||
$('tr.has-link').slideUp();
|
||||
$('#dummy').show();
|
||||
$('#checker_preview.postbox').slideUp();
|
||||
}
|
||||
});
|
||||
|
||||
$('#link').trigger('change');
|
||||
|
||||
function getStoredSheetData() {
|
||||
const data = JSON.parse(localStorage.getItem('sheetData'));
|
||||
|
||||
if (data) {
|
||||
// console.log('Headers:', headers);
|
||||
return data;
|
||||
} else {
|
||||
console.error('No stored data found.');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getStoredSheetHeaders() {
|
||||
const headers = JSON.parse(localStorage.getItem('sheetHeaders'));
|
||||
|
||||
if (headers) {
|
||||
// console.log('Headers:', headers);
|
||||
return headers;
|
||||
} else {
|
||||
console.error('No stored data found.');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Example call to retrieve stored sheet data
|
||||
const sheetData = getStoredSheetData();
|
||||
const sheetHeaders = getStoredSheetHeaders();
|
||||
|
||||
$('.option-nav-menu').on('click', function(){
|
||||
var table = $(this).data('table');
|
||||
$('.option-nav-menu').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('.table').hide();
|
||||
$(table).show();
|
||||
|
||||
if(table == '#checker-result' && $.inArray($('.result-display-type').val(), ['standard-table', 'cards']) === -1){
|
||||
$('#dw-checker-form').hide();
|
||||
$('#dw-checker-result').show();
|
||||
}else{
|
||||
$('#dw-checker-form').show();
|
||||
$('#dw-checker-result').hide();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function appendFieldsToPreview() {
|
||||
var form_card = $('.repeater-card');
|
||||
|
||||
// Prepare data for fields
|
||||
var fieldsData = [];
|
||||
|
||||
if (form_card.length > 0) {
|
||||
$.each(form_card, function (index, card) {
|
||||
var fieldType = $(card).find('.select-field-type').val();
|
||||
var fieldId = $(card).find('.field-id').val();
|
||||
var fieldLabel = $(card).find('.field-label').val();
|
||||
var fieldPlaceholder = $(card).find('.field-placeholder').val();
|
||||
var selectedKolom = $(card).find('.select-kolom').val(); // Get selected column
|
||||
|
||||
// Determine if it's a text or select field
|
||||
if (fieldType === 'text') {
|
||||
fieldsData.push({
|
||||
fieldId: fieldId,
|
||||
fieldLabel: fieldLabel,
|
||||
fieldPlaceholder: fieldPlaceholder,
|
||||
fieldLabelColor: $('.field-label-color').val(),
|
||||
fieldDisplayLabel: $('.field-display-label').val(),
|
||||
isTextField: true,
|
||||
});
|
||||
} else if (fieldType === 'select') {
|
||||
let uniqueValues = [];
|
||||
|
||||
if (sheetHeaders.includes(selectedKolom)) { // Check if selectedKolom exists in sheetHeaders
|
||||
// Extract unique values from the selected column in sheetData
|
||||
$.each(sheetData, function (rowIndex, row) {
|
||||
const value = row[selectedKolom]; // Access the value using the column name as the key
|
||||
|
||||
// Check if value exists and is not empty
|
||||
if (value !== undefined && value !== null && value.trim() !== '' && value !== selectedKolom) {
|
||||
const trimmedValue = value.trim(); // Trim whitespace
|
||||
// Add to uniqueValues if it doesn't already exist
|
||||
if (!uniqueValues.includes(trimmedValue)) {
|
||||
uniqueValues.push(trimmedValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fieldsData.push({
|
||||
fieldId: fieldId,
|
||||
fieldLabel: fieldLabel,
|
||||
fieldPlaceholder: fieldPlaceholder,
|
||||
fieldLabelColor: $('.field-label-color').val(),
|
||||
fieldDisplayLabel: $('.field-display-label').val(),
|
||||
uniqueValues: uniqueValues,
|
||||
isSelectField: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Compile and render fields template
|
||||
var fieldsTemplateSource = $('#fields-template').html();
|
||||
var fieldsTemplate = Handlebars.compile(fieldsTemplateSource);
|
||||
$('.dw-checker-form-fields').html(fieldsTemplate({ fields: fieldsData }));
|
||||
|
||||
// Handle styles and other elements
|
||||
setStyles();
|
||||
|
||||
// Handle results display
|
||||
handleResultsDisplay();
|
||||
}
|
||||
|
||||
function setStyles() {
|
||||
$('.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() + ';');
|
||||
|
||||
// Button styles
|
||||
setButtonStyles();
|
||||
}
|
||||
|
||||
function setButtonStyles() {
|
||||
$('.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());
|
||||
}
|
||||
|
||||
function getColumnSettings() {
|
||||
const columnSettings = {};
|
||||
$('.card').each(function () {
|
||||
const columnName = $(this).find('input[name*="[key]"]').val();
|
||||
columnSettings[columnName] = {
|
||||
hide: $(this).find('.output-value-visibility').is(':checked'),
|
||||
type: $(this).find('.output-type').val(),
|
||||
prefix: $(this).find('input[name*="[prefix]"]').val(),
|
||||
button_text: $(this).find('input[name*="[button_text]"]').val()
|
||||
};
|
||||
});
|
||||
return columnSettings;
|
||||
}
|
||||
|
||||
// Preprocess sheetData based on column settings
|
||||
function preprocessSheetData(sheetData, columnSettings) {
|
||||
return sheetData.map(row => {
|
||||
const processedRow = {};
|
||||
for (const [key, value] of Object.entries(row)) {
|
||||
if (!columnSettings[key]?.hide) {
|
||||
processedRow[key] = value;
|
||||
}
|
||||
}
|
||||
return processedRow;
|
||||
});
|
||||
}
|
||||
|
||||
// Handlebars helpers
|
||||
Handlebars.registerHelper('getColumnSetting', function (columnName, settingKey, value) {
|
||||
// Check if the value is empty
|
||||
if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
|
||||
return ''; // Return a dash for empty values
|
||||
}
|
||||
|
||||
// Get column settings
|
||||
const columnSettings = getColumnSettings();
|
||||
return columnSettings[columnName]?.[settingKey];
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('getValueWithPrefix', function (columnName) {
|
||||
const columnSettings = getColumnSettings();
|
||||
const prefix = columnSettings[columnName]?.prefix || '';
|
||||
return `${prefix}${this[columnName]}`;
|
||||
});
|
||||
|
||||
function handleResultsDisplay() {
|
||||
if (sheetData.length > 0) {
|
||||
// Extract column settings
|
||||
const columnSettings = getColumnSettings();
|
||||
|
||||
// Preprocess sheetData based on column settings
|
||||
const processedSheetData = preprocessSheetData(sheetData, columnSettings);
|
||||
const displayTypeSet = $('.result-display-type').val();
|
||||
const cardType = $('.result-display-card-type').val(); // Get card type
|
||||
|
||||
$('div#dw-checker-form > .dw-checker-wrapper').removeClass('standard-table vertical-table cards div').addClass(displayTypeSet+'-output-type');
|
||||
|
||||
console.log(cardType);
|
||||
|
||||
// Set row limits based on display type
|
||||
let limitedData;
|
||||
if (displayTypeSet === 'standard-table') {
|
||||
limitedData = processedSheetData.slice(0, 30); // Show 30 rows for standard-table
|
||||
} else {
|
||||
if (displayTypeSet === 'cards' && cardType === 'row'){
|
||||
limitedData = processedSheetData.slice(0, 10);
|
||||
}else{
|
||||
limitedData = processedSheetData.slice(0, 3); // Show 3 rows for other outputs
|
||||
}
|
||||
}
|
||||
|
||||
// Prepare data for Handlebars template
|
||||
const resultsData = {
|
||||
displayType: displayTypeSet,
|
||||
cardType: cardType, // Pass card type to the template
|
||||
columnHeaders: Object.keys(limitedData[0] || {}), // Column headers for standard table
|
||||
results: limitedData,
|
||||
resultDivider: $('.result-divider').val() || 'black', // Default fallback
|
||||
resultDividerWidth: $('.result-divider-width').val() || '1', // Default fallback
|
||||
headerColor: $('#result_header').val() || 'black', // Default fallback
|
||||
valueColor: $('#result_value').val() || 'black' // Default fallback
|
||||
};
|
||||
|
||||
// Debugging logs to verify data
|
||||
console.log('Results Data:', resultsData);
|
||||
|
||||
// Determine which container to render into
|
||||
let targetContainer;
|
||||
if (['standard-table', 'cards'].includes(displayTypeSet)) {
|
||||
targetContainer = $('#dw-checker-outside-results');
|
||||
targetContainer.show(); // Show the outside container
|
||||
$('.dw-checker-results').hide(); // Hide the standard results container
|
||||
targetContainer = targetContainer.find('.dw-checker-wrapper');
|
||||
// Do not hide the form
|
||||
} else {
|
||||
targetContainer = $('.dw-checker-results');
|
||||
targetContainer.show(); // Show the standard results container
|
||||
$('#dw-checker-outside-results').hide(); // Hide the outside container
|
||||
// Hide the form (if needed)
|
||||
}
|
||||
|
||||
// Compile and render the appropriate template
|
||||
let renderedResults = '';
|
||||
switch (displayTypeSet) {
|
||||
case 'vertical-table':
|
||||
const verticalTableTemplateSource = $('#vertical-table-template').html();
|
||||
if (!verticalTableTemplateSource) {
|
||||
console.error('Vertical table template is missing or undefined.');
|
||||
return;
|
||||
}
|
||||
const verticalTableTemplate = Handlebars.compile(verticalTableTemplateSource);
|
||||
renderedResults = verticalTableTemplate(resultsData);
|
||||
break;
|
||||
|
||||
case 'div':
|
||||
const divTemplateSource = $('#div-template').html();
|
||||
if (!divTemplateSource) {
|
||||
console.error('Div template is missing or undefined.');
|
||||
return;
|
||||
}
|
||||
const divTemplate = Handlebars.compile(divTemplateSource);
|
||||
renderedResults = divTemplate(resultsData);
|
||||
break;
|
||||
|
||||
case 'standard-table':
|
||||
const standardTableTemplateSource = $('#standard-table-template').html();
|
||||
if (!standardTableTemplateSource) {
|
||||
console.error('Standard table template is missing or undefined.');
|
||||
return;
|
||||
}
|
||||
const standardTableTemplate = Handlebars.compile(standardTableTemplateSource);
|
||||
renderedResults = standardTableTemplate(resultsData);
|
||||
break;
|
||||
|
||||
case 'cards':
|
||||
const cardsTemplateSource = $('#cards-template').html();
|
||||
if (!cardsTemplateSource) {
|
||||
console.error('Cards template is missing or undefined.');
|
||||
return;
|
||||
}
|
||||
const cardsTemplate = Handlebars.compile(cardsTemplateSource);
|
||||
renderedResults = cardsTemplate(resultsData);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error('Unknown display type:', displayTypeSet);
|
||||
return;
|
||||
}
|
||||
|
||||
// Insert rendered HTML into the target container
|
||||
targetContainer.html(renderedResults);
|
||||
|
||||
// Initialize DataTables for standard table
|
||||
if (displayTypeSet === 'standard-table') {
|
||||
$('.dw-standard-table').DataTable({
|
||||
paging: true,
|
||||
pageLength: 10,
|
||||
searching: false, // Hide search input
|
||||
info: false, // Hide "Showing X of Y entries"
|
||||
scrollX: true, // Enable horizontal scrolling
|
||||
responsive: true
|
||||
});
|
||||
initializePagination(targetContainer);
|
||||
}else if(displayTypeSet === 'cards'){
|
||||
initializeCardPagination();
|
||||
}
|
||||
} else {
|
||||
console.log('No data available in sheetData.');
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination logic for cards
|
||||
function initializeCardPagination() {
|
||||
const pages = $('.result-page');
|
||||
let currentPage = 0;
|
||||
|
||||
// Show the first page
|
||||
$(pages[currentPage]).show();
|
||||
|
||||
// Update pagination controls
|
||||
$('.current-page').text(`Data ${currentPage + 1}`);
|
||||
|
||||
// Previous button
|
||||
$('.prev-page').on('click', function () {
|
||||
if (currentPage > 0) {
|
||||
$(pages[currentPage]).hide();
|
||||
currentPage--;
|
||||
$(pages[currentPage]).show();
|
||||
$('.current-page').text(`Data ${currentPage + 1}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Next button
|
||||
$('.next-page').on('click', function () {
|
||||
if (currentPage < pages.length - 1) {
|
||||
$(pages[currentPage]).hide();
|
||||
currentPage++;
|
||||
$(pages[currentPage]).show();
|
||||
$('.current-page').text(`Data ${currentPage + 1}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initializePagination(container) {
|
||||
let currentPage = 0;
|
||||
const pages = container;
|
||||
const totalPages = pages.length;
|
||||
|
||||
// Show the first page initially
|
||||
pages.hide();
|
||||
$(pages[currentPage]).show();
|
||||
|
||||
// Update pagination controls
|
||||
$('.current-page').text(`Data #${currentPage + 1}`);
|
||||
$('.prev-page').prop('disabled', currentPage === 0);
|
||||
$('.next-page').prop('disabled', currentPage === totalPages - 1);
|
||||
|
||||
// Previous button click handler
|
||||
$('.prev-page').on('click', () => {
|
||||
if (currentPage > 0) {
|
||||
currentPage--;
|
||||
updatePage(pages, currentPage, totalPages);
|
||||
}
|
||||
});
|
||||
|
||||
// Next button click handler
|
||||
$('.next-page').on('click', () => {
|
||||
if (currentPage < totalPages - 1) {
|
||||
currentPage++;
|
||||
updatePage(pages, currentPage, totalPages);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updatePage(pages, currentPage, totalPages) {
|
||||
pages.hide();
|
||||
$(pages[currentPage]).show();
|
||||
$('.current-page').text(`Data ${currentPage + 1}`);
|
||||
$('.prev-page').prop('disabled', currentPage === 0);
|
||||
$('.next-page').prop('disabled', currentPage === totalPages - 1);
|
||||
}
|
||||
|
||||
|
||||
// Initial call to render preview
|
||||
appendFieldsToPreview();
|
||||
|
||||
// Set an initial interval for updating the preview
|
||||
// let preview_interval = setInterval(() => {
|
||||
// if ($('#link').val() !== '' && $('#link_data').val() !== '') {
|
||||
// appendFieldsToPreview();
|
||||
// }
|
||||
// }, $('#preview-interval').val() * 1000);
|
||||
|
||||
// Change event for updating the interval
|
||||
$('#preview-interval').on('change', function () {
|
||||
// clearInterval(preview_interval); // Clear the existing interval
|
||||
|
||||
// Set a new interval without redeclaring 'const'
|
||||
// preview_interval = setInterval(() => {
|
||||
// if ($('#link').val() !== '' && $('#link_data').val() !== '') {
|
||||
// appendFieldsToPreview();
|
||||
// }
|
||||
// }, $('#preview-interval').val() * 1000);
|
||||
});
|
||||
|
||||
// Click event for setting preview manually
|
||||
$('.set-preview').on('click', function (e) {
|
||||
e.preventDefault(); // Prevent default button behavior
|
||||
appendFieldsToPreview(); // Call to update preview
|
||||
});
|
||||
|
||||
$(document).on('click', '.add-form-card', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Create a new card element using the Handlebars template
|
||||
const cardTemplateSource = $('#repeater-template').html();
|
||||
const cardTemplate = Handlebars.compile(cardTemplateSource);
|
||||
|
||||
// Prepare data for the new card
|
||||
const newCardData = {
|
||||
fields: {
|
||||
newField: {
|
||||
kolom: sheetHeaders, // Populate the 'kolom' select options with headers
|
||||
type: 'text', // Default type
|
||||
label: '', // Empty label for a fresh card
|
||||
placeholder: '', // Empty placeholder for a fresh card
|
||||
match: 'match' // Default match type
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Render the new card using Handlebars
|
||||
const newCardHTML = cardTemplate(newCardData);
|
||||
|
||||
// Append the new card to the repeater form field container
|
||||
$('.repeater-form-field').append(newCardHTML);
|
||||
|
||||
// Trigger change event on select elements if necessary
|
||||
$('.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({
|
||||
// handle: '.move-card', // Use this class as the handle for sorting
|
||||
change: function(event, ui) {
|
||||
ui.placeholder.css({
|
||||
visibility: 'visible',
|
||||
border: '2px dashed #cccccc',
|
||||
borderRadius: '5px',
|
||||
height: '15rem' // Placeholder height
|
||||
});
|
||||
},
|
||||
placeholder: 'ui-state-highlight', // Optional: use a class for styling the placeholder
|
||||
start: function(event, ui) {
|
||||
ui.placeholder.height(ui.item.height()); // Match placeholder height to item being dragged
|
||||
}
|
||||
});
|
||||
|
||||
$('#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');
|
||||
}
|
||||
});
|
||||
|
||||
function setfields() {
|
||||
// Check if sheetData is available
|
||||
if (sheetData.length > 0) {
|
||||
// Extract headers from sheetHeaders
|
||||
const headers = sheetHeaders;
|
||||
|
||||
// Create options for kolom dropdown based on headers
|
||||
let options = '';
|
||||
$.each(headers, function (index, header) {
|
||||
options += `<option value="${header}">${header}</option>`;
|
||||
});
|
||||
|
||||
// Check if there is no post ID
|
||||
if (!$('#post_id').val()) {
|
||||
// Append an empty template for the repeater form field
|
||||
$('.repeater-form-field').append($('#repeater-template-empty').html());
|
||||
$('.select-kolom, .field-placeholder').trigger('change');
|
||||
append_fields_to_preview();
|
||||
} else {
|
||||
// Load existing repeater field cards from post_meta
|
||||
setTimeout(() => {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/wp-admin/admin-ajax.php',
|
||||
data: {
|
||||
action: 'load_repeater_field_card',
|
||||
pid: $('#post_id').val(),
|
||||
headers: sheetHeaders
|
||||
},
|
||||
success: function (response) {
|
||||
|
||||
const selectedColumns = Object.keys(response).map(key => {
|
||||
return {
|
||||
id: key, // Set the id to the key (e.g., _telegram)
|
||||
kolom: response[key].label // Set kolom to the label property
|
||||
};
|
||||
});
|
||||
|
||||
// Compile Handlebars template
|
||||
const source = $("#repeater-template").html();
|
||||
const template = Handlebars.compile(source);
|
||||
|
||||
// Render template with server response data
|
||||
const html = template({ fields: response });
|
||||
|
||||
// Insert rendered HTML into DOM
|
||||
$('.repeater-form-field').html(html);
|
||||
appendFieldsToPreview(); // Call additional function after rendering
|
||||
|
||||
$.each(selectedColumns, function(i, data){
|
||||
const card_id = data.id;
|
||||
$(`[name="checker[fields][${card_id}][kolom]"]`).val(data.kolom).trigger('change');
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
$('.checker-preview > *').removeClass('d-none');
|
||||
|
||||
// Load output settings after a delay
|
||||
setTimeout(() => {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/wp-admin/admin-ajax.php',
|
||||
data: {
|
||||
action: 'load_output_setting',
|
||||
pid: $('#post_id').val(),
|
||||
headers: sheetHeaders
|
||||
},
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
// Compile output template using Handlebars
|
||||
const source = $("#output-template").html();
|
||||
const template = Handlebars.compile(source);
|
||||
|
||||
// Pass data to the output template
|
||||
const html = template(response.data);
|
||||
|
||||
// Append rendered HTML to result value output
|
||||
$('.result-value-output').html(html);
|
||||
|
||||
// Call additional functions after rendering
|
||||
appendFieldsToPreview();
|
||||
} else {
|
||||
console.log('Error:', response.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 2500);
|
||||
} else {
|
||||
console.log('No sheet data available to set fields.');
|
||||
}
|
||||
}
|
||||
|
||||
setfields();
|
||||
|
||||
$(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();
|
||||
}
|
||||
});
|
||||
|
||||
$('.result-display-type').on('change', function(){
|
||||
$('tr.setting-card-column').hide();
|
||||
if($(this).val() == 'cards'){
|
||||
$('tr.setting-card-column').show();
|
||||
}
|
||||
});
|
||||
|
||||
function set_card_output_style() {
|
||||
var check = $('#result-card-output-grid-style');
|
||||
if(check.length > 0){
|
||||
$('#result-card-output-grid-style').append(`
|
||||
:root {
|
||||
--card-output-grid-column-desktop: repeat(${$('[name="checker[result][card_grid][desktop]"]').val()}, 1fr);
|
||||
--card-output-grid-column-tablet: repeat(${$('[name="checker[result][card_grid][tablet]"]').val()}, 1fr);
|
||||
--card-output-grid-column-mobile: repeat(${$('[name="checker[result][card_grid][mobile]"]').val()}, 1fr);
|
||||
}
|
||||
`);
|
||||
}else{
|
||||
$('head').append(`
|
||||
<style id="result-card-output-grid-style">
|
||||
:root {
|
||||
--card-output-grid-column-desktop: repeat(${$('[name="checker[result][card_grid][desktop]"]').val()}, 1fr);
|
||||
--card-output-grid-column-tablet: repeat(${$('[name="checker[result][card_grid][tablet]"]').val()}, 1fr);
|
||||
--card-output-grid-column-mobile: repeat(${$('[name="checker[result][card_grid][mobile]"]').val()}, 1fr);
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
$('.card-column-settings input').on('change blur', function(){
|
||||
set_card_output_style();
|
||||
});
|
||||
|
||||
set_card_output_style();
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user