wp/wp-admin/js/accordion.js
author ymh <ymh.work@gmail.com>
Tue, 15 Dec 2020 13:49:49 +0100
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
permissions -rw-r--r--
update enmi-conf
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     1
/**
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     2
 * Accordion-folding functionality.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     3
 *
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     4
 * Markup with the appropriate classes will be automatically hidden,
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     5
 * with one section opening at a time when its title is clicked.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     6
 * Use the following markup structure for accordion behavior:
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     7
 *
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     8
 * <div class="accordion-container">
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
     9
 *	<div class="accordion-section open">
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    10
 *		<h3 class="accordion-section-title"></h3>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    11
 *		<div class="accordion-section-content">
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    12
 *		</div>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    13
 *	</div>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    14
 *	<div class="accordion-section">
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    15
 *		<h3 class="accordion-section-title"></h3>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    16
 *		<div class="accordion-section-content">
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    17
 *		</div>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    18
 *	</div>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    19
 *	<div class="accordion-section">
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    20
 *		<h3 class="accordion-section-title"></h3>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    21
 *		<div class="accordion-section-content">
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    22
 *		</div>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    23
 *	</div>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    24
 * </div>
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    25
 *
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    26
 * Note that any appropriate tags may be used, as long as the above classes are present.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    27
 *
9
177826044cd9 upgrade wordpress to 5.2.3
ymh <ymh.work@gmail.com>
parents: 7
diff changeset
    28
 * @since 3.6.0
177826044cd9 upgrade wordpress to 5.2.3
ymh <ymh.work@gmail.com>
parents: 7
diff changeset
    29
 * @output wp-admin/js/accordion.js
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    30
 */
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    31
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
( function( $ ){
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
	$( document ).ready( function () {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    36
		// Expand/Collapse accordion sections on click.
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
		$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
16
a86126ab1dd4 update enmi-conf
ymh <ymh.work@gmail.com>
parents: 9
diff changeset
    38
			if ( e.type === 'keydown' && 13 !== e.which ) { // "Return" key.
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    39
				return;
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    40
			}
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    41
16
a86126ab1dd4 update enmi-conf
ymh <ymh.work@gmail.com>
parents: 9
diff changeset
    42
			e.preventDefault(); // Keep this AFTER the key filter above.
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
			accordionSwitch( $( this ) );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
		});
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
	});
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    49
	/**
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    50
	 * Close the current accordion section and open a new one.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    51
	 *
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    52
	 * @param {Object} el Title element of the accordion section to toggle.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    53
	 * @since 3.6.0
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    54
	 */
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
	function accordionSwitch ( el ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
		var section = el.closest( '.accordion-section' ),
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    57
			sectionToggleControl = section.find( '[aria-expanded]' ).first(),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    58
			container = section.closest( '.accordion-container' ),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    59
			siblings = container.find( '.open' ),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    60
			siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    61
			content = section.find( '.accordion-section-content' );
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    63
		// This section has no content and cannot be expanded.
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    64
		if ( section.hasClass( 'cannot-expand' ) ) {
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
			return;
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    66
		}
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    68
		// Add a class to the container to let us know something is happening inside.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    69
		// This helps in cases such as hiding a scrollbar while animations are executing.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    70
		container.addClass( 'opening' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    71
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
		if ( section.hasClass( 'open' ) ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
			section.toggleClass( 'open' );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
			content.toggle( true ).slideToggle( 150 );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
		} else {
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    76
			siblingsToggleControl.attr( 'aria-expanded', 'false' );
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
			siblings.removeClass( 'open' );
5
5e2f62d02dcd upgrade wordpress + plugins
ymh <ymh.work@gmail.com>
parents: 0
diff changeset
    78
			siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
			content.toggle( false ).slideToggle( 150 );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
			section.toggleClass( 'open' );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
		}
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    82
16
a86126ab1dd4 update enmi-conf
ymh <ymh.work@gmail.com>
parents: 9
diff changeset
    83
		// We have to wait for the animations to finish.
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    84
		setTimeout(function(){
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    85
		    container.removeClass( 'opening' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    86
		}, 150);
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    87
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    88
		// If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    89
		if ( sectionToggleControl ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    90
			sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents: 5
diff changeset
    91
		}
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
	}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
})(jQuery);