126 lines
4.8 KiB
HTML
126 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FileBrowser Widget Example</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body { padding: 20px; }
|
|
.widget-container {
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>FileBrowser Widget Example</h1>
|
|
<p>This demonstrates how to embed the FileBrowser widget in your website.</p>
|
|
|
|
<div class="widget-container">
|
|
<h3>File Browser Widget</h3>
|
|
<div id="file-browser-widget"></div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h4>Configuration</h4>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="endpoint" class="form-label">Base Endpoint:</label>
|
|
<input type="text" id="endpoint" class="form-control" value="http://localhost:3001/files">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="theme" class="form-label">Theme:</label>
|
|
<select id="theme" class="form-select">
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="show-upload" checked>
|
|
<label class="form-check-label" for="show-upload">Show Upload</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="show-download" checked>
|
|
<label class="form-check-label" for="show-download">Show Download</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="show-delete" checked>
|
|
<label class="form-check-label" for="show-delete">Show Delete</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button id="recreate-widget" class="btn btn-primary mt-3">Recreate Widget</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import init, {
|
|
create_file_browser_widget,
|
|
create_default_config,
|
|
check_browser_compatibility,
|
|
get_version
|
|
} from './file_browser_widget.js';
|
|
|
|
let currentWidget = null;
|
|
|
|
async function initWidget() {
|
|
await init();
|
|
|
|
console.log('FileBrowser Widget version:', get_version());
|
|
|
|
if (!check_browser_compatibility()) {
|
|
alert('Your browser is not compatible with this widget');
|
|
return;
|
|
}
|
|
|
|
createWidget();
|
|
}
|
|
|
|
function createWidget() {
|
|
// Destroy existing widget
|
|
if (currentWidget) {
|
|
currentWidget.destroy();
|
|
currentWidget = null;
|
|
}
|
|
|
|
// Clear container
|
|
const container = document.getElementById('file-browser-widget');
|
|
container.innerHTML = '';
|
|
|
|
// Get configuration from form
|
|
const config = create_default_config(document.getElementById('endpoint').value);
|
|
config.set_theme(document.getElementById('theme').value);
|
|
config.set_show_upload(document.getElementById('show-upload').checked);
|
|
config.set_show_download(document.getElementById('show-download').checked);
|
|
config.set_show_delete(document.getElementById('show-delete').checked);
|
|
|
|
try {
|
|
currentWidget = create_file_browser_widget('file-browser-widget', config);
|
|
console.log('Widget created successfully');
|
|
} catch (error) {
|
|
console.error('Failed to create widget:', error);
|
|
container.innerHTML = `<div class="alert alert-danger">Failed to create widget: ${error}</div>`;
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
document.getElementById('recreate-widget').addEventListener('click', createWidget);
|
|
|
|
// Initialize when page loads
|
|
initWidget();
|
|
</script>
|
|
</body>
|
|
</html>
|