https://creativeindustries.lt/wp-includes/js/jquery/ui/accordion.js?ver=1.14.2

1/*!
2 * jQuery UI Accordion 1.14.2
3 * https://jqueryui.com
4 *
5 * Copyright OpenJS Foundation and other contributors
6 * Released under the MIT license.
7 * https://jquery.org/license
8 */
9
10//>>label: Accordion
11//>>group: Widgets
12//>>description: Displays collapsible content panels for presenting information in a limited amount of space.
13//>>docs: https://api.jqueryui.com/accordion/
14//>>demos: https://jqueryui.com/accordion/
15//>>css.structure: ../../themes/base/core.css
16//>>css.structure: ../../themes/base/accordion.css
17//>>css.theme: ../../themes/base/theme.css
18
19( function( factory ) {
20	"use strict";
21
22	if ( typeof define === "function" && define.amd ) {
23
24		// AMD. Register as an anonymous module.
25		define( [
26			"jquery",
27			"../version",
28			"../keycode",
29			"../unique-id",
30			"../widget"
31		], factory );
32	} else {
33
34		// Browser globals
35		factory( jQuery );
36	}
37} )( function( $ ) {
38"use strict";
39
40return $.widget( "ui.accordion", {
41	version: "1.14.2",
42	options: {
43		active: 0,
44		animate: {},
45		classes: {
46			"ui-accordion-header": "ui-corner-top",
47			"ui-accordion-header-collapsed": "ui-corner-all",
48			"ui-accordion-content": "ui-corner-bottom"
49		},
50		collapsible: false,
51		event: "click",
52		header: function( elem ) {
53			return elem
54				.find( "> li > :first-child" )
55				.add(
56					elem.find( "> :not(li)" )
57
58						// Support: jQuery <3.5 only
59						// We could use `.even()` but that's unavailable in older jQuery.
60						.filter( function( i ) {
61							return i % 2 === 0;
62						} )
63				);
64		},
65		heightStyle: "auto",
66		icons: {
67			activeHeader: "ui-icon-triangle-1-s",
68			header: "ui-icon-triangle-1-e"
69		},
70
71		// Callbacks
72		activate: null,
73		beforeActivate: null
74	},
75
76	hideProps: {
77		borderTopWidth: "hide",
78		borderBottomWidth: "hide",
79		paddingTop: "hide",
80		paddingBottom: "hide",
81		height: "hide"
82	},
83
84	showProps: {
85		borderTopWidth: "show",
86		borderBottomWidth: "show",
87		paddingTop: "show",
88		paddingBottom: "show",
89		height: "show"
90	},
91
92	_create: function() {
93		var options = this.options;
94
95		this.prevShow = this.prevHide = $();
96		this._addClass( "ui-accordion", "ui-widget ui-helper-reset" );
97		this.element.attr( "role", "tablist" );
98
99		// Don't allow collapsible: false and active: false / null
100		if ( !options.collapsible && ( options.active === false || options.active == null ) ) {
101			options.active = 0;
102		}
103
104		this._processPanels();
105
106		// handle negative values
107		if ( options.active < 0 ) {
108			options.active += this.headers.length;
109		}
110		this._refresh();
111	},
112
113	_getCreateEventData: function() {
114		return {
115			header: this.active,
116			panel: !this.active.length ? $() : this.active.next()
117		};
118	},
119
120	_createIcons: function() {
121		var icon, children,
122			icons = this.options.icons;
123
124		if ( icons ) {
125			icon = $( "<span>" );
126			this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header );
127			icon.prependTo( this.headers );
128			children = this.active.children( ".ui-accordion-header-icon" );
129			this._removeClass( children, icons.header )
130				._addClass( children, null, icons.activeHeader )
131				._addClass( this.headers, "ui-accordion-icons" );
132		}
133	},
134
135	_destroyIcons: function() {
136		this._removeClass( this.headers, "ui-accordion-icons" );
137		this.headers.children( ".ui-accordion-header-icon" ).remove();
138	},
139
140	_destroy: function() {
141		var contents;
142
143		// Clean up main element
144		this.element.removeAttr( "role" );
145
146		// Clean up headers
147		this.headers
148			.removeAttr( "role aria-expanded aria-selected aria-controls tabIndex" )
149			.removeUniqueId();
150
151		this._destroyIcons();
152
153		// Clean up content panels
154		contents = this.headers.next()
155			.css( "display", "" )
156			.removeAttr( "role aria-hidden aria-labelledby" )
157			.removeUniqueId();
158
159		if ( this.options.heightStyle !== "content" ) {
160			contents.css( "height", "" );
161		}
162	},
163
164	_setOption: function( key, value ) {
165		if ( key === "active" ) {
166
167			// _activate() will handle invalid values and update this.options
168			this._activate( value );
169			return;
170		}
171
172		if ( key === "event" ) {
173			if ( this.options.event ) {
174				this._off( this.headers, this.options.event );
175			}
176			this._setupEvents( value );
177		}
178
179		this._super( key, value );
180
181		// Setting collapsible: false while collapsed; open first panel
182		if ( key === "collapsible" && !value && this.options.active === false ) {
183			this._activate( 0 );
184		}
185
186		if ( key === "icons" ) {
187			this._destroyIcons();
188			if ( value ) {
189				this._createIcons();
190			}
191		}
192	},
193
194	_setOptionDisabled: function( value ) {
195		this._super( value );
196
197		this.element.attr( "aria-disabled", value );
198		this._toggleClass( null, "ui-state-disabled", !!value );
199	},
200
201	_keydown: function( event ) {
202		if ( event.altKey || event.ctrlKey ) {
203			return;
204		}
205
206		var keyCode = $.ui.keyCode,
207			length = this.headers.length,
208			currentIndex = this.headers.index( event.target ),
209			toFocus = false;
210
211		switch ( event.keyCode ) {
212		case keyCode.RIGHT:
213		case keyCode.DOWN:
214			toFocus = this.headers[ ( currentIndex + 1 ) % length ];
215			break;
216		case keyCode.LEFT:
217		case keyCode.UP:
218			toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
219			break;
220		case keyCode.SPACE:
221		case keyCode.ENTER:
222			this._eventHandler( event );
223			break;
224		case keyCode.HOME:
225			toFocus = this.headers[ 0 ];
226			break;
227		case keyCode.END:
228			toFocus = this.headers[ length - 1 ];
229			break;
230		}
231
232		if ( toFocus ) {
233			$( event.target ).attr( "tabIndex", -1 );
234			$( toFocus ).attr( "tabIndex", 0 );
235			$( toFocus ).trigger( "focus" );
236			event.preventDefault();
237		}
238	},
239
240	_panelKeyDown: function( event ) {
241		if ( event.keyCode === $.ui.keyCode.UP && event.ctrlKey ) {
242			$( event.currentTarget ).prev().trigger( "focus" );
243		}
244	},
245
246	refresh: function() {
247		var options = this.options;
248		this._processPanels();
249
250		// Was collapsed or no panel
251		if ( ( options.active === false && options.collapsible === true ) ||
252				!this.headers.length ) {
253			options.active = false;
254			this.active = $();
255
256		// active false only when collapsible is true
257		} else if ( options.active === false ) {
258			this._activate( 0 );
259
260		// was active, but active panel is gone
261		} else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
262
263			// all remaining panel are disabled
264			if ( this.headers.length === this.headers.find( ".ui-state-disabled" ).length ) {
265				options.active = false;
266				this.active = $();
267
268			// activate previous panel
269			} else {
270				this._activate( Math.max( 0, options.active - 1 ) );
271			}
272
273		// was active, active panel still exists
274		} else {
275
276			// make sure active index is correct
277			options.active = this.headers.index( this.active );
278		}
279
280		this._destroyIcons();
281
282		this._refresh();
283	},
284
285	_processPanels: function() {
286		var prevHeaders = this.headers,
287			prevPanels = this.panels;
288
289		if ( typeof this.options.header === "function" ) {
290			this.headers = this.options.header( this.element );
291		} else {
292			this.headers = this.element.find( this.options.header );
293		}
294		this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed",
295			"ui-state-default" );
296
297		this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide();
298		this._addClass( this.panels, "ui-accordion-content", "ui-helper-reset ui-widget-content" );
299
300		// Avoid memory leaks (#10056)
301		if ( prevPanels ) {
302			this._off( prevHeaders.not( this.headers ) );
303			this._off( prevPanels.not( this.panels ) );
304		}
305	},
306
307	_refresh: function() {
308		var maxHeight,
309			options = this.options,
310			heightStyle = options.heightStyle,
311			parent = this.element.parent();
312
313		this.active = this._findActive( options.active );
314		this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" )
315			._removeClass( this.active, "ui-accordion-header-collapsed" );
316		this._addClass( this.active.next(), "ui-accordion-content-active" );
317		this.active.next().show();
318
319		this.headers
320			.attr( "role", "tab" )
321			.each( function() {
322				var header = $( this ),
323					headerId = header.uniqueId().attr( "id" ),
324					panel = header.next(),
325					panelId = panel.uniqueId().attr( "id" );
326				header.attr( "aria-controls", panelId );
327				panel.attr( "aria-labelledby", headerId );
328			} )
329			.next()
330				.attr( "role", "tabpanel" );
331
332		this.headers
333			.not( this.active )
334				.attr( {
335					"aria-selected": "false",
336					"aria-expanded": "false",
337					tabIndex: -1
338				} )
339				.next()
340					.attr( {
341						"aria-hidden": "true"
342					} )
343					.hide();
344
345		// Make sure at least one header is in the tab order
346		if ( !this.active.length ) {
347			this.headers.eq( 0 ).attr( "tabIndex", 0 );
348		} else {
349			this.active.attr( {
350				"aria-selected": "true",
351				"aria-expanded": "true",
352				tabIndex: 0
353			} )
354				.next()
355					.attr( {
356						"aria-hidden": "false"
357					} );
358		}
359
360		this._createIcons();
361
362		this._setupEvents( options.event );
363
364		if ( heightStyle === "fill" ) {
365			maxHeight = parent.height();
366			this.element.siblings( ":visible" ).each( function() {
367				var elem = $( this ),
368					position = elem.css( "position" );
369
370				if ( position === "absolute" || position === "fixed" ) {
371					return;
372				}
373				maxHeight -= elem.outerHeight( true );
374			} );
375
376			this.headers.each( function() {
377				maxHeight -= $( this ).outerHeight( true );
378			} );
379
380			this.headers.next()
381				.each( function() {
382					$( this ).height( Math.max( 0, maxHeight -
383						$( this ).innerHeight() + $( this ).height() ) );
384				} )
385				.css( "overflow", "auto" );
386		} else if ( heightStyle === "auto" ) {
387			maxHeight = 0;
388			this.headers.next()
389				.each( function() {
390					var isVisible = $( this ).is( ":visible" );
391					if ( !isVisible ) {
392						$( this ).show();
393					}
394					maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() );
395					if ( !isVisible ) {
396						$( this ).hide();
397					}
398				} )
399				.height( maxHeight );
400		}
401	},
402
403	_activate: function( index ) {
404		var active = this._findActive( index )[ 0 ];
405
406		// Trying to activate the already active panel
407		if ( active === this.active[ 0 ] ) {
408			return;
409		}
410
411		// Trying to collapse, simulate a click on the currently active header
412		active = active || this.active[ 0 ];
413
414		this._eventHandler( {
415			target: active,
416			currentTarget: active,
417			preventDefault: $.noop
418		} );
419	},
420
421	_findActive: function( selector ) {
422		return typeof selector === "number" ? this.headers.eq( selector ) : $();
423	},
424
425	_setupEvents: function( event ) {
426		var events = {
427			keydown: "_keydown"
428		};
429		if ( event ) {
430			$.each( event.split( " " ), function( index, eventName ) {
431				events[ eventName ] = "_eventHandler";
432			} );
433		}
434
435		this._off( this.headers.add( this.headers.next() ) );
436		this._on( this.headers, events );
437		this._on( this.headers.next(), { keydown: "_panelKeyDown" } );
438		this._hoverable( this.headers );
439		this._focusable( this.headers );
440	},
441
442	_eventHandler: function( event ) {
443		var activeChildren, clickedChildren,
444			options = this.options,
445			active = this.active,
446			clicked = $( event.currentTarget ),
447			clickedIsActive = clicked[ 0 ] === active[ 0 ],
448			collapsing = clickedIsActive && options.collapsible,
449			toShow = collapsing ? $() : clicked.next(),
450			toHide = active.next(),
451			eventData = {
452				oldHeader: active,
453				oldPanel: toHide,
454				newHeader: collapsing ? $() : clicked,
455				newPanel: toShow
456			};
457
458		event.preventDefault();
459
460		if (
461
462				// click on active header, but not collapsible
463				( clickedIsActive && !options.collapsible ) ||
464
465				// allow canceling activation
466				( this._trigger( "beforeActivate", event, eventData ) === false ) ) {
467			return;
468		}
469
470		options.active = collapsing ? false : this.headers.index( clicked );
471
472		// When the call to ._toggle() comes after the class changes
473		// it causes a very odd bug in IE 8 (see #6720)
474		this.active = clickedIsActive ? $() : clicked;
475		this._toggle( eventData );
476
477		// Switch classes
478		// corner classes on the previously active header stay after the animation
479		this._removeClass( active, "ui-accordion-header-active", "ui-state-active" );
480		if ( options.icons ) {
481			activeChildren = active.children( ".ui-accordion-header-icon" );
482			this._removeClass( activeChildren, null, options.icons.activeHeader )
483				._addClass( activeChildren, null, options.icons.header );
484		}
485
486		if ( !clickedIsActive ) {
487			this._removeClass( clicked, "ui-accordion-header-collapsed" )
488				._addClass( clicked, "ui-accordion-header-active", "ui-state-active" );
489			if ( options.icons ) {
490				clickedChildren = clicked.children( ".ui-accordion-header-icon" );
491				this._removeClass( clickedChildren, null, options.icons.header )
492					._addClass( clickedChildren, null, options.icons.activeHeader );
493			}
494
495			this._addClass( clicked.next(), "ui-accordion-content-active" );
496		}
497	},
498
499	_toggle: function( data ) {
500		var toShow = data.newPanel,
501			toHide = this.prevShow.length ? this.prevShow : data.oldPanel;
502
503		// Handle activating a panel during the animation for another activation
504		this.prevShow.add( this.prevHide ).stop( true, true );
505		this.prevShow = toShow;
506		this.prevHide = toHide;
507
508		if ( this.options.animate ) {
509			this._animate( toShow, toHide, data );
510		} else {
511			toHide.hide();
512			toShow.show();
513			this._toggleComplete( data );
514		}
515
516		toHide.attr( {
517			"aria-hidden": "true"
518		} );
519		toHide.prev().attr( {
520			"aria-selected": "false",
521			"aria-expanded": "false"
522		} );
523
524		// if we're switching panels, remove the old header from the tab order
525		// if we're opening from collapsed state, remove the previous header from the tab order
526		// if we're collapsing, then keep the collapsing header in the tab order
527		if ( toShow.length && toHide.length ) {
528			toHide.prev().attr( {
529				"tabIndex": -1,
530				"aria-expanded": "false"
531			} );
532		} else if ( toShow.length ) {
533			this.headers.filter( function() {
534				return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0;
535			} )
536				.attr( "tabIndex", -1 );
537		}
538
539		toShow
540			.attr( "aria-hidden", "false" )
541			.prev()
542				.attr( {
543					"aria-selected": "true",
544					"aria-expanded": "true",
545					tabIndex: 0
546				} );
547	},
548
549	_animate: function( toShow, toHide, data ) {
550		var total, easing, duration,
551			that = this,
552			adjust = 0,
553			boxSizing = toShow.css( "box-sizing" ),
554			down = toShow.length &&
555				( !toHide.length || ( toShow.index() < toHide.index() ) ),
556			animate = this.options.animate || {},
557			options = down && animate.down || animate,
558			complete = function() {
559				that._toggleComplete( data );
560			};
561
562		if ( typeof options === "number" ) {
563			duration = options;
564		}
565		if ( typeof options === "string" ) {
566			easing = options;
567		}
568
569		// fall back from options to animation in case of partial down settings
570		easing = easing || options.easing || animate.easing;
571		duration = duration || options.duration || animate.duration;
572
573		if ( !toHide.length ) {
574			return toShow.animate( this.showProps, duration, easing, complete );
575		}
576		if ( !toShow.length ) {
577			return toHide.animate( this.hideProps, duration, easing, complete );
578		}
579
580		total = toShow.show().outerHeight();
581		toHide.animate( this.hideProps, {
582			duration: duration,
583			easing: easing,
584			step: function( now, fx ) {
585				fx.now = Math.round( now );
586			}
587		} );
588		toShow
589			.hide()
590			.animate( this.showProps, {
591				duration: duration,
592				easing: easing,
593				complete: complete,
594				step: function( now, fx ) {
595					fx.now = Math.round( now );
596					if ( fx.prop !== "height" ) {
597						if ( boxSizing === "content-box" ) {
598							adjust += fx.now;
599						}
600					} else if ( that.options.heightStyle !== "content" ) {
601						fx.now = Math.round( total - toHide.outerHeight() - adjust );
602						adjust = 0;
603					}
604				}
605			} );
606	},
607
608	_toggleComplete: function( data ) {
609		var toHide = data.oldPanel,
610			prev = toHide.prev();
611
612		this._removeClass( toHide, "ui-accordion-content-active" );
613		this._removeClass( prev, "ui-accordion-header-active" )
614			._addClass( prev, "ui-accordion-header-collapsed" );
615
616		this._trigger( "activate", null, data );
617	}
618} );
619
620} );