Skip to content

Commit 2f31023

Browse files
aristatharistath
authored
Merge pull request #543 from ProgressPlanner/ari/interactive/blog-description
Simplify interactive tasks
2 parents 2566545 + 3e217cd commit 2f31023

6 files changed

Lines changed: 129 additions & 133 deletions

File tree

‎assets/js/web-components/prpl-interactive-task.js‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ class PrplInteractiveTask extends HTMLElement {
99
constructor() {
1010
// Get parent class properties
1111
super();
12+
13+
this.repositionPopover = this.repositionPopover.bind( this ); // So this is available in the event listener.
1214
}
1315

1416
/**
@@ -56,12 +58,16 @@ class PrplInteractiveTask extends HTMLElement {
5658
/**
5759
* Runs when the popover is added to the DOM.
5860
*/
59-
popoverAddedToDOM() {}
61+
popoverAddedToDOM() {
62+
window.addEventListener( 'resize', this.repositionPopover );
63+
}
6064

6165
/**
6266
* Runs when the popover is opening.
6367
*/
64-
popoverOpening() {}
68+
popoverOpening() {
69+
this.repositionPopover();
70+
}
6571

6672
/**
6773
* Runs when the popover is closing.
@@ -101,4 +107,38 @@ class PrplInteractiveTask extends HTMLElement {
101107
const popover = document.getElementById( popoverId );
102108
popover.hidePopover();
103109
}
110+
111+
/**
112+
* Repositions the popover relative to the target element.
113+
* @private
114+
*/
115+
repositionPopover() {
116+
const horizontalTarget = document.querySelector( '.prpl-wrap' );
117+
const verticalTarget = document.querySelector(
118+
'.prpl-widget-wrapper.prpl-suggested-tasks'
119+
);
120+
121+
// Just in case.
122+
if ( ! horizontalTarget || ! verticalTarget ) {
123+
return;
124+
}
125+
126+
const horizontalRect = horizontalTarget.getBoundingClientRect();
127+
const verticalRect = verticalTarget.getBoundingClientRect();
128+
const popoverId = this.getAttribute( 'popover-id' );
129+
const popover = document.getElementById( popoverId );
130+
131+
// Reset default popover styles.
132+
popover.style.margin = '0';
133+
134+
// Calculate target's center
135+
const horizontalTargetCenter =
136+
horizontalRect.left + horizontalRect.width / 2;
137+
138+
// Apply the position.
139+
popover.style.position = 'fixed';
140+
popover.style.left = `${ horizontalTargetCenter }px`;
141+
popover.style.top = `${ Math.round( Math.abs( verticalRect.top ) ) }px`;
142+
popover.style.transform = 'translateX(-50%)';
143+
}
104144
}

