https://www.stadtwerk-am-see.de/de/static/js/HRSysLib/NavigationControl.js?nc=1790923960777

1/*****************************************************************************************
2 * Firma:        Hehner Reus Systems GmbH
3 * Projekt:      com.cerno.basis
4 * Datei:        NavigationControl.js
5 * Erstellung:   05.05.2014
6 * Verwendung:   JavaScript-Klassen für die Steuerung / Effekte von verschiedenen 
7 *               Navigationen.
8 * 
9 * $Id: NavigationControl.js,v 1.31 2025/11/14 10:49:28 whe Exp $
10 * $Author: whe $
11 *
12 *****************************************************************************************/
13
14HRNavigationControl = function(idTopUL, configuration)
15{
16   HRNavigationControlsInit();
17   HRNavigationControls.push(this);
18   this.IdTopUL = idTopUL;
19   this.DesktopNavigation = null;
20   this.ActiveNavigation = null;
21   this.MobileNavigations = new Array();
22   if (configuration)
23   {
24      // Weitere Optionen hier auswerten.
25   }
26}
27
28HRNavigationControl.prototype.onResize = function(neueBreite, neueHoehe)
29{
30   if (this.DesktopNavigation == null && this.MobileNavigations.length <= 0)
31      return;     // Keine Navis angelegt, nichts zu tun.
32   
33   this.chooseNavigation(neueBreite, neueHoehe);
34   
35   if (this.ActiveNavigation != null)
36      return this.ActiveNavigation.onResize(neueBreite, neueHoehe);
37}
38
39HRNavigationControl.prototype.chooseNavigation = function(breite, hoehe)
40{
41   var neueNavigation = null;
42   
43   for (var i = 0; i < this.MobileNavigations.length; i++)
44   {
45      if (this.MobileNavigations[i].checkDimensions(breite, hoehe))
46         neueNavigation = this.MobileNavigations[i];
47   }
48   if (neueNavigation == null)
49      neueNavigation = this.DesktopNavigation;
50   
51   if (this.ActiveNavigation != null && this.ActiveNavigation != neueNavigation)
52      this.ActiveNavigation.deactivate();
53   
54   if (neueNavigation != null && this.ActiveNavigation != neueNavigation)
55      neueNavigation.activate();
56   
57   this.ActiveNavigation = neueNavigation;
58}
59
60HRNavigationControl.prototype.addMobileNavFolderpageLink = function(linkElement, ebene)
61{
62   for (var i = 0; i < this.MobileNavigations.length; i++)
63   {
64      this.MobileNavigations[i].addMobileNavFolderpageLink(linkElement, ebene);
65   }
66}
67
68HRNavigationControl.prototype.addMobileNavZurueckLinks = function(linkElement, ebene)
69{
70   for (var i = 0; i < this.MobileNavigations.length; i++)
71   {
72      this.MobileNavigations[i].addMobileNavZurueckLinks(linkElement, ebene);
73   }
74}
75
76HRNavigationControl.prototype.addInitialSelectedEbene = function(linkElement, ebene)
77{
78   for (var i = 0; i < this.MobileNavigations.length; i++)
79   {
80      this.MobileNavigations[i].onInitialSelectedEbene(linkElement, ebene);
81   }
82}
83
84HRNavigationControl.prototype.addMobileNavigation = function(navigation)
85{
86   if (navigation != null)
87   {
88      this.MobileNavigations.push(navigation);
89      navigation.setNavigationControl(this);
90   }
91}
92
93HRNavigationControl.prototype.setDesktopNavigation = function(navigation)
94{
95   this.DesktopNavigation = navigation;
96   if (navigation != null)
97   {
98      navigation.setNavigationControl(this);
99   }
100}
101
102HRNavigationControl.prototype.onEntryClicked = function(clickElement, ebene)
103{
104   if (this.ActiveNavigation == null)
105      return true;     // Normale Verarbeitung des Links.
106   
107   return this.ActiveNavigation.onEntryClicked(clickElement, ebene);
108}
109
110HRNavigationControl.prototype.onTouchEnd = function(clickElement, ebene)
111{
112   if (this.ActiveNavigation == null)
113      return true;     // Normale Verarbeitung des Links.
114   
115   return this.ActiveNavigation.onTouchEnd(clickElement, ebene);
116}
117
118HRNavigationControl.prototype.onZurueckClicked = function(clickElement, ebene)
119{
120   if (this.ActiveNavigation == null)
121      return true;     // Normale Verarbeitung des Links.
122   
123   return this.ActiveNavigation.onZurueckClicked(clickElement, ebene);
124}
125
126HRNavigationControl.prototype.getIdTopUL = function()
127{
128   return this.IdTopUL
129}
130
131HRNavigationControl.prototype.unSelectEntries = function()
132{
133   if (this.ActiveNavigation != null)
134      this.ActiveNavigation.unSelectEntries();
135}
136
137HRNavigationControl.prototype.resetActiveNavigation = function()
138{
139   this.ActiveNavigation = null;
140}
141
142/**
143 * Basisklasse für spezielle Navigationen.
144 */
145HRBaseNavigation = function(minWidth, maxWidth, configuration)
146{
147   this.NavigationControl   = null;
148   this.MobileNavFolderpageLinks = new Array();
149   this.MobileNavZurueckLinks = new Array();
150   this.MinWidth            = 0;
151   this.MaxWidth            = 999999;
152   this.MinHeight           = 0;
153   this.MaxHeight           = 999999;
154   this.Duration            = 500;
155   this.LastClickElements   = new Array();
156   this.AdditionalCompleteFunction = null;
157   this.InitialIdentionCount = 0;
158   this.KeepInitialIdention = false;

159   this.MinEbene = -1;
160   this.MaxEbene = -1;
161   
162   if (minWidth != null && minWidth > 0)
163      this.MinWidth = minWidth;
164   
165   if (maxWidth != null && maxWidth > 0)
166      this.MaxWidth = maxWidth;
167   if (configuration)
168   {
169      if (configuration.minHeight && configuration.minHeight > 0)
170         this.MinHeight = configuration.minHeight;
171      
172      if (configuration.maxHeight && configuration.maxHeight > 0)
173         this.MaxHeight = configuration.maxHeight;
174      
175      if (configuration.duration)
176         this.Duration = configuration.duration;
177      
178      if (configuration.keepInitialIdention)
179         this.KeepInitialIdention = configuration.keepInitialIdention;
180
181      if (configuration.minEbene)
182         this.MinEbene = configuration.minEbene;
183      
184      if (configuration.maxEbene)
185         this.MaxEbene = configuration.maxEbene;
186   }
187}
188
189HRBaseNavigation.prototype.setNavigationControl = function(naviControl)
190{
191   this.NavigationControl = naviControl;
192}
193
194HRBaseNavigation.prototype.addMobileNavFolderpageLink = function(linkElement, ebene)
195{
196   if (linkElement != null && this.checkEbene(ebene))
197   {
198      this.MobileNavFolderpageLinks.push(linkElement);
199   }
200}
201
202HRBaseNavigation.prototype.addMobileNavZurueckLinks = function(linkElement, ebene)
203{
204   if (linkElement != null && this.checkEbene(ebene))
205   {
206      this.MobileNavZurueckLinks.push(linkElement);
207      if (this.isActivated)
208      {
209         if (!this.isTimeout)
210         {
211            setTimeout(function() { HRNavigationControlsResetActiveNavigation(); HRNavigationControlsOnLoad(); }, 1000);
212            this.isTimeout = true;
213         }
214      }
215   }
216}
217
218HRBaseNavigation.prototype.activateMobileNavFolderpageLinks = function()
219{
220   this.isActivated = true;
221   this.isTimeout = false;
222   for (var i = 0; i < this.MobileNavFolderpageLinks.length; i++)
223   {
224      this.MobileNavFolderpageLinks[i].style.display = 'block';
225   }
226}
227
228HRBaseNavigation.prototype.activateMobileNavZurueckLinks = function()
229{
230   for (var i = 0; i < this.MobileNavZurueckLinks.length; i++)
231   {
232      this.MobileNavZurueckLinks[i].style.display = 'block';
233   }
234}
235
236HRBaseNavigation.prototype.deactivateMobileNavFolderpageLinks = function()
237{
238   for (var i = 0; i < this.MobileNavFolderpageLinks.length; i++)
239   {
240      this.MobileNavFolderpageLinks[i].style.display = 'none';
241   }
242}
243
244HRBaseNavigation.prototype.deactivateMobileNavZurueckLinks = function()
245{
246   for (var i = 0; i < this.MobileNavZurueckLinks.length; i++)
247   {
248      this.MobileNavZurueckLinks[i].style.display = 'none';
249   }
250}
251
252
253HRBaseNavigation.prototype.getMinWidth = function()
254{
255   return this.MinWidth;
256}
257
258HRBaseNavigation.prototype.getMaxWidth = function()
259{
260   return this.MaxWidth;
261}
262
263HRBaseNavigation.prototype.getMinHeight = function()
264{
265   return this.MinHeight;
266}
267
268HRBaseNavigation.prototype.getMaxHeight = function()
269{
270   return this.MaxHeight;
271}
272
273HRBaseNavigation.prototype.checkDimensions = function(breite, hoehe)
274{
275   if (   this.MinWidth <= breite && this.MaxWidth >= breite
276       && this.MinHeight <= hoehe && this.MaxHeight >= hoehe)
277   {
278      return true;
279   }
280   else
281   {
282      return false;
283   }
284}
285
286HRBaseNavigation.prototype.activate = function()
287{
288}
289
290HRBaseNavigation.prototype.deactivate = function()
291{
292   if (this.NavigationControl != null)
293   {
294      this.deactivateMobileNavFolderpageLinks();
295      this.deactivateMobileNavZurueckLinks();
296   }
297}
298
299HRBaseNavigation.prototype.onResize = function(neueBreite, neueHoehe)
300{
301   return true;
302}
303
304HRBaseNavigation.prototype.onEntryClicked = function(clickElement, ebene)
305{
306   if (!this.checkEbene(ebene))
307      return true;
308   
309   this.LastClickElements.push(clickElement);
310   return true;
311}
312
313HRBaseNavigation.prototype.onTouchEnd = function(clickElement, ebene)
314{
315   // Im Basisfall, verhalten wir uns genauso, wie bei EntryClicked.
316   return this.onEntryClicked(clickElement, ebene);
317}
318
319HRBaseNavigation.prototype.onZurueckClicked = function(clickElement, ebene)
320{
321   if (!this.checkEbene(ebene))
322      return true;
323   
324   this.LastClickElements.pop();
325   return true;
326}
327
328HRBaseNavigation.prototype.onInitialSelectedEbene = function(clickElement, ebene)
329{
330   if (!this.checkEbene(ebene))
331      return true;
332   
333   if (this.KeepInitialIdention)
334   {
335      this.LastClickElements.unshift(clickElement);
336      this.InitialIdentionCount++;
337   }
338   
339   return true;
340}
341
342HRBaseNavigation.prototype.checkEbene = function(ebene)
343{
344   if ((this.MinEbene == -1 || this.MinEbene <= ebene) && (this.MaxEbene == -1 || this.MaxEbene >= ebene))
345      return true;
346   
347   return false;

348}
349
350/**
351 * Für manche Navigationen vorbereitet, um den Status der
352 * bisher durch mobile Aktionen selektierten Ebenen zurück
353 * zu setzen.
354 */
355HRBaseNavigation.prototype.unSelectEntries = function()
356{
357   this.LastClickElements = new Array();
358   // Initiale Einrückungen müssen wir auch vergessen.
359   this.InitialIdentionCount = 0;
360}
361
362/**
363 * Eine Off-Canvas-Navigation, bei der Untermenüs seitlich reingeschoben werden.
364 */
365HROffCanvasNavigation = function(minWidth, maxWidth, configuration)
366{
367   HRBaseNavigation.call(this, minWidth, maxWidth, configuration);
368   this.IdElementToMove = null;
369   this.ElementToMove = null;
370   this.ElementToMoveLeft = 0;
371   this.ElementToMoveLeftInitial = 0;
372   this.EigenerFolderpageLink = true;
373   
374   if (configuration)
375   {
376      if (configuration.idElementToMove)
377         this.IdElementToMove = configuration.idElementToMove;
378      
379      if (configuration.keinFolderpageLink)
380         this.EigenerFolderpageLink = false;
381   }
382   
383   if (this.IdElementToMove)
384      this.ElementToMove = document.getElementById(this.IdElementToMove);
385   
386   if (this.ElementToMove)
387   {
388      this.ElementToMoveLeft = getElementLeftValue(this.ElementToMove);
389      this.ElementToMoveLeftInitial = this.ElementToMoveLeft;
390   }
391}
392
393extend(HROffCanvasNavigation, HRBaseNavigation);
394
395HROffCanvasNavigation.prototype.onEntryClicked = function(clickElement, ebene)
396{
397   if (!this.checkEbene(ebene))
398      return true;
399   
400   HROffCanvasNavigation.superclass.onEntryClicked.call(this, clickElement, ebene);
401   if (clickElement != null && clickElement.parentNode != null)
402      addCSSClass(clickElement.parentNode, "hr-MobileNavClicked");
403   
404   this.moveElement(-100);
405   return false;
406}
407
408HROffCanvasNavigation.prototype.onZurueckClicked = function(clickElement, ebene)
409{
410   if (!this.checkEbene(ebene))
411      return true;
412   
413   if (this.LastClickElements.length > 0 && this.LastClickElements[this.LastClickElements.length - 1] != null)
414   {
415      if (this.IdElementToMove && !this.ElementToMove)
416      {
417         this.ElementToMove = document.getElementById(this.IdElementToMove);
418      }
419      var index = this.LastClickElements.length - 1;
420      while (this.LastClickElements.length - 1 > 0 && this.ElementToMove != null && !HRIsParentElement(this.LastClickElements[this.LastClickElements.length - 1].parentNode, this.ElementToMove))
421      {
422         this.LastClickElements.pop();
423      }
424      var parent = this.LastClickElements[this.LastClickElements.length - 1].parentNode;
425      if (parent != null)
426      {
427         this.AdditionalCompleteFunction = function(){ removeCSSClass(parent, "hr-MobileNavClicked"); }
428      }
429   }
430   HROffCanvasNavigation.superclass.onZurueckClicked.call(this, clickElement, ebene);
431   this.moveElement(100);
432   return false;
433}
434
435HROffCanvasNavigation.prototype.moveElement = function(amount)
436{
437   if (this.IdElementToMove && !this.ElementToMove)
438   {
439      this.ElementToMove = document.getElementById(this.IdElementToMove);
440   
441      if (this.ElementToMove)
442      {
443         this.ElementToMoveLeft = getStyleMeasureValue(this.ElementToMove.style.left);
444         this.ElementToMoveLeftInitial = this.ElementToMoveLeft;
445      }
446   }
447   if (this.ElementToMove)
448   {
449      this.ElementToMove.scrollTop = 0;
450      if (this.ElementToMove.parentNode)
451         this.ElementToMove.parentNode.scrollTop = 0;
452      var _this = this;
453      var animator = new Animator({duration   : this.Duration, 
454                                   onComplete : function() {
455                                                   _this.ElementToMoveLeft = getStyleMeasureValue(_this.ElementToMove.style.left);
456                                                   if (_this.AdditionalCompleteFunction != null)
457                                                   {
458                                                      _this.AdditionalCompleteFunction();
459                                                      _this.AdditionalCompleteFunction = null;
460                                                   }
461                                                }
462                                  });
463      
464      animator.addSubject(new NumericalStyleSubject(this.ElementToMove, 'left', this.ElementToMoveLeft, this.ElementToMoveLeft + amount, '%'));
465      animator.play();
466   }
467}
468
469HROffCanvasNavigation.prototype.activate = function()
470{
471   HROffCanvasNavigation.superclass.activate.call(this);
472   if (this.NavigationControl != null)
473   {
474      if (this.EigenerFolderpageLink)
475         this.activateMobileNavFolderpageLinks();
476      
477      this.activateMobileNavZurueckLinks();
478   }
479   if (this.KeepInitialIdention)
480   {
481      if (this.IdElementToMove && !this.ElementToMove)
482      {
483         this.ElementToMove = document.getElementById(this.IdElementToMove);
484      }
485      var indentionCount = 0;
486      for (var i = 0; i < this.LastClickElements.length; i++)
487      {
488         var parentElement = this.LastClickElements[i].parentNode;
489         if (parentElement != null && (this.ElementToMove == null || HRIsParentElement(parentElement, this.ElementToMove)))
490         {
491            addCSSClass(parentElement, "hr-MobileNavClicked");
492            indentionCount++;
493         }
494      }
495      this.moveElement(-100 * indentionCount);
496   }
497}
498HROffCanvasNavigation.prototype.deactivate = function()
499{
500   HROffCanvasNavigation.superclass.deactivate.call(this);
501   if (this.ElementToMove)
502   {
503      this.ElementToMove.style.left = this.ElementToMoveLeftInitial + '%';
504      this.ElementToMoveLeft = this.ElementToMoveLeftInitial;
505   }
506   if (this.LastClickElements != null && this.LastClickElements.length > 0)
507   {
508      for (var i = 0; i < this.LastClickElements.length; i++)
509      {
510         var parentElement = this.LastClickElements[i].parentNode;
511         if (parentElement != null)
512            removeCSSClass(parentElement, "hr-MobileNavClicked");
513      }
514   }
515   if (!this.KeepInitialIdention)
516   {
517      this.LastClickElements = new Array();   // Altes löschen.
518   }
519   this.InitialIdentionCount = this.LastClickElements.length;
520}
521
522/**
523 * Eine einfache Navigation für z.B. Tablets, bei der die Untermenüs onclick

524 * eingeblendet werden, da es auf (vielen) Tablets keinen hover-Effekt gibt.
525 */
526HROnClickOpenNavigation = function(minWidth, maxWidth, configuration)
527{
528   HRBaseNavigation.call(this, minWidth, maxWidth, configuration);
529   this.MobileOnly = false;
530   this.HasTouchStart = false;
531   this.EigenerFolderpageLink = true;
532   
533   if (configuration)
534   {
535      if (configuration.mobileOnly)
536         this.MobileOnly = configuration.mobileOnly;
537      
538      if (configuration.keinFolderpageLink)
539         this.EigenerFolderpageLink = false;
540   }
541   
542   var _this = this;
543   this.OutOfNavigationClicked = function(eventObj)
544      {
545         eventObj = eventObj || window.event;
546         var target = eventObj.target || eventObj.srcElement;
547         
548         if (HRGetParentElementById(target, _this.NavigationControl.getIdTopUL()) == null)
549         {
550            _this.unSelectEntries();
551         }
552      };
553      
554   this.OnTouchStart = function(eventObj)
555   {
556      _this.HasTouchStart = true;
557      HRRemoveEventListener(null, "touchstart", this.OnTouchStart);
558   }
559   
560   if (this.MobileOnly)
561   {
562      HRAddEventListener(null, "touchstart", this.OnTouchStart);
563   }
564}
565
566extend(HROnClickOpenNavigation, HRBaseNavigation);
567
568HROnClickOpenNavigation.prototype.onEntryClicked = function(clickElement, ebene)
569{
570   if (!this.checkEbene(ebene))
571      return true;
572   
573   if (!this.MobileOnly || this.isMobilePlattform())
574   {
575      var continueEvent = false;
576      if (clickElement != null && clickElement.parentNode != null)
577      {
578         //
579         // Hier gibt es keinen Zurück-Button, daher togglen wir hier den Status.
580         //
581         if (clickElement.parentNode.className.indexOf("hr-MobileNavClicked") < 0)
582         {
583            addCSSClass(clickElement.parentNode, "hr-MobileNavClicked");
584          
585            var parentFound = false;
586            while (this.LastClickElements.length > 0 && !parentFound)
587            {
588               var parentElement = this.LastClickElements[this.LastClickElements.length - 1].parentNode;
589               if (parentElement != null && !HRIsParentElement(clickElement, parentElement))
590               {
591                  removeCSSClass(parentElement, "hr-MobileNavClicked");
592                  this.LastClickElements.pop();
593               }
594               else
595               {
596                  parentFound = true;
597               }
598            }
599         }
600         else
601         {
602            //
603            // Wenn es keine eigenen Folderpage-Link gibt, folgen wir doch noch dem Link.
604            //
605            if (!this.EigenerFolderpageLink)
606            {
607               continueEvent = true;
608            }
609            removeCSSClass(clickElement.parentNode, "hr-MobileNavClicked");
610         }
611         HROnClickOpenNavigation.superclass.onEntryClicked.call(this, clickElement, ebene);
612         HRAddEventListener(null, "mousedown", this.OutOfNavigationClicked);
613         HRAddEventListener(null, "touchstart", this.OutOfNavigationClicked);
614      }
615      return continueEvent;
616   }
617   return true;
618}
619
620HROnClickOpenNavigation.prototype.onTouchEnd = function(clickElement, ebene)
621{
622   // Den TouchEnd-Event ignorieren wir, wir unterdrücken ihn aber nicht.
623   return true;
624}
625
626
627HROnClickOpenNavigation.prototype.onZurueckClicked = function(clickElement, ebene)
628{
629   if (!this.checkEbene(ebene))
630      return true;
631   
632   if (!this.MobileOnly || this.isMobilePlattform())
633   {
634      if (this.LastClickElements.length > 0 && this.LastClickElements[this.LastClickElements.length - 1] != null)
635      {
636         var parent = this.LastClickElements[this.LastClickElements.length - 1].parentNode;
637         if (parent != null)
638         {
639            removeCSSClass(parent, "hr-MobileNavClicked");
640         }
641      }
642      HROnClickOpenNavigation.superclass.onZurueckClicked.call(this, clickElement, ebene);
643      return false;
644   }
645   return true;
646}
647
648HROnClickOpenNavigation.prototype.activate = function()
649{
650   if (!this.MobileOnly || this.isMobilePlattform())
651   {
652      HROnClickOpenNavigation.superclass.activate.call(this);
653      if (this.NavigationControl != null && this.EigenerFolderpageLink)
654      {
655         this.activateMobileNavFolderpageLinks();
656      }
657      if (this.KeepInitialIdention)
658      {
659         for (var i = 0; i < this.LastClickElements.length; i++)
660         {
661            var parentElement = this.LastClickElements[i].parentNode;
662            if (parentElement != null)
663               addCSSClass(parentElement, "hr-MobileNavClicked");
664         }
665      }
666   }
667}
668
669HROnClickOpenNavigation.prototype.deactivate = function()
670{
671   if (!this.MobileOnly || this.isMobilePlattform())
672   {

673      HROnClickOpenNavigation.superclass.deactivate.call(this);
674      this.unSelectEntries();
675   }
676}
677
678HROnClickOpenNavigation.prototype.unSelectEntries = function()
679{
680   if (this.LastClickElements != null && this.LastClickElements.length > 0)
681   {
682      for (var i = 0; i < this.LastClickElements.length; i++)
683      {
684         var parentElement = this.LastClickElements[i].parentNode;
685         if (parentElement != null)
686            removeCSSClass(parentElement, "hr-MobileNavClicked");
687      }
688   }
689   HROnClickOpenNavigation.superclass.unSelectEntries.call(this);
690   HRRemoveEventListener(null, "mousedown", this.OutOfNavigationClicked);
691   HRRemoveEventListener(null, "touchstart", this.OutOfNavigationClicked);
692}
693
694HROnClickOpenNavigation.prototype.isMobilePlattform = function()
695{
696   if (HRBrowser.isMobile() || this.HasTouchStart)
697      return true;
698   else
699      return false;
700}
701
702/**
703 * Es folgen die Funktionen für die Navigation-Buttons. Die Schaltflächen,
704 * die insbesondere mobile Navigationen ein und ausschalten.
705 * @param idButton Zeichenkette mit der id des Navigationsbuttons. Es ist hier auch
706 *                 möglich mehrere Ids in einem Array aus Strings anzugeben.
707 */
708HRNavigationButton = function(idButton, minWidth, maxWidth, configuration)
709{
710   HRNavigationControlsInit();
711   HRNavigationButtons.push(this);
712   this.Buttons = new Array();
713   var elementAblage = null;
714   if (typeof(idButton) == 'string')
715   {
716      elementAblage = document.getElementById(idButton);
717      if (elementAblage != null)
718         this.Buttons.push(elementAblage);
719   }
720   else if (typeof(idButton) == 'object')
721   {
722      if (idButton instanceof Array)
723      {
724         for (var i = 0; i < idButton.length; i++)
725         {
726            elementAblage = document.getElementById(idButton[i]);
727            if (elementAblage != null)
728               this.Buttons.push(elementAblage);
729         }
730      }
731      else if (idButton instanceof Element)
732      {
733         this.Buttons.push(idButton);
734      }
735   }
736   this.MinWidth = minWidth;
737   this.MaxWidth = maxWidth;
738   this.NavigationAktiv = false;

739   this.IdOverlay = null;
740   this.Overlay = null;
741   this.IdElementChangeId = null;
742   this.ElementChangeId = null;
743   this.IdToChangeTo = null;
744   this.IdElementToShow = null;
745   this.ElementToShow = null;
746   this.IdElementToSlide = null;
747   this.ElementToSlide   = null;
748   this.Duration      = 500;
749   this.Animator      = null;
750   this.Direction = "left";
751   this.CSSClass = "";
752   this.Amount = 100;
753   this.AnimationType = 'fade';
754   this.UseEventManager = typeof(HREventManager) == "object";
755   
756   if (configuration)
757   {
758      if (configuration.idOverlay)
759         this.IdOverlay = configuration.idOverlay;
760      
761      if (configuration.duration)
762         this.Duration = configuration.duration;
763
764      if (configuration.idElementChangeId)
765         this.IdElementChangeId = configuration.idElementChangeId;
766
767      if (configuration.idToChangeTo)
768         this.IdToChangeTo = configuration.idToChangeTo;
769
770      if (configuration.idElementToShow)
771         this.IdElementToShow = configuration.idElementToShow;
772
773      if (configuration.idElementToSlide)
774      {
775         this.IdElementToSlide = configuration.idElementToSlide;
776         this.AnimationType = 'slide';
777      }
778      
779      if (configuration.animationType)
780         this.AnimationType = configuration.animationType;
781         
782      if (configuration.amount)
783         this.Direction = configuration.amount;
784
785      if (configuration.direction)
786         this.Direction = configuration.direction;
787      
788      if (configuration.cssClass)
789         this.CSSClass = configuration.cssClass;
790   }
791   this.readElemente();
792   var _this = this;
793   
794   
795   if(this.Buttons.length > 1){
796      let button = this.Buttons[0];
797      let closeButton = this.Buttons[1];
798      if (!HRCSS.isHidden(button) && _this.IdElementToShow)
799      {
800         HRAddOnLoad(function(){
801            HRCSS.toggleOverlay(button, document.getElementById(_this.IdElementToShow), closeButton, false, false);
802         });
803      }
804      
805      HRAddEventListener(closeButton, "click", function(){
806         _this.buttonClicked();
807      });
808      HRAddEventListener(button, "click", function(){
809         _this.buttonClicked();
810      });
811   } else {
812      let button = this.Buttons[0];
813      if (!HRCSS.isHidden(button) && button && _this.IdElementToShow)
814      {
815         HRAddOnLoad(function(){
816            HRCSS.toggleOverlay(button, document.getElementById(_this.IdElementToShow), null, false, false);
817         });
818      }
819      HRAddEventListener(button, "click", function(){
820         _this.buttonClicked();
821      });
822   }
823
824   if (this.UseEventManager)
825      HREventManager.addListener(this.ElementToShow, "HRMenuOpen", function() {_this.deactivateNavigationNoAnimation();}, {useStandard: false, notifiedBySelf: false, notifiedByAll: true});
826}
827
828HRNavigationButton.prototype.readElemente = function()
829{
830   if (this.IdOverlay && this.Overlay == null)
831      this.Overlay = document.getElementById(this.IdOverlay);
832   
833   if (this.IdElementChangeId && this.ElementChangeId == null)
834      this.ElementChangeId = document.getElementById(this.IdElementChangeId);
835   
836   if (this.IdElementToShow && this.ElementToShow == null)
837      this.ElementToShow = document.getElementById(this.IdElementToShow);
838   
839   if (this.IdElementToSlide && this.ElementToSlide == null)
840      this.ElementToSlide = document.getElementById(this.IdElementToSlide);
841}
842
843HRNavigationButton.prototype.buttonClicked = function()
844{
845   this.readElemente();
846   if (this.NavigationAktiv)
847      this.deactivateNavigation();
848   else
849      this.activateNavigation();
850}
851
852HRNavigationButton.prototype.onResize = function(neueBreite, neueHoehe)
853{
854   this.readElemente();
855   if ((neueBreite < this.MinWidth || neueBreite > this.MaxWidth) && this.NavigationAktiv)
856   {
857      const button = Array.from(this.Buttons).find(btn => !HRCSS.isHidden(btn));
858      
859      // Navigation wird geschlossen.
860      if (button && this.ElementToShow.classList.contains('overlay-open'))
861         button.click();
862      else if (button.classList.contains('open'))
863         this.deactivateNavigation();
864   }
865}
866   
867HRNavigationButton.prototype.activateNavigation = function()
868{
869   var _this = this;
870   if (this.UseEventManager)
871      HREventManager.dispatchEvent(_this.ElementToShow, 'HRMenuOpen', {'notifySelf': false, 'bubbles': true, 'useStandard': false, 'notifyAll' : true});
872
873   if (typeof(this.CSSClass) == 'string' && this.CSSClass.length > 0)
874   {
875      for (var i = 0; i < this.Buttons.length; i++)
876      {
877         addCSSClass(this.Buttons[i], this.CSSClass);
878      }
879   }
880   if (this.Animator == null)
881   {
882      this.Animator = new Animator({duration   : this.Duration, 
883                                    onComplete : function() {
884                                          _this.NavigationAktiv = !_this.NavigationAktiv;
885                                          if (!_this.NavigationAktiv && _this.ElementToShow)
886                                          {
887                                             _this.ElementToShow.style.display = null;
888                                             if (_this.ElementToSlide)
889                                                _this.ElementToShow.style.left = null;
890                                             else
891                                                _this.ElementToShow.style.opacity = null;
892                                          }
893                                          if (!_this.NavigationAktiv && _this.ElementChangeId)
894                                          {
895                                             _this.ElementChangeId.id = _this.IdElementChangeId;
896                                          }
897                                       }
898                                   });
899      if (this.ElementToShow)
900      {
901         this.Animator.addSubject(new DiscreteStyleSubject(this.ElementToShow, 'dis

901play', "none", "block", 0.01));
902         if (this.AnimationType == 'slide')
903         {
904            if (this.Direction == 'right')
905            {
906               this.Animator.addSubject(new NumericalStyleSubject(this.ElementToShow, 'left', 100, 100 - this.Amount, '%'));
907            }
908            else
909            {
910               this.Animator.addSubject(new NumericalStyleSubject(this.ElementToShow, 'left', -1 * this.Amount, 0, '%'));
911            }
912         }
913         else
914            this.Animator.addSubject(new NumericalStyleSubject(this.ElementToShow, 'opacity', 0, 1));
915      }
916      if (this.Overlay)
917      {
918         this.Animator.addSubject(new DiscreteStyleSubject(this.Overlay, 'display', "none", "block", 0.01));
919         this.Animator.addSubject(new NumericalStyleSubject(this.Overlay, 'opacity', 0, 1));
920      }
921      if (this.ElementToSlide)
922      {
923         if (this.Direction == 'right')
924         {
925//            this.Animator.addSubject(new NumericalStyleSubject(this.ElementToSlide, 'margin-' + this.Direction, 0, this.Amount, '%'));
926            this.Animator.addSubject(new NumericalStyleSubject(this.ElementToSlide, 'left', 0, -1 * this.Amount, '%'));
927         }
928         else
929         {
930            this.Animator.addSubject(new NumericalStyleSubject(this.ElementToSlide, 'right', -1 * this.Amount, 0, '%'));
931         }
932      }
933   }
934   if (this.ElementChangeId)
935      this.ElementChangeId.id = this.IdToChangeTo;
936   
937   this.Animator.play();
938}
939
940HRNavigationButton.prototype.removeButtonCSS = function()
941{
942   if (typeof(this.CSSClass) == 'string' && this.CSSClass.length > 0)
943   {
944      for (var i = 0; i < this.Buttons.length; i++)
945      {
946         removeCSSClass(this.Buttons[i], this.CSSClass);
947      }
948   }
949}
950
951HRNavigationButton.prototype.deactivateNavigation = function()
952{
953   this.removeButtonCSS();
954   if (this.Animator != null)
955      this.Animator.reverse();
956   
957   if (this.UseEventManager)
958      HREventManager.dispatchEvent(this.ElementToShow, 'HRMenuClose', {'notifySelf': false, 'useStandard': false, 'notifyAll' : true});
959}
960
961HRNavigationButton.prototype.deactivateNavigationNoAnimation = function()
962{
963   if (this.NavigationAktiv)
964   {
965      this.removeButtonCSS();
966      if (this.Animator != null)
967      {
968         //
969         // Laufende Aktionen abbrechen. Um nicht durcheinander zu kommen,
970         // den Animator löschen. Bei der nächsten Aktivierung wird er neu erstellt.
971         //
972         this.Animator.stop();
973         this.Animator = null;
974      }
975      this.NavigationAktiv = false;

976      if (this.ElementToShow)
977      {
978         this.ElementToShow.style.display = null;
979         if (this.ElementToSlide)
980            this.ElementToShow.style.left = null;
981         else
982            this.ElementToShow.style.opacity = null;
983      }
984      if (this.ElementChangeId)
985      {
986         this.ElementChangeId.id = this.IdElementChangeId;
987      }
988
989      if (this.UseEventManager)
990         HREventManager.dispatchEvent(this.ElementToShow, 'HRMenuClose', {'notifySelf': false, 'useStandard': false, 'notifyAll' : true});
991   }
992}
993
994
995/**
996 * Es folgen die globalen Funktionen.
997 * Alle NavigationsSteuerungen werden globalisiert, um gut beispielsweise auf Resize-Events 
998 * reagieren zu können.
999 */
1000var HRNavigationControls = null;
1001var HRNavigationButtons = null;
1002var HRNavigationControlsTouchMoved = false;
1003
1004/**
1005 * Die globale Elemente für die Navigationen initialisieren.
1006 */
1007function HRNavigationControlsInit()
1008{
1009   if (HRNavigationControls == null)
1010   {
1011      HRNavigationControls = new Array();
1012      if (HRNavigationButtons == null)
1013         HRNavigationButtons = new Array();
1014      
1015      if (window.addEventListener)
1016      {
1017         window.addEventListener("resize", HRNavigationControlsOnResize, false);
1018      }
1019      else if (window.attachEvent)  
1020      {
1021         window.attachEvent("onresize", HRNavigationControlsOnResize);
1022      }
1023      else
1024         window.onresize = HRNavigationControlsOnResize;
1025      
1026      HRAddOnLoad(HRNavigationControlsOnLoad);
1027   }
1028}
1029
1030/**
1031 * Den Resize-Event an alle Navigationen weiterleiten.
1032 */
1033function HRNavigationControlsOnResize()
1034{
1035   if (HRNavigationControls != null)
1036   {
1037      var neueBreite = getWindowWidth();
1038      var neueHoehe = getWindowHeight();
1039      for (var i = 0; i < HRNavigationControls.length; i++)
1040         HRNavigationControls[i].onResize(neueBreite, neueHoehe);
1041      
1042      for (var i = 0; i < HRNavigationButtons.length; i++)
1043      {
1044         if (HRNavigationButtons[i] != null && typeof HRNavigationButtons[i].onResize == 'function')
1045            HRNavigationButtons[i].onResize(neueBreite, neueHoehe);
1046      }
1047   }
1048}
1049
1050function HRGetNavigation(idTopUL)
1051{
1052   var navigation = null;
1053   if (HRNavigationControls != null && idTopUL != null)
1054   {
1055      for (var i = 0; i < HRNavigationControls.length && navigation == null; i++)
1056      {
1057         if (HRNavigationControls[i].getIdTopUL() == idTopUL)
1058            navigation = HRNavigationControls[i];
1059      }
1060   }
1061   return navigation;
1062}
1063
1064function HRNavigationControlsOnTouchMove()
1065{
1066   HRNavigationControlsTouchMoved = true;
1067}
1068
1069function HRNavigationControlsOnTouchEnd(event, clickElement, ebene)
1070{
1071   var continueEvent = true;
1072   if (HRBrowser.isiOS() && !HRNavigationControlsTouchMoved && clickElement)
1073   {
1074      var element = HRNavigationGetElement(clickElement);
1075      if (HRNavigationControls != null && element != null)
1076      {
1077         for (var i = 0; i < HRNavigationControls.length; i++)
1078         {
1079            if (HRGetParentElementById(element, HRNavigationControls[i].getIdTopUL()) != null)
1080            {
1081               if (!HRNavigationControls[i].onTouchEnd(element, ebene))
1082                  continueEvent = false;
1083            }
1084         }
1085      }
1086   }
1087//   if (!continueEvent)
1088//   {
1089//      event.preventDefault();
1090//   }
1091   HRNavigationControlsTouchMoved = false;
1092   return continueEvent;
1093}
1094
1095function HRNavigationControlsOnEntryClicked(clickElement, ebene)
1096{
1097   var continueEvent = true;
1098   var element = HRNavigationGetElement(clickElement);
1099   if (HRNavigationControls != null && element != null)
1100   {
1101      for (var i = 0; i < HRNavigationControls.length; i++)
1102      {
1103         if (HRGetParentElementById(element, HRNavigationControls[i].getIdTopUL()) != null)
1104         {
1105            if (!HRNavigationControls[i].onEntryClicked(element, ebene))
1106               continueEvent = false;
1107         }
1108      }
1109   }
1110   return continueEvent;
1111}
1112
1113function HRNavigationControlsOnZurueckClicked(clickElement, ebene)
1114{
1115   var continueEvent = true;
1116   var element = HRNavigationGetElement(clickElement);
1117   if (HRNavigationControls != null && element != null)
1118   {
1119      for (var i = 0; i < HRNavigationControls.length; i++)
1120      {
1121         if (HRGetParentElementById(element, HRNavigationControls[i].getIdTopUL()) != null)
1122         {
1123            if (!HRNavigationControls[i].onZurueckClicked(element, ebene))
1124               continueEvent = false;

1125         }
1126      }
1127   }
1128   return continueEvent;
1129}
1130
1131function HRNavigationControlsAddInitialSelectedEbene(clickElement, ebene)
1132{
1133   var continueEvent = true;
1134   var element = HRNavigationGetElement(clickElement);
1135   if (HRNavigationControls != null && element != null)
1136   {
1137      for (var i = 0; i < HRNavigationControls.length; i++)
1138      {
1139         if (HRGetParentElementById(element, HRNavigationControls[i].getIdTopUL()) != null)
1140         {
1141            if (!HRNavigationControls[i].addInitialSelectedEbene(element, ebene))
1142               continueEvent = false;
1143         }
1144      }
1145   }
1146   return continueEvent;
1147}
1148
1149function HRNavigationControlsAddMobileNavFolderpageLink(linkElement, ebene)
1150{
1151   var element = HRNavigationGetElement(linkElement);
1152   if (HRNavigationControls != null && element != null)
1153   {
1154      for (var i = 0; i < HRNavigationControls.length; i++)
1155      {
1156         if (HRGetParentElementById(element, HRNavigationControls[i].getIdTopUL()) != null)
1157            HRNavigationControls[i].addMobileNavFolderpageLink(element, ebene);
1158      }
1159   }
1160}
1161
1162function HRNavigationControlsAddMobileNavZurueckLinks(linkElement, ebene)
1163{
1164   var element = HRNavigationGetElement(linkElement);
1165   if (HRNavigationControls != null && element != null)
1166   {
1167      for (var i = 0; i < HRNavigationControls.length; i++)
1168      {
1169         if (HRGetParentElementById(element, HRNavigationControls[i].getIdTopUL()) != null)
1170         {
1171            HRNavigationControls[i].addMobileNavZurueckLinks(element, ebene);
1172         }
1173      }
1174   }
1175}
1176
1177function HRNavigationControlsOnLoad()
1178{
1179   if (HRNavigationControls != null)
1180   {
1181      var breite = getWindowWidth();
1182      var hoehe = getWindowHeight();
1183      
1184      for (var i = 0; i < HRNavigationControls.length; i++)
1185      {
1186         HRNavigationControls[i].chooseNavigation(breite, hoehe);
1187      }
1188   }
1189}
1190
1191function HRNavigationControlsResetActiveNavigation()
1192{
1193   if (HRNavigationControls != null)
1194   {
1195      for (var i = 0; i < HRNavigationControls.length; i++)
1196      {
1197         HRNavigationControls[i].resetActiveNavigation();
1198      }
1199   }
1200}
1201
1202function HRNavigationGetElement(elemOrId)
1203{
1204   var element = null;
1205   if (elemOrId)
1206   {
1207      if (typeof elemOrId == "string")
1208      {
1209         if (elemOrId.length > 0)
1210            element = document.getElementById(elemOrId);
1211      }
1212      else
1213         element = elemOrId;
1214   }
1215   return element;
1216}