gentelella
Version:
Gentelella Admin is a free to use Bootstrap admin template
153 lines (134 loc) • 5.17 kB
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="mb-3">
<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>