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();
|
||||
|
||||
});
|
||||
317
assets/admin-editor.css
Normal file
317
assets/admin-editor.css
Normal file
@@ -0,0 +1,317 @@
|
||||
#checker_preview.postbox {
|
||||
display:none;
|
||||
}
|
||||
li#menu-posts-checker img {
|
||||
width: 18px;
|
||||
}
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
#checker_options > .inside {
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
label#title-prompt-text {
|
||||
padding: 3px 8px!important;
|
||||
}
|
||||
.inset {
|
||||
box-shadow: inset 3px 3px 15px #33333350, inset -3px -3px 5px #ffffff!important;
|
||||
border-radius: .5rem;
|
||||
padding: 1rem!important;
|
||||
}
|
||||
.inset .card:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
/* .repeater-form-field .card:first-child .delete-form-card {
|
||||
display:none;
|
||||
} */
|
||||
.repeater-form-field:not(:has(.card)) {
|
||||
display: none;
|
||||
}
|
||||
table.checker-setting th {
|
||||
width: 100px !important;
|
||||
border-right: 1px solid lightgrey;
|
||||
}
|
||||
.card.shadow.repeater-card.gap-2,
|
||||
.result-value-output.inset.bg-light > .card {
|
||||
max-width: unset;
|
||||
}
|
||||
/** Preview **/
|
||||
.dw-checker-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.dw-checker-wrapper {
|
||||
background-color: #ccc;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
/* width: 500px; */
|
||||
max-width: 100%;
|
||||
/* box-shadow: 0px 5px 15px -5px #333333; */
|
||||
}
|
||||
.dw-checker-title {
|
||||
font-size:24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dw-checker-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: .5em 0;
|
||||
}
|
||||
.dw-checker-field > label {
|
||||
font-weight: 600;
|
||||
}
|
||||
.dw-checker-field > input, .dw-checker-field > select {
|
||||
height: 38px;
|
||||
border-radius: .5em;
|
||||
border: 1px solid #ccc;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
.dw-checker-buttons {
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
flex: 0 1 fit-content;
|
||||
}
|
||||
.dw-checker-wrapper button {
|
||||
padding: .65em .75em;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.dw-checker-result-div-item {
|
||||
border-bottom-style: solid;
|
||||
padding: .5em 0;
|
||||
}
|
||||
.card-buttons {
|
||||
top: 1em;
|
||||
right: -1em;
|
||||
}
|
||||
input[type=color] {
|
||||
height: 34px;
|
||||
}
|
||||
li.list-group-item.option-nav-menu.mb-0.pointer.active {
|
||||
background-color: white;
|
||||
color: var(--bs-bg-secondary);
|
||||
font-weight: 800;
|
||||
}
|
||||
li.list-group-item.option-nav-menu.mb-0.pointer {
|
||||
background-color: var(--bs-bg-secondary);
|
||||
color: white;
|
||||
}
|
||||
.form-check {
|
||||
display: flex!important;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
/** result **/
|
||||
.dw-checker-results {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
table.dw-checker-result-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dw-checker-results table,
|
||||
.dw-checker-results th,
|
||||
.dw-checker-results td {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.dw-checker-results th,
|
||||
.dw-checker-results td {
|
||||
padding: .75em .5em;
|
||||
}
|
||||
.dw-checker-value-button {
|
||||
border: none;
|
||||
border-radius: .5em;
|
||||
padding: .5em 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.result-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
.dw-checker-result-div {
|
||||
border-bottom-style: solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
padding: .75em 0;
|
||||
}
|
||||
.dw-checker-result-div:last-child{
|
||||
border: none;
|
||||
}
|
||||
|
||||
/** Outside Result Container **/
|
||||
.dw-checker-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) > *:is(:first-child, :nth-child(2)) {
|
||||
flex: 0 0 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) > .dw-checker-divider {
|
||||
display: none;
|
||||
}
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) .dw-checker-form-fields {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
flex-direction: row;
|
||||
max-width: 100%;
|
||||
flex: 1 1 calc(100% - 110px);
|
||||
}
|
||||
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) .dw-checker-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) .dw-checker-buttons.dw-checker-form-button button {
|
||||
height: 100%;
|
||||
}
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) .dw-checker-field {
|
||||
margin: 0!important;
|
||||
flex: -1 0 calc(25% - 3px);
|
||||
width: 100%;
|
||||
}
|
||||
#dw-checker-form > .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) .dw-checker-form-fields *:is(select, input) {
|
||||
min-width: unset!important;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Grid layout for cards */
|
||||
.dw-cards-container > .result-page {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* 4 columns */
|
||||
gap: 16px; /* Space between cards */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dw-card {
|
||||
border: 1px solid #ddd;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dw-card-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dw-card-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dw-card-value {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dw-card-title, .dw-card-value {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Pagination controls */
|
||||
.pagination-controls {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.prev-page,
|
||||
.next-page {
|
||||
padding: 8px 16px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prev-page:hover,
|
||||
.next-page:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.current-page {
|
||||
margin: 0 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/** Standard-Table **/
|
||||
/* Ensure horizontal scrolling for tables */
|
||||
.dw-checker-results-container,
|
||||
#dw-checker-outside-results {
|
||||
overflow-x: auto; /* Enable horizontal scrolling */
|
||||
max-width: 100%; /* Restrict the container width */
|
||||
}
|
||||
|
||||
#dw-checker-outside-results {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#dw-checker-outside-results > .dt-container > .dt-layout-row:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#dw-checker-outside-results > .dt-container > .dt-layout-row:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table.dw-checker-result-table,
|
||||
table.dw-standard-table {
|
||||
width: 100%; /* Full width */
|
||||
min-width: max-content; /* Ensure table expands to fit content */
|
||||
border-collapse: collapse; /* Remove gaps between borders */
|
||||
display: block; /* Ensure proper rendering */
|
||||
table-layout: fixed; /* Prevent misalignment */
|
||||
}
|
||||
|
||||
th, td {
|
||||
white-space: nowrap; /* Prevent text wrapping */
|
||||
padding: 8px; /* Add padding for readability */
|
||||
border: 1px solid #ddd; /* Add borders for clarity */
|
||||
}
|
||||
|
||||
.dw-checker-container:has(.dt-container) .dw-checker-wrapper {
|
||||
padding: 0!important;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.dw-checker-container:has(.dt-container) select#dt-length-2 {
|
||||
width: 50px;
|
||||
margin-right: 10px;
|
||||
border-radius: 8px!important;
|
||||
}
|
||||
|
||||
.dw-checker-container:has(.dt-container) button.dt-paging-button {
|
||||
border-radius: 8px!important;
|
||||
}
|
||||
|
||||
.dw-cards-container > .result-page {
|
||||
grid-template-columns: var(--card-output-grid-column-desktop);
|
||||
}
|
||||
@media only screen and (max-width: 820px) {
|
||||
.dw-cards-container > .result-page {
|
||||
grid-template-columns: var(--card-output-grid-column-tablet);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 482px) {
|
||||
.dw-cards-container > .result-page {
|
||||
grid-template-columns: var(--card-output-grid-column-mobile);
|
||||
}
|
||||
}
|
||||
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();
|
||||
}
|
||||
});
|
||||
});
|
||||
15
assets/admin.css
Normal file
15
assets/admin.css
Normal file
@@ -0,0 +1,15 @@
|
||||
li#menu-posts-checker img {
|
||||
width: 18px;
|
||||
}
|
||||
li#menu-posts-checker ul > li:nth-child(5) > a {
|
||||
color: #00ff00;
|
||||
}
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dw-checker-post-table-input {
|
||||
height: 38px;
|
||||
border-radius: .25em;
|
||||
padding: 0.25em .5em;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
80
assets/checker.css
Normal file
80
assets/checker.css
Normal file
@@ -0,0 +1,80 @@
|
||||
.dw-sheet-data-checker {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dw-checker-blur {
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
.dw-checker-card {
|
||||
width: 500px;
|
||||
max-width: 100%;
|
||||
background-color: var(--checker-card-bg-color);
|
||||
color: var(--checker-card-text-color);
|
||||
padding: 2em;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
h3.dw-checker-title {
|
||||
text-align: center;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
input.dw-checker-input {
|
||||
width: 100%;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.dw-checker-input-group {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.dw-checker-button-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
button.dw-checker-button {
|
||||
padding: 12px 20px;
|
||||
background-color: var(--checker-button-bg-color);
|
||||
color: var(--checker-button-text-color);
|
||||
border: 1px solid var(--checker-button-bg-color);
|
||||
}
|
||||
|
||||
button.dw-checker-button:hover, button.dw-checker-button:focus {
|
||||
color: var(--checker-button-bg-color)!important;
|
||||
background-color: var(--checker-button-text-color)!important;
|
||||
}
|
||||
|
||||
button.dw-checker-button[disabled] {
|
||||
background-color: lightgray;
|
||||
border-color: lightgray;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
table.dw-checker-result-container, table.dw-checker-result-container th, table.dw-checker-result-container td {
|
||||
border: none!important;
|
||||
background: unset!important;
|
||||
}
|
||||
|
||||
table.dw-checker-result-container th,
|
||||
table.dw-checker-result-container td {
|
||||
text-align: left!important;
|
||||
}
|
||||
|
||||
.dw-checker-results th {
|
||||
width: fit-content!important;
|
||||
max-width: 50%!important;
|
||||
}
|
||||
|
||||
.has-not-found-message {
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
span.dw-checker-result-header, span.dw-checker-result-value {
|
||||
float: left;
|
||||
}
|
||||
55
assets/checker.js
Normal file
55
assets/checker.js
Normal file
@@ -0,0 +1,55 @@
|
||||
jQuery(document).ready(function($){
|
||||
|
||||
$('.dw-checker-submit-button').on('click submit', function(e){
|
||||
e.preventDefault();
|
||||
var form = $('form.dw-checker-card');
|
||||
var result_div = $('div.dw-checker-card');
|
||||
var form_input = form.find('input');
|
||||
var form_button = form.find('button');
|
||||
var formData = form.serialize();
|
||||
var result_div = $('div.dw-checker-card');
|
||||
|
||||
form_input.prop('disabled', true);
|
||||
form_button.prop('disabled', true);
|
||||
form_button.attr('data-text', form_button.text()).html('Searching...');
|
||||
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: checker_js.ajax_url+'?action=check_sheet_data&sheet_url='+$('#sheet_url').val(),
|
||||
data: formData,
|
||||
success: function (res) {
|
||||
console.log(res);
|
||||
form_input.prop('disabled', false);
|
||||
form_button.prop('disabled', false);
|
||||
form_button.html(form_button.attr('data-text')).removeAttr('data-text');
|
||||
form.hide();
|
||||
if(res.success){
|
||||
$.each(res.data, function(index, member){
|
||||
result_div.find('.dw-checker-result').append('<table class="dw-checker-result" data-index="'+index+'"><tbody></tbody></table>');
|
||||
$.each(member, function(o, m){
|
||||
result_div.find('table[data-index="'+index+'"] tbody').append(`
|
||||
<tr>
|
||||
<th>`+o+`</th>
|
||||
<td>: `+m+`</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
});
|
||||
}else{
|
||||
result_div.find('.dw-checker-result').addClass('has-not-found-message').html(result_div.find('.dw-checker-result').data('not-found'));
|
||||
}
|
||||
result_div.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
$('.dw-checker-back-button').on('click', function(e){
|
||||
e.preventDefault();
|
||||
var checker_id = $(this).data('checker');
|
||||
var form = $('#checker-'+checker_id).find('form.dw-checker-wrapper');
|
||||
var result_div = $('#checker-'+checker_id).find('div.dw-checker-wrapper');
|
||||
|
||||
form.show();
|
||||
result_div.find('.dw-checker-result').removeClass('has-not-found-message').html('');
|
||||
result_div.hide();
|
||||
});
|
||||
});
|
||||
BIN
assets/icons8-validation-menu-icon.png
Normal file
BIN
assets/icons8-validation-menu-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
251
assets/public.css
Normal file
251
assets/public.css
Normal file
@@ -0,0 +1,251 @@
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dw-checker-divider {
|
||||
margin: 1rem 0;
|
||||
border-style: solid;
|
||||
}
|
||||
/** Preview **/
|
||||
.dw-checker-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.dw-checker-wrapper {
|
||||
background-color: #ccc;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
width: 500px;
|
||||
max-width: 100%;
|
||||
box-shadow: 0px 5px 15px -5px #333333;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.dw-checker-title {
|
||||
font-size:24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dw-checker-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: .5em 0;
|
||||
}
|
||||
.dw-checker-field > label {
|
||||
font-weight: 600;
|
||||
}
|
||||
.dw-checker-field > input, .dw-checker-field > select {
|
||||
height: 48px;
|
||||
border-radius: .5em;
|
||||
border: 1px solid #ccc;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
.dw-checker-buttons {
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
}
|
||||
.dw-checker-buttons button {
|
||||
padding: .65em .75em;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.card-buttons {
|
||||
top: 1em;
|
||||
right: -1em;
|
||||
}
|
||||
input[type=color] {
|
||||
height: 34px;
|
||||
}
|
||||
li.list-group-item.option-nav-menu.mb-0.pointer.active {
|
||||
background-color: white;
|
||||
color: var(--bs-bg-secondary);
|
||||
font-weight: 800;
|
||||
}
|
||||
li.list-group-item.option-nav-menu.mb-0.pointer {
|
||||
background-color: var(--bs-bg-secondary);
|
||||
color: white;
|
||||
}
|
||||
.form-check {
|
||||
display: flex!important;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
/** result **/
|
||||
.dw-checker-input-validator {
|
||||
color: red;
|
||||
}
|
||||
.dw-checker-input-validator-border {
|
||||
border-color: red;
|
||||
}
|
||||
.dw-checker-result-value {
|
||||
word-break: break-word;
|
||||
}
|
||||
table.dw-checker-result-table {
|
||||
width: 100%;
|
||||
}
|
||||
.dw-checker-results table,
|
||||
.dw-checker-results th,
|
||||
.dw-checker-results td {
|
||||
border-style: solid;
|
||||
}
|
||||
.dw-checker-results th,
|
||||
.dw-checker-results td {
|
||||
padding: .75em .5em;
|
||||
}
|
||||
.dw-checker-value-button {
|
||||
border: none;
|
||||
border-radius: .5em;
|
||||
padding: .5em 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.result-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
.dw-checker-result-div {
|
||||
border-bottom-style: solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
padding: .75em 0;
|
||||
}
|
||||
.dw-checker-result-div:last-child{
|
||||
border: none;
|
||||
}
|
||||
button.dw-checker-result-pagination-button {
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
padding: 1em 1.25em;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0px 3px 7px -5px grey;
|
||||
border-radius: .5em;
|
||||
}
|
||||
.dw-checker-result-pagination {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
gap: .5em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
button.dw-checker-result-pagination-button.active {
|
||||
filter: invert(1);
|
||||
}
|
||||
.dw-checker-card-container {
|
||||
display: grid;
|
||||
gap: .5em;
|
||||
}
|
||||
.dw-checker-single-card {
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
border-radius: .5em;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.dw-checker-single-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
.dw-checker-single-card > *:first-child {
|
||||
font-size: smaller;
|
||||
}
|
||||
.dw-checker-single-card > *:last-child {
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.dw-checker-loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.dw-checker-empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
/* Pagination improvements */
|
||||
.dw-checker-pagination {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
background: #f8f9fa;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 768px) {
|
||||
.dw-checker-result-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dw-checker-result-table th {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.dw-checker-result-table td {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.dw-checker-card-container {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
.dw-checker-bottom-results {
|
||||
padding: .5em;
|
||||
max-width: 100%!important;
|
||||
}
|
||||
table.dw-checker-result-container,
|
||||
table.dw-checker-result-container th,
|
||||
table.dw-checker-result-container td{
|
||||
border: 1px solid #ccc!important;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.dw-checker-results th {
|
||||
width: fit-content!important;
|
||||
max-width: 50%!important;
|
||||
}
|
||||
|
||||
.has-not-found-message {
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
span.dw-checker-result-header, span.dw-checker-result-value {
|
||||
float: left;
|
||||
}
|
||||
868
assets/public.js
Normal file
868
assets/public.js
Normal file
@@ -0,0 +1,868 @@
|
||||
jQuery(document).ready(function($){
|
||||
|
||||
// Global variables for filter mode
|
||||
var allDataCache = {};
|
||||
var currentCheckerId = null;
|
||||
|
||||
// Initialize checker on page load
|
||||
initializeChecker();
|
||||
|
||||
function initializeChecker() {
|
||||
$('.dw-checker-container').each(function() {
|
||||
var checkerId = $(this).attr('id').replace('checker-', '');
|
||||
var settingsEl = $('#checker-settings-' + checkerId);
|
||||
|
||||
if (settingsEl.length) {
|
||||
var settings = JSON.parse(settingsEl.text());
|
||||
currentCheckerId = checkerId;
|
||||
|
||||
// Handle URL parameters
|
||||
if (settings.url_params_enabled === 'yes') {
|
||||
handleUrlParameters(checkerId, settings);
|
||||
}
|
||||
|
||||
// Handle initial display mode
|
||||
if (settings.initial_display !== 'hidden') {
|
||||
loadAllData(checkerId, settings);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Get URL parameters
|
||||
function getUrlParams() {
|
||||
var params = {};
|
||||
var queryString = window.location.search.substring(1);
|
||||
if (!queryString) return params;
|
||||
|
||||
var pairs = queryString.split('&');
|
||||
for (var i = 0; i < pairs.length; i++) {
|
||||
var pair = pairs[i].split('=');
|
||||
if (pair[0]) {
|
||||
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
|
||||
}
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
// Handle URL parameters
|
||||
function handleUrlParameters(checkerId, settings) {
|
||||
var urlParams = getUrlParams();
|
||||
if (Object.keys(urlParams).length === 0) return;
|
||||
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
var filled = false;
|
||||
|
||||
// Fill form fields from URL params
|
||||
thisChecker.find('.dw-checker-inputs').each(function() {
|
||||
var fieldName = $(this).data('kolom');
|
||||
if (urlParams[fieldName]) {
|
||||
$(this).val(urlParams[fieldName]);
|
||||
filled = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-submit if enabled and fields were filled
|
||||
if (filled && settings.url_params_auto_search === 'yes') {
|
||||
setTimeout(function() {
|
||||
thisChecker.find('.search-button').trigger('click');
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Load all data for show all mode
|
||||
function loadAllData(checkerId, settings) {
|
||||
var limit = settings.initial_display === 'limited' ? 10 : settings.max_records;
|
||||
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/wp-admin/admin-ajax.php',
|
||||
data: {
|
||||
action: 'checker_load_all_data',
|
||||
checker_id: checkerId,
|
||||
limit: limit
|
||||
},
|
||||
beforeSend: function() {
|
||||
showLoadingState(checkerId);
|
||||
},
|
||||
success: function(res) {
|
||||
if (res.count > 0) {
|
||||
allDataCache[checkerId] = res;
|
||||
renderResults(checkerId, res);
|
||||
|
||||
// Enable filter mode if configured
|
||||
if (settings.filter_mode === 'filter') {
|
||||
enableFilterMode(checkerId);
|
||||
}
|
||||
} else {
|
||||
showEmptyState(checkerId);
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
showErrorState(checkerId, 'Failed to load data');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Enable real-time filter mode
|
||||
function enableFilterMode(checkerId) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
var allData = allDataCache[checkerId];
|
||||
|
||||
if (!allData) return;
|
||||
|
||||
// Listen to input changes
|
||||
thisChecker.find('.dw-checker-inputs').on('input', function() {
|
||||
var filters = {};
|
||||
var hasFilters = false;
|
||||
|
||||
// Collect all filter values
|
||||
thisChecker.find('.dw-checker-inputs').each(function() {
|
||||
var field = $(this).data('kolom');
|
||||
var value = $(this).val();
|
||||
if (value) {
|
||||
filters[field] = value.toLowerCase();
|
||||
hasFilters = true;
|
||||
}
|
||||
});
|
||||
|
||||
// If no filters, show all data
|
||||
if (!hasFilters) {
|
||||
renderResults(checkerId, allData);
|
||||
return;
|
||||
}
|
||||
|
||||
// Filter data client-side
|
||||
var filtered = allData.rows.filter(function(row) {
|
||||
var match = true;
|
||||
for (var field in filters) {
|
||||
var rowValue = (row[field] || '').toLowerCase();
|
||||
var filterValue = filters[field];
|
||||
|
||||
// Check if contains (you can make this configurable)
|
||||
if (rowValue.indexOf(filterValue) === -1) {
|
||||
match = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return match;
|
||||
});
|
||||
|
||||
// Update display with filtered results
|
||||
var filteredRes = {
|
||||
count: filtered.length,
|
||||
rows: filtered,
|
||||
settings: allData.settings,
|
||||
output: allData.output
|
||||
};
|
||||
|
||||
if (filtered.length > 0) {
|
||||
renderResults(checkerId, filteredRes);
|
||||
} else {
|
||||
showEmptyState(checkerId, 'No results match your filters');
|
||||
}
|
||||
});
|
||||
|
||||
// Hide search button in filter mode
|
||||
thisChecker.find('.search-button').hide();
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
function showLoadingState(checkerId) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
thisChecker.find('.dw-checker-results').html(`
|
||||
<div class="dw-checker-loading" style="text-align: center; padding: 2rem;">
|
||||
<div class="spinner-border" role="status" style="width: 3rem; height: 3rem; border-width: 0.3rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p style="margin-top: 1rem; color: #666;">Loading data...</p>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Show empty state
|
||||
function showEmptyState(checkerId, message) {
|
||||
message = message || 'No results found';
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
thisChecker.find('.dw-checker-results').html(`
|
||||
<div class="dw-checker-empty-state" style="text-align: center; padding: 3rem 1rem;">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom: 1rem; color: #ccc;">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.35-4.35"></path>
|
||||
</svg>
|
||||
<h3 style="color: #666; margin-bottom: 0.5rem;">` + message + `</h3>
|
||||
<p style="color: #999;">Try adjusting your search criteria</p>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Show error state
|
||||
function showErrorState(checkerId, message) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
thisChecker.find('.dw-checker-results').html(`
|
||||
<div class="dw-checker-error-state" style="text-align: center; padding: 2rem; color: #dc3545;">
|
||||
<p><strong>Error:</strong> ` + message + `</p>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Render results (unified function for all display types)
|
||||
function renderResults(checkerId, res) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
var displayType = res.settings.display;
|
||||
|
||||
// Show result container
|
||||
thisChecker.find('.dw-checker-result').show();
|
||||
thisChecker.find('.dw-checker-form').hide();
|
||||
|
||||
// Render based on display type
|
||||
if (displayType === 'vertical-table') {
|
||||
renderVerticalTable(checkerId, res);
|
||||
} else if (displayType === 'standard-table') {
|
||||
renderStandardTable(checkerId, res);
|
||||
} else if (displayType === 'div') {
|
||||
renderDivDisplay(checkerId, res);
|
||||
} else if (displayType === 'cards') {
|
||||
renderCardDisplay(checkerId, res);
|
||||
}
|
||||
}
|
||||
|
||||
// Render vertical table display
|
||||
function renderVerticalTable(checkerId, res) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
var resultDiv = '';
|
||||
var perPage = 1; // One record per page for vertical table
|
||||
var totalPages = Math.ceil(res.count / perPage);
|
||||
|
||||
$.each(res.rows, function(index, row) {
|
||||
var isFirst = index === 0;
|
||||
resultDiv += '<table class="dw-checker-result-container" data-pagination="'+index+'" style="'+(isFirst ? '' : 'display: none;')+'border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><tbody>';
|
||||
|
||||
$.each(row, function(q, r) {
|
||||
var id = q.replace(/\s/g, '_').replace(/\./g, '_').toLowerCase();
|
||||
var outputSetting = res.output.find(function(o) { return o.key === q; });
|
||||
|
||||
if (!outputSetting || outputSetting.hide === 'yes') return;
|
||||
|
||||
var prefix = outputSetting.prefix || '';
|
||||
var type = outputSetting.type || 'text';
|
||||
var button_text = outputSetting.button_text || 'Click';
|
||||
var bg_color = outputSetting.bg_color || '#333333';
|
||||
var text_color = outputSetting.text_color || '#ffffff';
|
||||
|
||||
if (type == 'link_button') {
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'whatsapp_button') {
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'image') {
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 150px; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
|
||||
resultDiv += '<tr>';
|
||||
resultDiv += '<th style="border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><span class="dw-checker-result-header" style="color:'+res.settings.header+'">'+q+'</span></th>';
|
||||
resultDiv += '<td style="border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><span class="dw-checker-result-value" style="color:'+res.settings.value+'">'+prefix+r+'</span></td>';
|
||||
resultDiv += '</tr>';
|
||||
});
|
||||
|
||||
resultDiv += '</tbody></table>';
|
||||
});
|
||||
|
||||
// Add enhanced pagination
|
||||
if (totalPages > 1) {
|
||||
resultDiv += createEnhancedPagination(totalPages, 1);
|
||||
}
|
||||
|
||||
thisChecker.find('.dw-checker-results').html(resultDiv);
|
||||
}
|
||||
|
||||
// Render standard table display
|
||||
function renderStandardTable(checkerId, res) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
var resultDiv = '<table class="dw-checker-result-container display" style="width:100%"><thead><tr>';
|
||||
|
||||
// Headers
|
||||
if (res.rows.length > 0) {
|
||||
$.each(res.rows[0], function(q, r) {
|
||||
var outputSetting = res.output.find(function(o) { return o.key === q; });
|
||||
if (!outputSetting || outputSetting.hide === 'yes') return;
|
||||
resultDiv += '<th style="color:'+res.settings.header+'">'+q+'</th>';
|
||||
});
|
||||
}
|
||||
resultDiv += '</tr></thead><tbody>';
|
||||
|
||||
// Rows
|
||||
$.each(res.rows, function(index, row) {
|
||||
resultDiv += '<tr>';
|
||||
$.each(row, function(q, r) {
|
||||
var id = q.replace(/\s/g, '_').replace(/\./g, '_').toLowerCase();
|
||||
var outputSetting = res.output.find(function(o) { return o.key === q; });
|
||||
|
||||
if (!outputSetting || outputSetting.hide === 'yes') return;
|
||||
|
||||
var prefix = outputSetting.prefix || '';
|
||||
var type = outputSetting.type || 'text';
|
||||
var button_text = outputSetting.button_text || 'Click';
|
||||
var bg_color = outputSetting.bg_color || '#333333';
|
||||
var text_color = outputSetting.text_color || '#ffffff';
|
||||
|
||||
if (type == 'link_button') {
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'whatsapp_button') {
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'image') {
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 150px; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
|
||||
resultDiv += '<td style="color:'+res.settings.value+'">'+prefix+r+'</td>';
|
||||
});
|
||||
resultDiv += '</tr>';
|
||||
});
|
||||
|
||||
resultDiv += '</tbody></table>';
|
||||
thisChecker.find('.dw-checker-results').html(resultDiv);
|
||||
|
||||
// Initialize DataTable
|
||||
setTimeout(function() {
|
||||
thisChecker.find('.dw-checker-result-container').DataTable({
|
||||
responsive: true,
|
||||
scrollX: true
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Render div display
|
||||
function renderDivDisplay(checkerId, res) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
var resultDiv = '';
|
||||
var perPage = 1;
|
||||
var totalPages = Math.ceil(res.count / perPage);
|
||||
|
||||
$.each(res.rows, function(index, row) {
|
||||
var isFirst = index === 0;
|
||||
resultDiv += '<div class="dw-checker-result-container" data-pagination="'+index+'" style="'+(isFirst ? '' : 'display: none;')+'">';
|
||||
|
||||
$.each(row, function(q, r) {
|
||||
var id = q.replace(/\s/g, '_').replace(/\./g, '_').toLowerCase();
|
||||
var outputSetting = res.output.find(function(o) { return o.key === q; });
|
||||
|
||||
if (!outputSetting || outputSetting.hide === 'yes') return;
|
||||
|
||||
var prefix = outputSetting.prefix || '';
|
||||
var type = outputSetting.type || 'text';
|
||||
var button_text = outputSetting.button_text || 'Click';
|
||||
var bg_color = outputSetting.bg_color || '#333333';
|
||||
var text_color = outputSetting.text_color || '#ffffff';
|
||||
|
||||
if (type == 'link_button') {
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'whatsapp_button') {
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'image') {
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 150px; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
|
||||
resultDiv += '<div class="dw-checker-result-div" style="border-bottom-color: '+res.settings.divider+'; border-bottom-width: '+res.settings.divider_width+'px;">';
|
||||
resultDiv += '<div class="result-header"><span class="dw-checker-result-header" style="color:'+res.settings.header+';">'+q+'</span></div>';
|
||||
resultDiv += '<div class="result-value"><span class="dw-checker-result-value" style="color:'+res.settings.value+';">'+prefix+r+'</span></div>';
|
||||
resultDiv += '</div>';
|
||||
});
|
||||
|
||||
resultDiv += '</div>';
|
||||
});
|
||||
|
||||
// Add enhanced pagination
|
||||
if (totalPages > 1) {
|
||||
resultDiv += createEnhancedPagination(totalPages, 1);
|
||||
}
|
||||
|
||||
thisChecker.find('.dw-checker-results').html(resultDiv);
|
||||
}
|
||||
|
||||
// Render card display
|
||||
function renderCardDisplay(checkerId, res) {
|
||||
var thisChecker = $('#checker-' + checkerId);
|
||||
var resultDiv = '';
|
||||
var perPage = 1;
|
||||
var totalPages = Math.ceil(res.count / perPage);
|
||||
|
||||
$.each(res.rows, function(index, row) {
|
||||
var isFirst = index === 0;
|
||||
resultDiv += '<div class="dw-checker-result-container dw-checker-card-container" data-pagination="'+index+'" style="'+(isFirst ? '' : 'display: none;')+'">';
|
||||
|
||||
$.each(row, function(q, r) {
|
||||
var id = q.replace(/\s/g, '_').replace(/\./g, '_').toLowerCase();
|
||||
var outputSetting = res.output.find(function(o) { return o.key === q; });
|
||||
|
||||
if (!outputSetting || outputSetting.hide === 'yes') return;
|
||||
|
||||
var prefix = outputSetting.prefix || '';
|
||||
var type = outputSetting.type || 'text';
|
||||
var button_text = outputSetting.button_text || 'Click';
|
||||
var bg_color = outputSetting.bg_color || '#333333';
|
||||
var text_color = outputSetting.text_color || '#ffffff';
|
||||
|
||||
if (type == 'link_button') {
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'whatsapp_button') {
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener" style="background-color: '+bg_color+'; color: '+text_color+';">'+button_text+'</a>';
|
||||
} else if (type == 'image') {
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 100%; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
|
||||
resultDiv += '<div class="dw-checker-single-card" style="background-color: '+bg_color+'; color: '+text_color+'; border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;">';
|
||||
resultDiv += '<span class="dw-checker-card-header" style="color:'+text_color+'">'+q+'</span>';
|
||||
resultDiv += '<span class="dw-checker-card-value" style="color:'+text_color+'">'+prefix+r+'</span>';
|
||||
resultDiv += '</div>';
|
||||
});
|
||||
|
||||
resultDiv += '</div>';
|
||||
});
|
||||
|
||||
// Add enhanced pagination
|
||||
if (totalPages > 1) {
|
||||
resultDiv += createEnhancedPagination(totalPages, 1);
|
||||
}
|
||||
|
||||
thisChecker.find('.dw-checker-results').html(resultDiv);
|
||||
}
|
||||
|
||||
// Create enhanced pagination with Previous/Next buttons
|
||||
function createEnhancedPagination(totalPages, currentPage) {
|
||||
var html = '<div class="dw-checker-pagination" style="margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap;">';
|
||||
|
||||
// Previous button
|
||||
html += '<button class="pagination-btn pagination-prev" data-page="'+(currentPage-1)+'" '+(currentPage === 1 ? 'disabled' : '')+' style="padding: 0.5rem 1rem; border: 1px solid #ddd; background: #fff; cursor: pointer;">Previous</button>';
|
||||
|
||||
// Page numbers (show max 5 pages)
|
||||
var startPage = Math.max(1, currentPage - 2);
|
||||
var endPage = Math.min(totalPages, startPage + 4);
|
||||
|
||||
if (endPage - startPage < 4) {
|
||||
startPage = Math.max(1, endPage - 4);
|
||||
}
|
||||
|
||||
for (var i = startPage; i <= endPage; i++) {
|
||||
var active = i === currentPage ? ' style="background: #333; color: #fff;"' : '';
|
||||
html += '<button class="pagination-btn pagination-page" data-page="'+i+'"'+active+' style="padding: 0.5rem 1rem; border: 1px solid #ddd; background: #fff; cursor: pointer;">'+i+'</button>';
|
||||
}
|
||||
|
||||
// Next button
|
||||
html += '<button class="pagination-btn pagination-next" data-page="'+(currentPage+1)+'" '+(currentPage === totalPages ? 'disabled' : '')+' style="padding: 0.5rem 1rem; border: 1px solid #ddd; background: #fff; cursor: pointer;">Next</button>';
|
||||
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
// Handle pagination clicks (delegated event)
|
||||
$(document).on('click', '.pagination-btn', function() {
|
||||
if ($(this).prop('disabled')) return;
|
||||
|
||||
var page = parseInt($(this).data('page'));
|
||||
var containers = $(this).closest('.dw-checker-results').find('.dw-checker-result-container');
|
||||
|
||||
// Hide all containers
|
||||
containers.hide();
|
||||
|
||||
// Show selected page (0-indexed)
|
||||
containers.eq(page - 1).show();
|
||||
|
||||
// Update pagination buttons
|
||||
var totalPages = containers.length;
|
||||
var newPagination = createEnhancedPagination(totalPages, page);
|
||||
$(this).closest('.dw-checker-pagination').replaceWith(newPagination);
|
||||
});
|
||||
|
||||
$('.dw-checker-inputs').on('input change blur', function(){
|
||||
$(this).siblings('.dw-checker-input-validator').remove();
|
||||
if($(this).val().length == 0){
|
||||
$(this).parents('.dw-checker-field').append('<div class="dw-checker-input-validator">'+$(this).data('kolom')+' is required!</div>');
|
||||
}
|
||||
});
|
||||
|
||||
$('.search-button').on('click', function(e){
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
var $id = $this.data('checker');
|
||||
var this_checker = $('#checker-'+$id);
|
||||
var inputs = this_checker.find('.dw-checker-inputs');
|
||||
var inputs_count = inputs.length;
|
||||
var validator = [];
|
||||
var submission = [];
|
||||
if(inputs.length > 0){
|
||||
$.each(inputs, function(m, n){
|
||||
if($(n).val().length == 0){
|
||||
$(n).parents('.dw-checker-field').append('<div class="dw-checker-input-validator">'+$(n).data('kolom')+' is required!</div>');
|
||||
$(n).addClass('dw-checker-input-validator-border');
|
||||
return false;
|
||||
}
|
||||
validator.push({
|
||||
kolom: $(n).data('kolom'),
|
||||
value: $(n).val()
|
||||
});
|
||||
submission.push($(n).val());
|
||||
});
|
||||
|
||||
var validator_count = validator.length;
|
||||
if(validator_count == inputs_count) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/wp-admin/admin-ajax.php',
|
||||
data: {
|
||||
action: 'checker_public_validation',
|
||||
checker_id: $this.data('checker'),
|
||||
validate: validator
|
||||
},
|
||||
beforeSend: function(){
|
||||
$this.attr('data-text', $(this).text());
|
||||
$this.text('Searching...').prop('disabled', true);
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-title').html('');
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-description').html('');
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-results').html('');
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-bottom-results').html('');
|
||||
},
|
||||
success: function (res) {
|
||||
console.log(res);
|
||||
$this.text($this.attr('data-btn-text')).prop('disabled', false);
|
||||
var title = '';
|
||||
var desc = '';
|
||||
if(res.count == 0){
|
||||
title = 'Not Found!';
|
||||
desc = 'Recheck your request and click search again'
|
||||
}else{
|
||||
var records = 'record';
|
||||
if(res.count>1){
|
||||
records = 'records';
|
||||
}
|
||||
title = res.count+' '+records+' found';
|
||||
desc = 'You got '+res.count+' '+records+' matching <b>'+submission.join(' - ')+'</b>';
|
||||
}
|
||||
$this.text($(this).attr('data-text')).prop('disabled', false);
|
||||
this_checker.find('.dw-checker-form').hide();
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-title').html(title);
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-description').html(desc);
|
||||
this_checker.find('.dw-checker-result').show();
|
||||
|
||||
if(res.rows.length > 0){
|
||||
var resultDiv = '';
|
||||
var pagination = '';
|
||||
|
||||
if(res.rows.length > 1){
|
||||
resultDiv += '<div class="dw-checker-result-pagination">';
|
||||
var list = [];
|
||||
for (var i = 1; i <= res.rows.length; i++) {
|
||||
list.push(i);
|
||||
}
|
||||
$.each(list, function(r, o){
|
||||
var active = '';
|
||||
if(r == 0){
|
||||
active = ' active';
|
||||
}
|
||||
resultDiv += '<button class="dw-checker-result-pagination-button'+active+'" data-target-pagination="'+o+'">'+o+'</button>';
|
||||
});
|
||||
resultDiv += '</div>';
|
||||
}
|
||||
|
||||
if(res.settings.display == 'vertical-table'){
|
||||
$.each(res.rows, function(index, item) {
|
||||
|
||||
resultData = item;
|
||||
if(index == 0){
|
||||
resultDiv += '<table class="dw-checker-result-container" data-pagination="'+index+'" style="border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><tbody>';
|
||||
}else{
|
||||
resultDiv += '<table class="dw-checker-result-container" data-pagination="'+index+'" style="display: none; border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><tbody>';
|
||||
}
|
||||
|
||||
var header_color = res.settings.header;
|
||||
var value_color = res.settings.value;
|
||||
$.each(item, function(q,r){
|
||||
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
||||
|
||||
var prefix = '';
|
||||
var type = '';
|
||||
var button_text = '';
|
||||
var hidden = 'no';
|
||||
$.each(res.output, function(o,p){
|
||||
if(q == p.key){
|
||||
prefix = p.prefix;
|
||||
type = p.type;
|
||||
button_text = p.button_text;
|
||||
if('hide' in p){
|
||||
hidden = p.hide;
|
||||
}
|
||||
}
|
||||
});
|
||||
if(hidden == 'yes'){
|
||||
return;
|
||||
}
|
||||
if(type == 'link_button'){
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'whatsapp_button'){
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'image'){
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 150px; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
resultDiv += '<tr>';
|
||||
resultDiv += '<th style="border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><span class="dw-checker-result-header" style="color:'+header_color+'">'+q+'</span></th>';
|
||||
resultDiv += '<td style="border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><span class="dw-checker-result-value" style="color:'+value_color+'">'+prefix+r+'</span></td>';
|
||||
resultDiv += '</tr>';
|
||||
});
|
||||
resultDiv += '</tbody></table>';
|
||||
});
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-results').html(resultDiv);
|
||||
}else if(res.settings.display == 'div') {
|
||||
$.each(res.rows, function(index, item) {
|
||||
resultData = item;
|
||||
var header_color = res.settings.header;
|
||||
var value_color = res.settings.value;
|
||||
|
||||
// Create container div for this row
|
||||
if(index == 0){
|
||||
resultDiv += '<div class="dw-checker-result-container" data-pagination="'+index+'">';
|
||||
}else{
|
||||
resultDiv += '<div class="dw-checker-result-container" data-pagination="'+index+'" style="display: none;">';
|
||||
}
|
||||
|
||||
// Loop through each field in the row
|
||||
$.each(item, function(q,r){
|
||||
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
||||
|
||||
var prefix = '';
|
||||
var type = '';
|
||||
var button_text = '';
|
||||
var hidden = 'no';
|
||||
$.each(res.output, function(o,p){
|
||||
if(q == p.key){
|
||||
prefix = p.prefix;
|
||||
type = p.type;
|
||||
button_text = p.button_text;
|
||||
if('hide' in p){
|
||||
hidden = p.hide;
|
||||
}
|
||||
}
|
||||
});
|
||||
if(hidden == 'yes'){
|
||||
return;
|
||||
}
|
||||
if(type == 'link_button'){
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'whatsapp_button'){
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'image'){
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 150px; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
|
||||
resultDiv += '<div class="dw-checker-result-div" style="border-bottom-color: '+res.settings.divider+'; border-bottom-width: '+res.settings.divider_width+'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>';
|
||||
});
|
||||
|
||||
// Close container div for this row
|
||||
resultDiv += '</div>';
|
||||
});
|
||||
this_checker.find('.dw-checker-result').find('.dw-checker-results').html(resultDiv);
|
||||
}else if(res.settings.display == 'standard-table') {
|
||||
|
||||
this_checker.find('.dw-checker-divider:nth-child(3)').hide();
|
||||
|
||||
resultDiv = '<table class="dw-checker-result-container display nowrap">';
|
||||
|
||||
var header_color = res.settings.header;
|
||||
var value_color = res.settings.value;
|
||||
|
||||
resultDiv += '<thead><tr>';
|
||||
$.each(res.output, function(header, value){
|
||||
var hidden = 'no';
|
||||
if('hide' in value){
|
||||
hidden = value.hide;
|
||||
}
|
||||
if(hidden !== 'yes'){
|
||||
resultDiv += '<th>'+value.key+'</th>';
|
||||
}
|
||||
});
|
||||
resultDiv += '</tr><thead>';
|
||||
|
||||
resultDiv += '<tbody>';
|
||||
$.each(res.rows, function(index, item) {
|
||||
|
||||
resultData = item;
|
||||
|
||||
resultDiv += '<tr>';
|
||||
$.each(item, function(q,r){
|
||||
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
||||
var prefix = '';
|
||||
var type = '';
|
||||
var button_text = '';
|
||||
var hidden = 'no';
|
||||
$.each(res.output, function(o,p){
|
||||
if(q == p.key){
|
||||
prefix = p.prefix;
|
||||
type = p.type;
|
||||
button_text = p.button_text;
|
||||
if('hide' in p){
|
||||
hidden = p.hide;
|
||||
}
|
||||
}
|
||||
});
|
||||
if(hidden == 'yes'){
|
||||
return;
|
||||
}
|
||||
if(type == 'link_button'){
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'whatsapp_button'){
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'image'){
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 150px; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
resultDiv += '<td style="border-color: '+res.settings.divider+'; border-width: '+res.settings.divider_width+'px;"><span class="dw-checker-result-value" style="color:'+value_color+'">'+prefix+r+'</span></td>';
|
||||
});
|
||||
resultDiv += '</tr>';
|
||||
});
|
||||
resultDiv += '</tbody>';
|
||||
resultDiv += '</table>';
|
||||
this_checker.next('.dw-checker-bottom-results').html(resultDiv);
|
||||
this_checker.next('.dw-checker-bottom-results').find('table.dw-checker-result-container').DataTable( {
|
||||
responsive: true,
|
||||
scrollX: true
|
||||
} );
|
||||
|
||||
}else if(res.settings.display == 'card'){
|
||||
|
||||
this_checker.find('.dw-checker-divider:nth-child(3)').hide();
|
||||
|
||||
$.each(res.rows, function(index, item) {
|
||||
|
||||
resultData = item;
|
||||
|
||||
resultDiv += `
|
||||
<style>
|
||||
.dw-checker-card-container {
|
||||
grid-template-columns: repeat(`+res.settings.column+`, 1fr);
|
||||
}
|
||||
@media (max-width: 1280px){
|
||||
.dw-checker-card-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 820px){
|
||||
.dw-checker-card-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 482px){
|
||||
.dw-checker-card-container {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
resultDiv += '<div class="dw-checker-result-container dw-checker-card-container" data-pagination="'+index+'" style="display:none;">';
|
||||
$.each(item, function(q,r){
|
||||
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
||||
var prefix = '';
|
||||
var type = '';
|
||||
var button_text = '';
|
||||
var hidden = 'no';
|
||||
var bg_color = '#cccccc';
|
||||
var text_color = '#000000';
|
||||
$.each(res.output, function(o,p){
|
||||
if(q == p.key){
|
||||
prefix = p.prefix;
|
||||
type = p.type;
|
||||
button_text = p.button_text;
|
||||
if('hide' in p){
|
||||
hidden = p.hide;
|
||||
}
|
||||
if('bg_color' in p){
|
||||
bg_color = p.bg_color;
|
||||
}
|
||||
if('text_color' in p){
|
||||
text_color = p.text_color;
|
||||
}
|
||||
}
|
||||
});
|
||||
if(hidden == 'yes'){
|
||||
return;
|
||||
}
|
||||
if(type == 'link_button'){
|
||||
r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'whatsapp_button'){
|
||||
r = '<a href="https://wa.me/'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank" rel="noopener">'+button_text+'</a>';
|
||||
}else if(type == 'image'){
|
||||
r = '<img src="'+r+'" class="dw-checker-image dw-checker-img-'+id+'" style="max-width: 100%; height: auto; cursor: pointer;" onclick="openImageLightbox(this)" data-fullsize="'+r+'" alt="'+q+'" />';
|
||||
}
|
||||
resultDiv += `<div class="dw-checker-single-card" style="background-color: `+bg_color+`; color: `+text_color+`; border-color: `+res.settings.divider+`; border-width: `+res.settings.divider_width+`px;">
|
||||
<span class="dw-checker-card-header" style="color:`+text_color+`">`+q+`</span>
|
||||
<span class="dw-checker-card-value" style="color:`+text_color+`">`+prefix+r+`</span>
|
||||
</div>`;
|
||||
});
|
||||
resultDiv += '</div>';
|
||||
this_checker.next('.dw-checker-bottom-results').html(resultDiv);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.dw-checker-result-pagination-button', function(e){
|
||||
e.preventDefault();
|
||||
var container = $(this).data('target-pagination');
|
||||
var page = container - 1;
|
||||
$('.dw-checker-result-pagination-button').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('.dw-checker-result-container').hide();
|
||||
$('[data-pagination='+page+']').show();
|
||||
});
|
||||
|
||||
$('.back-button').on('click', function() {
|
||||
var checker_id = $(this).data('checker');
|
||||
$('#checker-'+checker_id).find('.dw-checker-result').hide();
|
||||
$('#checker-'+checker_id).find('.dw-checker-result').find('.dw-checker-title').html('');
|
||||
$('#checker-'+checker_id).find('.dw-checker-result').find('.dw-checker-description').html('');
|
||||
$('#checker-'+checker_id).find('.dw-checker-result').find('.dw-checker-results').html('');
|
||||
$('#checker-'+checker_id).find('.dw-checker-inputs').val('');
|
||||
$('#checker-'+checker_id).find('.dw-checker-form').show();
|
||||
$('#checker-'+checker_id).find('.dw-checker-divider').show();
|
||||
});
|
||||
});
|
||||
|
||||
// Image Lightbox Function
|
||||
function openImageLightbox(img) {
|
||||
var fullsizeUrl = img.getAttribute('data-fullsize');
|
||||
var alt = img.getAttribute('alt');
|
||||
|
||||
// Create lightbox overlay
|
||||
var lightbox = document.createElement('div');
|
||||
lightbox.id = 'dw-checker-lightbox';
|
||||
lightbox.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:99999;display:flex;align-items:center;justify-content:center;cursor:pointer;';
|
||||
|
||||
// Create image element
|
||||
var lightboxImg = document.createElement('img');
|
||||
lightboxImg.src = fullsizeUrl;
|
||||
lightboxImg.alt = alt;
|
||||
lightboxImg.style.cssText = 'max-width:90%;max-height:90%;object-fit:contain;';
|
||||
|
||||
// Create close button
|
||||
var closeBtn = document.createElement('span');
|
||||
closeBtn.innerHTML = '×';
|
||||
closeBtn.style.cssText = 'position:absolute;top:20px;right:40px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer;';
|
||||
|
||||
// Append elements
|
||||
lightbox.appendChild(lightboxImg);
|
||||
lightbox.appendChild(closeBtn);
|
||||
document.body.appendChild(lightbox);
|
||||
|
||||
// Close on click
|
||||
lightbox.onclick = function() {
|
||||
document.body.removeChild(lightbox);
|
||||
};
|
||||
|
||||
// Prevent image click from closing
|
||||
lightboxImg.onclick = function(e) {
|
||||
e.stopPropagation();
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user