| 1 |
/** |
| 2 |
* MetaSync Theme Switcher |
| 3 |
* Handles dark/light theme toggling and persistence |
| 4 |
*/ |
| 5 |
|
| 6 |
(function ($) { |
| 7 |
'use strict'; |
| 8 |
|
| 9 |
const MetaSyncTheme = { |
| 10 |
init: function () { |
| 11 |
this.initTheme(); |
| 12 |
this.bindEvents(); |
| 13 |
}, |
| 14 |
|
| 15 |
/** |
| 16 |
* Initialize theme on page load |
| 17 |
*/ |
| 18 |
initTheme: function () { |
| 19 |
// Get saved theme preference or default to dark |
| 20 |
const savedTheme = this.getSavedTheme(); |
| 21 |
this.applyTheme(savedTheme); |
| 22 |
this.updateToggleButton(savedTheme); |
| 23 |
}, |
| 24 |
|
| 25 |
/** |
| 26 |
* Get saved theme from localStorage or WordPress options |
| 27 |
*/ |
| 28 |
getSavedTheme: function () { |
| 29 |
// First check localStorage for immediate UI response |
| 30 |
const localTheme = localStorage.getItem('metasync_theme'); |
| 31 |
if (localTheme) { |
| 32 |
return localTheme; |
| 33 |
} |
| 34 |
|
| 35 |
// Check if theme is set in the data attribute (from PHP) |
| 36 |
const dashboardWrap = document.querySelector('.metasync-dashboard-wrap'); |
| 37 |
if (dashboardWrap) { |
| 38 |
const dataTheme = dashboardWrap.getAttribute('data-theme'); |
| 39 |
if (dataTheme) { |
| 40 |
return dataTheme; |
| 41 |
} |
| 42 |
} |
| 43 |
|
| 44 |
// Default to dark theme |
| 45 |
return 'dark'; |
| 46 |
}, |
| 47 |
|
| 48 |
/** |
| 49 |
* Apply theme to the dashboard |
| 50 |
*/ |
| 51 |
applyTheme: function (theme) { |
| 52 |
const dashboardWrap = document.querySelector('.metasync-dashboard-wrap'); |
| 53 |
if (dashboardWrap) { |
| 54 |
dashboardWrap.setAttribute('data-theme', theme); |
| 55 |
} |
| 56 |
|
| 57 |
// Also set on body for global scope if needed |
| 58 |
document.documentElement.setAttribute('data-theme', theme); |
| 59 |
|
| 60 |
// Save to localStorage for instant UI on next page load |
| 61 |
localStorage.setItem('metasync_theme', theme); |
| 62 |
}, |
| 63 |
|
| 64 |
/** |
| 65 |
* Update toggle button active state |
| 66 |
*/ |
| 67 |
updateToggleButton: function (theme) { |
| 68 |
$('.metasync-theme-option').removeClass('active'); |
| 69 |
$('.metasync-theme-option[data-theme="' + theme + '"]').addClass('active'); |
| 70 |
}, |
| 71 |
|
| 72 |
/** |
| 73 |
* Toggle between themes |
| 74 |
*/ |
| 75 |
toggleTheme: function (newTheme) { |
| 76 |
this.applyTheme(newTheme); |
| 77 |
this.updateToggleButton(newTheme); |
| 78 |
|
| 79 |
// Save to WordPress database via AJAX |
| 80 |
this.saveThemePreference(newTheme); |
| 81 |
|
| 82 |
// Trigger custom event for other scripts |
| 83 |
$(document).trigger('metasync:theme-changed', [newTheme]); |
| 84 |
}, |
| 85 |
|
| 86 |
/** |
| 87 |
* Save theme preference to WordPress database |
| 88 |
*/ |
| 89 |
saveThemePreference: function (theme) { |
| 90 |
// Check if wp.ajax is available (WordPress 4.4+) |
| 91 |
if (typeof wp !== 'undefined' && wp.ajax) { |
| 92 |
wp.ajax.post('metasync_save_theme', { |
| 93 |
theme: theme, |
| 94 |
_ajax_nonce: (typeof metasyncThemeData !== 'undefined' && metasyncThemeData.nonce) ? metasyncThemeData.nonce : '' |
| 95 |
}).done(function (response) { |
| 96 |
console.log('MetaSync: Theme preference saved:', theme); |
| 97 |
}).fail(function (error) { |
| 98 |
console.error('MetaSync: Failed to save theme preference', error); |
| 99 |
}); |
| 100 |
} else { |
| 101 |
// Fallback to jQuery.ajax |
| 102 |
$.ajax({ |
| 103 |
url: (typeof metasyncThemeData !== 'undefined' && metasyncThemeData.ajaxUrl) ? metasyncThemeData.ajaxUrl : ajaxurl, |
| 104 |
type: 'POST', |
| 105 |
data: { |
| 106 |
action: 'metasync_save_theme', |
| 107 |
theme: theme, |
| 108 |
_ajax_nonce: (typeof metasyncThemeData !== 'undefined' && metasyncThemeData.nonce) ? metasyncThemeData.nonce : '' |
| 109 |
}, |
| 110 |
success: function (response) { |
| 111 |
console.log('MetaSync: Theme preference saved:', theme); |
| 112 |
}, |
| 113 |
error: function (xhr, status, error) { |
| 114 |
console.error('MetaSync: Failed to save theme preference', error); |
| 115 |
} |
| 116 |
}); |
| 117 |
} |
| 118 |
}, |
| 119 |
|
| 120 |
/** |
| 121 |
* Bind event handlers |
| 122 |
*/ |
| 123 |
bindEvents: function () { |
| 124 |
const self = this; |
| 125 |
|
| 126 |
// Theme toggle button click |
| 127 |
$(document).on('click', '.metasync-theme-option', function (e) { |
| 128 |
e.preventDefault(); |
| 129 |
const theme = $(this).data('theme'); |
| 130 |
self.toggleTheme(theme); |
| 131 |
}); |
| 132 |
|
| 133 |
// Keyboard accessibility |
| 134 |
$(document).on('keydown', '.metasync-theme-option', function (e) { |
| 135 |
if (e.key === 'Enter' || e.key === ' ') { |
| 136 |
e.preventDefault(); |
| 137 |
const theme = $(this).data('theme'); |
| 138 |
self.toggleTheme(theme); |
| 139 |
} |
| 140 |
}); |
| 141 |
} |
| 142 |
}; |
| 143 |
|
| 144 |
// Initialize on document ready |
| 145 |
$(document).ready(function () { |
| 146 |
MetaSyncTheme.init(); |
| 147 |
}); |
| 148 |
|
| 149 |
// Global function called by the compact header toggle button |
| 150 |
// (onclick="toggleMetasyncTheme()" in render_layout_open / render_plugin_header) |
| 151 |
window.toggleMetasyncTheme = function () { |
| 152 |
const wrap = document.querySelector('.metasync-dashboard-wrap'); |
| 153 |
const current = (wrap ? wrap.getAttribute('data-theme') : null) |
| 154 |
|| localStorage.getItem('metasync_theme') |
| 155 |
|| 'dark'; |
| 156 |
const next = current === 'dark' ? 'light' : 'dark'; |
| 157 |
MetaSyncTheme.toggleTheme(next); |
| 158 |
}; |
| 159 |
|
| 160 |
})(jQuery); |
| 161 |
|
| 162 |
|
