button.submenu-toggle { display: inline-block; position: absolute; background-color: transparent; color: #555; border: 0; font-size: 20px; top: .3em; right: 20px; cursor: pointer; padding: 0 1em; font-weight: normal; line-height: inherit; } .menu-item-has-children > button.submenu-toggle::before { content: "+"; display: inline-block; } .menu-item-has-children > button.submenu-toggle.submenu-open+ul.sub-menu { display: block !important; } .menu-item-has-children > button.submenu-toggle.submenu-open::before { content: "-"; } .menu-item-has-children:hover > ul.sub-menu { opacity: 1; display: block; visibility: visible; }'; $amp_menu_breakpoint = get_theme_mod( 'ocean_mobile_menu_breakpoints', '959' ); $amp_menu_custom_breakpoint = get_theme_mod( 'ocean_mobile_menu_custom_breakpoint' ); $amp_vheader_style_width = get_theme_mod( 'ocean_vertical_header_width', '300' ); if ( 'custom' === $amp_menu_breakpoint && ! empty( $amp_menu_custom_breakpoint ) ) { $amp_menu_breakpoint = $amp_menu_custom_breakpoint; } if ( ! empty( $amp_menu_breakpoint ) ) { $css .= '@media (min-width: ' . $amp_menu_breakpoint . 'px) { #site-header:not(.vertical-header) .menu-item-has-children > button.submenu-toggle { display: none; } body.vertical-header-style.default-collapse.left-header #site-header.vertical-header { left: -' . ( $amp_vheader_style_width - 36 ) . 'px; } body.vertical-header-style.default-collapse.left-header.amp-vertical-header #site-header.vertical-header { left: 0; } body.vertical-header-style.default-collapse.right-header #site-header.vertical-header { right: -' . ( $amp_vheader_style_width - 36 ) . 'px; } body.vertical-header-style.default-collapse.right-header.amp-vertical-header #site-header.vertical-header { right: 0; } }'; } $css .= '#mobile-fullscreen.opened { display: block; } #mobile-fullscreen { overflow-y: auto; } .fullscreen-mobile .oceanwp-mobile-menu-icon a.mobile-menu.opened .oceanwp-text { display: inherit; }'; $css .= '#searchform-overlay.active { display: block; }'; if ( OCEANWP_WOOCOMMERCE_ACTIVE ) { $css .= '.woocommerce ul.products li.product:not(.product-category) .woo-entry-buttons li a.owp-quick-view, .owp-quick-view { display: none; } .woocommerce .oceanwp-grid-list { display: none; } @media only screen and (max-width: 480px) { .woocommerce .oceanwp-grid-list { display: none; } } '; } // Return CSS. if ( ! empty( $css ) ) { $output .= '/* OceanWP AMP CSS */' . $css; } // Return output css. return $output; } /** * Menu Toggle attributes * * @param string $input the data attrs already existing in nav toggle. * @return string */ public function oceanwp_menu_taggle_attrs( $input ) { $input .= ' on="tap:AMP.setState( { owpAmpMenuExpanded: ! owpAmpMenuExpanded } ),oceanwp-body.toggleClass(class=mobile-dropdown)" '; $input .= ' [class]="\'mobile-menu\' + ( owpAmpMenuExpanded ? \' opened\' : \'\' )" '; $input .= ' aria-expanded="false" '; $input .= ' [aria-expanded]="owpAmpMenuExpanded ? \'true\' : \'false\'" '; return $input; } /** * Add AMP attributes to the mobile dropdown menu wrapper. * * @param string $input the data attrs already existing in nav toggle. * @return string */ public function oceanwp_dropdown_menu_wrapper( $input ) { $input .= ' [class]="\'clr\' + ( owpAmpMenuExpanded ? \' opened\' : \'\' )" '; $input .= ' aria-expanded="false" '; $input .= ' [aria-expanded]="owpAmpMenuExpanded ? \'true\' : \'false\'" '; return $input; } /** * Add AMP attributes to the fullscreen menu wrapper. * * @param string $input the data attrs already existing in nav toggle. * @return string */ public function oceanwp_fullscreen_menu_wrapper( $input ) { $input .= ' [class]="\'clr\' + ( owpAmpMenuExpanded ? \' opened\' : \'\' )" '; $input .= ' aria-expanded="false" '; $input .= ' [aria-expanded]="owpAmpMenuExpanded ? \'true\' : \'false\'" '; return $input; } /** * Add AMP attributes to the fullscreen menu close wrapper. * * @param string $input the data attrs already existing in nav toggle. * @return string */ public function oceanwp_fullscreen_menu_close( $input ) { $input .= ' on="tap:AMP.setState( { owpAmpMenuExpanded: ! owpAmpMenuExpanded } ),oceanwp-body.toggleClass(class=clr)" '; $input .= ' [class]="\'close\' + ( owpAmpMenuExpanded ? \' false\' : \'\' )" '; return $input; } /** * Add AMP attributes to the Vertical header toggle. * * @param string $input the data attrs already existing in nav toggle. * @return string */ public function oceanwp_attrs_vertical_header_toggle( $input ) { $input .= ' on="tap:AMP.setState( { owpAmpVhMenuExpanded: ! owpAmpVhMenuExpanded } ),oceanwp-body.toggleClass(class=amp-vertical-header)" '; $input .= ' [class]="\'hamburger hamburger--spin\' + ( owpAmpVhMenuExpanded ? \' is-active\' : \'\' )" '; $input .= ' aria-expanded="false" '; $input .= ' [aria-expanded]="owpAmpVhMenuExpanded ? \'true\' : \'false\'" '; return $input; } /** * Add amp states to the dom. */ public function render_amp_states() { echo ''; echo ''; echo ''; } /** * Set AMP State for eeach sub menu toggle. * * @param String $item_output HTML markup for the menu item. * @param WP_Post $item Post object for the navigation menu. * * @return String HTML MArkup for the menu including the AML State. */ public function toggle_submenu_icon( $item_output, $item ) { $item_output .= ''; return $item_output; } /** * Add AMP attribites to the toggle button. * * @param array $attr Attribute to load default. * @param string $context The context, to build filter name. * @param array $args Optional. Custom data to pass to filter. * * @return Array updated HTML attributes. */ public function menu_toggle_button( $attr, $context, $args ) { $attr['[class]'] = '( owpNavMenuItemExpanded' . $args->ID . ' ? \' submenu-toggle submenu-open\' : \'submenu-toggle\')'; $attr['on'] = 'tap:AMP.setState( { owpNavMenuItemExpanded' . $args->ID . ': ! owpNavMenuItemExpanded' . $args->ID . ' } )'; return $attr; } /** * Add submenu toggle icon for AMP version. * * @param string $item_output Menu item's HTML output. * @param WP_Post $item Menu item data object. * @param int $depth Depth of menu item. * @param stdClass $args An object of wp_nav_menu() arguments. * * @return String Menu item's starting markup. */ public function mobile_submenu_icon( $item_output, $item, $depth, $args ) { if ( true === is_object( $args ) ) { if ( isset( $args->theme_location ) && ( 'main_menu' === $args->theme_location || 'mobile_menu' === $args->theme_location ) ) { if ( isset( $item->classes ) && in_array( 'menu-item-has-children', $item->classes, true ) ) { $item_output = $this->menu_arrow_button_markup( $item_output, $item ); } } } else { if ( isset( $item->post_parent ) && 0 === $item->post_parent ) { $item_output = $this->menu_arrow_button_markup( $item_output, $item ); } } return $item_output; } /** * Submenu item's toggle icon HTML markup * * @param string $item_output Menu item's HTML output. * @param WP_Post $item Menu item data object. * * @return string Submenu toggle icon. */ public function menu_arrow_button_markup( $item_output, $item ) { $item_output = apply_filters( 'oceanwp_toggle_submenu_icon', $item_output, $item ); $item_output .= ''; return $item_output; } /** * Add AMP attributes to the nav search item. * * @param string $input the data attrs already existing in search toggle. * @return string */ public function oceanwp_nav_item_search_bar( $input ) { $input .= ' on="tap:AMP.setState( { owpAmpSearchExpanded: ! owpAmpSearchExpanded } )" '; $input .= ' [class]="( owpAmpSearchExpanded ? \'search-toggle-li active\' : \'search-toggle-li\' )" '; $input .= ' aria-expanded="false" [aria-expanded]="owpAmpSearchExpanded ? \'true\' : \'false\'" '; return $input; } /** * Add AMP attributes to the search bar wrapper. * * @param string $input the data attrs already existing in search toggle. * @return string */ public function oceanwp_menu_search_bar( $input ) { $input .= ' on="tap:AMP.setState( { owpAmpSearchExpanded: ! owpAmpSearchExpanded } )" '; $input .= ' [class]="\'header-searchform-wrap clr\' + ( owpAmpSearchExpanded ? \' show\' : \'\' )" '; $input .= ' aria-expanded="false" '; $input .= ' [aria-expanded]="owpAmpSearchExpanded ? \'true\' : \'false\'" '; return $input; } /** * Add AMP attributes to the overlay search bar wrapper. * * @param string $input the data attrs already existing in search toggle. * @return string */ public function oceanwp_menu_overlay_search_bar( $input ) { $input .= ' on="tap:AMP.setState( { owpAmpSearchExpanded: ! owpAmpSearchExpanded } )" '; $input .= ' [class]="\'header-searchform-wrap clr\' + ( owpAmpSearchExpanded ? \' active\' : \'\' )" '; $input .= ' aria-expanded="false" '; $input .= ' [aria-expanded]="owpAmpSearchExpanded ? \'true\' : \'false\'" '; return $input; } /** * Add AMP attributes to the oceanwp nav wrapper. * * @param string $input the data attrs already existing in search toggle. * @return string */ public function oceanwp_attrs_nav_wrapper( $input ) { if ( 'header_replace' !== get_theme_mod( 'ocean_menu_search_style', 'drop_down' ) ) { return; } $inner_classes = oceanwp_header_menu_classes( 'inner' ); $input .= ' [class]="\'' . $inner_classes . '\' + ( owpAmpSearchExpanded ? \' hide\' : \'\' )" '; $input .= ' aria-expanded="false" '; $input .= ' [aria-expanded]="owpAmpSearchExpanded ? \'true\' : \'false\'" '; return $input; } /** * Woocommerce mini cart amp style * * @param obj $style Return mini cart style. */ public function oceanwp_amp_mini_cart_style( $style ) { $style = 'custom_link'; return $style; } } } return new OceanWP_AMP();