feat: start amp integration. #35

assets/scss/elements/navigation/_nav-menu.scss

@@ -13,7 +13,7 @@
   overflow-y: auto;
   transition: $transition_med;
   margin-bottom: 0;
-  &.responsive-opened {
+  .responsive-opened & {
     max-height: calc(100vh - 70px);
     padding-bottom: $spacing-sm;
   }
@@ -107,7 +107,7 @@
     max-height: inherit;
     margin-left: auto;
     justify-content: flex-end;
-    &.responsive-opened {
+    .responsive-opened & {
       padding-bottom: 0;
     }
     > li {
@@ -173,7 +173,9 @@
     }
 
     .menu-item-has-children {
-      &:hover > .sub-menu {
+      &:hover > .sub-menu,
+      &:focus > .sub-menu,
+      &:focus-within > .sub-menu {
         display: block;
         visibility: visible;
         opacity: 1;

assets/scss/woocommerce/_nav-cart.scss

@@ -16,7 +16,8 @@
 }
 
 @mixin nav-cart--laptop() {
-  .menu-item-nav-cart:hover .nv-nav-cart {
+  .menu-item-nav-cart:hover .nv-nav-cart,
+  .menu-item-nav-cart > a:focus + .nv-nav-cart {
     opacity: 1;
     visibility: visible;
   }

functions.php

@@ -60,6 +60,7 @@ function neve_php_support() {
 	return;
 }
 
+require_once 'globals/utilities.php';
 require_once 'globals/hooks.php';
 require_once 'globals/sanitize-functions.php';
 

globals/utilities.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Author:          Andrei Baicus <[email protected]>
+ * Created on:      17/10/2018
+ *
+ * @package utilities.php
+ */
+
+/**
+ * Check if we're delivering AMP
+ *
+ * @return bool
+ */
+function neve_is_amp() {
+	return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
+}

inc/compatibility/amp.php

@@ -0,0 +1,113 @@
+<?php
+/**
+ * AMP Compatibility.
+ *
+ * Author:          Andrei Baicus <[email protected]>
+ * Created on:      17/10/2018
+ *
+ * @package Amp.php
+ */
+
+namespace Neve\Compatibility;
+
+/**
+ * Class Amp
+ *
+ * @package Neve\Compatibility
+ */
+class Amp {
+	/**
+	 * Run the hooks and filters.
+	 */
+	public function init() {
+		add_filter( 'neve_nav_data_attrs', array( $this, 'add_nav_attrs' ) );
+		add_filter( 'neve_nav_toggle_data_attrs', array( $this, 'add_nav_toggle_attrs' ) );
+		add_filter( 'neve_woocommerce_sidebar_filter_btn_data_attrs', array( $this, 'add_woo_sidebar_filter_btn_attrs' ) );
+		add_filter( 'neve_shop-sidebar_data_attrs', array( $this, 'add_woo_sidebar_attrs' ) );
+		add_action( 'wp_head', array( $this, 'render_amp_states' ) );
+	}
+
+	/**
+	 * Add amp states to the dom.
+	 */
+	public function render_amp_states() {
+		if ( ! neve_is_amp() ) {
+			return;
+		}
+
+		echo '<amp-state id="nvAmpMenuExpanded">';
+		echo '<script type="application/json">false</script>';
+		echo '</amp-state>';
+
+		echo '<amp-state id="nvAmpWooSidebarExpanded">';
+		echo '<script type="application/json">false</script>';
+		echo '</amp-state>';
+	}
+
+	/**
+	 * Add navigation data attributes.
+	 *
+	 * @param string $input the data attrs already existing in the nav.
+	 *
+	 * @return string
+	 */
+	public function add_nav_attrs( $input ) {
+		if ( ! neve_is_amp() ) {
+			return $input;
+		}
+		$input .= ' [class]="( nvAmpMenuExpanded ? \'nv-navbar responsive-opened\' : \'\' )" ';
+		$input .= ' aria-expanded="false" [aria-expanded]="nvAmpMenuExpanded ? \'true\' : \'false\'" ';
+
+		return $input;
+	}
+
+	/**
+	 * Add the nav toggle data attributes.
+	 *
+	 * @param string $input the data attrs already existing in nav toggle.
+	 *
+	 * @return string
+	 */
+	public function add_nav_toggle_attrs( $input ) {
+		if ( ! neve_is_amp() ) {
+			return $input;
+		}
+		$input .= ' on="tap:AMP.setState( { nvAmpMenuExpanded: ! nvAmpMenuExpanded } )" ';
+		$input .= ' [class]="\'navbar-toggle\' + ( nvAmpMenuExpanded ? \' active\' : \'\' )" ';
+		$input .= ' aria-expanded="false" ';
+		$input .= ' [aria-expanded]="nvAmpMenuExpanded ? \'true\' : \'false\'" ';
+
+		return $input;
+	}
+
+	/**
+	 * Add filter button amp attrs.
+	 *
+	 * @param string $input input.
+	 *
+	 * @return string
+	 */
+	public function add_woo_sidebar_filter_btn_attrs( $input ) {
+		if ( ! neve_is_amp() ) {
+			return $input;
+		}
+
+		$input .= ' on="tap:AMP.setState( { nvAmpWooSidebarExpanded: ! nvAmpWooSidebarExpanded } )" ';
+
+		return $input;
+	}
+
+	/**
+	 * Add woo sidebar amp attrs.
+	 *
+	 * @param string $input input.
+	 *
+	 * @return string
+	 */
+	public function add_woo_sidebar_attrs( $input ) {
+		$input .= ' [class]="\'nv-sidebar-wrap col-sm-12 left shop-sidebar \' + ( nvAmpWooSidebarExpanded ? \'sidebar-open\' : \'\' )" ';
+		$input .= ' aria-expanded="false" [aria-expanded]="nvAmpWooSidebarExpanded ? \'true\' : \'false\'" ';
+
+		return $input;
+	}
+}

inc/compatibility/woocommerce.php

@@ -153,7 +153,7 @@ public function sidebar_toggle() {
 			return;
 		}
 
-		echo '<span class="nv-sidebar-toggle button button-secondary">' . apply_filters( 'neve_filter_woo_sidebar_open_button_text', __( 'Filter', 'neve' ) ) . '</span>';
+		echo '<span class="nv-sidebar-toggle button button-secondary" ' . apply_filters( 'neve_woocommerce_sidebar_filter_btn_data_attrs', '' ) . '>' . apply_filters( 'neve_filter_woo_sidebar_open_button_text', __( 'Filter', 'neve' ) ) . '</span>';
 	}
 
 	/**

inc/core/core_loader.php

@@ -66,6 +66,7 @@ private function define_modules() {
 
 				'Compatibility\WooCommerce',
 				'Compatibility\Elementor',
+				'Compatibility\Amp',
 
 				'Admin\Metabox\Main',
 			)

inc/core/front_end.php

@@ -61,6 +61,7 @@ public function setup_theme() {
 		add_theme_support( 'custom-background', $custom_background_settings );
 		add_theme_support( 'themeisle-demo-import', $this->get_ti_demo_content_support_data() );
 		add_theme_support( 'align-wide' );
+		add_theme_support( 'amp' );
 
 		register_nav_menus(
 			array(
@@ -76,10 +77,17 @@ public function setup_theme() {
 	}
 
 	/**
-	 * Enqueue scripts.
+	 * Enqueue scripts and styles.
 	 */
 	public function enqueue_scripts() {
+		$this->add_styles();
+		$this->add_scripts();
+	}
 
+	/**
+	 * Enqueue styles.
+	 */
+	private function add_styles() {
 		if ( class_exists( 'WooCommerce' ) ) {
 			wp_enqueue_style( 'neve-woocommerce', NEVE_ASSETS_URL . '/css/woocommerce' . ( ( NEVE_DEBUG ) ? '' : '.min' ) . '.css', array(), apply_filters( 'neve_version_filter', NEVE_VERSION ) );
 		}
@@ -90,6 +98,15 @@ public function enqueue_scripts() {
 		wp_enqueue_style( 'neve-style' );
 
 		wp_enqueue_style( 'neve-icons', NEVE_ASSETS_URL . '/neve-icons/neve-icons' . ( ( NEVE_DEBUG ) ? '' : '.min' ) . '.css', array(), apply_filters( 'neve_version_filter', NEVE_VERSION ) );
+	}
+
+	/**
+	 * Enqueue scripts.
+	 */
+	private function add_scripts() {
+		if ( neve_is_amp() ) {
+			return;
+		}
 
 		wp_register_script( 'neve-script', NEVE_ASSETS_URL . 'js/script' . ( ( NEVE_DEBUG ) ? '' : '.min' ) . '.js', apply_filters( 'neve_filter_main_script_dependencies', array( 'jquery' ) ), NEVE_VERSION, false );
 		wp_localize_script(

inc/views/header.php

@@ -26,7 +26,7 @@ public function init() {
 	 */
 	public function render_navigation() {
 		?>
-		<nav class="nv-navbar">
+		<nav class="nv-navbar" <?php echo apply_filters( 'neve_nav_data_attrs', '' ); ?>>
 			<div class="container">
 				<div class="row">
 					<div class="col-md-12 nv-nav-wrap <?php echo esc_attr( $this->get_navbar_class() ); ?>">
@@ -133,13 +133,13 @@ private function render_navbar_toggle() {
 		if ( ! has_nav_menu( 'primary' ) && current_user_can( 'edit_theme_options' ) ) {
 			return;
 		}
-
 		?>
+
 		<div class="navbar-toggle-wrapper">
 			<?php
 			neve_before_navbar_toggle_trigger();
 			?>
-			<div class="navbar-toggle">
+			<div class="navbar-toggle" <?php echo apply_filters( 'neve_nav_toggle_data_attrs', '' ); ?> >
 				<span class="icon-bar"></span>
 				<span class="icon-bar"></span>
 				<span class="icon-bar"></span>

inc/views/layouts/layout_sidebar.php

@@ -43,7 +43,8 @@ public function sidebar( $context, $position ) {
 		}
 		?>
 
-		<div class="nv-sidebar-wrap col-sm-12 <?php echo esc_attr( $position ) . ' ' . esc_attr( $sidebar_setup['sidebar_slug'] ); ?>">
+		<div class="nv-sidebar-wrap col-sm-12 <?php echo esc_attr( $position ) . ' ' . esc_attr( $sidebar_setup['sidebar_slug'] ); ?>"
+			<?php echo apply_filters( 'neve_' . $sidebar_setup['sidebar_slug'] . '_data_attrs', '' ); ?>>
 			<?php $this->render_sidebar_close( $sidebar_setup['sidebar_slug'] ); ?>
 			<aside id="secondary" role="complementary">
 				<?php dynamic_sidebar( $sidebar_setup['sidebar_slug'] ); ?>

sidebar-shop.php

@@ -9,7 +9,7 @@
 	return;
 } ?>
 
-<div class="nv-sidebar-wrap col-sm-12 right">
+<div class="nv-sidebar-wrap col-sm-12 nv-right">
 	<aside id="secondary" class="shop-sidebar" role="complementary">
 		<?php dynamic_sidebar( 'shop-sidebar' ); ?>
 	</aside>