Add self-contained admin tab navigation

2026-09-19 16:24:33 +00:00 · 2026-08-16 13:27:18 +02:00
parent 4a9d13e30e
commit 1da47c6599
1 changed files with 93 additions and 0 deletions
--- a/template/admin_tabs.tpl
+++ b/template/admin_tabs.tpl
@@ -0,0 +1,93 @@
+<style>
+.bratonien-admin { max-width:none !important; width:100%; margin:0 !important; }
+.bratonien-nav { display:none !important; }
+.bratonien-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; border-bottom:1px solid rgba(255,255,255,.14); }
+.bratonien-tab { appearance:none; border:1px solid rgba(255,255,255,.16); border-bottom:0; border-radius:5px 5px 0 0; background:rgba(0,0,0,.08); color:#d7d7d7; padding:10px 14px; margin:0 0 -1px; cursor:pointer; font:inherit; font-weight:600; }
+.bratonien-tab:hover,.bratonien-tab:focus { color:#f0a646; border-color:rgba(240,166,70,.55); outline:none; }
+.bratonien-tab.is-active { color:#f0a646; background:rgba(240,166,70,.07); border-color:rgba(240,166,70,.65); box-shadow:inset 0 2px 0 rgba(240,166,70,.75); }
+.bratonien-tab-panel { width:100%; max-width:none; margin-left:0 !important; margin-right:0 !important; }
+.bratonien-tab-panel[hidden] { display:none !important; }
+.bratonien-card { margin-left:0; margin-right:0; }
+@media (max-width:760px) { .bratonien-tabs{gap:5px}.bratonien-tab{border-bottom:1px solid rgba(255,255,255,.16);border-radius:4px;margin-bottom:0;padding:9px 11px} }
+</style>
+
+<div id="bratonien-tabs-anchor"></div>
+
+<script>
+(function () {
+  'use strict';
+  function initBratonienTabs() {
+    var definitions = [
+      { id:'uebersicht', label:'Übersicht' },
+      { id:'wasserzeichen', label:'Wasserzeichen' },
+      { id:'regeln', label:'Albumregeln' },
+      { id:'auswahl-download', label:'Fotoauswahl & Downloads' },
+      { id:'bilddateien', label:'Bilddateien & Pfade' },
+      { id:'wartung', label:'Wartung / Cache' }
+    ];
+    var panels = [];
+    definitions.forEach(function (d) {
+      var panel = document.getElementById(d.id);
+      if (!panel) return;
+      panel.classList.add('bratonien-tab-panel');
+      panel.setAttribute('role','tabpanel');
+      panels.push({definition:d,panel:panel});
+    });
+    if (!panels.length) return;
+
+    var anchor = document.getElementById('bratonien-tabs-anchor');
+    if (!anchor) return;
+    var tabs = document.createElement('div');
+    tabs.className = 'bratonien-tabs';
+    tabs.setAttribute('role','tablist');
+    tabs.setAttribute('aria-label','Bratonien Tools Bereiche');
+
+    panels.forEach(function (item) {
+      var b = document.createElement('button');
+      b.type='button';
+      b.className='bratonien-tab';
+      b.id='bratonien-tab-'+item.definition.id;
+      b.dataset.tab=item.definition.id;
+      b.setAttribute('role','tab');
+      b.setAttribute('aria-controls',item.definition.id);
+      b.textContent=item.definition.label;
+      tabs.appendChild(b);
+      item.panel.setAttribute('aria-labelledby',b.id);
+    });
+    anchor.replaceWith(tabs);
+
+    function activate(id, remember) {
+      var valid=false;
+      panels.forEach(function (item) {
+        var active=item.definition.id===id;
+        item.panel.hidden=!active;
+        var b=tabs.querySelector('[data-tab="'+item.definition.id+'"]');
+        if (b) {
+          b.classList.toggle('is-active',active);
+          b.setAttribute('aria-selected',active?'true':'false');
+          b.tabIndex=active?0:-1;
+        }
+        if (active) valid=true;
+      });
+      if (!valid) return activate(panels[0].definition.id,remember);
+      if (remember!==false) { try { localStorage.setItem('bratonien-tools-active-tab',id); } catch(e) {} }
+    }
+
+    tabs.addEventListener('click',function(e){ var b=e.target.closest('.bratonien-tab'); if(b) activate(b.dataset.tab); });
+    tabs.addEventListener('keydown',function(e){
+      if(e.key!=='ArrowLeft'&&e.key!=='ArrowRight') return;
+      var buttons=[].slice.call(tabs.querySelectorAll('.bratonien-tab'));
+      var i=buttons.indexOf(document.activeElement); if(i<0) return;
+      e.preventDefault(); i += e.key==='ArrowRight'?1:-1; if(i>=buttons.length)i=0; if(i<0)i=buttons.length-1;
+      buttons[i].focus(); activate(buttons[i].dataset.tab);
+    });
+
+    var initial='';
+    if(location.hash && panels.some(function(i){return i.definition.id===location.hash.slice(1)})) initial=location.hash.slice(1);
+    if(!initial){ try { initial=localStorage.getItem('bratonien-tools-active-tab')||''; } catch(e){} }
+    if(!panels.some(function(i){return i.definition.id===initial})) initial=panels[0].definition.id;
+    activate(initial,false);
+  }
+  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',initBratonienTabs); else initBratonienTabs();
+})();
+</script>