tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-20 10:03:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add an element overlay, so that clicks outside of the popover can close the popover

Browse source
This commit is contained in:
Kelly Dwan 2019-11-20 17:48:24 -05:00
parent cb571a176b
commit 2a66f3f870
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
3 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
plugins/wporg-5ftf/assets/js/frontend.js
View file

@ -10,6 +10,7 @@ jQuery( document ).ready( function( $ ) {
$( document.body ).prepend( template() );
const modal = document.getElementById( 'send-link-dialog' );
const modalBg = document.getElementById( 'send-link-dialog-bg' );
const children = document.querySelectorAll( 'body > *:not([role="dialog"])' );
/**
@ -34,6 +35,10 @@ jQuery( document ).ready( function( $ ) {
const position = getModalPosition();
// Hide other content on this page while modal is open.
for ( i = 0; i < children.length; i++ ) {
if ( children[i].hasAttribute('data-no-inert') ) {
console.log( 'no inert' );
continue;
}
if ( children[i].getAttribute('inert') ) {
children[i].setAttribute('data-keep-inert', '');
} else {
@ -42,6 +47,7 @@ jQuery( document ).ready( function( $ ) {
}
modal.removeAttribute( 'hidden' );
modalBg.removeAttribute( 'hidden' );
modal.style.top = position.top + 'px';
modal.style.left = position.left + 'px';
modal.focus();
@ -61,6 +67,7 @@ jQuery( document ).ready( function( $ ) {
}
modal.hidden = true;
modalBg.hidden = true;
// Wait a tick before setting focus. See https://github.com/WICG/inert#performance-and-gotchas
setTimeout( function() {
@ -114,6 +121,7 @@ jQuery( document ).ready( function( $ ) {
}
} );
$( modalBg ).on( 'click', closeModal );
$( modal ).on( 'click', '.pledge-dialog__close', closeModal );
$( document ).on( 'keydown', function( event ) {
if ( 27 === event.which ) { // Esc

1
plugins/wporg-5ftf/views/modal-request-manage-link.php
View file

@ -6,6 +6,7 @@ defined( 'WPINC' ) || die();
?>
<script type="text/template" id="tmpl-5ftf-send-link-dialog">
<div id="send-link-dialog-bg" class="pledge-dialog__background" hidden data-no-inert></div>
<div id="send-link-dialog" role="dialog" class="pledge-dialog" hidden tabindex="-1" aria-label="<?php esc_attr_e( 'Request to edit this pledge', 'wporg-5ftf' ); ?>">
<p>
<?php esc_html_e( 'Only pledge admins can edit pledges.', 'wporg-5ftf' ); ?>

15
themes/wporg-5ftf/css/components/_pledge-dialog.scss
View file

@ -61,4 +61,17 @@
padding: 10px;
text-decoration: none;
}
}
}
.pledge-dialog__background {
position: fixed;
z-index: 99;
top: 0;
left: 0;
bottom: 0;
right: 0;
&[hidden] {
display: none;
}
}