| 1 |
/** |
| 2 |
* Media Optimization Settings Tab Scripts |
| 3 |
* |
| 4 |
* @package Search Atlas SEO |
| 5 |
* @copyright Copyright (C) 2021-2025, Search Atlas Group - support@searchatlas.com |
| 6 |
* @since 2.6.0 |
| 7 |
* |
| 8 |
* Localized data expected via metasyncMediaOpt: |
| 9 |
* - resetConfirm: string |
| 10 |
*/ |
| 11 |
(function() { |
| 12 |
'use strict'; |
| 13 |
|
| 14 |
var i18n = window.metasyncMediaOpt || {}; |
| 15 |
|
| 16 |
// Quality range slider live preview |
| 17 |
var qualitySlider = document.getElementById('conversion_quality'); |
| 18 |
var qualityValue = document.getElementById('quality-value'); |
| 19 |
if (qualitySlider && qualityValue) { |
| 20 |
qualitySlider.addEventListener('input', function() { |
| 21 |
qualityValue.textContent = this.value; |
| 22 |
}); |
| 23 |
} |
| 24 |
|
| 25 |
// Show/hide replace strategy warning |
| 26 |
var strategySelect = document.getElementById('conversion_strategy'); |
| 27 |
var replaceWarning = document.getElementById('replace-strategy-warning'); |
| 28 |
if (strategySelect && replaceWarning) { |
| 29 |
strategySelect.addEventListener('change', function() { |
| 30 |
replaceWarning.style.display = this.value === 'replace' ? '' : 'none'; |
| 31 |
}); |
| 32 |
} |
| 33 |
|
| 34 |
// Toggle section show/hide based on master toggle |
| 35 |
var toggleCheckboxes = document.querySelectorAll('.metasync-toggle input[type="checkbox"]'); |
| 36 |
toggleCheckboxes.forEach(function(checkbox) { |
| 37 |
checkbox.addEventListener('change', function() { |
| 38 |
var name = this.name; |
| 39 |
var match = name.match(/\[([^\]]+)\]/); |
| 40 |
if (!match) return; |
| 41 |
|
| 42 |
var key = match[1]; |
| 43 |
var section = document.querySelector('.metasync-toggle-section[data-toggle="' + key + '"]'); |
| 44 |
if (section) { |
| 45 |
if (this.checked) { |
| 46 |
section.style.display = ''; |
| 47 |
section.style.opacity = '0'; |
| 48 |
section.style.maxHeight = '0'; |
| 49 |
section.offsetHeight; // Trigger reflow |
| 50 |
section.style.opacity = '1'; |
| 51 |
section.style.maxHeight = section.scrollHeight + 'px'; |
| 52 |
setTimeout(function() { |
| 53 |
section.style.maxHeight = ''; |
| 54 |
}, 300); |
| 55 |
} else { |
| 56 |
section.style.maxHeight = section.scrollHeight + 'px'; |
| 57 |
section.offsetHeight; |
| 58 |
section.style.opacity = '0'; |
| 59 |
section.style.maxHeight = '0'; |
| 60 |
setTimeout(function() { |
| 61 |
section.style.display = 'none'; |
| 62 |
section.style.opacity = ''; |
| 63 |
section.style.maxHeight = ''; |
| 64 |
}, 300); |
| 65 |
} |
| 66 |
} |
| 67 |
}); |
| 68 |
}); |
| 69 |
|
| 70 |
// Reset to defaults confirmation |
| 71 |
var resetBtn = document.getElementById('reset-media-settings'); |
| 72 |
if (resetBtn) { |
| 73 |
resetBtn.addEventListener('click', function(e) { |
| 74 |
e.preventDefault(); |
| 75 |
if (!confirm(i18n.resetConfirm || 'Are you sure you want to reset all media optimization settings to their defaults? This cannot be undone.')) { |
| 76 |
return; |
| 77 |
} |
| 78 |
|
| 79 |
var form = document.getElementById('metasync-media-optimization-form'); |
| 80 |
var resetInput = document.createElement('input'); |
| 81 |
resetInput.type = 'hidden'; |
| 82 |
resetInput.name = 'metasync_media_reset'; |
| 83 |
resetInput.value = '1'; |
| 84 |
form.appendChild(resetInput); |
| 85 |
form.submit(); |
| 86 |
}); |
| 87 |
} |
| 88 |
|
| 89 |
// Auto-dismiss success notice |
| 90 |
var successNotice = document.querySelector('.metasync-notice-success'); |
| 91 |
if (successNotice) { |
| 92 |
setTimeout(function() { |
| 93 |
successNotice.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; |
| 94 |
successNotice.style.opacity = '0'; |
| 95 |
successNotice.style.transform = 'translateY(-10px)'; |
| 96 |
setTimeout(function() { |
| 97 |
successNotice.remove(); |
| 98 |
}, 500); |
| 99 |
}, 4000); |
| 100 |
} |
| 101 |
|
| 102 |
// ── Tab Switching ── |
| 103 |
function switchMediaTab(targetTab) { |
| 104 |
var tabLinks = document.querySelectorAll('.metasync-media-optimization-page .metasync-tab-nav a'); |
| 105 |
tabLinks.forEach(function(a) { a.classList.remove('active'); }); |
| 106 |
|
| 107 |
var activeLink = document.querySelector('.metasync-media-optimization-page .metasync-tab-nav a[data-tab="' + targetTab + '"]'); |
| 108 |
if (activeLink) activeLink.classList.add('active'); |
| 109 |
|
| 110 |
var contents = document.querySelectorAll('.metasync-media-optimization-page .metasync-tab-content'); |
| 111 |
contents.forEach(function(c) { c.classList.remove('active'); }); |
| 112 |
|
| 113 |
var targetContent = document.getElementById(targetTab + '-content'); |
| 114 |
if (targetContent) targetContent.classList.add('active'); |
| 115 |
} |
| 116 |
|
| 117 |
// Initialize tab from URL |
| 118 |
var urlParams = new URLSearchParams(window.location.search); |
| 119 |
var currentTab = urlParams.get('tab') || 'settings'; |
| 120 |
switchMediaTab(currentTab); |
| 121 |
|
| 122 |
// Handle tab clicks |
| 123 |
var tabNav = document.querySelectorAll('.metasync-media-optimization-page .metasync-tab-nav a'); |
| 124 |
tabNav.forEach(function(link) { |
| 125 |
link.addEventListener('click', function(e) { |
| 126 |
e.preventDefault(); |
| 127 |
var tab = this.dataset.tab; |
| 128 |
switchMediaTab(tab); |
| 129 |
|
| 130 |
var url = new URL(window.location); |
| 131 |
url.searchParams.set('tab', tab); |
| 132 |
url.searchParams.delete('paged'); |
| 133 |
url.searchParams.delete('paged_media'); |
| 134 |
url.searchParams.delete('s'); |
| 135 |
url.searchParams.delete('status_filter'); |
| 136 |
window.history.pushState({}, '', url); |
| 137 |
}); |
| 138 |
}); |
| 139 |
})(); |
| 140 |
|
