1. Version mit DB

com_eis/eis.xml

@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <extension type="component" method="install">
     <!-- Database table for PDF entries -->
-    <install>
+  
+<install>
 		<sql>
-            <file driver="mysql" charset="utf8mb4">sql/install/mysql/install.mysql.sql</file>
+			<file driver="mysql" charset="utf8">install/sql/mysql/install.utf8.sql</file>
 		</sql>
 	</install>
 
@@ -24,7 +25,7 @@
             <folder>sql</folder>
             <folder>src</folder>
             <folder>tmpl</folder>
-
+	<folder>install</folder>
             <folder>language</folder>
             <folder>services</folder>
         </files>

com_eis/install/sql/mysql/install.utf8.sql

@@ -0,0 +1,8 @@
+CREATE TABLE IF NOT EXISTS `#__eis_documents` (
+  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(255) NOT NULL,
+  `path` TEXT NOT NULL,
+  `parent_id` INT UNSIGNED DEFAULT NULL,
+  `is_folder` TINYINT(1) DEFAULT 0,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

mod_pdf_tree/tmpl/default.php

@@ -1,11 +1,45 @@
-
 <?php defined('_JEXEC') or die; ?>
 
 <!-- Styles für Struktur, Vorschau und Icons -->
 <style>
 /* Baum und Vorschau nebeneinander */
-.pdf-tree-wrapper { display: flex; }
+.pdf-tree-wrapper {
-.pdf-tree-container { flex: 1; }
+  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 {
@@ -13,14 +47,26 @@
   margin: 0;
   padding: 0;
 }
-.pdf-tree li { margin: 0.3em 0; }
+.pdf-tree li {
+  margin: 0.3em 0;
+}
 
 /* Ordner-Icons & Pfeile */
-.folder > .toggle { cursor: pointer; display: inline-block; width: 1em; }
+.folder > .toggle {
-.folder-icon::before { content: "📁"; margin-right: 4px; }
+  cursor: pointer;
+  display: inline-block;
+  width: 1em;
+}
+.folder-icon::before {
+  content: "📁";
+  margin-right: 4px;
+}
 
 /* Datei-Icon */
-.file-icon::before   { content: "📄"; margin-right: 4px; }
+.file-icon::before {
+  content: "📄";
+  margin-right: 4px;
+}
 
 /* Standard: Unterverzeichnisse einklappen */
 .pdf-tree ul {
@@ -28,29 +74,19 @@
   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 {
-.expand-collapse button { margin-right: 0.5em; }
+  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="expand-all">ausklappen</button>
-  <button id="collapse-all">Collapse All</button>
+  <button id="collapse-all">einklappen</button>
 </div>
 
 <div class="pdf-tree-wrapper">
@@ -107,7 +143,8 @@ document.addEventListener('DOMContentLoaded', function() {
         link.addEventListener('click', function(e) {
             e.preventDefault();
             preview.style.display = 'block';
-            preview.innerHTML = '<iframe src="' + this.href + '"></iframe>';
+            preview.innerHTML = '<iframe src="' + this.href + '" loading="lazy"></iframe>';
+
         });
     });
 });