Einbetten von UHH DOM-Elementen (v43-20200923 )

Header und Footer können durch Einbinden einer Javascript-Datei automatisch eingebettet werden (siehe Quellcode dieser Datei):

<script id="UHH-DOM" src="https://www.uni-hamburg.de/onTEAM/inc/dom/v43/insert.js" async
  data-options='{
    "header": {
      "language":{},
      "sublogo":{},
      "mobilemenu":{"url":"sitemap.js"},
      "nav":{}, 
      "search":{}
    },
    "footer": {
      "info":{} 
    },
    "links": {
      "gebaerdensprache":"/gebaerdensprache.html",
      "leichtesprache":"/leichtesprache.html",
      "barrierefreiheit":"/barrierefreiheit.html"
    }
  }'
>

Über das Attribut data-options wird das Verhalten des Scripts gesteuert

NEU Dem head wird automatisch ein meta[name=viewport] hinzugefügt, sofern nicht vorhanden.

DOM-Elemente

Header

Der Header zerfällt in mehrere Bestandteile, die getrennt behandelt werden . Er wird als first-child in den body der Seite eingefügt:

<body><header id="UHH_HEADER">...</header>...</body>
Die Metanavigation und das UHH-Logo werden immer angezeigt, sofern das Header Objekt vorhanden ist:

<script id="UHH-DOM" src="https://www.uni-hamburg.de/onTEAM/inc/dom/v43/insert.js" async
  data-options='{
    "header": {}
  }'
>

Die folgenden Elemente sind optional:

Language

Die Sprachauswahl wird eingebunden, wenn das Objekt header.language vorhanden ist und wenn das lang Attribut des html-Tag gesetzt ist und alternative Sprachen definiert werden: 

...
<html lang="de">
...
<link rel="alternate" hreflang="de" href="#de">
<link rel="alternate" hreflang="en" href="#en">
...

Suche

Die Suche wird eingebunden, wenn das Objekt header.search vorhanden ist und wenn ein DOM-Element mit der id="uhh-header-search" und folgendem DOM existiert

<div class="suche" id="uhh-header-search">
  <form action="#url">
    <h6 class="versteckt">Suche</h6>
    <label for="suchfeld" class="versteckt">Suche nach </label>
    <input id="suchfeld" placeholder="Suche" name="q" class="text" type="text">
    <input name="suchen" class="button" alt="suchen" title="suchen" type="submit">
  </form>
</div>

Die Suche rutscht in den mobile/tablet Slots automatisch in die Metanavigation.

Hamburger Menu

i.) NEU Wird erzeugt, wenn header.mobilemenu den Key dom enthält und ein DOM-Element mit der #uhh-header-nav mit der unter "Navigation" beschriebenen Syntax existiert

<script id="UHH-DOM" src="https://www.uni-hamburg.de/onTEAM/inc/dom/v43/insert.js" async
  data-options='{
    "header": {
      "language":{},
      "sublogo":{},
      "mobilemenu":{"dom":""},
      "nav":{}, 
      "search":{}
    },
    "footer": {}
  }'
>

Wobei der in #uhh-header-nav mit der class here gekennzeichnete Link in der Mobilnavigation hervorgehoben wird.

Oder ii.), wenn im Objekt header.mobilemenu.url die URL der Sitemapdatei übergeben wird

<script id="UHH-DOM" src="https://www.uni-hamburg.de/onTEAM/inc/dom/v43/insert.js" async
  data-options='{
    "header": {
      "language":{},
      "sublogo":{},
      "mobilemenu":{"url":"sitemap.js"},
      "nav":{}, 
      "search":{}
    },
    "footer": {}
  }'
>

Die Datei muss als JSON mit folgender Syntax formatiert werden:

["/","Home",
  [
    ["/uhh.html", "Universität Hamburg"],
    ["/campuscenter.html", "Studium",
      [
        ["/campuscenter/campus-leben.html", "Campus-Leben"],
        ["/campuscenter/studienorientierung.html", "Studienorientierung"],
        ["/campuscenter/studienangebot.html", "Studienangebot"]
      ]
    ],
    ["/forschung.html", "Forschung"]
  ]
]

Sublogo

Wird erzeugt, wenn das Objekt header.sublogo vorhanden und wenn ein DOM-Element mit der id="uhh-header-sublogo" und folgendem DOM existiert

<div id="uhh-header-sublogo">
  <a href="#url">
    <div class="kurz">Platzhalter</div>
    <h1 class="wortmarke"><b>Fakultät</b>für Platzhalter</h1>
  </a>
</div>

Wird erzeugt, wenn das Objekt header.nav vorhanden und wenn ein DOM-Element mit der id="uhh-header-nav" und einem DOM folgender Syntax existiert

<div id="uhh-header-nav">
  <ul>
    <li><a href="#1">Link 1</a>
      <ul>
        <li><a href="#11">Link 11</a></li>
        <li><a href="#12">Link 12</a></li>
        <li><a href="#13">Link 13</a></li>
        <li><a href="#14">Link 14</a></li>
      </ul>
    </li>
    <li><a href="#2">Link 2</a>
      <ul>
        <li><a href="#21">Link 21</a></li>
        <li><a href="#22">Link 22</a></li>
        <li><a href="#23">Link 23</a></li>
      </ul>
    </li>
    <li><a href="#3">Link 3</a>
      <ul>
        <li><a href="#31">Link 31</a></li>
        <li><a href="#32">Link 32</a></li>
        <li><a href="#33">Link 33</a></li>
        <li><a href="#34">Link 34</a></li>
        <li><a href="#35">Link 35</a></li>
      </ul>
    </li>
  </ul>
</div>

Die Navigation muss nicht notwendigerweise Submenüs enthalten, ist aber auf maximal 2 Ebenen beschränkt.

Footer

Der Footer wird als last-child in den body der Seite eingefügt, sofern das Objekt footer vorhanden ist

<body>...<footer id="UHH_FOOTER">...</footer></body>
  
Footer

Info

Wird erzeugt, wenn das Objekt footer.info vorhanden und wenn ein DOM-Element mit der id="uhh-footer-info" und einem DOM folgender Syntax existiert

<div id="uhh-footer-info">
  <ul>
    <li><a href="/impressum.html">Impressum</a></li>
    <li><a href="/datenschutz.html">Datenschutzerklärung</a></li>
    <li><a href="/sitemap.html">Sitemap</a></li>
  </ul>
</div>