Skip to content

Commit

Permalink
fixed : [Menu module] Submenu items not clickable when option "expand…
Browse files Browse the repository at this point in the history 
… the menu in full width below the menu hamburger icon." is checked. fixes #780
  • Loading branch information
nikeo committed Jan 25, 2021
1 parent ebedbe8 commit 176db20
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 106 deletions.
81 changes: 53 additions & 28 deletions assets/front/js/partials/menu-module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
// this is the element
var _isMobileMenu = function() {
if ( this.length && this.length > 0 ) {
return "yes" === this.closest('[data-sek-is-mobile-menu]').data('sek-is-mobile-menu');
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
return "yes" === this.closest('[data-sek-is-mobile-vertical-menu]').data('sek-is-mobile-vertical-menu');
}
return false;
};
Expand Down Expand Up @@ -379,42 +380,66 @@
nb_.cachedElements.$window.trigger('scroll');
});

// Set the attribute data-sek-is-mobile-vertical-menu on page load and dynamically set on resize
var _setVerticalMobileBooleanAttribute = function() {
var breakpoint = 768, $menu_wrapper, deviceWidth;
$('.sek-nav-toggler').each( function() {
$menu_wrapper = $(this).closest('[data-sek-mobile-menu-breakpoint]');
if ( $menu_wrapper.length < 1 ) {
nb_.errorLog('Menu module => error => no menu wrapper found');
} else {
breakpoint = $(this).closest('[data-sek-mobile-menu-breakpoint]').data('sek-mobile-menu-breakpoint') || breakpoint;
// cast to integer
breakpoint = parseInt( breakpoint, 10 );
deviceWidth = window.innerWidth > 0 ? window.innerWidth : screen.width;
// console.log('window.innerWidth ??', window.innerWidth, window.innerWidth > 0 );
// console.log('SOO ? breakpoint | device width', breakpoint + ' | ' + deviceWidth );

// add a data attribute so we can target the mobile menu with dynamic css rules
// @needed when coding : https://github.com/presscustomizr/nimble-builder/issues/491
$menu_wrapper.attr('data-sek-is-mobile-vertical-menu', deviceWidth < breakpoint ? 'yes' : 'no');
}
});
};

_setVerticalMobileBooleanAttribute();
nb_.cachedElements.$window.on('resize', nb_.debounce( _setVerticalMobileBooleanAttribute, 100) );


// How to have a logo plus an hamburger in mobiles on the same line?
// => clone the menu module, and append it to the closest sektion-inner wrapper
// => this way it will occupy 100% of the width
// => and also the clone inherits the style of the module
// https://github.com/presscustomizr/nimble-builder/issues/368
var _doMobileMenuSetup = function() {
$( '[data-sek-module-type="czr_menu_module"]' ).find('[data-sek-expand-below="yes"]').each( function() {
// make sure we don't do the setup twice when customizing
if ( true === $(this).data('sek-setup-menu-mobile-expanded-below-done') )
$( '[data-sek-module-type="czr_menu_module"]' ).find('[data-sek-expand-below="yes"]').each( function() {
// make sure we don't do the setup twice when customizing
if ( true === $(this).data('sek-setup-menu-mobile-expanded-below-done') )
return;

var $_mobile_menu_module = $(this).closest('[data-sek-module-type="czr_menu_module"]').clone(true),
//create a new id for the mobile menu nav collapse that will used by the button toggler too
_new_id = $( '.sek-nav-collapse', this ).attr('id') + '-mobile';

$_mobile_menu_module
/// place the mobile menu at the end of this sektion inner
.appendTo( $(this).closest( '.sek-sektion-inner' ) )
//wrap in a convenient div for styling and targeting
.wrap( '<div class="sek-col-base sek-mobile-menu-expanded-below" id="'+_new_id+'-wrapper"></div>');

// assign the new id to the mobile nav collapse
$( '.sek-nav-collapse', '#'+_new_id+'-wrapper' ).attr( 'id', _new_id );
// add a data attribute so we can target the mobile menu with dynamic css rules
// @needed when coding : https://github.com/presscustomizr/nimble-builder/issues/491
$( '.sek-nav-wrap', '#'+_new_id+'-wrapper' ).attr('data-sek-is-mobile-menu', 'yes');
// remove the duplicate button
$( '.sek-nav-toggler', '#'+_new_id+'-wrapper' ).detach();
// update the toggler button so that will now refer to the "cloned" mobile menu
$( '.sek-nav-toggler', this ).data( 'target', '#' + _new_id )
.attr( 'aria-controls', _new_id );
// flag setup done
$(this).data('sek-setup-menu-mobile-expanded-below-done', true );
});//$.each()
};
var $_mobile_menu_module = $(this).closest('[data-sek-module-type="czr_menu_module"]').clone(true),
//create a new id for the mobile menu nav collapse that will used by the button toggler too
_new_id = $( '.sek-nav-collapse', this ).attr('id') + '-mobile';

$_mobile_menu_module
/// place the mobile menu at the end of this sektion inner
.appendTo( $(this).closest( '.sek-sektion-inner' ) )
//wrap in a convenient div for styling and targeting
.wrap( '<div class="sek-col-base sek-mobile-menu-expanded-below" id="'+_new_id+'-wrapper"></div>');

// assign the new id to the mobile nav collapse
$( '.sek-nav-collapse', '#'+_new_id+'-wrapper' ).attr( 'id', _new_id );
// remove the duplicate button
$( '.sek-nav-toggler', '#'+_new_id+'-wrapper' ).detach();
// update the toggler button so that will now refer to the "cloned" mobile menu
$( '.sek-nav-toggler', this ).data( 'target', '#' + _new_id )
.attr( 'aria-controls', _new_id );
// flag setup done
$(this).data('sek-setup-menu-mobile-expanded-below-done', true );
});//$.each()
};
_doMobileMenuSetup();

