/**
|
* JVBase SEO Admin Interface
|
*
|
* Handles:
|
* - Tab navigation
|
* - Dynamic schema field loading
|
* - Save/reset functionality
|
* - Repeater field management
|
*/
|
(function($) {
|
'use strict';
|
|
const SEOAdmin = {
|
config: window.jvbSeoConfig || {},
|
|
init() {
|
this.bindTabs();
|
this.bindSchemaTypeChange();
|
this.bindSaveButtons();
|
this.bindResetButtons();
|
this.bindRepeaterFields();
|
this.bindImageSelectors();
|
},
|
|
/**
|
* Tab navigation
|
*/
|
bindTabs() {
|
$('.jvb-seo-tabs .tab-btn').on('click', function() {
|
const tab = $(this).data('tab');
|
|
// Update active tab button
|
$('.jvb-seo-tabs .tab-btn').removeClass('active');
|
$(this).addClass('active');
|
|
// Show corresponding content
|
$('.tab-content').removeClass('active');
|
$(`.tab-content[data-tab="${tab}"]`).addClass('active');
|
});
|
},
|
|
/**
|
* Dynamic schema field loading when type changes
|
*/
|
bindSchemaTypeChange() {
|
$(document).on('change', '.schema-type-select', async function() {
|
const $select = $(this);
|
const type = $select.val();
|
const $fieldset = $select.closest('.jvb-seo-fieldset');
|
const $schemaFields = $fieldset.find('.schema-fields');
|
|
if (!type) {
|
$schemaFields.hide().empty();
|
return;
|
}
|
|
// Fetch fields for this schema type
|
try {
|
const response = await fetch(
|
`${SEOAdmin.config.restUrl}schema-fields/${type}`,
|
{
|
headers: {
|
'X-WP-Nonce': SEOAdmin.config.nonce
|
}
|
}
|
);
|
|
const data = await response.json();
|
|
if (data.fields) {
|
SEOAdmin.renderSchemaFields($schemaFields, data.fields);
|
$schemaFields.show();
|
}
|
} catch (error) {
|
console.error('Failed to load schema fields:', error);
|
}
|
});
|
},
|
|
/**
|
* Render schema field mappings
|
*/
|
renderSchemaFields($container, fields) {
|
$container.empty();
|
|
Object.entries(fields).forEach(([key, config]) => {
|
const $field = $(`
|
<div class="form-field schema-field-mapping" data-field="${key}">
|
<label>${config.label || key}</label>
|
<input type="text" name="schema_fields[${key}]"
|
value="" class="regular-text template-field"
|
placeholder="{{field_name}}">
|
${config.description ? `<span class="description">${config.description}</span>` : ''}
|
</div>
|
`);
|
$container.append($field);
|
});
|
},
|
|
/**
|
* Save button handlers
|
*/
|
bindSaveButtons() {
|
// Save site config
|
$('#save-site-config').on('click', async function() {
|
const $btn = $(this);
|
$btn.prop('disabled', true).text('Saving...');
|
|
const data = SEOAdmin.collectSiteFormData();
|
|
try {
|
const response = await fetch(`${SEOAdmin.config.restUrl}site`, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': SEOAdmin.config.nonce
|
},
|
body: JSON.stringify(data)
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
SEOAdmin.showNotice('Settings saved successfully.', 'success');
|
} else {
|
SEOAdmin.showNotice(result.message || 'Failed to save.', 'error');
|
}
|
} catch (error) {
|
SEOAdmin.showNotice('Network error. Please try again.', 'error');
|
} finally {
|
$btn.prop('disabled', false).text('Save Site Settings');
|
}
|
});
|
|
// Save content type config
|
$(document).on('click', '.save-content-type', async function() {
|
const $btn = $(this);
|
const $container = $btn.closest('.jvb-seo-content-type');
|
const type = $container.data('type');
|
const objectType = $container.data('object-type');
|
|
$btn.prop('disabled', true).text('Saving...');
|
|
const data = SEOAdmin.collectContentTypeFormData($container);
|
|
try {
|
const response = await fetch(
|
`${SEOAdmin.config.restUrl}content/${objectType}/${type}`,
|
{
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': SEOAdmin.config.nonce
|
},
|
body: JSON.stringify(data)
|
}
|
);
|
|
const result = await response.json();
|
|
if (result.success) {
|
SEOAdmin.showNotice('Settings saved.', 'success');
|
} else {
|
SEOAdmin.showNotice(result.message || 'Failed to save.', 'error');
|
}
|
} catch (error) {
|
SEOAdmin.showNotice('Network error.', 'error');
|
} finally {
|
$btn.prop('disabled', false).text('Save');
|
}
|
});
|
},
|
|
/**
|
* Reset button handlers
|
*/
|
bindResetButtons() {
|
$(document).on('click', '.reset-to-defaults', async function() {
|
if (!confirm('Reset to default settings? This cannot be undone.')) {
|
return;
|
}
|
|
const $btn = $(this);
|
const $container = $btn.closest('.jvb-seo-content-type');
|
const type = $container.data('type');
|
const objectType = $container.data('object-type');
|
|
$btn.prop('disabled', true).text('Resetting...');
|
|
try {
|
const response = await fetch(
|
`${SEOAdmin.config.restUrl}content/${objectType}/${type}/reset`,
|
{
|
method: 'POST',
|
headers: {
|
'X-WP-Nonce': SEOAdmin.config.nonce
|
}
|
}
|
);
|
|
const result = await response.json();
|
|
if (result.success) {
|
// Reload page to show defaults
|
location.reload();
|
} else {
|
SEOAdmin.showNotice(result.message || 'Failed to reset.', 'error');
|
}
|
} catch (error) {
|
SEOAdmin.showNotice('Network error.', 'error');
|
} finally {
|
$btn.prop('disabled', false).text('Reset to Defaults');
|
}
|
});
|
},
|
|
/**
|
* Repeater field management
|
*/
|
bindRepeaterFields() {
|
// Add row
|
$(document).on('click', '.repeater-field .add-row', function() {
|
const $repeater = $(this).closest('.repeater-field');
|
const fieldName = $repeater.data('field');
|
|
const $row = $(`
|
<div class="repeater-row">
|
<input type="url" name="${fieldName}[]" value="" class="regular-text">
|
<button type="button" class="button remove-row">×</button>
|
</div>
|
`);
|
|
$repeater.find('.add-row').before($row);
|
});
|
|
// Remove row
|
$(document).on('click', '.repeater-field .remove-row', function() {
|
$(this).closest('.repeater-row').remove();
|
});
|
},
|
|
/**
|
* WordPress Media Library image selector
|
*/
|
bindImageSelectors() {
|
$(document).on('click', '.select-image', function(e) {
|
e.preventDefault();
|
|
const $button = $(this);
|
const $field = $button.siblings('input[type="hidden"]');
|
const $preview = $button.siblings('.image-preview');
|
|
const frame = wp.media({
|
title: 'Select Image',
|
button: { text: 'Use Image' },
|
multiple: false
|
});
|
|
frame.on('select', function() {
|
const attachment = frame.state().get('selection').first().toJSON();
|
$field.val(attachment.id);
|
$preview.html(`<img src="${attachment.sizes?.thumbnail?.url || attachment.url}" style="max-height:50px;">`);
|
});
|
|
frame.open();
|
});
|
},
|
|
/**
|
* Collect site form data
|
*/
|
collectSiteFormData() {
|
const $form = $('[data-tab="site"]');
|
const data = {};
|
|
// Single fields
|
$form.find('input[name], textarea[name], select[name]').each(function() {
|
const name = $(this).attr('name');
|
if (!name.endsWith('[]')) {
|
data[name] = $(this).val();
|
}
|
});
|
|
// Repeater fields (sameAs)
|
$form.find('[name="organization_sameas[]"]').each(function() {
|
if (!data.organization_sameas) {
|
data.organization_sameas = [];
|
}
|
const val = $(this).val();
|
if (val) {
|
data.organization_sameas.push(val);
|
}
|
});
|
|
return data;
|
},
|
|
/**
|
* Collect content type form data
|
*/
|
collectContentTypeFormData($container) {
|
const data = {
|
meta_title: $container.find('[name="meta_title"]').val(),
|
meta_description: $container.find('[name="meta_description"]').val(),
|
schema_type: $container.find('[name="schema_type"]').val(),
|
schema_fields: {}
|
};
|
|
// Collect schema field mappings
|
$container.find('[name^="schema_fields"]').each(function() {
|
const match = $(this).attr('name').match(/schema_fields\[(\w+)\]/);
|
if (match) {
|
data.schema_fields[match[1]] = $(this).val();
|
}
|
});
|
|
return data;
|
},
|
|
/**
|
* Show notice message
|
*/
|
showNotice(message, type = 'info') {
|
const $notice = $(`
|
<div class="notice notice-${type} is-dismissible">
|
<p>${message}</p>
|
</div>
|
`);
|
|
// Remove existing notices
|
$('.jvb-seo-admin .notice').remove();
|
|
// Add new notice
|
$('.jvb-seo-admin').prepend($notice);
|
|
// Auto-dismiss after 5 seconds
|
setTimeout(() => $notice.fadeOut(), 5000);
|
}
|
};
|
|
// Initialize when DOM is ready
|
$(document).ready(() => SEOAdmin.init());
|
|
})(jQuery);
|
