| Current File : /home/bwalansa/www/wp-content/plugins/file-manager-advanced/application/assets/js/fma-debug.js |
/**
* FMA Enhanced Debug JavaScript
*
* Enhanced debugging capabilities for code editor
*
* @package Advanced File Manager
* @since 1.0.0
*/
(function($) {
'use strict';
// Debug panel object
var FMA_Debug = {
init: function() {
this.bindEvents();
this.createDebugPanel();
},
bindEvents: function() {
// Add debug button to code editor
$(document).on('click', '.fma-debug-toggle', this.toggleDebugPanel);
$(document).on('click', '.fma-debug-close', this.closeDebugPanel);
$(document).on('click', '.fma-debug-tab', this.switchTab);
$(document).on('click', '#validate-php-btn', this.validatePHP);
$(document).on('click', '#test-functions-btn', this.testExecFunctions);
},
createDebugPanel: function() {
var debugPanel = `
<div id="fma-debug-panel" class="fma-debug-panel" style="display: none;">
<div class="fma-debug-header">
<h3>Enhanced Debug Panel</h3>
<button type="button" class="fma-debug-close">×</button>
</div>
<div class="fma-debug-content">
<div class="fma-debug-tabs">
<button class="fma-debug-tab active" data-tab="validation">PHP Validation</button>
<button class="fma-debug-tab" data-tab="functions">Exec Functions</button>
<button class="fma-debug-tab" data-tab="info">System Info</button>
</div>
<div class="fma-debug-tab-content" id="validation-tab">
<div class="fma-debug-section">
<h4>PHP Syntax Validation</h4>
<div class="fma-debug-status">
<span class="fma-status-indicator" id="validation-status">
<span class="fma-status-icon">⏳</span>
</span>
<span class="fma-status-text" id="validation-text">
Checking validation availability...
</span>
</div>
<button type="button" class="fma-debug-btn" id="validate-php-btn">
Validate Current Code
</button>
<div id="validation-results" class="fma-debug-results"></div>
</div>
</div>
<div class="fma-debug-tab-content" id="functions-tab">
<div class="fma-debug-section">
<h4>Exec Functions Status</h4>
<button type="button" class="fma-debug-btn" id="test-functions-btn">
Test All Functions
</button>
<div id="functions-results" class="fma-debug-results"></div>
</div>
</div>
<div class="fma-debug-tab-content" id="info-tab">
<div class="fma-debug-section">
<h4>System Information</h4>
<div class="fma-debug-info" id="system-info">
<p>Loading system information...</p>
</div>
</div>
</div>
</div>
</div>
`;
$('body').append(debugPanel);
this.loadSystemInfo();
},
toggleDebugPanel: function(e) {
e.preventDefault();
$('#fma-debug-panel').slideToggle();
},
closeDebugPanel: function() {
$('#fma-debug-panel').slideUp();
},
switchTab: function(e) {
e.preventDefault();
var tab = $(this).data('tab');
// Update tab buttons
$('.fma-debug-tab').removeClass('active');
$(this).addClass('active');
// Update tab content
$('.fma-debug-tab-content').hide();
$('#' + tab + '-tab').show();
},
validatePHP: function() {
var $btn = $(this);
var $results = $('#validation-results');
$btn.prop('disabled', true).text('Validating...');
$results.html('<div class="fma-loading">Validating PHP syntax...</div>');
// Get current editor content
var phpCode = '';
if (typeof editor !== 'undefined' && editor.getValue) {
phpCode = editor.getValue();
} else {
// Fallback to textarea
phpCode = $('textarea[name="content"]').val() || '';
}
if (!phpCode.trim()) {
$results.html('<div class="fma-error">No PHP code to validate</div>');
$btn.prop('disabled', false).text('Validate Current Code');
return;
}
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'fma_validate_php',
php_code: phpCode,
filename: 'debug.php',
nonce: fmaDebug.nonce
},
success: function(response) {
FMA_Debug.displayValidationResults(response);
},
error: function(xhr, status, error) {
$results.html('<div class="fma-error">Validation failed: ' + error + '</div>');
},
complete: function() {
$btn.prop('disabled', false).text('Validate Current Code');
}
});
},
displayValidationResults: function(response) {
var $results = $('#validation-results');
var html = '';
if (response.valid) {
html = '<div class="fma-success">';
html += '<strong>✓ PHP syntax is valid</strong>';
if (response.php_version) {
html += '<br>PHP Version: ' + response.php_version;
}
if (response.execution_time) {
html += '<br>Validation time: ' + response.execution_time + 'ms';
}
html += '</div>';
} else {
html = '<div class="fma-error">';
html += '<strong>✗ PHP syntax errors found</strong>';
if (response.errors && response.errors.length > 0) {
html += '<ul class="fma-error-list">';
response.errors.forEach(function(error) {
html += '<li>';
html += '<strong>Line ' + error.line + ':</strong> ';
html += error.message;
if (error.type) {
html += ' <span class="fma-error-type">(' + error.type + ')</span>';
}
html += '</li>';
});
html += '</ul>';
}
html += '</div>';
}
$results.html(html);
},
testExecFunctions: function() {
var $btn = $(this);
var $results = $('#functions-results');
$btn.prop('disabled', true).text('Testing...');
$results.html('<div class="fma-loading">Testing exec functions...</div>');
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'fma_test_exec_functions',
nonce: fmaDebug.nonce
},
success: function(response) {
FMA_Debug.displayFunctionResults(response.data);
},
error: function(xhr, status, error) {
$results.html('<div class="fma-error">Test failed: ' + error + '</div>');
},
complete: function() {
$btn.prop('disabled', false).text('Test All Functions');
}
});
},
displayFunctionResults: function(results) {
var $results = $('#functions-results');
var html = '<div class="fma-function-results">';
Object.keys(results).forEach(function(func) {
var result = results[func];
var statusClass = result.working ? 'working' : (result.available ? 'available' : 'unavailable');
var statusIcon = result.working ? '✓' : (result.available ? '⚠' : '✗');
var statusText = result.working ? 'Working' : (result.available ? 'Available' : 'Unavailable');
html += '<div class="fma-function-item ' + statusClass + '">';
html += '<div class="fma-function-name">' + func + '</div>';
html += '<div class="fma-function-status">';
html += '<span class="fma-status-icon">' + statusIcon + '</span>';
html += '<span class="fma-status-text">' + statusText + '</span>';
html += '</div>';
if (result.error) {
html += '<div class="fma-function-error">Error: ' + result.error + '</div>';
}
if (result.output) {
html += '<div class="fma-function-output">Output: ' + result.output + '</div>';
}
html += '</div>';
});
html += '</div>';
$results.html(html);
},
loadSystemInfo: function() {
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'fma_get_debug_info',
nonce: fmaDebug.nonce
},
success: function(response) {
FMA_Debug.displaySystemInfo(response.data);
},
error: function(xhr, status, error) {
$('#system-info').html('<div class="fma-error">Failed to load system info: ' + error + '</div>');
}
});
},
displaySystemInfo: function(info) {
var html = '';
html += '<p><strong>PHP Version:</strong> ' + info.php_version + '</p>';
html += '<p><strong>PHP Binary:</strong> ' + info.php_binary + '</p>';
if (info.php_path) {
html += '<p><strong>PHP Path:</strong> ' + info.php_path + '</p>';
}
html += '<p><strong>ExecWithFallback:</strong> ';
html += info.exec_with_fallback_available ?
'<span class="fma-success">✓ Available</span>' :
'<span class="fma-error">✗ Not Available</span>';
html += '</p>';
html += '<p><strong>Validation Available:</strong> ';
html += info.validation_available ?
'<span class="fma-success">✓ Yes</span>' :
'<span class="fma-error">✗ No</span>';
html += '</p>';
// Update validation status
$('#validation-status').html(
info.validation_available ?
'<span class="fma-status-icon fma-success">✓</span>' :
'<span class="fma-status-icon fma-error">✗</span>'
);
$('#validation-text').text(
info.validation_available ?
'PHP validation is available' :
'PHP validation is not available'
);
$('#system-info').html(html);
}
};
// Initialize when document is ready
$(document).ready(function() {
FMA_Debug.init();
});
// Add debug button to code editor when it loads
$(document).on('DOMNodeInserted', function(e) {
if ($(e.target).find('.CodeMirror').length > 0) {
if (!$('.fma-debug-toggle').length) {
var debugButton = '<button type="button" class="fma-debug-toggle button button-secondary" style="margin-left: 10px;">🐛 Debug</button>';
$(e.target).find('.CodeMirror').after(debugButton);
}
}
});
})(jQuery);