| 1 |
(function ($) { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var defaults = { |
| 5 |
dark: { |
| 6 |
'dashboard-bg': '#0f1419', |
| 7 |
'dashboard-card-bg': '#1a1f26', |
| 8 |
'dashboard-card-hover': '#222831', |
| 9 |
'dashboard-text-primary': '#ffffff', |
| 10 |
'dashboard-text-secondary': '#9ca3af', |
| 11 |
'dashboard-accent': '#3b82f6', |
| 12 |
'dashboard-accent-hover': '#2563eb', |
| 13 |
'dashboard-success': '#10b981', |
| 14 |
'dashboard-warning': '#f59e0b', |
| 15 |
'dashboard-error': '#ef4444', |
| 16 |
'dashboard-border': '#374151', |
| 17 |
'dashboard-gradient-primary-from': '#667eea', |
| 18 |
'dashboard-gradient-primary-to': '#764ba2', |
| 19 |
'dashboard-gradient-accent-from': '#f093fb', |
| 20 |
'dashboard-gradient-accent-to': '#f5576c' |
| 21 |
}, |
| 22 |
light: { |
| 23 |
'dashboard-bg': '#f8f9fa', |
| 24 |
'dashboard-card-bg': '#ffffff', |
| 25 |
'dashboard-card-hover': '#f1f3f5', |
| 26 |
'dashboard-text-primary': '#1a1f26', |
| 27 |
'dashboard-text-secondary': '#6b7280', |
| 28 |
'dashboard-accent': '#3b82f6', |
| 29 |
'dashboard-accent-hover': '#2563eb', |
| 30 |
'dashboard-success': '#10b981', |
| 31 |
'dashboard-warning': '#f59e0b', |
| 32 |
'dashboard-error': '#ef4444', |
| 33 |
'dashboard-border': '#e5e7eb', |
| 34 |
'dashboard-gradient-primary-from': '#667eea', |
| 35 |
'dashboard-gradient-primary-to': '#764ba2', |
| 36 |
'dashboard-gradient-accent-from': '#f093fb', |
| 37 |
'dashboard-gradient-accent-to': '#f5576c' |
| 38 |
} |
| 39 |
}; |
| 40 |
|
| 41 |
// Gradient pairs: CSS variable name -> [from field, to field] |
| 42 |
var gradientPairs = { |
| 43 |
'dashboard-gradient-primary': ['dashboard-gradient-primary-from', 'dashboard-gradient-primary-to'], |
| 44 |
'dashboard-gradient-accent': ['dashboard-gradient-accent-from', 'dashboard-gradient-accent-to'] |
| 45 |
}; |
| 46 |
|
| 47 |
function getCurrentTheme() { |
| 48 |
var wrap = document.querySelector('.metasync-dashboard-wrap'); |
| 49 |
return (wrap && wrap.getAttribute('data-theme')) || 'dark'; |
| 50 |
} |
| 51 |
|
| 52 |
function getFieldValue(theme, varName) { |
| 53 |
var $field = $('#metasync-color-palette-section .metasync-color-field[data-color-theme="' + theme + '"][data-css-var="' + varName + '"]'); |
| 54 |
return $field.length ? $field.val() : ''; |
| 55 |
} |
| 56 |
|
| 57 |
function applyLivePreview() { |
| 58 |
var theme = getCurrentTheme(); |
| 59 |
var wrap = document.querySelector('.metasync-dashboard-wrap'); |
| 60 |
if (!wrap) return; |
| 61 |
|
| 62 |
$('#metasync-color-palette-section .metasync-color-field[data-color-theme="' + theme + '"]').each(function () { |
| 63 |
var varName = $(this).data('css-var'); |
| 64 |
// Skip gradient partials — they are composed below |
| 65 |
if (varName.indexOf('gradient-') !== -1) return; |
| 66 |
var value = $(this).val(); |
| 67 |
if (value) { |
| 68 |
wrap.style.setProperty('--' + varName, value); |
| 69 |
} |
| 70 |
}); |
| 71 |
|
| 72 |
// Build gradient CSS variables from paired from/to fields |
| 73 |
$.each(gradientPairs, function (gradVar, pair) { |
| 74 |
var from = getFieldValue(theme, pair[0]); |
| 75 |
var to = getFieldValue(theme, pair[1]); |
| 76 |
if (from && to) { |
| 77 |
wrap.style.setProperty('--' + gradVar, 'linear-gradient(135deg, ' + from + ' 0%, ' + to + ' 100%)'); |
| 78 |
} |
| 79 |
}); |
| 80 |
} |
| 81 |
|
| 82 |
function updateHexDisplay($input) { |
| 83 |
$input.siblings('.metasync-color-hex-display').text($input.val()); |
| 84 |
} |
| 85 |
|
| 86 |
function bindColorInputs() { |
| 87 |
$('#metasync-color-palette-section').on('input', '.metasync-color-field', function () { |
| 88 |
var $input = $(this); |
| 89 |
updateHexDisplay($input); |
| 90 |
applyLivePreview(); |
| 91 |
}); |
| 92 |
} |
| 93 |
|
| 94 |
function bindResetButtons() { |
| 95 |
$('#metasync-reset-dark-palette, #metasync-reset-light-palette').on('click', function (e) { |
| 96 |
e.preventDefault(); |
| 97 |
var theme = $(this).data('reset-theme'); |
| 98 |
var themeDefaults = defaults[theme]; |
| 99 |
if (!themeDefaults) return; |
| 100 |
|
| 101 |
$('#metasync-color-palette-section .metasync-color-field[data-color-theme="' + theme + '"]').each(function () { |
| 102 |
var $input = $(this); |
| 103 |
var varName = $input.data('css-var'); |
| 104 |
var defaultVal = themeDefaults[varName] || ''; |
| 105 |
|
| 106 |
$input.val(defaultVal); |
| 107 |
updateHexDisplay($input); |
| 108 |
}); |
| 109 |
|
| 110 |
applyLivePreview(); |
| 111 |
}); |
| 112 |
} |
| 113 |
|
| 114 |
function bindThemeTabs() { |
| 115 |
$(document).on('click', '.metasync-palette-tab', function (e) { |
| 116 |
e.preventDefault(); |
| 117 |
var target = $(this).data('palette'); |
| 118 |
|
| 119 |
$('.metasync-palette-tab').removeClass('active'); |
| 120 |
$(this).addClass('active'); |
| 121 |
|
| 122 |
$('.metasync-palette-panel').removeClass('active'); |
| 123 |
$('#metasync-palette-' + target).addClass('active'); |
| 124 |
}); |
| 125 |
} |
| 126 |
|
| 127 |
function listenForThemeChange() { |
| 128 |
$(document).on('metasync-theme-changed', function () { |
| 129 |
applyLivePreview(); |
| 130 |
}); |
| 131 |
} |
| 132 |
|
| 133 |
$(document).ready(function () { |
| 134 |
if ($('#metasync-color-palette-section').length === 0) return; |
| 135 |
|
| 136 |
bindColorInputs(); |
| 137 |
bindResetButtons(); |
| 138 |
bindThemeTabs(); |
| 139 |
listenForThemeChange(); |
| 140 |
applyLivePreview(); |
| 141 |
}); |
| 142 |
|
| 143 |
})(jQuery); |
| 144 |
|
