fix: scroll-triggered popups (#232)

Closes #217 Closes #231
Automattic · Sep 29, 2020 · cff67c6 · cff67c6
1 parent d06daa5
commit cff67c6
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 30 deletions.
diff --git a/includes/class-newspack-popups-inserter.php b/includes/class-newspack-popups-inserter.php
@@ -419,9 +419,7 @@ public static function register_amp_scripts() {
 	public static function assess_is_post( $popup ) {
 		if (
 			// Inline Pop-ups can only appear in Posts.
-			'inline' === $popup['options']['placement'] ||
-			// Pop-ups triggered by scroll position can only appear on Posts.
-			'scroll' === $popup['options']['trigger_type']
+			'inline' === $popup['options']['placement']
 		) {
 			return is_single();
 		}

diff --git a/includes/class-newspack-popups-model.php b/includes/class-newspack-popups-model.php
@@ -788,9 +788,8 @@ function ( $evts ) use ( $popup, $body, $element_id ) {
 				<button style="opacity: <?php echo floatval( $overlay_opacity ); ?>;background-color:<?php echo esc_attr( $overlay_color ); ?>;" class="newspack-lightbox-shim" on="tap:<?php echo esc_attr( $element_id ); ?>.hide"></button>
 			</form>
 		</amp-layout>
-		<div id="newspack-lightbox-marker">
-			<amp-position-observer on="enter:showAnim.start;" once layout="nodisplay" />
-		</div>
+		<div id="page-position-marker" style="position: absolute; top: <?php echo esc_attr( $popup['options']['trigger_scroll_progress'] ); ?>%"></div>
+		<amp-position-observer target="page-position-marker" on="enter:showAnim.start;" once layout="nodisplay" />
 		<amp-animation id="showAnim" layout="nodisplay">
 			<script type="application/json">
 				{

diff --git a/tests/test-insertion.php b/tests/test-insertion.php
@@ -32,30 +32,6 @@ public static function wpSetUpBeforeClass() { // phpcs:ignore Squiz.Commenting.F
 		Newspack_Popups_Model::set_popup_options( self::$popup_id, [ 'frequency' => 'once' ] );
 	}
 
-	/**
-	 * Test default options.
-	 */
-	public function test_default_options() {
-		$popup_object = Newspack_Popups_Model::create_popup_object( get_post( self::$popup_id ) );
-		self::assertEquals(
-			$popup_object['options'],
-			[
-				'background_color'        => '#FFFFFF',
-				'display_title'           => false,
-				'dismiss_text'            => Newspack_Popups::get_default_dismiss_text(),
-				'frequency'               => 'once',
-				'overlay_color'           => '#000000',
-				'overlay_opacity'         => '30',
-				'placement'               => 'center',
-				'trigger_type'            => 'time',
-				'trigger_delay'           => '3',
-				'trigger_scroll_progress' => 0,
-				'utm_suppression'         => null,
-			],
-			'Default options are as expected.'
-		);
-	}
-
 	/**
 	 * Test popup insertion into a post.
 	 */

diff --git a/tests/test-model.php b/tests/test-model.php
@@ -0,0 +1,97 @@
+<?php
+/**
+ * Class Model Test
+ *
+ * @package Newspack_Popups
+ */
+
+/**
+ * Model test case.
+ */
+class ModelTest extends WP_UnitTestCase {
+	private static $popup_id = false; // phpcs:ignore Squiz.Commenting.VariableComment.Missing
+
+	public static function wpSetUpBeforeClass() { // phpcs:ignore Squiz.Commenting.FunctionComment.Missing
+		self::$popup_id = self::factory()->post->create(
+			[
+				'post_type'    => Newspack_Popups::NEWSPACK_PLUGINS_CPT,
+				'post_title'   => 'Platea fames',
+				'post_content' => 'Faucibus placerat senectus.',
+			]
+		);
+	}
+
+	/**
+	 * Test popup object creation.
+	 */
+	public function test_popup_object_creation() {
+		$popup_object_default = Newspack_Popups_Model::create_popup_object( get_post( self::$popup_id ) );
+		self::assertEquals(
+			$popup_object_default['options'],
+			[
+				'background_color'        => '#FFFFFF',
+				'display_title'           => false,
+				'dismiss_text'            => Newspack_Popups::get_default_dismiss_text(),
+				'frequency'               => 'test',
+				'overlay_color'           => '#000000',
+				'overlay_opacity'         => '30',
+				'placement'               => 'center',
+				'trigger_type'            => 'time',
+				'trigger_delay'           => '3',
+				'trigger_scroll_progress' => 0,
+				'utm_suppression'         => null,
+			],
+			'Default options are as expected.'
+		);
+
+		$popup_object = Newspack_Popups_Model::create_popup_object(
+			get_post( self::$popup_id ),
+			false,
+			[
+				'trigger_type'            => 'scroll',
+				'trigger_scroll_progress' => '42',
+			]
+		);
+		self::assertEquals(
+			$popup_object['options']['trigger_scroll_progress'],
+			'42',
+			'Sets options when passed as argument.'
+		);
+	}
+
+	/**
+	 * Test popup markup generation.
+	 */
+	public function test_markup_generation() {
+		$popup_object_default = Newspack_Popups_Model::create_popup_object( get_post( self::$popup_id ) );
+
+		$dom = new DomDocument();
+		@$dom->loadHTML( Newspack_Popups_Model::generate_popup( $popup_object_default ) ); // phpcs:ignore WordPress.PHP.NoSilencedErrors.Discouraged
+		$xpath = new DOMXpath( $dom );
+
+		self::assertContains(
+			'top: 0%',
+			$xpath->query( '//*[@id="page-position-marker"]' )->item( 0 )->getAttribute( 'style' ),
+			'The position marker is set at 0% by default.'
+		);
+
+		$popup_object = Newspack_Popups_Model::create_popup_object(
+			get_post( self::$popup_id ),
+			false,
+			[
+				'trigger_type'            => 'scroll',
+				'trigger_scroll_progress' => 42,
+			]
+		);
+
+		$dom = new DomDocument();
+		@$dom->loadHTML( Newspack_Popups_Model::generate_popup( $popup_object ) ); // phpcs:ignore WordPress.PHP.NoSilencedErrors.Discouraged
+		$xpath = new DOMXpath( $dom );
+
+		self::assertContains(
+			'top: 42%',
+			$xpath->query( '//*[@id="page-position-marker"]' )->item( 0 )->getAttribute( 'style' ),
+			'The position marker is set at position passed in options.'
+		);
+	}
+}