152 lines
3.6 KiB
PHP
152 lines
3.6 KiB
PHP
<?php defined('_JEXEC') or die; ?>
|
|
|
|
<!-- Styles für Struktur, Vorschau und Icons -->
|
|
<style>
|
|
/* Baum und Vorschau nebeneinander */
|
|
.pdf-tree-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1em;
|
|
background: #f9f9f9;
|
|
padding: 1em;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
/* Linke Spalte: Verzeichnisbaum */
|
|
.pdf-tree-container {
|
|
flex: 0 0 30%;
|
|
height: 95vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Vorschaufenster rechts */
|
|
#pdf-preview {
|
|
flex: 1;
|
|
min-width: 800px;
|
|
height: 95vh;
|
|
border: 1px solid #ccc;
|
|
background: #fff;
|
|
display: none;
|
|
}
|
|
|
|
/* Vorschau-Inhalt (PDF) */
|
|
#pdf-preview iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
/* Verzeichnisliste zurücksetzen */
|
|
.pdf-tree, .pdf-tree ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.pdf-tree li {
|
|
margin: 0.3em 0;
|
|
}
|
|
|
|
/* Ordner-Icons & Pfeile */
|
|
.folder > .toggle {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 1em;
|
|
}
|
|
.folder-icon::before {
|
|
content: "📁";
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* Datei-Icon */
|
|
.file-icon::before {
|
|
content: "📄";
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* Standard: Unterverzeichnisse einklappen */
|
|
.pdf-tree ul {
|
|
display: none;
|
|
margin-left: 1.5em;
|
|
}
|
|
|
|
/* Buttons oben */
|
|
.expand-collapse {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.expand-collapse button {
|
|
margin-right: 0.5em;
|
|
}
|
|
</style>
|
|
|
|
<!-- Steuerbuttons oben -->
|
|
<div class="expand-collapse">
|
|
<button id="expand-all">ausklappen</button>
|
|
<button id="collapse-all">einklappen</button>
|
|
</div>
|
|
|
|
<div class="pdf-tree-wrapper">
|
|
<!-- Links: Verzeichnisbaum -->
|
|
<div class="pdf-tree-container">
|
|
<?php echo ModEisAnzeigeHelper::renderTree($items); ?>
|
|
</div>
|
|
|
|
<!-- Rechts: Vorschau-Bereich -->
|
|
<div id="pdf-preview"></div>
|
|
</div>
|
|
|
|
<!-- Interaktivität: Vorschau, Toggle, Buttons -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// (1) Verzeichnisse auf-/zuklappen per Klick
|
|
document.querySelectorAll('.pdf-tree .toggle').forEach(function(toggle) {
|
|
toggle.addEventListener('click', function() {
|
|
var li = this.parentNode;
|
|
var ul = li.querySelector('ul');
|
|
if (!ul) return;
|
|
if (ul.style.display === 'block') {
|
|
ul.style.display = 'none'; this.textContent = '▶';
|
|
} else {
|
|
ul.style.display = 'block'; this.textContent = '▼';
|
|
}
|
|
});
|
|
});
|
|
|
|
// (2) Alle ausklappen
|
|
document.getElementById('expand-all').addEventListener('click', function() {
|
|
document.querySelectorAll('.pdf-tree ul').forEach(function(ul) {
|
|
ul.style.display = 'block';
|
|
});
|
|
document.querySelectorAll('.pdf-tree .toggle').forEach(function(toggle) {
|
|
toggle.textContent = '▼';
|
|
});
|
|
});
|
|
|
|
// (3) Alle einklappen
|
|
document.getElementById('collapse-all').addEventListener('click', function() {
|
|
document.querySelectorAll('.pdf-tree ul').forEach(function(ul) {
|
|
ul.style.display = 'none';
|
|
});
|
|
document.querySelectorAll('.pdf-tree .toggle').forEach(function(toggle) {
|
|
toggle.textContent = '▶';
|
|
});
|
|
});
|
|
|
|
// (4) Vorschau anzeigen beim Klick
|
|
var preview = document.getElementById('pdf-preview');
|
|
document.querySelectorAll('.pdf-tree .file-link').forEach(function(link) {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
preview.style.display = 'block';
|
|
preview.innerHTML = '<iframe src="' + this.href + '" loading="lazy"></iframe>';
|
|
|
|
});
|
|
});
|
|
});
|
|
</script>
|