Skip to content

Commit 0227bb5

Browse files
thomasguillotthomasguillot
authored
feat: update menu position using JS (#354)
1 parent f27050b commit 0227bb5

20 files changed

+849
-442
lines changed

‎includes/class-core.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ public static function theme_styles() {
6666

6767
// Strings for translation.
6868
$newspack_l10n = array(
69+
'close_menu' => esc_html__( 'Close Menu', 'newspack-block-theme' ),
6970
'close_search' => esc_html__( 'Close Search', 'newspack-block-theme' ),
70-
'open_search' => esc_html__( 'Open Search', 'newspack-block-theme' ),
7171
);
7272
if ( wp_script_is( 'jetpack-instant-search', 'enqueued' ) ) {
7373
$newspack_l10n['jetpack_instant_search'] = 'true';

‎parts/comments-contents.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close Button"},"layout":{"type":"flex","justifyContent":"right"}} -->
22
<div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"comments-menu__toggle newspack-icon-close"} -->
3-
<div class="wp-block-button comments-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close</span></a></div>
3+
<div class="wp-block-button comments-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close Comments</span></a></div>
44
<!-- /wp:button --></div>
55
<!-- /wp:buttons -->
66

‎parts/comments-menu.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"layout":{"type":"default"}} -->
22
<div class="wp-block-group"><!-- wp:buttons {"lock":{"move":false,"remove":false}} -->
33
<div class="wp-block-buttons"><!-- wp:button {"width":100,"className":"is-style-outline comments-menu__toggle"} -->
4-
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline comments-menu__toggle"><a class="wp-block-button__link wp-element-button">Comments</a></div>
4+
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline comments-menu__toggle"><a class="wp-block-button__link wp-element-button" href="#">Comments</a></div>
55
<!-- /wp:button --></div>
66
<!-- /wp:buttons -->
77

‎parts/drawer-contents.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close Button"},"layout":{"type":"flex","justifyContent":"right"}} -->
22
<div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"drawer-menu__toggle newspack-icon-close"} -->
3-
<div class="wp-block-button drawer-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close</span></a></div>
3+
<div class="wp-block-button drawer-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close Menu</span></a></div>
44
<!-- /wp:button --></div>
55
<!-- /wp:buttons -->
66

‎parts/mobile-contents.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close Button"},"layout":{"type":"flex","justifyContent":"right"}} -->
22
<div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"mobile-menu__toggle newspack-icon-close"} -->
3-
<div class="wp-block-button mobile-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close</span></a></div>
3+
<div class="wp-block-button mobile-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close Menu</span></a></div>
44
<!-- /wp:button --></div>
55
<!-- /wp:buttons -->
66

‎parts/mobile-menu.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- wp:buttons {"lock":{"move":false,"remove":false}} -->
22
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"base","textColor":"contrast","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"mobile-menu__toggle newspack-icon-menu"} -->
3-
<div class="wp-block-button mobile-menu__toggle newspack-icon-menu"><a class="wp-block-button__link has-contrast-color has-base-background-color has-text-color has-background has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Menu</span></a></div>
3+
<div class="wp-block-button mobile-menu__toggle newspack-icon-menu"><a class="wp-block-button__link has-contrast-color has-base-background-color has-text-color has-background has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Open Menu</span></a></div>
44
<!-- /wp:button --></div>
55
<!-- /wp:buttons -->
66

‎src/js/front-end/main.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import './menus/comments-menu';
2-
import './menus/drawer-menu';
3-
import './menus/mobile-menu';
4-
import './menus/search-menu';
1+
import './menus/comments';
2+
import './menus/drawer';
3+
import './menus/mobile';
4+
import './menus/search';

‎src/js/front-end/menus/comments-menu.js‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/js/front-end/menus/comments.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Internal dependencies.
3+
*/
4+
import { domReady } from '../utils';
5+
import { createMenu, createFocusTrap } from './index';
6+
7+
domReady( function () {
8+
createMenu( {
9+
menuType: 'comments-menu',
10+
containerSelector: '.comments-menu',
11+
toggleSelector: '.comments-menu__toggle',
12+
contentsSelector: '.comments-menu__contents',
13+
onOpen: ( contents ) => {
14+
// Wait a bit for any dynamic content to load (like Disqus)
15+
setTimeout( () => {
16+
// Re-create focus trap after dynamic content loads
17+
createFocusTrap( contents );
18+
}, 100 );
19+
}
20+
} ).init();
21+
} );

‎src/js/front-end/menus/consts.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,27 @@
11
// Prefix for class name to be added to document.body when any menu is open.
22
export const MENU_OPEN_CLASS_NAME = 'menu-open--';
3+
4+
// Prefix for overlay position class names.
5+
export const OVERLAY_POSITION_CLASS_PREFIX = 'overlay-contents--position--';
6+
7+
// Animation duration constants.
8+
export const ANIMATION_DURATION = {
9+
OPACITY: 125,
10+
POSITION: 250,
11+
OVERLAY: 500
12+
};
13+
14+
// Animation position values.
15+
export const POSITION_VALUES = {
16+
HIDDEN: '-100%',
17+
VISIBLE: '0',
18+
TRANSFORM_HIDDEN: 'translateY(-1rem)',
19+
TRANSFORM_VISIBLE: 'translateY(0)'
20+
};
21+
22+
// Commonly used selectors.
23+
export const SELECTORS = {
24+
FOCUSABLE: 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), iframe, object, embed, [contenteditable="true"]',
25+
CLOSE_BUTTON: '.newspack-icon-close',
26+
SCREEN_READER_LINK: 'a.screen-reader-text'
27+
};

0 commit comments

Comments
 (0)