erste Lauffähige Fassung

mod_pdf_tree/tmpl/default.php

@@ -0,0 +1,114 @@
+
+<?php defined('_JEXEC') or die; ?>
+
+<!-- Styles für Struktur, Vorschau und Icons -->
+<style>
+/* Baum und Vorschau nebeneinander */
+.pdf-tree-wrapper { display: flex; }
+.pdf-tree-container { flex: 1; }
+
+/* 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;
+}
+
+/* Vorschaufenster rechts */
+#pdf-preview {
+  flex: 1;
+  margin-left: 1em;
+  border: 1px solid #ccc;
+  background: #fff;
+  display: none;
+}
+#pdf-preview iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* 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">Expand All</button>
+  <button id="collapse-all">Collapse All</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 + '"></iframe>';
+        });
+    });
+});
+</script>