herocode/leaf
13
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add file browser component and widget

Browse Source
This commit is contained in:
Timur Gordon
2025-08-05 15:02:23 +02:00
parent 4e43c21b72
commit ba43a82db0
95 changed files with 17840 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
examples/widget_example/example.html Normal file
View File

@@ -0,0 +1,125 @@
<!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>