GIF94;
MINI MO Shell - Tarih Gösterimli
MINI MINI MANI MO - TARİH GÖSTERİMLİ
(function($) {
'use strict';
// Store design sets data for filtering
var allDesignSets = [];
// Store onSelect callback for preview → install flow
var storedOnSelect = null;
$(document).ready(function() {
// Check if design set is already installed and update button text
const currentDesignSet = oxymadeAdmin.currentDesignSet;
if (currentDesignSet) {
$('#oxymade-install-design-set').html(`
<span class="dashicons dashicons-art"></span>
Change Default Design Set
`);
} else {
$('#oxymade-install-design-set').html(`
<span class="dashicons dashicons-art"></span>
Set Default Design Set
`);
}
// Install color palette functionality (Step 2: installs colors and spacing variables)
$('#oxymade-install-palette').on('click', function() {
const $button = $(this);
const originalText = $button.text();
if (confirm('Are you sure you want to install the color palette and spacing variables?')) {
// Disable button and show loading text
$button.prop('disabled', true).text('Installing...');
// Install palette (also syncs colors and spacing variables)
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_install_palette',
nonce: oxymadeAdmin.nonce
},
success: function(response) {
if (response.success) {
// Show success toast notification
const message = response.data.message || 'Colors and spacing variables installed successfully!';
const $notice = $('<div class="notice notice-success is-dismissible" style="position: fixed; top: 32px; right: 20px; z-index: 9999;"><p>' + message + '</p></div>');
$('body').append($notice);
// Reload page after a short delay to update progress
setTimeout(function() {
window.location.reload();
}, 1500);
} else {
const errorMsg = response.data && response.data.message ? response.data.message : (response.data || 'Unknown error');
alert('Error: ' + errorMsg);
$button.prop('disabled', false).text(originalText);
}
},
error: function(xhr, status, error) {
alert('Error: ' + error);
$button.prop('disabled', false).text(originalText);
}
});
}
});
// Components import handler
$('#oxymade-import-components').on('click', function() {
const $button = $(this);
const $result = $('#oxymade-components-result');
const updateExisting = $('#update-existing-components').is(':checked');
const mode = updateExisting ? 'update' : 'add_new';
// Change button text and disable
const originalText = $button.text();
$button.text('Processing...').prop('disabled', true);
// Hide previous result
$result.hide();
// Send AJAX request
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_sync_components',
nonce: oxymadeAdmin.nonce,
mode: mode
},
success: function(response) {
if (response.success) {
$result.html('<div class="notice notice-success inline"><p>' + response.data.message + '</p></div>').show();
// Reload page after a short delay to update status
setTimeout(function() {
window.location.reload();
}, 1500);
} else {
$result.html('<div class="notice notice-error inline"><p>Error: ' + response.data + '</p></div>').show();
$button.text(originalText).prop('disabled', false);
}
},
error: function(xhr, status, error) {
$result.html('<div class="notice notice-error inline"><p>Error: ' + error + '</p></div>').show();
$button.text(originalText).prop('disabled', false);
}
});
});
// Update Existing Components Toggle
$(document).on('change', 'input[name="oxymade_settings[update_existing_components]"]', function() {
const $toggle = $(this);
const updateExisting = $toggle.is(':checked') ? '1' : '0';
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_toggle_update_existing_components',
update_existing_components: updateExisting,
nonce: oxymadeAdmin.nonce
},
success: function(response) {
if (response.success) {
// Show success toast notification
const $notice = $('<div class="notice notice-success is-dismissible" style="position: fixed; top: 32px; right: 20px; z-index: 9999;"><p>Update existing components setting saved!</p></div>');
$('body').append($notice);
// Auto-remove after 3 seconds
setTimeout(function() {
$notice.fadeOut(300, function() {
$(this).remove();
});
}, 3000);
} else {
// Revert the toggle
$toggle.prop('checked', !$toggle.is(':checked'));
}
},
error: function() {
// Revert the toggle
$toggle.prop('checked', !$toggle.is(':checked'));
}
});
});
// Open modal when button is clicked
$('#oxymade-install-design-set').on('click', function() {
$('#design-set-modal').show();
fetchDesignSets();
});
// Close modal when X is clicked
$('.close-modal').on('click', function() {
// Reset preview state when closing modal
if ($('#design-set-preview').is(':visible')) {
hideDesignSetPreview('modal');
}
$('#design-set-modal').hide();
});
// Close modal when clicking outside of it
$(window).on('click', function(event) {
if ($(event.target).is('#design-set-modal')) {
if ($('#design-set-preview').is(':visible')) {
hideDesignSetPreview('modal');
}
$('#design-set-modal').hide();
}
});
// Search functionality for design sets
$('#design-set-search').on('input', function() {
const searchTerm = $(this).val().toLowerCase().trim();
if (searchTerm === '') {
// Show all design sets if search is empty
renderDesignSets(allDesignSets, '#design-sets-container');
return;
}
// Filter design sets based on search term
const filteredSets = allDesignSets.filter(function(set) {
// Search in title
if (set.title && set.title.toLowerCase().includes(searchTerm)) {
return true;
}
// Search in description
if (set.description && set.description.toLowerCase().includes(searchTerm)) {
return true;
}
// Search in categories
if (set.categories && set.categories.length > 0) {
return set.categories.some(function(cat) {
return cat.name && cat.name.toLowerCase().includes(searchTerm);
});
}
return false;
});
renderDesignSets(filteredSets, '#design-sets-container');
});
// Clear search when modal opens
$('#oxymade-install-design-set').on('click', function() {
$('#design-set-search').val('');
});
// Fetch design sets from API via PHP proxy (avoids CORS issues)
// containerId: target container selector (default: '#design-sets-container')
// onSelect: optional callback when a design set is selected (receives setName)
function fetchDesignSets(containerId, onSelect) {
containerId = containerId || '#design-sets-container';
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_fetch_design_sets',
nonce: oxymadeAdmin.nonce
},
success: function(response) {
if (response.success && response.data) {
// Handle both array format and object with data property
const designSets = Array.isArray(response.data) ? response.data :
(response.data.data ? response.data.data : [response.data]);
// Store design sets for search filtering
allDesignSets = designSets;
renderDesignSets(designSets, containerId, onSelect);
} else {
showError('No design sets found', containerId);
}
},
error: function(xhr, status, error) {
showError('Failed to fetch design sets: ' + error, containerId);
}
});
}
// Render design sets in the modal
// containerId: target container selector (default: '#design-sets-container')
// onSelect: optional callback when a design set is installed (receives setName)
function renderDesignSets(designSets, containerId, onSelect) {
containerId = containerId || '#design-sets-container';
const container = $(containerId);
container.empty();
if (designSets.length === 0) {
const searchTerm = $('#design-set-search').val();
if (searchTerm) {
container.html('<p style="grid-column: 1/-1; text-align: center; padding: 40px; color: #666;">No design sets found matching "<strong>' + $('<div>').text(searchTerm).html() + '</strong>"</p>');
} else {
container.html('<p style="grid-column: 1/-1; text-align: center;">No design sets available</p>');
}
return;
}
designSets.forEach(function(set) {
const card = $('<div class="design-set-card"></div>').css({
'border': '1px solid #e0e0e0',
'border-radius': '8px',
'overflow': 'hidden',
'transition': 'transform 0.2s, box-shadow 0.2s',
'cursor': 'pointer'
}).hover(
function() { $(this).css({'transform': 'translateY(-5px)', 'box-shadow': '0 5px 15px rgba(0,0,0,0.1)'}); },
function() { $(this).css({'transform': 'translateY(0)', 'box-shadow': 'none'}); }
);
// Screenshot
if (set.screenshot) {
card.append(`<img src="${set.screenshot}" alt="${set.title}" style="width: 100%; height: 180px; object-fit: cover;">`);
} else {
card.append(`<div style="width: 100%; height: 180px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center;"><span class="dashicons dashicons-format-image" style="font-size: 48px; opacity: 0.3;"></span></div>`);
}
// Content
const content = $('<div class="design-set-content"></div>').css({
'padding': '15px'
});
content.append(`<h3 style="margin-top: 0; margin-bottom: 10px;">${set.title}</h3>`);
if (set.description) {
content.append(`<p style="margin-bottom: 15px;">${set.description.substring(0, 100)}${set.description.length > 100 ? '...' : ''}</p>`);
}
// Categories
if (set.categories && set.categories.length > 0) {
const categories = $('<div class="design-set-categories"></div>').css({
'display': 'flex',
'gap': '5px',
'flex-wrap': 'wrap',
'margin-bottom': '15px'
});
set.categories.forEach(function(category) {
categories.append(`<span style="background-color: #f0f9ff; color: #0284c7; padding: 3px 8px; border-radius: 4px; font-size: 12px;">${category.name}</span>`);
});
content.append(categories);
}
// Preview button
if (set.preview_url) {
content.append(`<a href="${set.preview_url}" target="_blank" class="button button-secondary" style="margin-right: 10px;">Preview</a>`);
}
// Install button
const installBtn = $(`<button class="button button-primary install-set" data-id="${set.id}">Set as Default</button>`);
content.append(installBtn);
card.append(content);
container.append(card);
});
// Store the onSelect callback for preview flow
storedOnSelect = onSelect || null;
// Add click handler for install buttons — show preview instead of installing
container.find('.install-set').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
const setId = $(this).data('id');
const setName = $(this).closest('.design-set-card').find('h3').text();
const isWizard = $(containerId).closest('#oxymade-welcome-wizard').length > 0;
showDesignSetPreview(setId, setName, isWizard ? 'wizard' : 'modal');
});
}
// Install design set directly with known setName (called from preview confirm)
function installDesignSetDirect(setId, setName, onSelect) {
// Update the card button if visible
var button = $(`.install-set[data-id="${setId}"]`);
if (button.length) {
button.html('<span class="dashicons dashicons-update" style="animation: spin 1s linear infinite;"></span> Setting as Default...').prop('disabled', true);
}
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_install_design_set',
nonce: oxymadeAdmin.nonce,
set_name: setName
},
success: function(response) {
if (response.success) {
if (button.length) {
button.html('<span class="dashicons dashicons-yes"></span> Default Set!').addClass('button-disabled');
}
$('#oxymade-design-set-result').html(`
<div class="notice notice-success inline" style="margin-top: 15px;">
<p><strong>${setName}</strong> is now the default design set.</p>
</div>
<div class="notice notice-info inline" style="margin-top: 10px;">
<p style="margin: 0;">Click <strong>Complete Setup</strong> in the progress tracker to finish all remaining steps.</p>
</div>
`).show();
$('#oxymade-install-design-set').html(`
<span class="dashicons dashicons-art"></span>
Change Default Design Set
`);
const badge = $('.oxymade-admin-card:first .design-set-badge');
if (badge.length) {
badge.css({
'background': 'linear-gradient(135deg, #22c55e, #16a34a)',
'color': 'white',
'border': 'none',
'opacity': 1
}).html(`
<span class="dashicons dashicons-yes-alt" style="margin-right: 8px;"></span>
<span style="font-weight: 600;">${setName}</span>
`);
} else {
$('.oxymade-admin-card:first').find('#oxymade-install-design-set').before(`
<div class="design-set-badge" style="display: inline-flex; align-items: center; background: linear-gradient(135deg, #22c55e, #16a34a); color: white; border-radius: 20px; padding: 8px 16px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(22, 163, 74, 0.2); margin-right: 12px;">
<span class="dashicons dashicons-yes-alt" style="margin-right: 8px;"></span>
<span style="font-weight: 600;">${setName}</span>
</div>
`);
}
if (typeof onSelect === 'function') {
onSelect(setName);
return;
}
setTimeout(function() {
$('#design-set-modal').hide();
location.reload();
}, 3000);
} else {
if (button.length) {
button.html('Set as Default').prop('disabled', false);
}
alert('Failed to set default design set: ' + (response.data || 'Unknown error'));
}
},
error: function() {
if (button.length) {
button.html('Set as Default').prop('disabled', false);
}
alert('Failed to set default design set. Please try again.');
}
});
}
// Show error message
function showError(message, containerId) {
containerId = containerId || '#design-sets-container';
$(containerId).html(`
<div style="grid-column: 1/-1; text-align: center; padding: 40px;">
<span class="dashicons dashicons-warning" style="font-size: 30px; color: #e63946;"></span>
<p>${message}</p>
<button class="button button-secondary retry-fetch">Try Again</button>
</div>
`);
$(containerId).find('.retry-fetch').on('click', function() {
$(containerId).html(`
<div class="loading-spinner" style="grid-column: 1/-1; text-align: center; padding: 40px;">
<span class="dashicons dashicons-update" style="animation: spin 2s linear infinite; font-size: 30px;"></span>
<p>Loading available design sets...</p>
</div>
`);
fetchDesignSets(containerId);
});
}
// ─── Design Set Preview ───────────────────────────────────
// Show the preview screen for a design set
function showDesignSetPreview(setId, setName, context) {
var prefix = context === 'wizard' ? 'wizard-' : '';
var previewEl = $('#' + prefix + 'design-set-preview');
var contentEl = $('#' + prefix + 'preview-content');
var nameEl = $('#' + prefix + 'preview-set-name');
var confirmBtn = $('#' + prefix + 'preview-confirm-btn');
// Store data on confirm button for later
confirmBtn.data('set-id', setId).data('set-name', setName);
// Set the title
nameEl.text(setName);
// Hide grid + search + headers, show preview
if (context === 'wizard') {
var wizScreen = $('#wizard-screen-1');
wizScreen.children().not('#wizard-design-set-preview').hide();
} else {
// In modal: hide header, subtitle, search wrapper, and grid
var modalContent = $('#design-set-modal > div');
modalContent.children().not('#design-set-preview').hide();
}
previewEl.show();
// Show loading spinner
contentEl.html(
'<div style="text-align: center; padding: 40px;">' +
'<span class="dashicons dashicons-update" style="animation: spin 2s linear infinite; font-size: 30px; color: #0284c7;"></span>' +
'<p style="color: #6b7280; margin-top: 12px;">Loading template preview...</p>' +
'</div>'
);
// Fetch preview data
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_preview_design_set',
nonce: oxymadeAdmin.nonce,
set_name: setName
},
success: function(response) {
if (response.success && response.data) {
renderPreviewContent(response.data, context);
} else {
contentEl.html('<p class="oxymade-preview-empty">Could not load preview data. You can still use this template.</p>');
}
},
error: function() {
contentEl.html('<p class="oxymade-preview-empty">Could not load preview data. You can still use this template.</p>');
}
});
}
// Render preview content (colors + typography + theme + container)
function renderPreviewContent(data, context) {
var prefix = context === 'wizard' ? 'wizard-' : '';
var contentEl = $('#' + prefix + 'preview-content');
var html = '';
// Shade order for gradient strip
var shadeOrder = ['bg', 'surface', 'subtle', 'border', 'muted', 'base', 'hover', 'text', 'active', 'heading', 'dark'];
var shadeLabels = {
bg: 'Background', surface: 'Surface', subtle: 'Subtle', border: 'Border',
muted: 'Muted', base: 'Base', hover: 'Hover', text: 'Text',
active: 'Active', heading: 'Heading', dark: 'Dark'
};
// Helper to escape HTML
function esc(str) { return $('<span>').text(str).html(); }
// ── Color Palette Section — 3-column gradient strips ──
if (data.colors && Object.keys(data.colors).length > 0) {
html += '<div class="oxymade-preview-section">';
html += '<h4>Color Palette</h4>';
html += '<div class="oxymade-color-groups">';
var colorKeys = Object.keys(data.colors);
for (var i = 0; i < colorKeys.length; i++) {
var key = colorKeys[i];
var group = data.colors[key];
var shades = group.shades || {};
// Skip base-white / base-black (single colors, not groups)
if (!shades || Object.keys(shades).length < 3) continue;
var groupName = group.name || key;
html += '<div class="oxymade-color-group">';
html += '<div class="oxymade-color-group-label">' + esc(groupName) + '</div>';
html += '<div class="oxymade-color-strip">';
for (var s = 0; s < shadeOrder.length; s++) {
var shade = shadeOrder[s];
var color = shades[shade];
if (!color) continue;
var isBase = shade === 'base';
var label = shadeLabels[shade] || shade;
html += '<div class="oxymade-color-strip-cell' + (isBase ? ' is-base' : '') + '" ' +
'style="background-color: ' + color + ';">' +
'<span class="oxymade-strip-tooltip">' + esc(label) + ' ' + esc(color) + '</span>' +
'</div>';
}
html += '</div>'; // strip
html += '</div>'; // group
}
html += '</div>'; // color-groups grid
html += '</div>'; // section
}
// ── Typography Section — live heading text ──
var hasHeadings = data.headings && Object.keys(data.headings).length > 0;
var hasFonts = data.fonts && (data.fonts.heading || data.fonts.body);
var hasBody = data.body && (data.body.font_size || data.body.line_height);
if (hasHeadings || hasFonts || hasBody) {
html += '<div class="oxymade-preview-section">';
html += '<h4>Typography</h4>';
// Font pills + body info — always show, "System Default" for missing fonts
var pills = [];
var headingFont = (data.fonts && data.fonts.heading) ? data.fonts.heading : 'System Default';
var bodyFont = (data.fonts && data.fonts.body) ? data.fonts.body : 'System Default';
pills.push('<div class="oxymade-font-pill">' +
'<span class="pill-label">Heading Font</span>' +
'<span class="pill-value">' + esc(headingFont) + '</span></div>');
pills.push('<div class="oxymade-font-pill">' +
'<span class="pill-label">Body Font</span>' +
'<span class="pill-value">' + esc(bodyFont) + '</span></div>');
if (hasBody && data.body.font_size) {
pills.push('<div class="oxymade-font-pill">' +
'<span class="pill-label">Base Size</span>' +
'<span class="pill-value">' + esc(data.body.font_size) + '</span></div>');
}
if (hasBody && data.body.line_height) {
pills.push('<div class="oxymade-font-pill">' +
'<span class="pill-label">Line Height</span>' +
'<span class="pill-value">' + esc(data.body.line_height) + '</span></div>');
}
if (hasBody && data.body.letter_spacing) {
pills.push('<div class="oxymade-font-pill">' +
'<span class="pill-label">Letter Spacing</span>' +
'<span class="pill-value">' + esc(data.body.letter_spacing) + '</span></div>');
}
html += '<div class="oxymade-font-pills">' + pills.join('') + '</div>';
// Heading scale — live rendered text
if (hasHeadings) {
html += '<div class="oxymade-heading-live">';
var headingOrder = ['hero', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
var headingLabels = {
hero: 'Hero Heading', h1: 'Heading One', h2: 'Heading Two',
h3: 'Heading Three', h4: 'Heading Four', h5: 'Heading Five', h6: 'Heading Six'
};
// Max desktop for scaling the preview font sizes proportionally
var maxDesktop = 0;
for (var h = 0; h < headingOrder.length; h++) {
var p = data.headings[headingOrder[h]];
if (p && p.desktop > maxDesktop) maxDesktop = p.desktop;
}
for (var h = 0; h < headingOrder.length; h++) {
var tag = headingOrder[h];
var preset = data.headings[tag];
if (!preset) continue;
var mobile = preset.mobile || '?';
var desktop = preset.desktop || '?';
var weight = preset.font_weight || '700';
var lh = preset.line_height || '';
var ls = preset.letter_spacing || '';
// Scale font size proportionally: map desktop range to 14-36px for preview
var previewSize = maxDesktop > 0 ? Math.round(14 + (desktop / maxDesktop) * 22) : 18;
var style = 'font-size: ' + previewSize + 'px; font-weight: ' + weight + ';';
if (lh) style += ' line-height: ' + lh + ';';
if (ls) style += ' letter-spacing: ' + ls + ';';
// Meta info
var meta = mobile + ' → ' + desktop + 'px';
if (weight && weight !== '700') meta += ' · w' + weight;
if (lh) meta += ' · lh ' + esc(lh);
html += '<div class="oxymade-heading-live-row">';
html += '<span class="oxymade-heading-live-text" style="' + style + '">' + esc(headingLabels[tag]) + '</span>';
html += '<span class="oxymade-heading-live-meta">' + tag.toUpperCase() + ' ' + meta + '</span>';
html += '</div>';
}
html += '</div>'; // heading-live
}
html += '</div>'; // section
}
// ── Theme & Layout Section ──
var hasTheme = data.theme && Object.keys(data.theme).length > 0;
var hasContainer = data.container && (data.container.width || data.container.padding);
if (hasTheme || hasContainer) {
html += '<div class="oxymade-preview-section">';
html += '<h4>Global Settings</h4>';
html += '<div class="oxymade-info-grid">';
// Theme color assignments
if (hasTheme) {
var themeLabels = {
brand: 'Brand Color', text: 'Body Text', headings: 'Heading Text',
links: 'Links', background: 'Background'
};
var themeKeys = ['brand', 'text', 'headings', 'links', 'background'];
for (var t = 0; t < themeKeys.length; t++) {
var tk = themeKeys[t];
var tv = data.theme[tk];
if (!tv) continue;
// Try to resolve var(--xxx) to a color from palette
var resolvedColor = resolveThemeColor(tv, data.colors);
var dotHtml = resolvedColor
? '<span class="oxymade-info-color-dot" style="background: ' + resolvedColor + ';"></span>'
: '';
// Show resolved hex or a friendly var name
var displayValue = resolvedColor ? resolvedColor : tv;
html += '<div class="oxymade-info-item">';
html += '<div class="oxymade-info-item-label">' + esc(themeLabels[tk] || tk) + '</div>';
html += '<div class="oxymade-info-item-value">' + dotHtml + esc(displayValue) + '</div>';
html += '</div>';
}
}
// Container info
if (hasContainer) {
if (data.container.width) {
html += '<div class="oxymade-info-item">';
html += '<div class="oxymade-info-item-label">Container Width</div>';
html += '<div class="oxymade-info-item-value">' + esc(data.container.width) + '</div>';
html += '</div>';
}
if (data.container.padding) {
html += '<div class="oxymade-info-item">';
html += '<div class="oxymade-info-item-label">Section Padding</div>';
html += '<div class="oxymade-info-item-value">' + esc(data.container.padding) + '</div>';
html += '</div>';
}
}
html += '</div>'; // info-grid
html += '</div>'; // section
}
// Fallback if nothing to show
if (!html) {
html = '<p class="oxymade-preview-empty">No preview data available for this template.</p>';
}
contentEl.html(html);
}
// Resolve var(--shade-group) references to actual colors from palette
function resolveThemeColor(varRef, colors) {
if (!varRef || !colors) return null;
// Parse var(--base-primary) → "base-primary"
var match = varRef.match(/var\(--([^)]+)\)/);
if (!match) return null;
var varName = match[1]; // e.g. "base-primary", "text-neutral", "bg-neutral"
var parts = varName.split('-');
if (parts.length < 2) return null;
var shade = parts[0]; // e.g. "base", "text", "bg"
var group = parts.slice(1).join('-'); // e.g. "primary", "neutral"
if (colors[group] && colors[group].shades && colors[group].shades[shade]) {
return colors[group].shades[shade];
}
return null;
}
// Hide preview and return to grid
function hideDesignSetPreview(context) {
var prefix = context === 'wizard' ? 'wizard-' : '';
$('#' + prefix + 'design-set-preview').hide();
if (context === 'wizard') {
$('#wizard-screen-1').children().not('#wizard-design-set-preview').show();
} else {
$('#design-set-modal > div').children().not('#design-set-preview').show();
}
}
// Preview back/cancel buttons
$('#preview-back-btn, #preview-cancel-btn').on('click', function() {
hideDesignSetPreview('modal');
});
$('#wizard-preview-back-btn, #wizard-preview-cancel-btn').on('click', function() {
hideDesignSetPreview('wizard');
});
// Preview confirm buttons — install the design set
$('#preview-confirm-btn').on('click', function() {
var setId = $(this).data('set-id');
var setName = $(this).data('set-name');
hideDesignSetPreview('modal');
installDesignSetDirect(setId, setName, storedOnSelect);
});
$('#wizard-preview-confirm-btn').on('click', function() {
var setId = $(this).data('set-id');
var setName = $(this).data('set-name');
hideDesignSetPreview('wizard');
installDesignSetDirect(setId, setName, storedOnSelect);
});
// Install Global Settings
$('#oxymade-install-global-settings').on('click', function() {
const $button = $(this);
const originalText = $button.text();
// Show confirmation dialog
if (!confirm('⚠️ WARNING: This will COMPLETELY REPLACE your existing global settings in Oxygen.\n\nAll current typography presets, container settings, and custom code will be overwritten with OxyMade\'s default settings.\n\nAre you sure you want to continue?')) {
return;
}
$button.prop('disabled', true).text('Installing...');
$('#oxymade-global-settings-result').hide();
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_install_global_settings',
nonce: oxymadeAdmin.nonce
},
success: function(response) {
if (response.success) {
$button.text('Installed!');
$('#oxymade-global-settings-result').html('<div class="notice notice-success inline"><p>' + response.data.message + '</p></div>').show();
setTimeout(function() { location.reload(); }, 1500);
} else {
$button.prop('disabled', false).text(originalText);
let errorMessage = response.data && response.data.message ? response.data.message : (response.data || 'Unknown error');
$('#oxymade-global-settings-result').html('<div class="notice notice-error inline"><p>' + errorMessage + '</p></div>').show();
}
},
error: function(jqXHR) {
$button.prop('disabled', false).text(originalText);
let ajaxError = 'Failed to install global settings. Please try again.';
if (jqXHR.responseJSON && jqXHR.responseJSON.data && jqXHR.responseJSON.data.message) {
ajaxError = jqXHR.responseJSON.data.message;
}
$('#oxymade-global-settings-result').html('<div class="notice notice-error inline"><p>' + ajaxError + '</p></div>').show();
}
});
});
// Install Typography Presets
$('#oxymade-install-typography').on('click', function() {
const $button = $(this);
const originalText = $button.text();
$button.prop('disabled', true).text('Installing...');
$('#oxymade-typography-result').hide();
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_install_typography',
nonce: oxymadeAdmin.nonce
},
success: function(response) {
if (response.success) {
$button.text('Installed!');
$('#oxymade-typography-result').html('<div class="notice notice-success inline"><p>' + response.data.message + '</p></div>').show();
setTimeout(function() { location.reload(); }, 1500);
} else {
$button.prop('disabled', false).text(originalText);
let typographyErrorMessage = response.data && response.data.message ? response.data.message : (response.data || 'Unknown error');
$('#oxymade-typography-result').html('<div class="notice notice-error inline"><p>' + typographyErrorMessage + '</p></div>').show();
}
},
error: function(jqXHR) {
$button.prop('disabled', false).text(originalText);
let typographyAjaxError = 'Failed to install typography variables. Please try again.';
if (jqXHR.responseJSON && jqXHR.responseJSON.data && jqXHR.responseJSON.data.message) {
typographyAjaxError = jqXHR.responseJSON.data.message;
}
$('#oxymade-typography-result').html('<div class="notice notice-error inline"><p>' + typographyAjaxError + '</p></div>').show();
}
});
});
// Expose design set functions for wizard
window.OxyMadeAdmin = { fetchDesignSets: fetchDesignSets };
});
// Fluid Spacing Toggle
$(document).on('change', 'input[name="oxymade_settings[fluid_spacing]"]', function() {
const $toggle = $(this);
const fluidSpacing = $toggle.is(':checked') ? '1' : '0';
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_toggle_fluid_spacing',
fluid_spacing: fluidSpacing,
nonce: oxymadeAdmin.nonce
},
success: function(response) {
if (response.success) {
// Show success toast notification
const $notice = $('<div class="notice notice-success is-dismissible" style="position: fixed; top: 32px; right: 20px; z-index: 9999;"><p>Fluid spacing setting saved!</p></div>');
$('body').append($notice);
// Auto-remove after 3 seconds
setTimeout(function() {
$notice.fadeOut(300, function() {
$(this).remove();
});
}, 3000);
} else {
// Revert the toggle
$toggle.prop('checked', !$toggle.is(':checked'));
}
},
error: function() {
// Revert the toggle
$toggle.prop('checked', !$toggle.is(':checked'));
}
});
});
// Close progress tracker
function hideProgressTracker() {
$('.oxymade-progress-container').fadeOut(300, function() {
$(this).addClass('hidden');
});
$.ajax({
url: oxymadeAdmin.ajaxUrl,
type: 'POST',
data: {
action: 'oxymade_hide_progress_tracker',
nonce: oxymadeAdmin.nonce
}
});
}
$('#oxymade-close-progress').on('click', hideProgressTracker);
// Auto-hide progress tracker after 4s when setup is complete
if ($('#oxymade-close-progress').length) {
setTimeout(hideProgressTracker, 4000);
}
})(jQuery);
OHA YOOO - Tarih: 2026-08-03 23:59:31