// When previewing, react to level refresh
// This can occur to any level. We listen to the bubbling event on 'body' tag
nb_.cachedElements.$body.on('sek-level-refreshed sek-modules-refreshed sek-columns-refreshed sek-section-added', function( evt ){
Expand Down
159 changes: 86 additions & 73 deletions assets/front/scss/modules/_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,91 @@
// }
}

// June 2020 for https://github.com/presscustomizr/nimble-builder/issues/721
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-is-mobile-vertical-menu="yes"] {
> .show {
overflow: auto;
max-height: 80vh;
}
li .sub-menu li > a {
font-size: 0.8em;
padding: .6em 15px;
}
}
// Janv 2021 : default alignment of vertical mobile menu items
// consistent with registration params
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-is-mobile-vertical-menu="yes"] .sek-nav li a {
justify-content: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
}

// PRO SEARCH ICON IN DESKTOP + SEARCH FIELD DESKTOP AND MOBILE
// June 2020 search icon + form in menu module for https://github.com/presscustomizr/nimble-builder-pro/issues/12
.nb-module-menu-search {
position: relative;
}
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-is-mobile-vertical-menu="yes"] .nb-module-menu-search {
display: none;
}
.nb-svg-search-icon {
cursor: pointer;
padding: 0;
}
.nb-module-menu-search .nb-search-expand {
display:none;
background: #fff;
position: absolute;
z-index: 100;
top: 49px;
right: 0;
left: 0;
width: 340px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);
box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.nb-search-expand .nb-search-expand-inner {
border: 1px solid #eee;
box-shadow: 0 0 5px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.15);
transition: -webkit-transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
transition: transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
padding: 15px;
}

[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner [role=search].search-form {
display: flex;
float: none;
}
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner label input[type=search] {
max-width: 100%;
}
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search form input[type=submit] {
margin: 0;
background: #808080;
color: #fff;
}
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=search], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search input[type=search],
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search form input[type=submit] {
text-transform: none!important;
}
.nb-mobile-search {
display: none;
}
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search {
display: block;
padding: 6px 14px 15px;
}
[data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search input {
font-size: 16px;
}


// MOBILE VERTICAL MENU
//mobile up breakpoint -> min-width:768px
@include media-breakpoint-up( 'md' ) {
.sek-nav {
Expand Down Expand Up @@ -427,76 +512,4 @@
}
}
// end fade effect
}

// June 2020 for https://github.com/presscustomizr/nimble-builder/issues/721
[data-sek-is-mobile-menu="yes"] {
> .show {
overflow: auto;
max-height: 80vh;
}
li .sub-menu li > a {
font-size: 0.8em;
padding: .6em 15px;
}
}


