https://www.stadtwerke-speyer.de/de/static/js/HRSysLib/Transition/…/CollapsableBlock.js?nc=1790225289196

1/**
2 * 
3 * @DEPRECATED Bitte in Zukunft unsere neue HRCollapsable (@see Collapsable.js) verwenden. Diese bietet ein schöneres "Aufklappverhalten".
4 * 
5 * Der animierte CollapsableBock
6 * 
7 * Die Höhe des Elements mit der ID "idHtmlElementBlock" muss eine defnierte Höhe haben. 
8 * Mit der Höhe "auto" gehts leider nicht.
9 * 
10 * @param {Object} idHtmlElementBlock   id des HTML-Elements was sich in animierter Weise zeigt und versteckt.
11 * @param {Object} idHtmlOnClickElement id des HTML-Elements, welches die (getoggelte) Animations auslöst. Der 
12 *                                      onclick-Handler von diesem Element wird zu diesem Zweck überschrieben. 
13 * @param {Integer} zielHoeheDerAnimation positiver ganzzahliger Wert ohne px am Ende. Ist dieser Parameter 
14 *                                        vorhanden, dann wird die Höhe von 0 bis zum übergebenen Wert animiert 
15 *                                        und dann das Element mit der ID im Parameter namens idHtmlElementBlock 
16 *                                        eingefaded.
17                                          Ist der Parameter nicht vorhanden, dann wird versucht die Höhe des 
18                                          Elements zu ermitteln. Wenn möglich wird die Höhe bis dahin animiert, 
19                                          ansonsten nur die Deckkraft gefaded. 
20 */
21var CollapsableBlock = function (idHtmlElementBlock, idHtmlOnClickElement, zielHoeheDerAnimation, classToAddInOnClickElement, idHtmlOnClickElement2, einstellungen)
22{
23   try
24   {
25	// HTML-Elemente holen
26      this.m_IgnoreArrayOfCollapsableBlocks = false;
27      this.m_NurFadeInOut = false;
28      this.rootElement = document.getElementById(idHtmlElementBlock);
29      this.parentElement = this.rootElement.parentNode;
30      this.onClickElement = document.getElementById(idHtmlOnClickElement);
31      this.onClickElement2 = null;
32      this.UseEventManager = typeof(HREventManager) == "object";
33      if (idHtmlOnClickElement2 && idHtmlOnClickElement2.length > 0)
34         this.onClickElement2 = document.getElementById(idHtmlOnClickElement2);
35
36      this.classToAddInOnClickElement = classToAddInOnClickElement;
37      if (this.onClickElement)
38         this.orginalClassClickElement = this.onClickElement.className;
39
40      this.duration = 400;
41      
42      if (einstellungen != null && typeof(einstellungen) == 'object' && typeof(einstellungen.duration) != 'undefined')
43         this.duration = einstellungen.duration;
44      
45      //
46      // Höhe bestimmen
47      //
48      if (zielHoeheDerAnimation && zielHoeheDerAnimation > 0)  // Wurde eine Höhe übergeben bei der die Vergrößerungs-Animation 
49      {                                                        // stoppen soll, wird diese auch verwendet
50         this.height = zielHoeheDerAnimation;
51      }
52      else
53      {
54         this.height = getStyleValue(this.rootElement, "height");
55         //
56         // Die genauere Berechnung der Höhe macht nur Sinn,
57         // wenn die eigentliche Höhenangabe auch explizit angegeben ist
58         // und nicht prozentual oder mit "auto".
59         //
60         var heightUnit = getStyleMeasureUnit(this.height);
61         if (heightUnit != "" && heightUnit != "%")
62         {
63            this.height = getStyleMeasureValue(this.height)
64                          + getStyleMeasureValue(getStyleValue(this.rootElement, "padding")) * 2
65                          + getStyleMeasureValue(getStyleValue(this.rootElement, "paddingTop"))
66                          + getStyleMeasureValue(getStyleValue(this.rootElement, "paddingBottom"))
67                          + getStyleMeasureValue(getStyleValue(this.rootElement, "borderTopWidth"))
68                          + getStyleMeasureValue(getStyleValue(this.rootElement, "borderBottomWidth"))
69                          + getStyleMeasureValue(getStyleValue(this.rootElement, "borderWidth")) * 2; // wird versucht die Höhe zu ermitteln
70            this.height = this.height + heightUnit;
71         }
72      }
73
74      this.animatorChain = null;
75
76      if (this.onClickElement)
77         this.onClickElement.owningObject = this;
78      if (this.onClickElement2)
79         this.onClickElement2.owningObject = this;
80
81      // Vergrößern mit stetiger Beschleunigung und anschließend Fade
82      if (zielHoeheDerAnimation && zielHoeheDerAnimation > 0)
83      {
84         if (this.onClickElement)
85         {
86            var onClickFunction = function(event)
87            {
88               if (this.owningObject.checkIfFireEvent(event))
89               {
90                  this.owningObject.closeAllOther(event);
91                  this.owningObject.collapseAsEaseInAndFade(event);
92                  this.owningObject.changeOnClickElement(event);
93               }
94               return false;
95            };
96
97            this.onClickElement.onclick = onClickFunction;
98               
99            if (this.onClickElement2)
100               this.onClickElement2.onclick = onClickFunction;
101         }
102      }
103      // Vergrößern mit Beschleunigung und Verlangsamung und anschließend Fade
104      else if (this.height && this.height.toLowerCase() != "auto")
105      {
106         if (this.onClickElement)
107         {
108            this.onClickElement.onclick = function(event)
109            {
110               if (this.owningObject.checkIfFireEvent(event))
111               {
112                  this.owningObject.closeAllOther(event);
113                  this.owningObject.collapseAsEaseInAndOutAndFade(event);
114                  this.owningObject.changeOnClickElement(event);
115               }
116               return false;
117            };
118            if (this.onClickElement2)
119               this.onClickElement2.onclick = this.onClickElement.onclick;
120         }
121      }
122      // Nur Fade
123      else
124      {
125         if (this.onClickElement)
126         {
127            this.onClickElement.onclick = function(event)
128            {
129               if (this.owningObject.checkIfFireEvent(event))
130               {
131                  this.owningObject.closeAllOther(event);
132                  this.owningObject.collapseAsFade(event);
133                  this.owningObject.changeOnClickElement(event);
134               }
135               return false;
136            };
137            if (this.onClickElement2)
138               this.onClickElement2.onclick = this.onClickElement.onclick;
139         }
140      }
141   }
142   catch (e) 
143   {
144      HRLogError(e);
145   }
146}
147
148//
149// 
150//
151CollapsableBlock.prototype.setNurFadeInOut = function(nurFadeInOut)
152{
153   this.m_NurFadeInOut = nurFadeInOut;
154}
155
156//
157// 
158//
159CollapsableBlock.prototype.setIgnoreArrayOfCollapsableBlocks = function(ignoreArray)
160{
161   this.m_IgnoreArrayOfCollapsableBlocks = ignoreArray;
162}
163
164
165//
166// !!!!!Das folgende ist nur mal auf die Schnelle reingebraselt und sollte
167// bald möglichst verallgemeinert werden!!!!!!!
168//
169CollapsableBlock.prototype.changeOnClickElement = function(event)
170{
171   try
172   {
173      if (this.classToAddInOnClickElement && this.classToAddInOnClickElement.length > 0)
174      {
175         if (this.onClickElement.className.indexOf(this.classToAddInOnClickElement) >= 0)
176         {
177            this.onClickElement.className = this.orginalClassClickElement;
178            if (typeof(this.rootElement) == "object" && typeof(removeCSSClass) == "function")
179            {
180               removeCSSClass(this.rootElement, "hr-open");
181            }
182         }
183         else
184         {
185            this.onClickElement.className = this.onClickElement.className + ' ' + this.classToAddInOnClickElement;
186            if (typeof(this.rootElement) == "object" && typeof(addCSSClass) == "function")
187            {
188               addCSSClass(this.rootElement, "hr-open");
189            }
190         }
191      }
192   }
193   catch (e) 
194   {
195      HRLogError(e);
196   }
197}
198
199CollapsableBlock.prototype.collapseAsEaseInAndFade = function(event)
200{
201   try
202   {
203      if (this.parentElement)
204      {
205         if (this.animatorChain == null)
206         {
207            var _this = this;
208            var animators = new Array();
209            if (!this.m_NurFadeInOut)
210            {
211               // temporäres Div erzeugen
212               var tempDiv = document.createElement("div");
213               tempDiv.style.height = "0px";
214               tempDiv.className = "CollapsableBlockTmpDiv";
215               // vor den Collapsable Block hängen
216               this.parentElement.insertBefore(tempDiv, this.rootElement);
217
218               var animatorConfig = {transition : Animator.makeEaseIn(3), onStep: function(){ _this.onAnimationStep();}, onComplete: function(){ _this.onAnimationComplete();}};
219               var animator = new Animator(animatorConfig).addSub

219ject(new NumericalStyleSubject(tempDiv, 'height', 0, this.height));
220               animators.push(animator);
221            }
222            var animatorConfig = {duration : this.duration, onStep: function(){ _this.onAnimationStep();}, onComplete: function(){ _this.onAnimationComplete();}};
223            var animator2 = new Animator(animatorConfig).addSubject(new DiscreteStyleSubject(tempDiv, 'display', "", "none", 0.01)) // duration:400 ist eigentich sowieso der defaultwert
224                                                          .addSubject(new DiscreteStyleSubject(this.rootElement, 'display', "none", "", 0.01))
225                                                          .addSubject(new NumericalStyleSubject(this.rootElement, 'opacity', 0, 1));
226            animators.push(animator2);
227            this.animatorChain = new AnimatorChain(animators);
228         }
229         this.animatorChain.toggle();
230      }
231   }
232   catch (e) 
233   {
234      HRLogError(e);
235   }
236};
237
238CollapsableBlock.prototype.collapseAsEaseInAndOutAndFade = function(event)
239{
240   try
241   {
242      if (this.parentElement)
243      {
244         if (this.animatorChain == null)
245         {
246            var _this = this;
247            var animators = new Array();
248            if (!this.m_NurFadeInOut)
249            {
250               // temporäres Div erzeugen
251               var tempDiv = document.createElement("div");
252               tempDiv.style.height = "0px";
253               tempDiv.className = "CollapsableBlockTmpDiv";
254   
255               // vor den Collapsable Block hängen
256               this.parentElement.insertBefore(tempDiv, this.rootElement);
257               
258               var animatorConfig = {onStep: function(){ _this.onAnimationStep();}, onComplete: function(){ _this.onAnimationComplete();}};
259               var animator = new Animator(animatorConfig).addSubject(new NumericalStyleSubject(tempDiv, 'height', 0, this.height));
260               animators.push(animator);
261            }
262            var animatorConfig = {duration : this.duration, onStep: function(){ _this.onAnimationStep();}, onComplete: function(){ _this.onAnimationComplete();}};
263            var animator2 = new Animator(animatorConfig).addSubject(new DiscreteStyleSubject(tempDiv, 'display', "", "none", 0.01))
264                                                          .addSubject(new DiscreteStyleSubject(this.rootElement, 'display', "none", "", 0.01))
265                                                          .addSubject(new NumericalStyleSubject(this.rootElement, 'opacity', 0, 1));
266            animators.push(animator2);
267            this.animatorChain = new AnimatorChain(animators);
268         }
269         this.animatorChain.toggle();
270      }
271   }
272   catch (e) 
273   {
274      HRLogError(e);
275   }
276};
277
278CollapsableBlock.prototype.collapseAsFade = function(event)
279{
280   try
281   {
282      if (this.parentElement)
283      {
284         if (this.animatorChain == null)
285         {
286            var _this = this;
287            var animatorConfig = {duration : this.duration, onStep: function(){ _this.onAnimationStep();}, onComplete: function(){ _this.onAnimationComplete();} };
288            var animator2 = new Animator(animatorConfig).addSubject(new DiscreteStyleSubject(this.rootElement, 'display', "none", "", 0.01))
289                                                        .addSubject(new NumericalStyleSubject(this.rootElement, 'opacity', 0, 1));
290            var animators = new Array(animator2);
291            this.animatorChain = new AnimatorChain(animators);
292         }
293         this.animatorChain.toggle();
294      }
295   }
296   catch (e) 
297   {
298      HRLogError(e);
299   }
300};
301
302CollapsableBlock.prototype.close = function()
303{
304   try
305   {
306      if (this.parentElement)
307      {
308         if (this.animatorChain != null && this.animatorChain.forwards)
309            this.animatorChain.reverse();
310
311         if (this.classToAddInOnClickElement && this.classToAddInOnClickElement.length > 0)
312            this.onClickElement.className = this.orginalClassClickElement;
313
314         if (typeof(this.rootElement) == "object" && typeof(removeCSSClass) == "function")
315            removeCSSClass(this.rootElement, "hr-open")
316      }
317   }
318   catch (e) 
319   {
320      HRLogError(e);
321   }
322};
323
324CollapsableBlock.prototype.onAnimationStep = function()
325{
326   if (this.UseEventManager)
327   {
328      HREventManager.dispatchEvent(this.rootElement, 'resize', {'n

328otifySelf': false, 'bubbles': true, notifyChildren: true, 'useStandard': false});
329   }
330}
331
332CollapsableBlock.prototype.onAnimationComplete = function()
333{
334   if (this.UseEventManager)
335   {
336      HREventManager.dispatchEvent(this.rootElement, 'resize', {'notifySelf': false, 'bubbles': true, notifyChildren: true, 'useStandard': false});
337      if (this.isOpen())
338         HREventManager.dispatchEvent(this.rootElement, 'show', {'notifySelf': false, 'bubbles': true, notifyChildren: true, 'useStandard': false});
339      else
340         HREventManager.dispatchEvent(this.rootElement, 'hide', {'notifySelf': false, 'bubbles': true, notifyChildren: true, 'useStandard': false});
341   }
342}
343
344CollapsableBlock.prototype.open = function()
345{
346   try
347   {
348      if (this.parentElement)
349      {
350         if (this.animatorChain != null && !this.animatorChain.forwards)
351            this.animatorChain.play();
352      }
353   }
354   catch (e) 
355   {
356      HRLogError(e);
357   }
358};
359
360CollapsableBlock.prototype.isOpen = function()
361{
362   try
363   {
364      if (this.rootElement)
365      {
366         if (this.rootElement.classList.contains("hr-open"))
367            return true;
368      }
369   }
370   catch (e) 
371   {
372      HRLogError(e);
373   }
374   return false;
375};
376
377
378CollapsableBlock.prototype.checkIfFireEvent = function(event)
379{
380   try
381   {
382      //
383      // Auch bei einem Akkordeon führt ein Klick auf den 
384      // gleichen Eintrag dazu, dass sich dieser Eintrag wieder schliesst.
385      //
386      return true;
387      
388/*      if (!this.m_IgnoreArrayOfCollapsableBlocks && ArrayOfCollapsableBlocks.length > 0 && this.animatorChain != null && this.animatorChain.forwards)
389         return false;
390      else
391         return true;
392*/
393   }
394   catch (e) 
395   {
396      HRLogError(e);
397   }
398};
399
400CollapsableBlock.prototype.closeAllOther = function(event)
401{
402   try
403   {
404      if (!this.m_IgnoreArrayOfCollapsableBlocks && ArrayOfCollapsableBlocks.length > 0)
405      {
406         for ( var i = 0; i < ArrayOfCollapsableBlocks.length; i++)
407         {
408            if (ArrayOfCollapsableBlocks[i] != this)
409               ArrayOfCollapsableBlocks[i].close();
410         }
411      }
412   }
413   catch (e) 
414   {
415      HRLogError(e);
416   }
417};
418
419//
420// Globales Array aller CollapsableBlocks, um ein Akkordeon zu simulieren.
421//
422var ArrayOfCollapsableBlocks = new Array();