Einbetten von UHH DOM-Elementen (v43-20181220 )

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": {}
  }'
>

Ü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>