← All changes | resources/frontend/js/broadcasts.js +65 -76 2.2.6 → 3.4.3 View file →

		@@ -1,10 +1,9 @@
1	1	/**
2		- * Frontend functionality for subscribers and tags.
	2	+ * Frontend functionality for the Broadcasts block and shortcode.
3	3	*
4		- * @since 1.9.6
	4	+ * @since 1.9.7.4
5	5	*
6		- * @package ConvertKit
7	6	* @author ConvertKit
8	7	*/
9	8
10	9	/**
		@@ -9,44 +8,39 @@
9	8
10	9	/**
11	10	* Register events
12	11	*/
13		-jQuery( document ).ready(
14		- function( $ ) {
	12	+document.addEventListener('DOMContentLoaded', function () {
	13	+ // Listen for click events.
	14	+ document.addEventListener('click', function (e) {
	15	+ // Check the broadcasts pagination was clicked.
	16	+ if (e.target.matches('ul.convertkit-broadcasts-pagination a')) {
	17	+ e.preventDefault();
15	18
16		- $( document ).on(
17		- 'click',
18		- 'ul.convertkit-broadcasts-pagination a',
19		- function( e ) {
	19	+ // Get block container and build object of data-* attributes.
	20	+ const blockContainer = e.target.closest(
	21	+ 'div.convertkit-broadcasts'
	22	+ );
	23	+ const atts = {
	24	+ display_date: blockContainer.dataset.displayDate,
	25	+ date_format: blockContainer.dataset.dateFormat,
	26	+ display_image: blockContainer.dataset.displayImage,
	27	+ display_description: blockContainer.dataset.displayDescription,
	28	+ display_read_more: blockContainer.dataset.displayReadMore,
	29	+ read_more_label: blockContainer.dataset.readMoreLabel,
	30	+ limit: blockContainer.dataset.limit,
	31	+ paginate: blockContainer.dataset.paginate,
	32	+ paginate_label_prev: blockContainer.dataset.paginateLabelPrev,
	33	+ paginate_label_next: blockContainer.dataset.paginateLabelNext,
	34	+ link_color: blockContainer.dataset.linkColor,
	35	+ page: e.target.dataset.page,
	36	+ };
20	37
21		- e.preventDefault();
	38	+ convertKitBroadcastsRender(blockContainer, atts);
	39	+ }
	40	+ });
	41	+});
22	42
23		- // Get block container and build object of data-* attributes.
24		- let blockContainer = $( this ).closest( 'div.convertkit-broadcasts' );
25		- let atts = {
26		- display_date: $( blockContainer ).data( 'display-date' ),
27		- date_format: $( blockContainer ).data( 'date-format' ),
28		- display_image: $( blockContainer ).data( 'display-image' ),
29		- display_description: $( blockContainer ).data( 'display-description' ),
30		- display_read_more: $( blockContainer ).data( 'display-read-more' ),
31		- read_more_label: $( blockContainer ).data( 'read-more-label' ),
32		- limit: $( blockContainer ).data( 'limit' ),
33		- paginate: $( blockContainer ).data( 'paginate' ),
34		- paginate_label_prev: $( blockContainer ).data( 'paginate-label-prev' ),
35		- paginate_label_next: $( blockContainer ).data( 'paginate-label-next' ),
36		- link_color: $( blockContainer ).data( 'link-color' ),
37		- page: $( this ).data( 'page' ), // Page is supplied as a data- attribute on the link clicked, not the container.
38		- nonce: $( this ).data( 'nonce' ) // Nonce is supplied as a data- attribute on the link clicked, not the container.
39		- };
40		-
41		- convertKitBroadcastsRender( blockContainer, atts );
42		-
43		- }
44		- );
45		-
46		- }
47		-);
48		-
49	43	/**
50	44	* Sends an AJAX request to request HTML based on the supplied block attributes,
51	45	* when pagination is used on a Broadcast block.
52	46	*
		@@ -51,54 +45,49 @@
51	45	* when pagination is used on a Broadcast block.
52	46	*
53	47	* @since 1.9.7.6
54	48	*
55		- * @param object blockContainer DOM object of the block to refresh the HTML in.
56		- * @param object atts Block attributes
	49	+ * @param {Object} blockContainer DOM object of the block to refresh the HTML in.
	50	+ * @param {Object} atts Block attributes
57	51	*/
58		-function convertKitBroadcastsRender( blockContainer, atts ) {
	52	+function convertKitBroadcastsRender(blockContainer, atts) {
	53	+ if (convertkit_broadcasts.debug) {
	54	+ console.log('convertKitBroadcastsRender()');
	55	+ console.log(atts);
	56	+ }
59	57
60		- ( function( $ ) {
	58	+ // Show loading indicator.
	59	+ blockContainer.classList.add('convertkit-broadcasts-loading');
61	60
62		- // Append action.
63		- atts.action = convertkit_broadcasts.action;
	61	+ // Build URL with query string parameters.
	62	+ const params = new URLSearchParams(atts);
	63	+ const url = `${convertkit_broadcasts.ajax_url}?${params.toString()}`;
64	64
65		- if ( convertkit_broadcasts.debug ) {
66		- console.log( 'convertKitBroadcastsRender()' );
67		- console.log( atts );
68		- }
	65	+ // Fetch HTML.
	66	+ fetch(url)
	67	+ .then(function (response) {
	68	+ if (convertkit_broadcasts.debug) {
	69	+ console.log(response);
	70	+ }
69	71
70		- // Show loading indicator.
71		- $( blockContainer ).addClass( 'convertkit-broadcasts-loading' );
	72	+ return response.json();
	73	+ })
	74	+ .then(function (result) {
	75	+ if (convertkit_broadcasts.debug) {
	76	+ console.log(result);
	77	+ }
72	78
73		- $.ajax(
74		- {
75		- url: convertkit_broadcasts.ajax_url,
76		- type: 'POST',
77		- async: true,
78		- data: atts,
79		- success: function( result ) {
80		- if ( convertkit_broadcasts.debug ) {
81		- console.log( result );
82		- }
	79	+ // Remove loading indicator.
	80	+ blockContainer.classList.remove('convertkit-broadcasts-loading');
83	81
84		- // Remove loading indicator.
85		- $( blockContainer ).removeClass( 'convertkit-broadcasts-loading' );
86		-
87		- // Replace block container's HTML with response data.
88		- $( blockContainer ).html( result.data );
89		- }
	82	+ // Replace block container's HTML with response data.
	83	+ blockContainer.innerHTML = result;
	84	+ })
	85	+ .catch(function (error) {
	86	+ if (convertkit.debug) {
	87	+ console.error(error);
90	88	}
91		- ).fail(
92		- function (response) {
93		- // Remove loading indicator.
94		- $( blockContainer ).removeClass( 'convertkit-broadcasts-loading' );
95	89
96		- if ( convertkit.debug ) {
97		- console.log( response );
98		- }
99		- }
100		- );
101		-
102		- } )( jQuery );
103		-
	90	+ // Remove loading indicator.
	91	+ blockContainer.classList.remove('convertkit-broadcasts-loading');
	92	+ });
104	93	}