diff --git a/assets/front/js/partials/menu-module.js b/assets/front/js/partials/menu-module.js index e57351dda..4d9bfa3cb 100644 --- a/assets/front/js/partials/menu-module.js +++ b/assets/front/js/partials/menu-module.js @@ -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; }; @@ -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( '
'); - - // 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( '
'); + + // 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 ){ diff --git a/assets/front/scss/modules/_menu.scss b/assets/front/scss/modules/_menu.scss index 74d6f67c3..0dd8befcf 100644 --- a/assets/front/scss/modules/_menu.scss +++ b/assets/front/scss/modules/_menu.scss @@ -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 { @@ -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; -} +} \ No newline at end of file diff --git a/inc/sektions/_front_dev_php/module_registration/front/4_1_8_sek_register_menu.php b/inc/sektions/_front_dev_php/module_registration/front/4_1_8_sek_register_menu.php index af941e9fc..be40b9d7a 100644 --- a/inc/sektions/_front_dev_php/module_registration/front/4_1_8_sek_register_menu.php +++ b/inc/sektions/_front_dev_php/module_registration/front/4_1_8_sek_register_menu.php @@ -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" ); } @@ -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, ), diff --git a/tmpl/modules/menu_module_tmpl.php b/tmpl/modules/menu_module_tmpl.php index 0ab97325c..d9fa4ccee 100644 --- a/tmpl/modules/menu_module_tmpl.php +++ b/tmpl/modules/menu_module_tmpl.php @@ -22,8 +22,11 @@ ?> - -