|
5 | 5 | */ |
6 | 6 | // eslint-disable-next-line no-unused-vars |
7 | 7 | class PrplInteractiveTask extends HTMLElement { |
8 | | - // eslint-disable-next-line no-useless-constructor |
9 | | - constructor() { |
10 | | - // Get parent class properties |
11 | | - super(); |
12 | | - |
13 | | - this.repositionPopover = this.repositionPopover.bind( this ); // So this is available in the event listener. |
14 | | - } |
15 | | - |
16 | 8 | /** |
17 | 9 | * Runs when the component is added to the DOM. |
18 | 10 | */ |
@@ -55,20 +47,6 @@ class PrplInteractiveTask extends HTMLElement { |
55 | 47 | } ); |
56 | 48 | } |
57 | 49 |
|
58 | | - /** |
59 | | - * Runs when the popover is added to the DOM. |
60 | | - */ |
61 | | - popoverAddedToDOM() { |
62 | | - window.addEventListener( 'resize', this.repositionPopover ); |
63 | | - } |
64 | | - |
65 | | - /** |
66 | | - * Runs when the popover is opening. |
67 | | - */ |
68 | | - popoverOpening() { |
69 | | - this.repositionPopover(); |
70 | | - } |
71 | | - |
72 | 50 | /** |
73 | 51 | * Runs when the popover is closing. |
74 | 52 | */ |
@@ -107,63 +85,6 @@ class PrplInteractiveTask extends HTMLElement { |
107 | 85 | const popover = document.getElementById( popoverId ); |
108 | 86 | popover.hidePopover(); |
109 | 87 | } |
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 | | - // Ensure that the popover is not too far from the top of the screen on small screens. |
139 | | - const MARGIN_TOP = 12; // minimum gap from top |
140 | | - const MARGIN_BOTTOM = 12; // minimum gap from bottom |
141 | | - const MOBILE_TOP_CAP = 100; // max starting offset on small screens |
142 | | - const isSmallScreen = window.matchMedia( '(max-width: 768px)' ).matches; |
143 | | - const MAX_TOP_CAP = isSmallScreen |
144 | | - ? MOBILE_TOP_CAP |
145 | | - : Number.POSITIVE_INFINITY; |
146 | | - |
147 | | - const desiredTop = Math.round( verticalRect.top ); |
148 | | - |
149 | | - const clampedTop = Math.max( |
150 | | - MARGIN_TOP, |
151 | | - Math.min( desiredTop, MAX_TOP_CAP ) |
152 | | - ); |
153 | | - |
154 | | - // Apply the position. |
155 | | - popover.style.position = 'fixed'; |
156 | | - popover.style.left = `${ horizontalTargetCenter }px`; |
157 | | - popover.style.top = `${ Math.round( clampedTop ) }px`; |
158 | | - popover.style.transform = 'translateX(-50%)'; |
159 | | - |
160 | | - // Make sure popover content can scroll if needed |
161 | | - popover.style.maxHeight = '80vh'; // adjustable |
162 | | - popover.style.overflowY = 'auto'; |
163 | | - popover.style.maxHeight = `calc(100vh - ${ |
164 | | - clampedTop + MARGIN_BOTTOM |
165 | | - }px)`; |
166 | | - } |
167 | 88 | } |
168 | 89 |
|
169 | 90 | /** |
|
0 commit comments