PluginProbe
Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Membership, Subscribers and Landing Pages / 2.5.0
Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Membership, Subscribers and Landing Pages v2.5.0
3.4.1 3.4.0 3.3.9 3.3.8 3.3.7 3.3.6 3.3.5 3.3.4 3.3.3 3.3.2 3.3.1 2.2.0 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.2.6 2.2.7 2.2.8 2.2.9 2.3.0 2.3.1 2.3.2 2.3.3 All 194 releases
convertkit / resources / frontend / js / restrict-content.js

restrict-content.js in Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Membership, Subscribers and Landing Pages 2.5.0, at resources/frontend/js/restrict-content.js

310 lines 8.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Frontend functionality for Restrict Content functionality.
3 *
4 * @since 2.3.7
5 *
6 * @package ConvertKit
7 * @author ConvertKit
8 */
9
10 /**
11 * Register events
12 */
13 document.addEventListener(
14 'DOMContentLoaded',
15 function () {
16
17 // Open modal.
18 document.querySelectorAll( '.convertkit-restrict-content-modal-open' ).forEach(
19 function ( element ) {
20 element.addEventListener(
21 'click',
22 function ( e ) {
23 e.preventDefault();
24 convertKitRestrictContentOpenModal();
25 }
26 );
27 }
28 );
29
30 // Handle modal form submissions.
31 document.addEventListener(
32 'submit',
33 function ( e ) {
34 // Bail if the submission was not for the Restrict Content form.
35 if ( ! e.target.matches( '#convertkit-restrict-content-modal form#convertkit-restrict-content-form' ) ) {
36 return;
37 }
38
39 e.preventDefault();
40 convertKitRestrictContentFormSubmit( e );
41 }
42 );
43
44 // Close modal.
45 // Check if the element exists on screen; if another JS error occurs, OTP submission might not be async,
46 // resulting in the non-JS OTP code screen loading without a modal (i.e. ?convertkit_login=1).
47 let convertKitRestrictContentCloseElement = document.querySelector( '#convertkit-restrict-content-modal-close' );
48 if ( convertKitRestrictContentCloseElement !== null ) {
49 convertKitRestrictContentCloseElement.addEventListener(
50 'click',
51 function ( e ) {
52 e.preventDefault();
53 convertKitRestrictContentCloseModal();
54 }
55 );
56 }
57
58 }
59 );
60
61 /**
62 * Handles Restrict Content form submission.
63 *
64 * @since 2.4.2
65 *
66 * @param Event e Form submission event.
67 */
68 function convertKitRestrictContentFormSubmit( e ) {
69
70 // Disable inputs.
71 document.querySelectorAll( 'input[type="text"], input[type="email"], input[type="submit"]' ).forEach(
72 function ( input ) {
73 input.setAttribute( 'disabled', 'disabled' );
74 }
75 );
76
77 // Show loading overlay.
78 document.querySelector( '#convertkit-restrict-content-modal-loading' ).style.display = 'block';
79
80 // Determine if this is the email or code submission.
81 let isCodeSubmission = document.querySelector( 'input#convertkit_subscriber_code' ) !== null;
82
83 if ( isCodeSubmission ) {
84 // Code submission.
85 convertKitRestrictContentSubscriberVerification(
86 e.target.querySelector( 'input[name="_wpnonce"]' ).value,
87 e.target.querySelector( 'input[name="subscriber_code"]' ).value,
88 e.target.querySelector( 'input[name="token"]' ).value,
89 e.target.querySelector( 'input[name="convertkit_post_id"]' ).value
90 );
91
92 return false;
93 }
94
95 // Email submission.
96 convertKitRestrictContentSubscriberAuthenticationSendCode(
97 e.target.querySelector( 'input[name="_wpnonce"]' ).value,
98 e.target.querySelector( 'input[name="convertkit_email"]' ).value,
99 e.target.querySelector( 'input[name="convertkit_resource_type"]' ).value,
100 e.target.querySelector( 'input[name="convertkit_resource_id"]' ).value,
101 e.target.querySelector( 'input[name="convertkit_post_id"]' ).value
102 );
103
104 }
105
106 /**
107 * Opens the modal, displaying the content stored within the
108 * #convertkit-restrict-content-modal-content element.
109 *
110 * @since 2.3.8
111 */
112 function convertKitRestrictContentOpenModal() {
113
114 document.querySelector( '#convertkit-restrict-content-modal-background' ).style.display = 'block';
115 document.querySelector( '#convertkit-restrict-content-modal' ).style.display = 'block';
116
117 }
118
119 /**
120 * Closes the modal.
121 *
122 * @since 2.3.8
123 */
124 function convertKitRestrictContentCloseModal() {
125
126 document.querySelector( '#convertkit-restrict-content-modal-background' ).style.display = 'none';
127 document.querySelector( '#convertkit-restrict-content-modal-loading' ).style.display = 'none';
128 document.querySelector( '#convertkit-restrict-content-modal' ).style.display = 'none';
129
130 }
131
132 /**
133 * Submits the given email address to maybe_run_subscriber_authentication(), which
134 * will return either:
135 * - the email form view, with an error message e.g. invalid email,
136 * - the code form view, where the user can enter the OTP.
137 *
138 * @since 2.3.8
139 *
140 * @param string nonce WordPress nonce.
141 * @param string email Email address.
142 * @param string resource_type Resource Type (tag|product).
143 * @param int resource_id Resource ID (ConvertKit Tag or Product ID).
144 * @param int post_id WordPress Post ID being viewed / accessed.
145 */
146 function convertKitRestrictContentSubscriberAuthenticationSendCode( nonce, email, resource_type, resource_id, post_id ) {
147
148 fetch(
149 convertkit_restrict_content.ajaxurl,
150 {
151 method: 'POST',
152 headers: {
153 'Content-Type': 'application/x-www-form-urlencoded',
154 },
155 body: new URLSearchParams(
156 {
157 action: 'convertkit_subscriber_authentication_send_code',
158 '_wpnonce': nonce,
159 convertkit_email: email,
160 convertkit_resource_type: resource_type,
161 convertkit_resource_id: resource_id,
162 convertkit_post_id: post_id,
163 }
164 ),
165 }
166 )
167 .then(
168 function ( response ) {
169 if ( convertkit_restrict_content.debug ) {
170 console.log( response );
171 }
172
173 return response.json();
174 }
175 )
176 .then(
177 function ( result ) {
178 if ( convertkit_restrict_content.debug ) {
179 console.log( result );
180 }
181
182 // Output response, which will be a form with/without an error message.
183 document.querySelector( '#convertkit-restrict-content-modal-content' ).innerHTML = result.data;
184
185 // Hide loading overlay.
186 document.querySelector( '#convertkit-restrict-content-modal-loading' ).style.display = 'none';
187
188 // Re-bind OTP listener.
189 convertKitRestrictContentOTPField();
190 }
191 )
192 .catch(
193 function ( error ) {
194 if ( convertkit_restrict_content.debug ) {
195 console.error( error );
196 }
197 }
198 );
199
200 }
201
202 /**
203 * Submits the given email address to maybe_run_subscriber_verification(), which
204 * will return either:
205 * - the code form view, with an error message e.g. invalid code entered,
206 * - the Post's URL, with a `ck-cache-bust` parameter appended, which can then be loaded to show the content.
207 *
208 * @since 2.3.8
209 *
210 * @param string nonce WordPress nonce.
211 * @param string subscriber_code OTP Subscriber Code.
212 * @param string token Subscriber Token.
213 * @param int post_id WordPress Post ID being viewed / accessed.
214 */
215 function convertKitRestrictContentSubscriberVerification( nonce, subscriber_code, token, post_id ) {
216
217 fetch(
218 convertkit_restrict_content.ajaxurl,
219 {
220 method: 'POST',
221 headers: {
222 'Content-Type': 'application/x-www-form-urlencoded',
223 },
224 body: new URLSearchParams(
225 {
226 action: 'convertkit_subscriber_verification',
227 '_wpnonce': nonce,
228 subscriber_code: subscriber_code,
229 token: token,
230 convertkit_post_id: post_id,
231 }
232 ),
233 }
234 )
235 .then(
236 function ( response ) {
237 if ( convertkit_restrict_content.debug ) {
238 console.log( response );
239 }
240
241 return response.json();
242 }
243 )
244 .then(
245 function ( result ) {
246 if ( convertkit_restrict_content.debug ) {
247 console.log( result );
248 }
249
250 // If the entered code is invalid, show the response in the modal.
251 if ( ! result.success ) {
252 document.querySelector( '#convertkit-restrict-content-modal-content' ).innerHTML = result.data;
253
254 // Hide loading overlay.
255 document.querySelector( '#convertkit-restrict-content-modal-loading' ).style.display = 'none';
256
257 // Re-bind OTP listener.
258 convertKitRestrictContentOTPField();
259 return;
260 }
261
262 // Code entered is valid; load the URL in the response data.
263 window.location = result.data;
264 }
265 )
266 .catch(
267 function ( error ) {
268 if ( convertkit_restrict_content.debug ) {
269 console.error( error );
270 }
271 }
272 );
273
274 }
275
276 /**
277 * Defines the `--opt-digit` CSS var, so that the background color shifts to the next input
278 * when entering the one time code.
279 *
280 * @since 2.3.8
281 */
282 function convertKitRestrictContentOTPField() {
283
284 let otpInput = document.querySelector( '#convertkit_subscriber_code' );
285
286 // Bail if the OTP input isn't displayed on screen.
287 if ( otpInput === null ) {
288 return;
289 }
290
291 otpInput.addEventListener(
292 'input',
293 function () {
294 // Update the --_otp-digit property when the input value changes.
295 otpInput.style.setProperty( '--_otp-digit', otpInput.value.length );
296
297 // If all 6 digits have been entered:
298 // - move the caret input to the start,
299 // - blur the input now that all numbers are entered,
300 // - submit the form.
301 if ( otpInput.value.length === 6 ) {
302 otpInput.setSelectionRange( 0, 0 );
303 otpInput.blur();
304 document.querySelector( '#convertkit-restrict-content-form' ).requestSubmit();
305 }
306 }
307 );
308
309 }
310