EIS/mod_pdf_tree/tmpl/default.php

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Uri\Uri;

// Pfad zum PDF.js Viewer:
$pdfjsViewer = Uri::root() . 'media/com_eis/pdfjs/web/viewer.html';
?>
<style>
/* --- Layout --- */
.pdf-tree-wrapper{
  display:flex; align-items:stretch; gap:1rem;
  background:#f9f9f9; padding:1rem; border:1px solid #ddd; border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,.05); min-height:0;
}
.pdf-tree-container{
  flex:0 0 30%;
  max-height:calc(var(--vh, 100vh) - 160px);
  overflow:auto; -webkit-overflow-scrolling:touch; min-height:0;
}
#pdf-preview{
  flex:1 1 auto; min-width:320px;
  height:calc(var(--vh, 100vh) - 160px);
  border:1px solid #ccc; background:#fff; display:none; min-height:0;
  position:relative; overflow:hidden;
}
.preview-actions{
  display:none; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.5rem .75rem; border-bottom:1px solid #eee; background:#fafafa; height:42px;
}
.pdf-viewport{
  position:absolute; top:42px; left:0; right:0; bottom:0;
  overflow:auto; -webkit-overflow-scrolling:touch; min-height:0;
}
.pdf-viewport iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* --- Baum --- */
.pdf-tree{ list-style:none; margin:0; padding:0; }
.pdf-tree ul{ list-style:none; margin-left:1.25em; padding:0; display:none; }
.pdf-tree li{ margin:.35em 0; }
.folder>.toggle{
  cursor:pointer; width:1.5em; display:inline-flex; align-items:center; justify-content:center; user-select:none; margin-right:.1em;
}
.folder>.folder-label{ cursor:pointer; user-select:none; padding:.15rem .1rem; border-radius:3px; }
.folder>.folder-label:active{ background:rgba(0,0,0,0.05); }
.file-link{ text-decoration:none; color:#0366d6; }
.file-link:hover{ text-decoration:underline; }

/* --- Buttons --- */
.expand-collapse{ margin-bottom:.5rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.expand-collapse button{ font:inherit; border:1px solid #ccc; background:#fff; border-radius:4px; padding:.4rem .6rem; }

/* --- Scrollbar-Optik (optional) --- */
.pdf-tree-container::-webkit-scrollbar{ width:10px; }
.pdf-tree-container::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:6px; }

/* --- Responsive --- */
@media (max-width:1024px){
  .pdf-tree-wrapper{ flex-direction:column; }
  .pdf-tree-container, #pdf-preview{ max-height:calc(var(--vh, 100vh) - 220px); height:auto; }
}
</style>

<!-- Aus-/Einklappen -->
<div class="expand-collapse">
  <button id="expand-all" type="button">ausklappen</button>
  <button id="collapse-all" type="button">einklappen</button>
</div>

<div class="pdf-tree-wrapper" id="eis-wrapper">
  <div class="pdf-tree-container" id="eis-tree">
    <?php // >>> einzige Änderung: mit virtuellem Ordner "Neue Dokumente"
      echo ModEisAnzeigeHelper::renderTreeWithNew($items);
    ?>
  </div>

  <div id="pdf-preview">
    <div class="preview-actions">
      <span id="preview-filename" aria-live="polite"></span>
      <a id="open-newtab" href="#" target="_blank" rel="noopener">im neuen Tab öffnen</a>
    </div>
    <div class="pdf-viewport" id="pdf-viewport"></div>
  </div>
</div>

<script>
// Viewport-Height-Polyfill (iOS/macOS)
function setRealVh(){ const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh*100}px`); }
setRealVh(); window.addEventListener('resize', setRealVh, {passive:true});

document.addEventListener('DOMContentLoaded', function(){
  const tree = document.getElementById('eis-tree');
  const preview = document.getElementById('pdf-preview');
  const previewBar = preview.querySelector('.preview-actions');
  const previewName = document.getElementById('preview-filename');
  const openNewTab = document.getElementById('open-newtab');
  const viewport = document.getElementById('pdf-viewport');

  // Ordner toggeln
  tree.addEventListener('click', (ev) => {
    const t = ev.target;
    if (t.classList.contains('toggle')) {
      const li = t.closest('li.folder'); if (!li) return;
      const ul = li.querySelector(':scope > ul'); if (!ul) return;
      const open = ul.style.display==='block';
      ul.style.display = open ? 'none' : 'block';
      t.textContent = open ? '▶' : '▼';
      return;
    }
    if (t.classList.contains('folder-label')) {
      t.closest('li.folder')?.querySelector(':scope > .toggle')?.click();
    }
  });

  // Alle aus/einklappen
  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='▼');
    tree.scrollTo({ top: 0, behavior: 'instant' });
  });
  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='▶');
  });

  // PDF.js-Viewer laden (mit deutscher UI)
  const viewerBase = <?= json_encode($pdfjsViewer, JSON_UNESCAPED_SLASHES) ?>;

  tree.addEventListener('click', (ev) => {
    const a = ev.target.closest('.file-link');
    if (!a) return;
    ev.preventDefault();

    const fileUrl = a.href;

    // Deutsch aktivieren + angenehme Defaults
    const viewerUrl = viewerBase
      + '?file=' + encodeURIComponent(fileUrl)
      + '&locale=de'
      + '#sidebar=0&zoom=page-fit';

    preview.style.display = 'block';
    previewBar.style.display = 'flex';
    previewName.textContent = a.getAttribute('data-filename') || a.textContent.trim();
    openNewTab.href = viewerUrl;

    // iFrame neu setzen
    viewport.innerHTML = '';
    const iframe = document.createElement('iframe');
    iframe.setAttribute('title', 'PDF-Vorschau (PDF.js)');
    iframe.src = viewerUrl;
    iframe.loading = 'lazy';
    viewport.appendChild(iframe);
  }, {passive:false});
});
</script>