button.submenu-toggle {
display: inline-block;
position: absolute;
background-color: transparent;
color: #555;
border: 0;
font-size: 20px;
top: .3em;
right: 20px;
cursor: pointer;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
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: "-";
}';
$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();