https://www.thesettlersonline.ru/sites/default/themes/common/js/common/dropdown.js

1Dropdowns = new Class( {
2	
3	_dropdowns: new Array()
4	
5	,initialize: function() {
6		$$( '.dropdown' ).each( function( dropdownElement ) {
7			// workaround for label clicking in the registration;
8			const label = dropdownElement.getPrevious('#realmDropdownLabel');
9			var dropdownClass = new Dropdown( dropdownElement, label );
10			dropdownClass.addEvent( 'open', function() {
11				this._closeDropdowns( dropdownClass );
12			}.bind( this ) );
13			this._dropdowns.push( dropdownClass );
14		}.bind( this ) );
15	}
16	
17	,_closeDropdowns: function( dropdown ) {
18		this._dropdowns.each( function( dropen ) {
19			if( dropen !== dropdown ) {
20				// Es ist nicht das aktuelle Dropdown, also einfahren
21				dropen.close();
22			}
23		} );
24	}
25	
26	,get: function( search ) {
27		search = document.id( search );
28		var found = null;
29		this._dropdowns.each( function( dropdown ) {
30			if( dropdown._dropdown === search ) {
31				found = dropdown
32			}
33		} );
34		return found;
35	}
36} );
37
38Dropdowns.instance = null;
39Dropdowns.getInstance = function() {
40	if( Dropdowns.instance === null ) {
41		Dropdowns.instance = new Dropdowns();
42	}
43	return Dropdowns.instance;
44};
45
46Dropdown = new Class( {
47	Implements: Events
48	/**
49	 * Höhe des Dropdowns
50	 * 
51	 * @var int
52	 */
53	,_height: null
54	/**
55	 * Dropdown Element
56	 * 
57	 * @var Element
58	 */
59	,_dropdown: null
60	/**
61	 * Animation zum auf und zuklappen
62	 * 
63	 * @var: Fx.Tween
64	 */
65	,_fx: null
66	/**
67	 * Falls Scroll aktiv ist, stehen hier die Infos drin
68	 * 
69	 * @var Object
70	 */
71	,_scroll: null
72	
73	/**
74	 * Konstrukor
75	 * 
76	 * @param Element dropdown
77	 * @param Element label
78	 * @return Dropdown
79	 */
80	,initialize: function( dropdown, label ) {
81		
82		// Dropdown Element setzen
83		this._dropdown = dropdown;
84		if(this._dropdown.getElements( 'ul' ).length == 0 ){
85			return false;
86		}
87		// Überprüft, ob das Dropdown eine Scrollbar bekommen soll
88		this._checkScroll();
89		
90		// Höhe des Dropdowns: Anzahl Elemente * Deren Höhe
91		this._height = this._dropdown.getElements( 'li' ).length * this._getLiHeight() + this._getBorderHeight();
92		
93		// IE7 Fix: UL mit Höhe 0 und overflow hidden funktioniert nicht, deswegen muss
94		// das UL display none und block beim IE bekommen
95		if( Browser.ie7 ) {
96			if( !this._dropdown.hasClass( 'open' ) ) {
97				this._dropdown.getElement( '.scrollContainer' ).addClass( 'hide' );
98			}
99		} else {
100			// Animation
101			this._fx = new Fx.Tween( this._dropdown.getElement( '.scrollContainer' ), { duration: 125 } );
102		}
103		
104		// Fährt das Dropdown auf und zu
105		this.initLabel( label || null );
106		dropdown.getElement( 'div' ).addEvent( 'click', function() {
107			if( this._dropdown.hasClass( 'open' ) ) {
108				this.close();
109			} else {
110				this.open();
111			}
112		}.bind( this ) );
113		
114		// Anklicken eines Wertes
115		dropdown.getElements( 'li[class!=inactive]' ).each( function( element ) {
116			if( !element.hasClass( 'inactive' ) ) {
117				element.addEvent( 'click', function() {
118					// Kein input, kein gültiges Eingabefeld
119					if( !element.getElement( 'input' ) ) {
120						return;
121					}
122					
123					// Dropdown Schließen
124					this._dropdown.getElement( 'div' ).fireEvent( 'click' );
125					
126					// Abbrechen, wenn sich der ausgewählte Wert nicht geändert hat
127					if( this._dropdown.getLast( 'input' ).get( 'value' ) === element.getElement( 'input' ).get( 'value' ) ) {
128						return;
129					}
130					
131					dropdown.getElements( 'li' ).each( function( element ) {
132						element.removeClass( 'active' );
133					} );
134					element.addClass( 'active' );
135					this._dropdown.getElement( 'div' ).set( 'html', element.get( 'html' ) );
136					this._dropdown.getLast( 'input' ).set( 'value', element.getElement( 'input' ).get( 'value' ) );
137					this._dropdown.getLast( 'input' ).fireEvent( 'change' );
138					this.fireEvent( 'change', element.getElement( 'input' ).get( 'value' ) );
139				}.bind( this ) );
140			}
141		}.bind( this ) );
142	}
143	
144	,initLabel: function( label ) {
145		if( label ) {
146			label.addEvent( 'click', function() {
147				this._dropdown.getElement( 'div' ).fireEvent( 'click' );
148			}.bind( this ) );
149		}
150	}
151	
152	,close: function() {
153		if( !this._dropdown.hasClass( 'open' ) ) {
154			// Dropdown ist nicht offen
155			return;
156		}
157		// HTML-Klasse entfernen
158		this._dropdown.removeClass( 'open' );
159                this._dropdown.removeClass( 'z-index' );
160
161		// Animation ausführen
162		if( Browser.ie7 ) {

163			this._dropdown.getElement( '.scrollContainer' ).addClass( 'hide' );
164		} else {
165			this._fx.start( 'height', this._getHeightForAnimation(), 0 );
166		}
167		
168		this.fireEvent( 'close' );
169	}
170	
171	,open: function() {
172		// HTML-Klasse hinzufügen
173		this._dropdown.addClass( 'open' );
174                this._dropdown.addClass( 'z-index' );
175		
176		// Animation ausführen
177		if( Browser.ie7 ) {
178			this._dropdown.getElement( '.scrollContainer' ).removeClass( 'hide' );
179			this._dropdown.getElement( '.scrollContainer' ).setStyle( 'height', this._height );
180		} else {
181			if (this._height == 0) { //this may happen if the dropdown is initally hidden
182				this._height = this._dropdown.getElements( 'li' ).length * this._getLiHeight() + this._getBorderHeight();
183				}
184			this._fx.start( 'height', this._getHeightForAnimation(), this._height );
185		}
186		
187		this.fireEvent( 'open' );
188	}
189	
190	,_getHeightForAnimation: function() {
191		if( !Browser.ie7 ) {
192			// Animation anhalten und aktuelle Höhe merken,
193			// wird nur bei nicht IE7 Browsern benötigt, da bei IE7
194			// die Animation nicht möglich ist
195			this._fx.cancel();
196			return this._dropdown.getElement( 'ul' ).getHeight();
197		}
198	}
199	
200	/**
201	 * Bindet den Scroller in das Dropdown an, wenn angegeben
202	 * 
203	 * @return void
204	 */
205	,_checkScroll: function() {
206		if( this._dropdown.getCssParam( 'scroll' ) ) {
207			var scrollItems = this._dropdown.getCssParam( 'scroll' ).toInt();
208			if( this._dropdown.getElements( 'li' ).length > scrollItems ) {
209				this._dropdown.addClass( 'scroll' );
210				var maxHeight = this._getLiHeight() * scrollItems + this._getBorderHeight();
211				this._scroll = {
212					scrollItems: scrollItems
213					,maxHeight: maxHeight
214					,elementCount: this._dropdown.getElements( 'li' ).length
215				};
216				// Scroll-Steps sind Elemenet ingesamt - sichtbare Elemente
217				this._scroll.scrollSteps = ( this._scroll.elementCount - this._scroll.scrollItems );
218				// Slider Elemente + Funktion erstellen
219				this._createSlider();
220			}
221		}
222	}
223	
224	,_getLiHeight: function() {
225		var li = this._dropdown.getElement( 'li' );
226		var height = 0;
227		if (li != null) {
228			height = li.measure( function() { return this.getHeight(); } );
229			// adding margins to height
230			height += li.getStyle( 'margin-top' ).toInt() - li.getStyle( 'margin-bottom' ).toInt();			
231		}
232		return height;
233	}
234	
235	,_getBorderHeight: function() {
236		var borderTop = this._dropdown.getElementById('scrollContainerTop');
237		var borderBottom = this._dropdown.getElementById('scrollContainerBottom');
238		var height = 0;
239		
240		if ( borderTop ) {
241			height += borderTop.getStyle('height').toInt();
242		}
243		
244		if ( borderBottom ) {
245			height += borderBottom.getStyle('height').toInt();
246		}
247		return height;
248	}
249	
250	,_createSlider: function() {
251		// Dropdown darf nur bestimmte Höhe haben
252		var scrollContainer = this._dropdown.getElement( '.scrollContainer' );
253		
254		scrollContainer.setStyle( 'max-height', this._scroll.maxHeight );
255		
256		// Scroll Bar erstellen
257		this._scroll.slider = new Element( 'div', {
258			'class': 'slider scrollSlider'
259			,styles: {
260				height: this._scroll.maxHeight
261			}
262		}

262 ).inject( scrollContainer );
263		this._scroll.sliderBar = new Element( 'div', {
264			'class': 'bar'
265		} ).inject( this._scroll.slider );
266		
267		var ulHeight = this._dropdown.getElement( 'ul' ).getHeight().toInt();
268		this._scroll.maxScroll = this._scroll.maxHeight - ulHeight;
269		
270		var slider = new Slider( this._scroll.slider, this._scroll.sliderBar, {
271			mode: 'vertical'
272			,range: [ 0, this._scroll.scrollSteps ]
273			,steps: this._scroll.scrollSteps
274			,wheel: true
275			,onChange: function( value ) {
276				var marginTop = 0;
277				// Element vertikal verschieben
278				if(value === 0) {
279					marginTop = value;
280				} else {
281					marginTop = value * this._getLiHeight() * -1 + this._getBorderHeight();
282				}
283				
284				this._dropdown.getElement( 'ul' ).setStyle( 'margin-top', marginTop );
285				this._scroll.currentStep = value;
286			}.bind( this )
287		} );
288		
289		
290		this._dropdown.getElement( 'ul' ).addEvent( 'mousewheel', function( e ) {
291			e.stop();
292			this._scroll.currentStep -= e.wheel;
293			if( this._scroll.currentStep < 0 ) {
294				this._scroll.currentStep = 0;
295			}
296			if( this._scroll.scrollSteps < this._scroll.currentStep ) {
297				this._scroll.currentStep = this._scroll.scrollSteps;
298			}
299			slider.set( this._scroll.currentStep );
300		}.bind( this ) );
301	}
302} );