// PRO SEARCH ICON IN DESKTOP + SEARCH FIELD DESKTOP AND MOBILE
// June 2020 search icon + form in menu module for https://github.com/presscustomizr/nimble-builder-pro/issues/12
.nb-module-menu-search {
position: relative;
}
[data-sek-is-mobile-menu="yes"] .nb-module-menu-search {
display: none;
}
.nb-svg-search-icon {
cursor: pointer;
padding: 0;
}
.nb-module-menu-search .nb-search-expand {
display:none;
background: #fff;
position: absolute;
z-index: 100;
top: 49px;
right: 0;
left: 0;
width: 340px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);
box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.nb-search-expand .nb-search-expand-inner {
border: 1px solid #eee;
box-shadow: 0 0 5px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.15);
transition: -webkit-transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
transition: transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
padding: 15px;
}

[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner [role=search].search-form {
display: flex;
float: none;
}
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner label input[type=search] {
max-width: 100%;
}
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-menu="yes"] .nb-mobile-search form input[type=submit] {
margin: 0;
background: #808080;
color: #fff;
}
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=search], [data-sek-is-mobile-menu="yes"] .nb-mobile-search input[type=search],
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-menu="yes"] .nb-mobile-search form input[type=submit] {
text-transform: none!important;
}
.nb-mobile-search {
display: none;
}
[data-sek-is-mobile-menu="yes"] .nb-mobile-search {
display: block;
padding: 6px 14px 15px;
}
[data-sek-is-mobile-menu="yes"] .nb-mobile-search input {
font-size: 16px;
}
}
7 changes: 4 additions & 3 deletions inc/sektions/_front_dev_php/module_registration/front/4_1_8_sek_register_menu.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function sek_get_module_params_for_czr_menu_module() {
// 'color_css' => '#ffffff',
// )
),
'css_selectors' => array( '.sek-menu-module li > a', '.nb-search-expand-inner input', '[data-sek-is-mobile-menu="yes"] .nb-mobile-search input' ),//<=@see tmpl/modules/menu_module_tmpl.php
'css_selectors' => array( '.sek-menu-module li > a', '.nb-search-expand-inner input', '[data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search input' ),//<=@see tmpl/modules/menu_module_tmpl.php
'render_tmpl_path' => "menu_module_tmpl.php"
);
}
Expand Down Expand Up @@ -70,14 +70,15 @@ function sek_get_module_params_for_czr_menu_content_child() {
)
),
),
// janv 2021 : alignement of menu items in the vertical mobile mnenu
'h_alignment_css' => array(
'input_type' => 'horizAlignmentWithDeviceSwitcher',
'title' => __('Menu items alignment', 'text_doma'),
'default' => array( 'desktop' => 'center' ),
'default' => array( 'desktop' => 'right' ),
'refresh_markup' => false,
'refresh_stylesheet' => true,
'css_identifier' => 'h_flex_alignment',
'css_selectors' => array( '.sek-nav-collapse', '[data-sek-is-mobile-menu="yes"] .sek-nav li a' ),
'css_selectors' => array( '.sek-nav-collapse', '[data-sek-is-mobile-vertical-menu="yes"] .sek-nav li a' ),
'title_width' => 'width-100',
'width-100' => true,
),
Expand Down
7 changes: 5 additions & 2 deletions tmpl/modules/menu_module_tmpl.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,11 @@
?>

<?php do_action('nb_menu_module_before_nav', $model ); ?>

<nav class="<?php echo $nav_classes; ?>" data-sek-expand-below="<?php echo $expand_below; ?>">
<?php
// janv 2021 => added data-sek-mobile-menu-breakpoint attribute which is hard coded to min-width:768px for the moment
// in the future, this value could be set by users
?>
<nav class="<?php echo $nav_classes; ?>" data-sek-expand-below="<?php echo $expand_below; ?>" data-sek-mobile-menu-breakpoint="768">
<button class="sek-nav-toggler sek-collapsed" type="button" data-sek-toggle="sek-collapse" data-target="#<?php echo $model['id'] ?>" aria-controls="<?php echo $model['id'] ?>" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'textdomain_to_be_replaced' ) ?>">
<span class="sek-ham__span-wrapper">
<span class="line line-1"></span>
Expand Down

0 comments on commit 176db20

Please sign in to comment.