‎assets/js/web-components/prpl-task-sending-email.js‎

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -16,55 +16,18 @@ customElements.define(
1616
constructor() {
1717
// Get parent class properties
1818
super();
19-
this.repositionPopover = this.repositionPopover.bind( this ); // So this is available in the event listener.
2019

2120
// First step.
2221
this.formStep = this.querySelector(
2322
'#prpl-sending-email-form-step'
2423
);
2524
}
2625

27-
/**
28-
* Repositions the popover relative to the target element.
29-
* @private
30-
*/
31-
repositionPopover() {
32-
const horizontalTarget = document.querySelector( '.prpl-wrap' );
33-
const verticalTarget = document.querySelector(
34-
'.prpl-widget-wrapper.prpl-suggested-tasks'
35-
);
36-
37-
// Just in case.
38-
if ( ! horizontalTarget || ! verticalTarget ) {
39-
return;
40-
}
41-
42-
const horizontalRect = horizontalTarget.getBoundingClientRect();
43-
const verticalRect = verticalTarget.getBoundingClientRect();
44-
const popoverId = this.getAttribute( 'popover-id' );
45-
const popover = document.getElementById( popoverId );
46-
47-
// Reset default popover styles.
48-
popover.style.margin = '0';
49-
50-
// Calculate target's center
51-
const horizontalTargetCenter =
52-
horizontalRect.left + horizontalRect.width / 2;
53-
54-
// Apply the position.
55-
popover.style.position = 'fixed';
56-
popover.style.left = `${ horizontalTargetCenter }px`;
57-
popover.style.top = `${ Math.round(
58-
Math.abs( verticalRect.top )
59-
) }px`;
60-
popover.style.transform = 'translateX(-50%)';
61-
}
62-
6326
/**
6427
* Runs when the popover is added to the DOM.
6528
*/
6629
popoverAddedToDOM() {
67-
window.addEventListener( 'resize', this.repositionPopover );
30+
super.popoverAddedToDOM();
6831

6932
// For the results step, add event listener to radio buttons.
7033
const nextButton = this.querySelector(
@@ -85,13 +48,6 @@ customElements.define(
8548
}
8649
}
8750

88-
/**
89-
* Runs when the popover is opening.
90-
*/
91-
popoverOpening() {
92-
this.repositionPopover();
93-
}
94-
9551
/**
9652
* Hide all steps.
9753
*/

‎classes/suggested-tasks/class-tasks-manager.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
use Progress_Planner\Suggested_Tasks\Tasks_Interface;
2626
use Progress_Planner\Suggested_Tasks\Providers\Integrations\Yoast\Add_Yoast_Providers;
2727
use Progress_Planner\Suggested_Tasks\Providers\User as User_Tasks;
28-
use Progress_Planner\Suggested_Tasks\Providers\Interactive\Email_Sending;
28+
use Progress_Planner\Suggested_Tasks\Providers\Email_Sending;
2929
use Progress_Planner\Suggested_Tasks\Providers\Set_Valuable_Post_Types;
3030
use Progress_Planner\Suggested_Tasks\Providers\Fewer_Tags;
3131
use Progress_Planner\Suggested_Tasks\Providers\Remove_Terms_Without_Posts;

classes/suggested-tasks/providers/interactive/class-email-sending.php renamed to classes/suggested-tasks/providers/class-email-sending.php

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@
55
* @package Progress_Planner
66
*/
77

8-
namespace Progress_Planner\Suggested_Tasks\Providers\Interactive;
9-
10-
use Progress_Planner\Suggested_Tasks\Providers\Interactive;
8+
namespace Progress_Planner\Suggested_Tasks\Providers;
119

1210
/**
1311
* Add task for Email sending.
1412
*/
15-
class Email_Sending extends Interactive {
13+
class Email_Sending extends Tasks {
1614

1715
/**
1816
* Whether the task is an onboarding task.
@@ -35,6 +33,13 @@ class Email_Sending extends Interactive {
3533
*/
3634
const CATEGORY = 'configuration';
3735

36+
/**
37+
* Whether the task is interactive.
38+
*
39+
* @var bool
40+
*/
41+
protected $is_interactive = true;
42+
3843
/**
3944
* Whether the task is dismissable.
4045
*
@@ -126,6 +131,37 @@ public function init() {
126131
);
127132
}
128133

134+
/**
135+
* We want task to be added always.
136+
*
137+
* @return bool
138+
*/
139+
public function should_add_task() {
140+
return true;
141+
}
142+
143+
/**
144+
* Task should be completed only manually by the user.
145+
*
146+
* @param string $task_id The task ID.
147+
*
148+
* @return bool
149+
*/
150+
public function is_task_completed( $task_id = '' ) {
151+
return false;
152+
}
153+
154+
/**
155+
* Task should be completed only manually by the user.
156+
*
157+
* @param string $task_id The task ID.
158+
*
159+
* @return bool|string
160+
*/
161+
public function evaluate_task( $task_id ) {
162+
return false;
163+
}
164+
129165
/**
130166
* Get the title.
131167
*

‎classes/suggested-tasks/providers/class-interactive.php‎

Lines changed: 0 additions & 81 deletions
This file was deleted.

‎classes/suggested-tasks/providers/class-tasks.php‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,31 @@ abstract class Tasks implements Tasks_Interface {
119119
*/
120120
protected $data_collector = null;
121121

122+
/**
123+
* The popover ID for interactive tasks.
124+
*
125+
* @var string
126+
*/
127+
protected $popover_id = '';
128+
129+
/**
130+
* Whether the task is interactive.
131+
*
132+
* @var bool
133+
*/
134+
protected $is_interactive = false;
135+
136+
/**
137+
* Constructor.
138+
*
139+
* @return void
140+
*/
141+
public function __construct() {
142+
if ( $this->is_interactive ) {
143+
\add_action( 'progress_planner_admin_page_after_widgets', [ $this, 'add_popover' ] );
144+
}
145+
}
146+
122147
/**
123148
* Initialize the task provider.
124149
*
@@ -548,4 +573,24 @@ protected function transform_collector_data( array $data ): array {
548573

549574
return $data;
550575
}
576+
577+
/**
578+
* Add the popover.
579+
*
580+
* @return void
581+
*/
582+
public function add_popover() {
583+
?>
584+
<div id="prpl-popover-<?php echo \esc_attr( $this->popover_id ); ?>" class="prpl-popover prpl-popover-interactive" popover>
585+
<?php $this->the_popover_content(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
586+
</div>
587+
<?php
588+
}
589+
590+
/**
591+
* The popover content.
592+
*
593+
* @return void
594+
*/
595+
public function the_popover_content() {}
551596
}

0 commit comments

Comments
 (0)