Description:

// myai-app.js
document.addEventListener('DOMContentLoaded', () => {
const appRoot = document.getElementById('app-root');
const userData = myaiAppData; // Access global variable from wp_localize_script
if (appRoot && userData && userData.is_logged_in) {
// If logged in, initialize the app
initializeApp(appRoot, userData);
} else if (appRoot) {
// If not logged in, show a basic auth screen or redirect
appRoot.innerHTML = '
Please log in to WordPress to access MyAI Interface.
';
const authScreen = document.getElementById('auth-screen');
if (authScreen) { // Add basic styling if this screen is shown
authScreen.style.display = 'flex';
authScreen.style.flexDirection = 'column';
authScreen.style.justifyContent = 'center';
authScreen.style.alignItems = 'center';
authScreen.style.height = '100%';
authScreen.style.width = '100%';
authScreen.style.backgroundColor = '#131314';
authScreen.style.color = '#e3e3e3';
}
} else {
console.error("MyAI App: #app-root element not found. Cannot initialize UI.");
}
});
let paneCounter = 0; // To give each new pane a unique ID
function initializeApp(container, userData) {
if (!container) {
console.error("initializeApp: Container element not found.");
return;
}
container.innerHTML = ''; // Clear the container first
container.classList.add('grid-container');
const columns = ['left-col', 'center-col', 'right-col']; // Fixed 3 columns as per requirement
const columnElements = [];
// Retrieve settings from userData.myai_settings
const settings = userData.myai_settings;
// Apply global color scheme if available (currently not available, but for future)
if (settings.user_color_scheme_available === '1' && settings.user_color_scheme) {
document.documentElement.style.setProperty('--user-defined-bg-color', settings.user_color_scheme);
// You would expand this to apply colors to AI, user input, system messages etc.
}
if (settings.ai_text_color_available === '1' && settings.ai_text_color) {
document.documentElement.style.setProperty('--ai-text-color', settings.ai_text_color);
}
if (settings.user_input_text_color_available === '1' && settings.user_input_text_color) {
document.documentElement.style.setProperty('--user-input-text-color', settings.user_input_text_color);
}
if (settings.system_messages_text_color_available === '1' && settings.system_messages_text_color) {
document.documentElement.style.setProperty('--system-messages-text-color', settings.system_messages_text_color);
}
// Create 3 main columns
for (const colId of columns) {
const col = document.createElement('div');
col.id = `col-${paneCounter++}`;
col.className = 'split-col';
container.appendChild(col);
columnElements.push(`#${col.id}`);
const paneElements = [];
// Create 3 panes within each column
for (let i = 1; i <= 3; i++) {
const pane = document.createElement('div');
const paneId = `pane-${paneCounter++}`;
pane.id = paneId;
pane.className = 'split-pane';
// Apply scrollable_panes setting
if (settings.scrollable_panes === '0') { // If disabled, prevent overflow:auto
pane.style.overflow = 'hidden';
}
const header = document.createElement('div');
header.className = 'pane-header';
const label = document.createElement('span');
label.textContent = `Pane ${paneId}`; // Default label, can be dynamic
const subdivideBtn = document.createElement('button');
subdivideBtn.textContent = '⊞';
subdivideBtn.title = 'Subdivide this pane';
subdivideBtn.onclick = () => {
// Check if fractal grid subdivision is enabled in settings
if (settings.fractal_grid === '1') { // '1' because PHP checkbox saves as '1' or '0'
createGrid(pane, userData); // RECURSIVE CALL, pass userData
} else {
alert("Fractal Grid Subdivision is currently disabled in your settings.");
}
};
header.appendChild(label);
header.appendChild(subdivideBtn);
pane.appendChild(header);
pane.appendChild(document.createElement('div')); // Placeholder for content area
col.appendChild(pane);
paneElements.push(`#${paneId}`);
}
// Make the panes in the column resizable, if enabled in settings
if (settings.resizable_panes === '1') {
Split(paneElements, { direction: 'vertical', gutterSize: 8, minSize: 50 });
}
}
// Make the columns resizable, if enabled in settings
if (settings.resizable_columns === '1') {
Split(columnElements, { gutterSize: 8, minSize: 200 });
}
}

Status: Published   Priority: 0.0

Target:   Comments:   URLs:   Images:

]]>