https://www.stadtwerk-am-see.de/de/static/js/HRSysLib/Transition/Sequenzen/DivSlider.js?nc=1790327236423

1/**
2 * Der DivSlider schiebt animiert Divs in einen definierten Anzeigebereich 
3 * 
4 * 
5 * @param {String} idDivAnzeigeBereich   ID des Elements in dem die Divs geschoben werden
6 * @param {Array} divIDs                 IDs der DIVs die sich bewegen
7 * 
8 */
9var DivSlider = function(idDivAnzeigeBereich, divIDs)
10{
11   // Das Element in dem die Bilder dargestellt werden.
12   this.idDivAnzeigeBereich = idDivAnzeigeBereich;
13   this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
14   if (typeof(this.anzeigeBereich.HRDivSlider) != 'undefined' && this.anzeigeBereich.HRDivSlider != this)
15   {
16      return this;
17   }
18   this.anzeigeBereich.HRDivSlider = this;
19
20   // Das Original heben wir uns auf.
21   this.m_OriginalIdsArray = divIDs;
22   // Für die diversen Umsortierungen erzeugen wir uns eine Arbeitskopie.
23   this.divIDsArray = new Array();
24   for ( var i = 0; i < this.m_OriginalIdsArray.length; i++)
25   {
26      this.divIDsArray.push(this.m_OriginalIdsArray[i]);
27   }
28   if (this.divIDsArray.length > 0 && typeof(addCSSClass) == "function")
29      addCSSClass(this.divIDsArray[0], "selected");
30   
31   // Die Geschwindigkeit
32   this.speed = 2000;
33
34   // Die Dauer einer Pause
35   this.m_DurationOfDisplay = 7000;
36   this.intervalId = null;
37   this.index1 = 0;
38
39   this.animator = null;
40   // Für den Fall, dass die Buttons gedrückt werden, merken wir uns zu welchem
41   // Element verschoben werden soll, um anschliessend unser idArray richtig
42   // sortieren
43   // zu können.
44   this.m_IdElementToSlideTo = null;
45   this.m_DefaultDirection = "left";
46   this.m_AutoplayAllowed = true;
47   this.isVertical = false;

48   this.VerticalDistanceToMove = 0;
49   this.isAnimating = false;
50   this.m_Skin = ""; // Ohne Angabe Standardverhalten, alle befinden sich rechts
51                     // vomn sichtbaren, endlose Reihe.
52   //
53   // Attribute für das sliden mit fester Reihenfolge. Hier müssen wir wissen,
54   // welches Element gerade vorne ist, um zu entscheiden, in welche Richtung
55   // geslidet werden soll.
56   //
57   this.m_IndexFirstElement = 0;
58   this.m_ComputeHeight = false;
59   //
60   // Ergänzungen für das Bewegen des Sliders mit der Maus bzw. mit Touch-Gesten.
61   //
62   this.MouseStartX = 0;
63   this.MouseStartY = 0;
64   this.MouseLastX = 0;
65   this.MouseLastY = 0;
66   this.isMoving = false;
67   this.MovingStartValues = new Array();
68   this.MovingDistance = 0;
69   this.Transition = Animator.tx.easeInOut;
70   this.OriginalTransition = this.Transition;
71   this.isActive = true;
72   this.UseEventManager = typeof(HREventManager) == "object";
73   this.ControlElements = new Array();
74}
75
76DivSlider.prototype.setConfiguration = function (configuration)
77{
78   if (configuration)
79   {
80      this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
81      if (this.anzeigeBereich.HRDivSlider != this)
82         return;
83
84      if (configuration.controlElementIds)
85      {
86         var elementAblage = null;
87         if (typeof(configuration.controlElementIds) == 'string')
88         {
89            elementAblage = document.getElementById(configuration.controlElementIds);
90            if (elementAblage != null)
91               this.ControlElements.push(elementAblage);
92         }
93         else if (typeof(configuration.controlElementIds) == 'object')
94         {
95            if (configuration.controlElementIds instanceof Array)
96            {
97               for (var i = 0; i < configuration.controlElementIds.length; i++)
98               {
99                  elementAblage = document.getElementById(configuration.controlElementIds[i]);
100                  if (elementAblage != null)
101                     this.ControlElements.push(elementAblage);
102               }
103            }
104         }
105      }
106   }
107}
108
109/**
110 * Initialisiert und startet den Slider.
111 */
112DivSlider.prototype.start = function(idInitialElement)
113{
114   this.setup(this.m_DefaultDirection);
115   if (idInitialElement != null && idInitialElement != '')
116      this.changeTo(idInitialElement);
117   else
118      this.startAutoplay();
119   
120   var _this = this;
121   if (typeof(HRAddEventListener) == "function")
122   {
123      HRAddEventListener(window, "resize", function() { _this.setup(_this.m_DefaultDirection); });
124      HRAddEventListener(window, "load", function() { _this.onLoad(); });
125      if (this.UseEventManager)
126      {
127         HREventManager.addListener(this.anzeigeBereich, HREventNames.ajaxload, function() { _this.onLoad(); }, 
128                                    {useStandard: false, notifiedBySelf: false, notifiedByParents: true});
129         HREventManager.addListener(this.anzeigeBereich, "resize", function() { _this.setup(_this.m_DefaultDirection); }, {useStandard: false, notifiedBySelf: false, notifiedByParents: true});
130//         HREventManager.addListener(this.anzeigeBereich, "show", function() { _this.setup(_this.m_DefaultDirection); }, {useStandard: false, notifiedBySelf: false, notifiedByParents: true});
131      }
132   }
133}
134DivSlider.prototype.onLoad = function()
135{
136   this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
137   if (this.anzeigeBereich.HRDivSlider != this)
138      return;
139
140   //
141   // Wir schauen, ob ein parent Element auf display: none steht.
142   // Wenn ja, setzen wir einen MutationObserver auf dieses Element, um reagieren zu können,
143   // wenn sich dessen display-status ändert.
144   //
145   var displayNoneParent = null;
146   var parentElement = this.anzeigeBereich.parentNode;
147   while (parentElement != null && parentElement != document.documentElement && displayNoneParent == null)
148   {
149      if (parentElement.style.display === 'none')
150         displayNoneParent = parentElement;
151      else
152         parentElement = parentElement.parentNode;
153   }
154   var _this = this;
155   if (displayNoneParent != null)
156   {
157      const observer = new MutationObserver((mutationList) => {
158         mutationList.forEach((mutation) => {
159            switch (mutation.type) 
160            {
161               case "attributes":
162                  switch (mutation.attributeName) 
163                  {
164                     case "style":
165                        if (mutation.target.style.display != 'none')
166                        {
167                           _this.setup(_this.m_DefaultDirection);
168                           observer.disconnect();
169                        }
170                        break;
171                  }
172                  break;
173            }
174         });
175      });
176      observer.observe(displayNoneParent, {attributeFilter: ["style"], attributeOldValue: true, subtree: false });
177   }
178   var cssheight = getStyleValue(this.anzeigeBereich, "height");
179   var cssheightVal = getStyleMeasureValue(cssheight); // getElementHeightValue(this.anzeigeBereich);
180   if (cssheight == null || cssheight == "" || cssheight == "auto" || cssheight == "100%" || cssheightVal === 0)
181      this.m_ComputeHeight = true;
182   
183   for ( var i = 0; i < this.divIDsArray.length; i++)
184   {
185      var tempDiv = document.getElementById(this.divIDsArray[i]);
186      if (typeof(tempDiv.ontouchstart) != "undefined" && this.divIDsArray.length > 1)
187      {
188         tempDiv.ontouchstart = function(event) { _this.onTouchStart(event); };
189         tempDiv.ontouchmove  = function(event) { _this.onTouchMove(event); };
190         tempDiv.ontouchend   = function(event) { _this.onTouchEnd(event); };
191         tempDiv.ontouchleave = function(event) { _this.onMouseTouchOut(event); };
192      }
193      var imgTags = tempDiv.getElementsByTagName("img");
194      for (var j = 0; j < imgTags.length; j++)
195      {
196          if (imgTags[j])
197          {
198             imgTags[j].onmousedown = function(event) { return false; };
199             imgTags[j].onmousemove  = function(event) { return false; };
200             if (this.m_ComputeHeight && typeof(HRAddEventListener) == "function")
201             {
202                HRAddEventListener(imgTags[j], "load", function() { _this.adjustHeight(); });
203             }
204          }
205      }
206   }
207   this.setup(this.m_DefaultDirection);
208   try
209   {

210      if (this.anzeigeBereich && this.anzeigeBereich.parentNode)
211         this.anzeigeBereich.parentNode.classList.add("hr-ready");
212   }
213   catch (e)
214   {
215      console.log(e);
216   }
217}
218
219/**
220 * Startet die automatische Animation auch nach einer Pause durch stopAutoplay().
221 * Startet allerdings nur, wenn das AutoplayAllowed-Flag gesetzt ist.
222 */
223DivSlider.prototype.startAutoplay = function()
224{
225   if (!this.intervalId && this.m_AutoplayAllowed && this.isActive && this.divIDsArray.length > 1) 
226   {
227      var _this = this;
228      this.intervalId = window.setInterval(function(){_this.slide(_this.m_DefaultDirection);}, this.m_DurationOfDisplay);
229   }
230}
231
232/**
233 * Beendet die automatische Animation
234 */
235DivSlider.prototype.stopAutoplay = function()
236{
237   if (this.intervalId) 
238   {
239      window.clearInterval(this.intervalId);
240      this.intervalId = null;
241   }
242}
243
244/**
245 * Aktiviert den Slider, wenn er zuvor über deactive() ausgeschaltet
246 * wurde.
247 * Ist der Slider bereits aktiviert, macht die Funktion nichts.
248 */
249DivSlider.prototype.activate = function()
250{
251   if (!this.isActive)
252   {
253      this.isActive = true;
254      if (typeof(HRShow) == 'function')
255      {
256         for (var i = 0; i < this.ControlElements.length; i++)
257         {
258            HRShow(this.ControlElements[i]);
259         }
260      }
261      this.startAutoplay();
262   }
263}
264
265/**
266 * Deaktiviert den Slider. Es wird sowohl der Autoplay ausgeschaltet,
267 * als auch die Event-Reaktion ausgeschaltet.
268 * Ist der Slider bereits deaktiviert, macht die Funktion nichts.
269 */
270DivSlider.prototype.deactivate = function()
271{
272   if (this.isActive)
273   {
274      this.isActive = false;
275      if (typeof(HRHide) == 'function')
276      {
277         for (var i = 0; i < this.ControlElements.length; i++)
278         {
279            HRHide(this.ControlElements[i]);
280         }
281      }
282      this.stopAutoplay();
283   }
284}
285
286/**
287 * Ein- und Ausschalten des Autoplay für z.B. eine Pause-Taste.
288 */
289DivSlider.prototype.toggleAutoplay = function(pauseElement)
290{
291   if (this.m_AutoplayAllowed)
292   {
293      if (this.intervalId)
294      {
295         this.stopAutoplay();
296         if (pauseElement != null)
297         {
298            removeCSSClass(pauseElement, 'pause');
299            addCSSClass(pauseElement, 'play');
300            pauseElement.setAttribute('aria-label', 'Autoplay Slider starten');
301            pauseElement.innerHTML = 'Slider starten';
302         }
303      }
304      else
305      {
306         this.startAutoplay();
307         if (pauseElement != null)
308         {
309            removeCSSClass(pauseElement, 'play');
310            addCSSClass(pauseElement, 'pause');
311            pauseElement.setAttribute('aria-label', 'Autoplay Slider pausieren');
312            pauseElement.innerHTML = 'Slider pausieren';
313         }
314      }
315   }
316}
317
318/**
319 * Gibt true zurück, wenn der Autoplay aktiv ist, sonst false.
320 */
321DivSlider.prototype.isAutoplayActive = function()
322{
323   return this.intervalId != null;
324}
325
326/**
327 * Setzt das Verfahren für die Bewegungsdynamik.
328 * Mögliche Werte:
329 *    Animator.tx.easeInOut   (Default)
330 *    Animator.tx.easeInOutQuad
331 *    Animator.tx.easeInOutCubic
332 *    Animator.tx.easeInOutQuart
333 *    Animator.tx.easeInOutQuint
334 *    Animator.tx.linear
335 *    Animator.tx.elastic
336 *    Animator.tx.veryElastic
337 *    Animator.tx.bouncy
338 *    Animator.tx.veryBouncy
339 */
340DivSlider.prototype.setTransition = function(transition)
341{
342   if (typeof transition == 'function')
343      this.Transition = transition;
344}
345
346/**
347 * hängt alle Div richtig rein
348 */
349DivSlider.prototype.setup = function(direction)
350{
351   this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
352   if (this.anzeigeBereich.HRDivSlider != this)
353      return;
354
355   removeCSSClass(this.anzeigeBereich, "computed-height");
356   var tempWidthSum = 0;
357   var widthAllElements = 0;
358   var tempWidth = 0;
359   var tempHeightSum = 0;
360   var heightAllElements = 0;
361   var tempHeight = 0;
362
363   
364   if (direction == "left")
365   {
366   }
367   else if (direction == "right")
368   {
369      var firstDiv = document.getElementById(this.divIDsArray[0]);
370      tempWidthSum = -1 * getElementWidthValue(firstDiv);
371   }
372   else if (direction == "up")
373   {
374   }
375   else if (direction == "down")
376   {
377      var firstDiv = document.getElementById(this.divIDsArray[0]);
378      tempHeightSum = -1 * getElementHeightValue(firstDiv);
379   }
380   
381   var maxHeight = this.getMaxHeightValue();
382   this.VerticalDistanceToMove = maxHeight;
383   if (!this.m_ComputeHeight)
384   {
385      maxHeight = 0;
386   }
387   var leftKorrektur = 0;
388   if (this.m_Skin == "FesteReihenfolge" && this.m_IndexFirstElement != 0)
389   {
390      for ( var i = 0; i < this.divIDsArray.length && i < this.m_IndexFirstElement; i++)
391      {
392         var tempDiv = document.getElementById(this.divIDsArray[i]);
393         leftKorrektur += getElementWidthValue(tempDiv);
394      }
395   }
396   for ( var i = 0; i < this.divIDsArray.length; i++)
397   {
398      var tempDiv = document.getElementById(this.divIDsArray[i]);
399      this.anzeigeBereich.appendChild(tempDiv);
400
401      tempDiv.style.position = "absolute";
402      tempDiv.style.top = tempHeightSum + "px";
403      tempDiv.style.left = tempWidthSum - leftKorrektur + "px"; // "100px";
404
405      if (this.isVertical)
406      {
407         tempHeight = this.VerticalDistanceToMove;
408         tempHeightSum += tempHeight;
409         heightAllElements += this.VerticalDistanceToMove;
410      }
411      else
412      {
413         tempWidth = getElementWidthValue(tempDiv);
414         tempWidthSum += tempWidth;

415         var contentInnen = tempDiv.querySelector(".SlideshowContentInnen");
416         if (contentInnen != null)
417            widthAllElements += getElementWidthValue(contentInnen);
418         else
419            widthAllElements += tempWidth;
420      }
421   }
422   if (maxHeight > 0 && this.m_ComputeHeight)
423   {
424      this.anzeigeBereich.style.height = maxHeight + "px";
425      HREventManager.dispatchEvent(this.anzeigeBereich, 'resize', {'notifySelf': false, 'bubbles': true, 'useStandard': false});
426   }
427   if (this.isVertical)
428   {
429      if (getElementHeightValue(this.anzeigeBereich) >= heightAllElements)
430         this.deactivate();
431      else
432         this.activate();
433   }
434   else
435   {
436      var widthAnzeigeBereich = getElementWidthValue(this.anzeigeBereich);
437      if (getElementWidthValue(this.anzeigeBereich) >= widthAllElements)
438         this.deactivate();
439      else
440         this.activate();
441   }
442   addCSSClass(this.anzeigeBereich, "computed-height");
443
444}
445
446DivSlider.prototype.getMaxHeightValue = function()
447{
448   var maxHeight = 0;
449   for ( var i = 0; i < this.divIDsArray.length; i++)
450   {
451      var tempDiv = document.getElementById(this.divIDsArray[i]);
452      var tempHeight2 = getElementHeightValue(tempDiv);
453      if (tempHeight2 > maxHeight)
454         maxHeight = tempHeight2;
455   }
456   return maxHeight;
457}
458
459DivSlider.prototype.adjustHeight = function()
460{
461   if (!this.m_ComputeHeight)
462   {
463      return;
464   }
465   removeCSSClass(this.anzeigeBereich, "computed-height");
466   var maxHeight = 0;
467   for (var i = 0; i < this.divIDsArray.length; i++)
468   {
469      var tempDiv = document.getElementById(this.divIDsArray[i]);
470      var tempHeight = getElementHeightValue(tempDiv);
471      if (tempHeight > maxHeight)
472         maxHeight = tempHeight;
473   }
474   if (maxHeight > 0)
475   {
476      this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
477      if (this.anzeigeBereich.HRDivSlider != this)
478         return;
479
480      this.anzeigeBereich.style.height = maxHeight + "px";
481      this.VerticalDistanceToMove = maxHeight;
482   }
483   addCSSClass(this.anzeigeBereich, "computed-height");
484
485}
486
487DivSlider.prototype.next = function()
488{
489   var _this = this;
490   this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
491   if (typeof(this.anzeigeBereich.HRDivSlider) == 'undefined' || this.anzeigeBereich.HRDivSlider != this)
492   {
493      _this = this.anzeigeBereich.HRDivSlider;
494   }
495   _this.stopAutoplay();
496   _this.startAutoplay();
497   if (!_this.isVertical)
498      _this.slide("left");
499   else
500      _this.slide("up");
501}
502
503DivSlider.prototype.prev = function()
504{
505   var _this = this;
506   this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
507   if (typeof(this.anzeigeBereich.HRDivSlider) == 'undefined' || this.anzeigeBereich.HRDivSlider != this)
508   {
509      _this = this.anzeigeBereich.HRDivSlider;
510   }
511   _this.stopAutoplay();
512   _this.startAutoplay();
513   if (!_this.isVertical)
514      _this.slide("right");
515   else
516      _this.slide("down");
517}
518
519
520/**
521 * Bewegt alle Elemente in animierter Weise
522 */
523DivSlider.prototype.slide = function(direction)
524{
525   this.anzeigeBereich = document.getElementById(this.idDivAnzeigeBereich);
526   if (typeof(this.anzeigeBereich.HRDivSlider) == 'undefined' || this.anzeigeBereich.HRDivSlider != this)
527   {
528      this.stopAutoplay();
529      return;
530   }
531   if (this.m_Skin == "FesteReihenfolge")
532   {
533      this.slideFesteReihenfolge(direction);
534      return;
535   }
536   if(this.isAnimating == true || !this.isActive || this.divIDsArray.length < 2)
537      return;
538
539   this.isAnimating = true;
540   var _this = this; 
541   this.animator = new Animator({duration: this.speed, transition: this.Transition, onComplete: function() {
542         // bewegen wir uns nach links muss das Array nach der Animation sortiert werden
543         if(direction == "left" || direction == "up") 
544         {
545            _this.sortArray(direction);
546            _this.setup(direction);	
547         }
548         _this.selectTab(0);
549         _this.MovingDistance = 0;
550         _this.isAnimating = false;
551      }});
552   
553   // bewegen wir uns nach rechts muss das Array vor der Animation sortiert werden, ansonsten danach
554   if(direction == "right" || direction == "down") 
555   {
556      this.sortArray(direction);
557      this.setup(direction);
558   }
559   
560   var firstDiv = document.getElementById(this.divIDsArray[0]);
561   var distanceToMove;
562   if (!this.isVertical)
563      distanceToMove = getElementWidthValue(firstDiv);
564   else
565      distanceToMove = this.VerticalDistanceToMove;
566   
567   this.addAnimatorSubjects(distanceToMove, direction);
568   this.animator.play();
569}
570
571DivSlider.prototype.slideFesteReihenfolge = function(direction)
572{
573   if(this.isAnimating == true || !this.isActive || this.divIDsArray.length < 2)
574      return;
575   
576   this.isAnimating = true;
577   
578   var zielIndex = this.m_IndexFirstElement;
579   if (direction == "left" || direction == "up")
580   {
581      zielIndex++;
582      if (zielIndex >= this.m_OriginalIdsArray.length)
583      {
584         zielIndex = 0;
585         if (!this.isVertical)
586            direction = "right"
587         else
588            direction = "down";
589      }
590   }
591   else
592   {
593      zielIndex--;
594      if (zielIndex < 0)
595      {
596         zielIndex = this.m_OriginalIdsArray.length - 1;
597         if (!this.isVertical)
598            direction = "left"
599         else
600            direction = "up";
601      }
602   }
603   var zielDiv = document.getElementById(this.m_OriginalIdsArray[zielIndex]);
604   this.startSelectTab(zielIndex);
605   var distanceToMove = 0;
606   if (!this.isVertical)
607   {
608      if (direction == "left")
609         distanceToMove = getElementLeftValue(zielDiv) - getElementLeftValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement]));
610      else
611         distanceToMove = getElementLeftValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement])) - getElementLeftValue(zielDiv);
612   }
613   else
614   {
615      if (direction == "up")
616         distanceToMove = getElementTopValue(zielDiv) - getElementTopValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement]));
617      else
618         distanceToMove = getElementTopValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement])) - getElementTopValue(zielDiv);
619   }
620   distanceToMove -= Math.abs(this.MovingDistance);
621   var _this = this;
622   this.animator = new Animator({duration: this.speed, transition: this.Transition, onComplete: function() {
623         _this.m_IndexFirstElement = zielIndex;
624         _this.selectTab(_this.m_IndexFirstElement);
625         _this.MovingDistance = 0;
626         _this.isAnimating = false;

627      }});
628
629   this.addAnimatorSubjects(distanceToMove, direction);
630   this.animator.play();
631}
632
633/**
634 * Slidet zu dem Element dessen Id angegeben ist.
635 * Es wird z.Zt. immer in die Standardrichtung geslidet.
636 * Der Autoplay wird zurückgesetzt, damit sich der Nutzer
637 * möglichst lange an seinem ausgewählten Element erfreuen kann.
638 */
639DivSlider.prototype.changeTo = function(idElementToSlideTo)
640{
641   this.stopAutoplay();
642   this.startAutoplay();
643   if (this.m_Skin != "FesteReihenfolge")
644   {
645      var indexOriginal = this.arrayIndexOf(this.m_OriginalIdsArray, idElementToSlideTo);
646      var indexAktuell = this.arrayIndexOf(this.divIDsArray, idElementToSlideTo);
647      if (!this.isVertical)
648      {
649         if (indexOriginal < indexAktuell)
650            this.slideTo(idElementToSlideTo, "right");
651         else
652            this.slideTo(idElementToSlideTo, "left");
653      }
654      else
655      {
656         if (indexOriginal < indexAktuell)
657            this.slideTo(idElementToSlideTo, "down");
658         else
659            this.slideTo(idElementToSlideTo, "up");
660      }
661   }
662   else
663   {
664      if (!this.isVertical)
665         this.slideTo(idElementToSlideTo, "left");    // Wirkliche Richtung wird später entschieden.
666      else
667         this.slideTo(idElementToSlideTo, "up");    // Wirkliche Richtung wird später entschieden.
668   }
669}
670
671/**
672 * Slidet zu dem Element dessen Id angegeben ist.
673 */
674DivSlider.prototype.slideTo = function(idElementToSlideTo, direction)
675{
676   if (this.m_Skin == "FesteReihenfolge")
677   {
678      this.slideToFesteReihenfolge(idElementToSlideTo);
679      return;
680   }
681
682   if (this.isAnimating == true || !this.isActive || !idElementToSlideTo || this.divIDsArray[0] == idElementToSlideTo || this.divIDsArray.length < 2)
683      return;
684
685   this.isAnimating = true;
686   this.m_IdElementToSlideTo = idElementToSlideTo;
687   var _this = this;
688   this.animator = new Animator(
689   {
690      duration : this.speed,
691      transition: this.Transition,
692      onComplete : function()
693      {
694         // bewegen wir uns nach links muss das Array nach der Animation
695         // sortiert werden
696         if (direction == "left" || direction == "up")
697         {
698            for ( var i = 0; i < _this.divIDsArray.length && _this.divIDsArray[0] != _this.m_IdElementToSlideTo; i++)
699            {
700               _this.sortArray(direction);
701            }
702            _this.setup(direction);
703         }
704         else if (_this.m_Skin == "Direktsprung")
705         {
706            _this.setup(""); // Nur wieder richtig durchsortieren.
707         }
708         _this.selectTab(0);
709         _this.isAnimating = false;
710      }
711   });
712
713   var distanceToMove = 0;
714   if (direction == "left" || direction == "up")
715   {
716      if (_this.m_Skin != "Direktsprung")
717      {
718         for ( var i = 0; i < this.divIDsArray.length && this.divIDsArray[i] != this.m_IdElementToSlideTo; i++)
719         {
720            if (!this.isVertical)
721               distanceToMove += getElementWidthValue(document.getElementById(this.divIDsArray[i]));
722            else
723               distanceToMove += this.VerticalDistanceToMove;
724         }
725      }
726      else
727      {
728         var tempDiv = document.getElementById(this.m_IdElementToSlideTo);
729         tempDiv.style.position = "absolute";
730         if (!this.isVertical)
731         {
732            distanceToMove = getElementWidthValue(document.getElementById(this.divIDsArray[0]));
733            tempDiv.style.top = "0px";
734            tempDiv.style.left = distanceToMove + "px"; // "100px";
735         }
736         else
737         {
738            distanceToMove = this.VerticalDistanceToMove;
739            tempDiv.style.top = distanceToMove + "px";
740            tempDiv.style.left = "0px"; // "100px";
741         }
742         for ( var i = 1; i < this.divIDsArray.length; i++)
743         {
744            if (this.divIDsArray[i] != this.m_IdElementToSlideTo)
745            {
746               tempDiv = document.getElementById(this.divIDsArray[i]);
747               if (!this.isVertical)
748                  tempDiv.style.left = (getElementLeftValue(tempDiv) + distanceToMove) + "px";
749               else
750                  tempDiv.style.top = (getElementTopValue(tempDiv) + distanceToMove) + "px";
751            }
752         }
753      }
754   }
755   else
756   {
757      if (_this.m_Skin == "Direktsprung")
758      {
759         var tempDiv = document.getElementById(this.m_IdElementToSlideTo);
760         tempDiv.style.position = "absolute";
761         if (!this.isVertical)
762         {
763            distanceToMove = getElementWidthValue(tempDiv);
764            tempDiv.style.top = "0px";
765            tempDiv.style.left = "-" + distanceToMove + "px";
766         }
767         else
768         {
769            distanceToMove = this.VerticalDistanceToMove;
770            tempDiv.style.top = "-" + distanceToMove + "px";

771            tempDiv.style.left = "0px";
772         }
773      }
774      for ( var i = 0; i < this.divIDsArray.length && this.divIDsArray[0] != this.m_IdElementToSlideTo; i++)
775      {
776         this.sortArray(direction);
777         if (_this.m_Skin != "Direktsprung")
778         {
779            var tempDiv = document.getElementById(this.divIDsArray[0]);
780            tempDiv.style.position = "absolute";
781            if (!this.isVertical)
782            {
783               distanceToMove += getElementWidthValue(tempDiv);
784               tempDiv.style.top = "0px";
785               tempDiv.style.left = "-" + distanceToMove + "px";
786            }
787            else
788            {
789               distanceToMove += this.VerticalDistanceToMove;
790               tempDiv.style.top = "-" + distanceToMove + "px";
791               tempDiv.style.left = "0px";
792            }
793         }
794      }
795      //		this.setup(direction);
796   }
797
798   this.addAnimatorSubjects(distanceToMove, direction);
799   this.animator.play();
800}
801
802DivSlider.prototype.slideToFesteReihenfolge = function(idElementToSlideTo)
803{
804   if(this.isAnimating == true || !this.isActive || !idElementToSlideTo || !document.getElementById(idElementToSlideTo) || getElementLeftValue(document.getElementById(idElementToSlideTo)) == 0 || this.divIDsArray.length < 2)
805      return;
806   
807   this.isAnimating = true;
808   var _this = this;
809   var indexAktuell = this.arrayIndexOf(this.divIDsArray, idElementToSlideTo);
810   this.startSelectTab(indexAktuell);
811   this.animator = new Animator({duration: this.speed, transition: this.Transition, onComplete: function() {
812         _this.m_IndexFirstElement = _this.arrayIndexOf(_this.m_OriginalIdsArray, idElementToSlideTo);
813         _this.selectTab(_this.m_IndexFirstElement);
814         _this.isAnimating = false;
815      }});
816   var direction;
817   var distanceToMove;
818   if (!this.isVertical)
819   {
820      direction = "left";
821      distanceToMove = getElementLeftValue(document.getElementById(idElementToSlideTo)) - getElementLeftValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement]));
822      if (distanceToMove < 0)
823      {
824         direction = "right";
825         distanceToMove = getElementLeftValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement])) - getElementLeftValue(document.getElementById(idElementToSlideTo));
826      }
827   }
828   else
829   {
830      direction = "up";
831      distanceToMove = getElementTopValue(document.getElementById(idElementToSlideTo)) - getElementTopValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement]));
832      if (distanceToMove < 0)
833      {
834         direction = "down";
835         distanceToMove = getElementTopValue(document.getElementById(this.m_OriginalIdsArray[this.m_IndexFirstElement])) - getElementTopValue(document.getElementById(idElementToSlideTo));
836      }
837   }
838   this.addAnimatorSubjects(distanceToMove, direction);
839   this.animator.play();
840}
841
842DivSlider.prototype.addAnimatorSubjects = function(distanceToMove, direction)
843{
844   for ( var i = 0; i < this.divIDsArray.length; i++)
845   {
846      var tempDiv = document.getElementById(this.divIDsArray[i]);
847
848      var positionX = parseInt(tempDiv.style.left);
849      var positionY = parseInt(tempDiv.style.top);
850
851      if (direction == "left")
852      {
853         this.animator = this.animator.addSubject(new NumericalStyleSubject(tempDiv, 'left', positionX, positionX - distanceToMove));
854      }
855      else if (direction == "right")
856      {
857         this.animator = this.animator.addSubject(new NumericalStyleSubject(tempDiv, 'left', positionX, positionX + distanceToMove));
858      }
859      else if(direction == "up")
860      {
861         this.animator = this.animator.addSubject(new NumericalStyleSubject(tempDiv, 'top', positionY, positionY - distanceToMove));
862      }
863      else if(direction == "down")
864      {
865         this.animator = this.animator.addSubject(new NumericalStyleSubject(tempDiv, 'top', positionY, positionY + distanceToMove));
866      }
867   }
868}
869
870
871
872/**
873 * Sortiert das Array neu
874 */
875DivSlider.prototype.sortArray = function(direction)
876{
877   if (direction == "left" || direction == "up")
878   {
879      // to left
880      if (this.divIDsArray.length > 0)
881      {
882         var tempID = this.divIDsArray[0];
883         this.divIDsArray.shift();
884         this.divIDsArray.push(tempID);
885      }
886   }
887   else
888   {
889      // to right
890      if (this.divIDsArray.length > 0)
891      {
892         var tempID = this.divIDsArray[this.divIDsArray.length - 1];
893         this.divIDsArray.pop();
894         this.divIDsArray.unshift(tempID);
895      }
896   }
897}
898
899DivSlider.prototype.arrayIndexOf = function(arrayToSearch, id)
900{
901   var indexOf = -1;
902   for (var i = 0;

902 i < arrayToSearch.length && indexOf < 0; i++)
903   {
904      if (arrayToSearch[i] == id)
905         indexOf = i;
906   }
907   return indexOf;
908}
909
910/**
911 * Wenn vorhanden wird bei den Tabs das Element, was dem ganz vorne stehenden entspricht,
912 * selektiert. Die des TabElements leitet sich aus der Id des ContentElements + dem Prefix "Tab".
913 * Die Selektierung erfolgt durch das Setzen der CSS-Klasse "selected". Bei allen anderen wird diese
914 * Klasse gelöscht.
915 */
916DivSlider.prototype.selectTab = function(indexToSelect)
917{
918   for (var i = 0; i < this.divIDsArray.length; i++)
919   {
920      var tabElement = document.getElementById("Tab" + this.divIDsArray[i]);
921      if (tabElement)
922      {
923         removeCSSClass(tabElement, "start-selected");
924         this.setTabElementSelectionState(tabElement, i == indexToSelect);
925      }
926      tabElement = document.getElementById("TabUnten" + this.divIDsArray[i]);
927      if (tabElement)
928      {
929         removeCSSClass(tabElement, "start-selected");
930         this.setTabElementSelectionState(tabElement, i == indexToSelect);
931      }
932      removeCSSClass(this.divIDsArray[i], "start-selected");
933      if (i == indexToSelect)
934         addCSSClass(this.divIDsArray[i], "selected");
935      else
936         removeCSSClass(this.divIDsArray[i], "selected");
937   }
938}
939
940DivSlider.prototype.startSelectTab = function(indexToSelect)
941{
942   for (var i = 0; i < this.divIDsArray.length; i++)
943   {
944      var tabElement = document.getElementById("Tab" + this.divIDsArray[i]);
945      if (tabElement)
946      {
947         if (i == indexToSelect)
948            addCSSClass(tabElement, "start-selected");
949         else
950            removeCSSClass(tabElement, "start-selected");
951      }
952      tabElement = document.getElementById("TabUnten" + this.divIDsArray[i]);
953      if (tabElement)
954      {
955         if (i == indexToSelect)
956            addCSSClass(tabElement, "start-selected");
957         else
958            removeCSSClass(tabElement, "start-selected");
959      }
960      if (i == indexToSelect)
961         addCSSClass(this.divIDsArray[i], "start-selected");
962      else
963         removeCSSClass(this.divIDsArray[i], "start-selected");
964   }
965}
966
967DivSlider.prototype.setTabElementSelectionState = function(tabElement, newState)
968{
969   if (tabElement != null)
970   {
971      if (newState === true)
972         addCSSClass(tabElement, "selected");
973      else
974         removeCSSClass(tabElement, 'selected');
975      
976      if (tabElement.tagName.toLowerCase() == "li")
977      {
978         const aTagList = tabElement.getElementsByTagName("a");
979         for (const aTag of aTagList) 
980         {
981            aTag.setAttribute('aria-selected', (newState === true ? 'true': 'false'));
982         }
983      }
984      else
985         tabElement.setAttribute('aria-selected', (newState === true ? 'true': 'false'));
986   }
987}
988
989DivSlider.prototype.setDurationOfTransition = function(newDuration)
990{
991   this.speed = newDuration;
992}
993
994DivSlider.prototype.setDurationOfDisplay = function(newDuration)
995{
996   this.m_DurationOfDisplay = newDuration + this.speed;
997}
998
999DivSlider.prototype.setAutoplay = function(newAutoplay)
1000{
1001   this.m_AutoplayAllowed = newAutoplay;
1002}
1003
1004DivSlider.prototype.setVertical = function(newIsVertical)
1005{
1006   this.isVertical = newIsVertical;
1007   if (!newIsVertical)
1008      this.m_DefaultDirection = "left";
1009   else
1010      this.m_DefaultDirection = "up";
1011}
1012
1013/**
1014 * Ermöglicht es spezielle Skins für die SlideShow zu setzen.
1015 * FesteReihenfolge: Alle Elemente behalten immer die gleiche relative Position zu einander. 
1016 *                   (Verhalten wie die meisten "Standard" Slider).
1017 * Direktsprung: Ein Klick auf die Auswahlbuttons führt direkt in nur einem Move zu dem 
1018 *               ausgewählten Element.
1019 */
1020DivSlider.prototype.setSkin = function(newSkin)
1021{
1022   this.m_Skin = newSkin;
1023}
1024
1025DivSlider.prototype.onMouseDown = function(event)
1026{
1027   event = event || window.event;                                  // event überprüfen und IE-kompatibel machen
1028   if (this.isAnimating || !this.isActive)
1029      return true;
1030   
1031   this.onMouseTouchDown(getMouseCoords(event));
1032
1033   return false;
1034}
1035
1036DivSlider.prototype.onTouchStart = function(event)
1037{
1038   event = event || window.event;
1039   this.OriginalTransition = this.Transition;
1040   // Mehrfingergesten ignorieren (event.touches.length > 1)
1041   if (this.isAnimating || !this.isActive || this.divIDsArray.length <= 1 || (event.touches && event.touches.length && event.touches.length > 1))
1042      return true;
1043   
1044   var fingerPos = HRGetTouchCoords(event);
1045   this.MouseLastX = fingerPos.x;
1046   this.MouseLastY = fingerPos.y;
1047   this.Transition = Animator.tx.easeOut;
1048   this.onMouseTouchDown(fingerPos);
1049   var _this = this;
1050   return false;

1051}
1052
1053DivSlider.prototype.onMouseTouchDown = function(mousePos)
1054{
1055   if (!this.isActive)
1056      return;
1057   
1058   this.MouseStartX = mousePos.x;
1059   this.MouseStartY = mousePos.y;
1060   this.isMoving = true;
1061   this.MovingDistance = 0;
1062   this.stopAutoplay();
1063   //
1064   // Das letzte Div vor das erste, sonst sieht man evtl. die Lücke.
1065   //
1066   if (this.m_Skin != "FesteReihenfolge")
1067   {
1068      var lastDiv = document.getElementById(this.divIDsArray[this.divIDsArray.length - 1]);
1069      if (!this.isVertical)
1070         lastDiv.style.left = (0 - getElementWidthValue(lastDiv)) + "px";
1071      else
1072         lastDiv.style.top = (0 - getElementHeightValue(lastDiv)) + "px";
1073   }
1074   this.MovingStartValues = new Array();
1075   for (var i = 0; i < this.divIDsArray.length; i++)
1076   {
1077      var tempDiv = document.getElementById(this.divIDsArray[i]);
1078      if (!this.isVertical)
1079         this.MovingStartValues.push(parseInt(tempDiv.style.left));
1080      else
1081         this.MovingStartValues.push(parseInt(tempDiv.style.top));
1082         
1083   }
1084//   console.log("onMouseTouchDown: MouseStartX: " + this.MouseStartX);
1085}
1086
1087DivSlider.prototype.onMouseMove = function(event)
1088{
1089   event = event || window.event;                                  // event überprüfen und IE-kompatibel machen
1090   if (!this.isMoving)
1091      return true;
1092
1093   this.onMouseTouchMove(getMouseCoords(event));
1094   
1095   return false;
1096}
1097
1098DivSlider.prototype.onTouchMove = function(event)
1099{
1100   event = event || window.event;
1101   if (!this.isMoving || (event.touches && event.touches.length && event.touches.length > 1))
1102      return true;
1103   
1104   var fingerPos = HRGetTouchCoords(event);
1105   var differenz = Math.abs(this.MouseStartX - fingerPos.x);
1106   if (this.isVertical)
1107      differenz = Math.abs(this.MouseStartY - fingerPos.y);
1108   
1109   if (differenz > 3)
1110   {
1111      event.preventDefault();
1112      this.onMouseTouchMove(fingerPos);
1113   }
1114   else
1115   {
1116      this.isMoving = false;
1117      this.moveBack();
1118   }
1119   this.MouseLastX = fingerPos.x;
1120   this.MouseLastY = fingerPos.y;
1121   return false;
1122}
1123
1124DivSlider.prototype.onMouseTouchMove = function(mousePos)
1125{
1126   if (!this.isVertical)
1127      this.MovingDistance = this.MouseStartX - mousePos.x;
1128   else
1129      this.MovingDistance = this.MouseStartY - mousePos.y;
1130   
1131   for (var i = 0; i < this.divIDsArray.length; i++)
1132   {
1133      var tempDiv = document.getElementById(this.divIDsArray[i]);
1134      if (!this.isVertical)
1135         tempDiv.style.left = (this.MovingStartValues[i] - this.MovingDistance) + "px";
1136      else
1137         tempDiv.style.top = (this.MovingStartValues[i] - this.MovingDistance) + "px";
1138   }
1139}
1140
1141DivSlider.prototype.onMouseUp = function(event)
1142{
1143   event = event || window.event;                                  // event überprüfen und IE-kompatibel machen
1144   if (!this.isMoving)
1145      return true;
1146   
1147   this.onMouseTouchUp(getMouseCoords(event));
1148
1149   return false;
1150}
1151
1152DivSlider.prototype.onTouchEnd = function(event)
1153{
1154   event = event || window.event;
1155   if (!this.isMoving || (event.touches && event.touches.length && event.touches.length > 1))
1156   {
1157      this.Transition = this.OriginalTransition;
1158      return true;
1159   }
1160   
1161   this.onMouseTouchUp(HRGetTouchCoords(event));
1162   this.Transition = this.OriginalTransition;
1163   
1164   return false;
1165}
1166
1167DivSlider.prototype.onMouseTouchUp = function(mousePos)
1168{
1169   if (!this.isVertical)
1170   {
1171      var mouseX = mousePos.x;
1172   //   console.log("onMouseTouchUp: mousePos.x: " + mouseX);
1173      var width = getElementWidthValue(document.getElementById(this.divIDsArray[0]));
1174      if (Math.abs(this.MouseStartX - mouseX) > width / 5)
1175      {
1176   //      console.log("onMouseTouchUp: slide! ");
1177         if (this.MouseStartX - mouseX > 0)
1178         {
1179            if (this.m_Skin == "FesteReihenfolge")
1180            {
1181               if (this.m_IndexFirstElement + 1 >= this.m_OriginalIdsArray.length)
1182                  this.moveBack();
1183               else
1184                  this.slideFesteReihenfolge("left");
1185            }
1186            else
1187               this.slideLeft();
1188         }
1189         else
1190         {
1191            if (this.m_Skin == "FesteReihenfolge")
1192            {
1193               if (this.m_IndexFirstElement - 1 < 0)
1194                  this.moveBack();
1195               else

1196                  this.slideFesteReihenfolge("right");
1197            }
1198            else
1199               this.slideRight();
1200         }
1201         this.startAutoplay();
1202      }
1203      else
1204      {
1205   //      console.log("onMouseTouchUp: moveBack! ");
1206         this.moveBack();
1207      }
1208   }
1209   else
1210   {
1211      var mouseY = mousePos.y;
1212      //   console.log("onMouseTouchUp: mousePos.x: " + mouseX);
1213         var height = getElementHeightValue(document.getElementById(this.divIDsArray[0]));
1214         if (Math.abs(this.MouseStartY - mouseY) > height / 5)
1215         {
1216      //      console.log("onMouseTouchUp: slide! ");
1217            if (this.MouseStartY - mouseY > 0)
1218            {
1219               if (this.m_Skin == "FesteReihenfolge")
1220               {
1221                  if (this.m_IndexFirstElement + 1 >= this.m_OriginalIdsArray.length)
1222                     this.moveBack();
1223                  else
1224                     this.slideFesteReihenfolge("up");
1225               }
1226               else
1227                  this.slideUp();
1228            }
1229            else
1230            {
1231               if (this.m_Skin == "FesteReihenfolge")
1232               {
1233                  if (this.m_IndexFirstElement - 1 < 0)
1234                     this.moveBack();
1235                  else
1236                     this.slideFesteReihenfolge("down");
1237               }
1238               else
1239                  this.slideDown();
1240            }
1241            this.startAutoplay();
1242         }
1243         else
1244         {
1245      //      console.log("onMouseTouchUp: moveBack! ");
1246            this.moveBack();
1247         }
1248   }
1249   this.isMoving = false;
1250}
1251
1252DivSlider.prototype.slideLeft = function()
1253{
1254   if(this.isAnimating == true || !this.isActive)
1255      return;
1256
1257   this.isAnimating = true;
1258   var _this = this; 
1259   this.animator = new Animator({duration: this.speed, transition: this.Transition, onComplete: function() {
1260         _this.sortArray("left");
1261         _this.setup("left"); 
1262         _this.selectTab(0);
1263         _this.MovingDistance = 0;
1264         _this.isAnimating = false;
1265      }
1266      });
1267   
1268   var firstDiv = document.getElementById(this.divIDsArray[0]);
1269   var distanceToMove = getElementWidthValue(firstDiv) - Math.abs(this.MovingDistance);
1270   this.addAnimatorSubjects(distanceToMove, "left");
1271   this.animator.play();
1272}
1273
1274DivSlider.prototype.slideUp = function()
1275{
1276   if(this.isAnimating == true || !this.isActive)
1277      return;
1278   
1279   this.isAnimating = true;
1280   var _this = this; 
1281   this.animator = new Animator({duration: this.speed, transition: this.Transition, onComplete: function() {
1282      _this.sortArray("up");
1283      _this.setup("up"); 
1284      _this.selectTab(0);
1285      _this.MovingDistance = 0;
1286      _this.isAnimating = false;
1287   }
1288   });
1289   
1290   var firstDiv = document.getElementById(this.divIDsArray[0]);
1291   var distanceToMove = this.VerticalDistanceToMove - Math.abs(this.MovingDistance);
1292   this.addAnimatorSubjects(distanceToMove, "up");
1293   this.animator.play();
1294}
1295
1296
1297DivSlider.prototype.slideRight = function()
1298{
1299   if(this.isAnimating == true || !this.isActive)
1300      return;
1301
1302   this.isAnimating = true;
1303   var _this = this; 
1304   this.animator = new Animator({duration: this.speed, transition: this.Transition, onComplete: function() {
1305         _this.setup("left");    // <- Mit Absicht die "falsche" Richtung
1306         _this.selectTab(0);
1307         _this.MovingDistance = 0;
1308         _this.isAnimating = false;
1309      }
1310      });
1311   
1312   this.sortArray("right");
1313   var firstDiv = document.getElementById(this.divIDsArray[0]);
1314   var distanceToMove = getElementWidthValue(firstDiv) - Math.abs(this.MovingDistance);
1315   this.addAnimatorSubjects(distanceToMove, "right");
1316   this.animator.play();
1317}
1318
1319DivSlider.prototype.slideDown = function()
1320{
1321   if(this.isAnimating == true || !this.isActive)
1322      return;
1323   
1324   this.isAnimating = true;
1325   var _this = this; 
1326   this.animator = new Animator({duration: this.speed, transition: this.Transition, onComplete: function() {
1327      _this.setup("up");    // <- Mit Absicht die "falsche" Richtung
1328      _this.selectTab(0);
1329      _this.MovingDistance = 0;
1330      _this.isAnimating = false;

1331   }
1332   });
1333   
1334   this.sortArray("down");
1335   var firstDiv = document.getElementById(this.divIDsArray[0]);
1336   var distanceToMove = this.VerticalDistanceToMove - Math.abs(this.MovingDistance);
1337   this.addAnimatorSubjects(distanceToMove, "down");
1338   this.animator.play();
1339}
1340
1341
1342DivSlider.prototype.onMouseTouchOut = function(event)
1343{
1344   if (!this.isMoving)
1345      return true;
1346   
1347//   console.log("onMouseTouchOut: moveBack! ");
1348   this.moveBack();
1349   this.isMoving = false;
1350}
1351
1352DivSlider.prototype.moveBack = function()
1353{
1354   this.isAnimating = true;
1355   var _this = this;
1356   this.animator = new Animator(
1357   {
1358      duration : this.speed / 3, // Schneller zurück zum Ausgangspunkt.
1359      transition: this.Transition,
1360      onComplete : function()
1361      {
1362         if (_this.m_Skin != "FesteReihenfolge")
1363         {
1364            _this.setup(""); // Nur wieder richtig durchsortieren.
1365         }
1366         _this.startAutoplay();
1367         _this.MovingDistance = 0;
1368         _this.isAnimating = false;
1369      }
1370   });
1371   this.addAnimatorSubjects(Math.abs(this.MovingDistance), (!this.isVertical ? (this.MovingDistance < 0 ? "left" : "right") : (this.MovingDistance < 0 ? "up" : "down")));
1372      
1373   this.animator.play();
1374}