Letzte Version

mod_pdf_tree/tmpl/default.php

@@ -1,8 +1,6 @@
 <?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;
@@ -12,16 +10,16 @@
   border: 1px solid #ddd;
   border-radius: 6px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+  width: 100%;
+  max-width: 100%; /* Oder: max-width: 1400px; */
 }
 
-/* Linke Spalte: Verzeichnisbaum */
 .pdf-tree-container {
   flex: 0 0 30%;
-  height: 95vh;
+  max-height: 95vh;
   overflow: auto;
 }
 
-/* Vorschaufenster rechts */
 #pdf-preview {
   flex: 1;
   min-width: 800px;
@@ -31,50 +29,46 @@
   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 {
+.pdf-tree {
   list-style: none;
   margin: 0;
   padding: 0;
 }
+.pdf-tree ul {
+  list-style: none;
+  margin-left: 1.5em;
+  padding: 0;
+  display: none;
+}
+
+
 .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;
+  display: inline-block;
+  user-select: none;
 }
 
-/* Datei-Icon */
-.file-icon::before {
-  content: "📄";
-  margin-right: 4px;
+/* Optionale visuelle Trennung bei Dateien */
+.file-link {
+  text-decoration: none;
+  color: #0366d6;
+}
+.file-link:hover {
+  text-decoration: underline;
 }
 
-/* Standard: Unterverzeichnisse einklappen */
-.pdf-tree ul {
-  display: none;
-  margin-left: 1.5em;
-}
-
-/* Buttons oben */
 .expand-collapse {
   margin-bottom: 0.5em;
 }
@@ -83,69 +77,60 @@
 }
 </style>
 
-<!-- Steuerbuttons oben -->
+<!-- Buttons: Aus-/Einklappen -->
 <div class="expand-collapse">
   <button id="expand-all">ausklappen</button>
   <button id="collapse-all">einklappen</button>
 </div>
 
+<!-- PDF-Baum und Vorschau -->
 <div class="pdf-tree-wrapper">
-  <!-- Links: Verzeichnisbaum -->
   <div class="pdf-tree-container">
-    <?php echo ModEisAnzeigeHelper::renderTree($items); ?>
+    <?= ModEisAnzeigeHelper::renderTree($items); ?>
   </div>
-
-  <!-- Rechts: Vorschau-Bereich -->
   <div id="pdf-preview"></div>
 </div>
 
-<!-- Interaktivität: Vorschau, Toggle, Buttons -->
 <script>
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
+    const preview = document.getElementById('pdf-preview');
+    if (!preview) return;
 
-    // (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 = '▼';
+    // (1) Verzeichnisse toggeln
+    document.querySelectorAll('.pdf-tree .toggle').forEach(toggle => {
+        toggle.addEventListener('click', () => {
+            const ul = toggle.closest('li').querySelector('ul');
+            if (ul) {
+                const visible = ul.style.display === 'block';
+                ul.style.display = visible ? 'none' : 'block';
+                toggle.textContent = visible ? '▶' : '▼';
             }
         });
     });
 
     // (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 = '▼';
-        });
+    document.getElementById('expand-all')?.addEventListener('click', () => {
+        document.querySelectorAll('.pdf-tree ul').forEach(ul => ul.style.display = 'block');
+        document.querySelectorAll('.pdf-tree .toggle').forEach(t => t.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 = '▶';
-        });
+    document.getElementById('collapse-all')?.addEventListener('click', () => {
+        document.querySelectorAll('.pdf-tree ul').forEach(ul => ul.style.display = 'none');
+        document.querySelectorAll('.pdf-tree .toggle').forEach(t => t.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) {
+    // (4) PDF-Vorschau
+    document.querySelectorAll('.pdf-tree .file-link').forEach(link => {
+        link.addEventListener('click', e => {
             e.preventDefault();
             preview.style.display = 'block';
-            preview.innerHTML = '<iframe src="' + this.href + '" loading="lazy"></iframe>';
-
+            preview.innerHTML = ''; // Vorherige Vorschau entfernen
+            const iframe = document.createElement('iframe');
+            iframe.src = link.href;
+            iframe.loading = 'lazy';
+            preview.appendChild(iframe);
         });
     });
 });
-</script>
+</script>