ext.uls.dialog.js
View Options

	/*!
	* A simple dialog to be used inside ULS.
	*
	* @private
	* @since 2020.01
	*
	* Copyright (C) 2019-2020 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
	* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
	* contributors. See CREDITS for a list.
	*
	* UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
	* have to do anything special to choose one license or the other and you don't
	* have to notify anyone which license you are using. You are free to use
	* UniversalLanguageSelector in commercial projects as long as the copyright
	* header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
	*
	* @file
	* @ingroup Extensions
	* @licence GNU General Public Licence 2.0 or later
	* @licence MIT License
	*/

	( function () {
	'use strict';

	var ULSDialog = function ( options ) {
	var $dialog = options.container,
	hasOverlay = options.hasOverlay,
	$overlay,
	// Source: https://github.com/ghosh/Micromodal/blob/master/lib/src/index.js#L4
	FOCUSABLE_NODES = [
	'a[href]',
	'area[href]',
	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
	'select:not([disabled]):not([aria-hidden])',
	'textarea:not([disabled]):not([aria-hidden])',
	'button:not([disabled]):not([aria-hidden])',
	'iframe',
	'object',
	'embed',
	'[contenteditable]',
	'[tabindex]:not([tabindex^="-"])'
	],
	afterOpen = options.afterOpen,
	afterClose = options.afterClose;

	function getFocusableNodes() {
	return $dialog.find( FOCUSABLE_NODES.join( ', ' ) );
	}

	function isElementInDialog( targetElement ) {
	return $dialog.get( 0 ).contains( targetElement );
	}

	function focusOverlay() {
	if ( $overlay ) {
	$overlay.get( 0 ).focus();
	}
	}

	function focusFirstNodeOrOverlay( $focusableNodes ) {
	if ( $focusableNodes === undefined ) {
	$focusableNodes = getFocusableNodes();
	}

	if ( $focusableNodes.length ) {
	$focusableNodes.get( 0 ).focus();
	} else {
	focusOverlay();
	}
	}

	function maintainFocus( event ) {
	var $focusableNodes = getFocusableNodes(),
	focusedItemIndex;

	if ( !hasOverlay ) {
	// overlay is not present, so let tabbing flow as normal.
	return;
	}

	if ( !$focusableNodes.length ) {
	// no focusable node in the dialog, focus on the overlay.
	focusOverlay();
	return;
	}

	if ( !isElementInDialog( document.activeElement ) ) {
	focusFirstNodeOrOverlay( $focusableNodes );
	} else {
	focusedItemIndex = $focusableNodes.index( document.activeElement );

	if ( event.shiftKey && focusedItemIndex === 0 ) {
	$focusableNodes.get( -1 ).focus();
	event.preventDefault();
	} else if ( !event.shiftKey && focusedItemIndex === $focusableNodes.length - 1 ) {
	focusFirstNodeOrOverlay( $focusableNodes );
	event.preventDefault();
	}
	}
	}

	function handleFirstFocus( event ) {
	if ( !hasOverlay ) {
	// Overlay is not present, so let tabbing flow as normal.
	return;
	}

	if ( isElementInDialog( event.target ) ) {
	return;
	}

	focusFirstNodeOrOverlay();
	}

	function onKeydown( event ) {
	switch ( event.key ) {
	case 'Esc':
	case 'Escape':
	close();
	event.preventDefault();
	break;
	case 'Tab':
	maintainFocus( event );
	break;
	}
	}

	function addEvents() {
	$( document )
	.on( 'keydown', onKeydown )
	.on( 'focusin', handleFirstFocus );
	}

	function removeEvents() {
	$( document )
	.off( 'keydown', onKeydown )
	.off( 'focusin', handleFirstFocus );
	}

	function showOverlay() {
	if ( $overlay ) {
	$overlay.show();
	$( document.body ).addClass( 'uls-no-overflow' );
	}
	}

	function hideOverlay() {
	if ( $overlay ) {
	$overlay.hide();
	$( document.body ).removeClass( 'uls-no-overflow' );
	}
	}

	function open() {
	$dialog.show();
	addEvents();
	showOverlay();
	focusFirstNodeOrOverlay();
	if ( afterOpen ) {
	afterOpen();
	}
	}

	function close() {
	$dialog.hide();
	removeEvents();
	hideOverlay();
	if ( afterClose ) {
	afterClose();
	}
	}

	function elem() {
	return $dialog;
	}

	function addOverlay() {
	// Check if overlay is already there.
	if ( !$overlay ) {
	$overlay = $( '<div>' )
	.addClass( 'uls-overlay' )
	.prop( 'tabindex', '-1' )
	.on( 'click', close )
	.appendTo( document.body );
	}
	}

	$dialog.addClass( 'uls-dialog' );

	if ( hasOverlay ) {
	addOverlay();
	}

	return {
	open: open,
	close: close,
	elem: elem
	};
	};

	mw.uls = mw.uls \|\| {};
	mw.uls.Dialog = ULSDialog;
	}() );

File Metadata

Mime Type: text/plain
Expires: Sat, Oct 3, 11:29 (5 d, 2 h ago)
Storage Engine: local-disk
Storage Format: Raw Data
Storage Handle: 2d/cf/f42b7dd570b890251251e3fe9d95
Default Alt Text: ext.uls.dialog.js (4 KB)

ext.uls.dialog.js
No OneTemporary
Actions

ext.uls.dialog.js
View Options

File Metadata

Event Timeline

ext.uls.dialog.jsNo OneTemporaryActions

ext.uls.dialog.jsView Options

File Metadata

Event Timeline

ext.uls.dialog.js
No OneTemporary
Actions

ext.uls.dialog.js
View Options