mirror of https://github.com/ColorlibHQ/gentelella
153 lines
5.0 KiB
HTML
153 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Browser Compatibility Test - Gentelella</title>
|
|
|
|
<!-- Load the main script with modules -->
|
|
<script type="module" src="/src/main-minimal.js"></script>
|
|
</head>
|
|
<body class="nav-md">
|
|
<div class="container body">
|
|
<div class="main_container">
|
|
<div class="right_col" role="main">
|
|
<div class="page-title">
|
|
<div class="title_left">
|
|
<h3>Browser Compatibility Test</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2>Library Availability Test</h2>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
<div id="test-results">
|
|
<p>Testing library availability...</p>
|
|
</div>
|
|
|
|
<!-- Test Chart -->
|
|
<canvas id="test-chart" width="400" height="200"></canvas>
|
|
|
|
<!-- Test Date Picker -->
|
|
<div class="form-group">
|
|
<label>Test Date Picker:</label>
|
|
<div id="test-datepicker" data-td-target-input="nearest" data-td-target="#test-datepicker">
|
|
<input id="test-datepicker-input" type="text" class="form-control" data-td-target="#test-datepicker"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOM loaded, starting library tests...');
|
|
|
|
// Test library availability
|
|
const libraries = [
|
|
'jQuery', '$', 'Chart', 'TempusDominus', 'Switchery',
|
|
'bootstrap', 'echarts', 'Skycons', 'L', 'Inputmask', 'Pickr'
|
|
];
|
|
|
|
const results = [];
|
|
|
|
function testLibrary(libName) {
|
|
const windowAvailable = typeof window[libName] !== 'undefined';
|
|
const globalThisAvailable = typeof globalThis[libName] !== 'undefined';
|
|
const available = windowAvailable || globalThisAvailable;
|
|
|
|
results.push({
|
|
name: libName,
|
|
available: available,
|
|
location: windowAvailable ? 'window' : (globalThisAvailable ? 'globalThis' : 'none')
|
|
});
|
|
|
|
return available;
|
|
}
|
|
|
|
// Wait for libraries if waitForLibraries is available
|
|
if (typeof window.waitForLibraries === 'function') {
|
|
window.waitForLibraries(['Chart', 'TempusDominus'], function() {
|
|
runTests();
|
|
});
|
|
} else {
|
|
// Fallback: wait a bit and then test
|
|
setTimeout(runTests, 1000);
|
|
}
|
|
|
|
function runTests() {
|
|
// Test all libraries
|
|
libraries.forEach(testLibrary);
|
|
|
|
// Display results
|
|
const resultsDiv = document.getElementById('test-results');
|
|
let html = '<h4>Library Availability Results:</h4><ul>';
|
|
|
|
results.forEach(result => {
|
|
const status = result.available ? '✅' : '❌';
|
|
const location = result.available ? ` (${result.location})` : '';
|
|
html += `<li>${status} ${result.name}${location}</li>`;
|
|
});
|
|
|
|
html += '</ul>';
|
|
|
|
// Add browser info
|
|
html += `<h4>Browser Info:</h4>`;
|
|
html += `<p><strong>User Agent:</strong> ${navigator.userAgent}</p>`;
|
|
html += `<p><strong>Vendor:</strong> ${navigator.vendor}</p>`;
|
|
html += `<p><strong>Platform:</strong> ${navigator.platform}</p>`;
|
|
|
|
resultsDiv.innerHTML = html;
|
|
|
|
// Test Chart.js
|
|
const Chart = window.Chart || globalThis.Chart;
|
|
if (Chart) {
|
|
const ctx = document.getElementById('test-chart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Safari', 'Chrome', 'Firefox', 'Edge'],
|
|
datasets: [{
|
|
label: 'Browser Compatibility',
|
|
data: [100, 100, 100, 100],
|
|
backgroundColor: ['#26B99A', '#3498DB', '#E74C3C', '#9B59B6']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: 'All Browsers Supported!'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Test TempusDominus
|
|
const TempusDominus = window.TempusDominus || globalThis.TempusDominus;
|
|
if (TempusDominus) {
|
|
new TempusDominus(document.getElementById('test-datepicker'), {
|
|
display: {
|
|
components: {
|
|
clock: false
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |