← All changes | modules/related-posts/related-posts.js +97 -103 12.2.3 → 16.3-a.1 View file →

		@@ -11,9 +11,9 @@
11	11
12	12	/**
13	13	* Utility get related posts JSON endpoint from URLs
14	14	*
15		- * @param {string} URL (optional)
	15	+ * @param {string} URL (optional)
16	16	* @return {string} Endpoint URL
17	17	*/
18	18	getEndpointURL: function ( URL ) {
19	19	var locationObject,
		@@ -58,11 +58,10 @@
58	58	}
59	59
60	60	if ( '' === locationObject.search ) {
61	61	return pathname + '?' + args;
62		- } else {
63		- return pathname + locationObject.search + '&' + args;
64	62	}
	63	+ return pathname + locationObject.search + '&' + args;
65	64	},
66	65
67	66	getAnchor: function ( post, classNames ) {
68	67	var anchorTitle = post.title;
		@@ -76,21 +75,26 @@
76	75	if ( '' !== post.rel ) {
77	76	anchor.setAttribute( 'rel', post.rel );
78	77	}
79	78
	79	+ return anchor;
	80	+ },
	81	+
	82	+ cleanHtml: function ( str ) {
80	83	var div = document.createElement( 'div' );
81		- div.appendChild( anchor );
82		-
83		- var anchorHTML = div.innerHTML;
84		- return [ anchorHTML.substring( 0, anchorHTML.length - 4 ), '</a>' ];
	84	+ div.innerHTML = str;
	85	+ return div.textContent || div.innerText || '';
85	86	},
86	87
87		- generateMinimalHtml: function ( posts, options ) {
	88	+ generateMinimalDiv: function ( posts, options ) {
88	89	var self = this;
89		- var html = '';
	90	+ var div = document.createElement( 'div' );
	91	+ div.setAttribute(
	92	+ 'class',
	93	+ 'jp-relatedposts-items jp-relatedposts-items-minimal jp-relatedposts-' + options.layout
	94	+ );
90	95
91	96	posts.forEach( function ( post, index ) {
92		- var anchor = self.getAnchor( post, 'jp-relatedposts-post-a' );
93	97	var classes = 'jp-relatedposts-post jp-relatedposts-post' + index;
94	98
95	99	if ( post.classes.length > 0 ) {
96	100	classes += ' ' + post.classes.join( ' ' );
		@@ -95,50 +99,48 @@
95	99	if ( post.classes.length > 0 ) {
96	100	classes += ' ' + post.classes.join( ' ' );
97	101	}
98	102
99		- html +=
100		- '<p class="' +
101		- classes +
102		- '" data-post-id="' +
103		- post.id +
104		- '" data-post-format="' +
105		- post.format +
106		- '">';
107		- html +=
108		- '<span class="jp-relatedposts-post-title">' +
109		- anchor[ 0 ] +
110		- post.title +
111		- anchor[ 1 ] +
112		- '</span>';
	103	+ var p = document.createElement( 'p' );
	104	+ p.setAttribute( 'class', classes );
	105	+ p.setAttribute( 'data-post-id', post.id );
	106	+ p.setAttribute( 'data-post-format', post.format );
	107	+ div.appendChild( p );
	108	+
	109	+ var titleSpan = document.createElement( 'span' );
	110	+ titleSpan.setAttribute( 'class', 'jp-relatedposts-post-title' );
	111	+ p.appendChild( titleSpan );
	112	+
	113	+ var anchor = self.getAnchor( post, 'jp-relatedposts-post-a' );
	114	+ titleSpan.appendChild( anchor );
	115	+ anchor.textContent = self.cleanHtml( post.title );
	116	+
113	117	if ( options.showDate ) {
114		- html +=
115		- '<time class="jp-relatedposts-post-date" datetime="' +
116		- post.date +
117		- '">' +
118		- post.date +
119		- '</time>';
	118	+ var timeElt = document.createElement( 'time' );
	119	+ timeElt.setAttribute( 'class', 'jp-relatedposts-post-date' );
	120	+ timeElt.setAttribute( 'datetime', post.date );
	121	+ timeElt.textContent = post.date;
	122	+ p.appendChild( timeElt );
120	123	}
121	124	if ( options.showContext ) {
122		- html += '<span class="jp-relatedposts-post-context">' + post.context + '</span>';
	125	+ var contextSpan = document.createElement( 'span' );
	126	+ contextSpan.setAttribute( 'class', 'jp-relatedposts-post-context' );
	127	+ contextSpan.textContent = self.cleanHtml( post.context );
	128	+ p.appendChild( contextSpan );
123	129	}
124		- html += '</p>';
125	130	} );
126		- return (
127		- '<div class="jp-relatedposts-items jp-relatedposts-items-minimal jp-relatedposts-' +
128		- options.layout +
129		- ' ">' +
130		- html +
131		- '</div>'
132		- );
	131	+ return div;
133	132	},
134	133
135		- generateVisualHtml: function ( posts, options ) {
	134	+ generateVisualDiv: function ( posts, options ) {
136	135	var self = this;
137		- var html = '';
	136	+ var div = document.createElement( 'div' );
	137	+ div.setAttribute(
	138	+ 'class',
	139	+ 'jp-relatedposts-items jp-relatedposts-items-visual jp-relatedposts-' + options.layout
	140	+ );
138	141
139	142	posts.forEach( function ( post, index ) {
140		- var anchor = self.getAnchor( post, 'jp-relatedposts-post-a' );
141	143	var classes = 'jp-relatedposts-post jp-relatedposts-post' + index;
142	144
143	145	if ( post.classes.length > 0 ) {
144	146	classes += ' ' + post.classes.join( ' ' );
		@@ -149,71 +151,67 @@
149	151	} else {
150	152	classes += ' jp-relatedposts-post-thumbs';
151	153	}
152	154
153		- var dummyContainer = document.createElement( 'p' );
154		- dummyContainer.innerHTML = post.excerpt;
155		- var excerpt = dummyContainer.textContent;
	155	+ var innerDiv = document.createElement( 'div' );
	156	+ innerDiv.setAttribute( 'class', classes );
	157	+ innerDiv.setAttribute( 'data-post-id', post.id );
	158	+ innerDiv.setAttribute( 'data-post-format', post.format );
	159	+ div.appendChild( innerDiv );
156	160
157		- html +=
158		- '<div class="' +
159		- classes +
160		- '" data-post-id="' +
161		- post.id +
162		- '" data-post-format="' +
163		- post.format +
164		- '">';
165	161	if ( post.img.src ) {
166		- html +=
167		- anchor[ 0 ] +
168		- '<img class="jp-relatedposts-post-img" loading="lazy" src="' +
169		- post.img.src +
170		- '" width="' +
171		- post.img.width +
172		- '" height="' +
173		- post.img.height +
174		- '" alt="' +
175		- post.img.alt_text +
176		- '" />' +
177		- anchor[ 1 ];
	162	+ var imgAnchor = self.getAnchor( post, 'jp-relatedposts-post-a' );
	163	+ innerDiv.appendChild( imgAnchor );
	164	+
	165	+ var img = document.createElement( 'img' );
	166	+ img.setAttribute( 'class', 'jp-relatedposts-post-img' );
	167	+ img.setAttribute( 'loading', 'lazy' );
	168	+ img.setAttribute( 'src', post.img.src );
	169	+ img.setAttribute( 'width', post.img.width );
	170	+ img.setAttribute( 'height', post.img.height );
	171	+ if ( post.img.srcset ) {
	172	+ img.setAttribute( 'srcset', post.img.srcset );
	173	+ }
	174	+ if ( post.img.sizes ) {
	175	+ img.setAttribute( 'sizes', post.img.sizes );
	176	+ }
	177	+ img.setAttribute( 'alt', post.img.alt_text );
	178	+ imgAnchor.appendChild( img );
178	179	} else {
179	180	var anchor_overlay = self.getAnchor(
180	181	post,
181	182	'jp-relatedposts-post-a jp-relatedposts-post-aoverlay'
182	183	);
183		- html += anchor_overlay[ 0 ] + anchor_overlay[ 1 ];
	184	+ innerDiv.appendChild( anchor_overlay );
184	185	}
185		- html +=
186		- '<' +
187		- related_posts_js_options.post_heading +
188		- ' class="jp-relatedposts-post-title">' +
189		- anchor[ 0 ] +
190		- post.title +
191		- anchor[ 1 ] +
192		- '</' +
193		- related_posts_js_options.post_heading +
194		- '>';
195		- html += '<p class="jp-relatedposts-post-excerpt">' + excerpt + '</p>';
	186	+ var heading = document.createElement( related_posts_js_options.post_heading );
	187	+ heading.setAttribute( 'class', 'jp-relatedposts-post-title' );
	188	+ innerDiv.appendChild( heading );
	189	+
	190	+ var headingAnchor = self.getAnchor( post, 'jp-relatedposts-post-a' );
	191	+ headingAnchor.textContent = self.cleanHtml( post.title );
	192	+ heading.appendChild( headingAnchor );
	193	+
	194	+ var p = document.createElement( 'p' );
	195	+ p.setAttribute( 'class', 'jp-relatedposts-post-excerpt' );
	196	+ p.textContent = self.cleanHtml( post.excerpt );
	197	+ innerDiv.appendChild( p );
	198	+
196	199	if ( options.showDate ) {
197		- html +=
198		- '<time class="jp-relatedposts-post-date" datetime="' +
199		- post.date +
200		- '">' +
201		- post.date +
202		- '</time>';
	200	+ var timeElt = document.createElement( 'time' );
	201	+ timeElt.setAttribute( 'class', 'jp-relatedposts-post-date' );
	202	+ timeElt.setAttribute( 'datetime', post.date );
	203	+ timeElt.textContent = post.date;
	204	+ innerDiv.appendChild( timeElt );
203	205	}
204	206	if ( options.showContext ) {
205		- html += '<p class="jp-relatedposts-post-context">' + post.context + '</p>';
	207	+ var contextP = document.createElement( 'p' );
	208	+ contextP.setAttribute( 'class', 'jp-relatedposts-post-context' );
	209	+ contextP.textContent = self.cleanHtml( post.context );
	210	+ innerDiv.appendChild( contextP );
206	211	}
207		- html += '</div>';
208	212	} );
209		- return (
210		- '<div class="jp-relatedposts-items jp-relatedposts-items-visual jp-relatedposts-' +
211		- options.layout +
212		- ' ">' +
213		- html +
214		- '</div>'
215		- );
	213	+ return div;
216	214	},
217	215
218	216	/**
219	217	* We want to set a max height on the excerpt however we want to set
		@@ -252,11 +250,10 @@
252	250	}
253	251
254	252	if ( '' === anchor.search ) {
255	253	return pathname + '?' + args;
256		- } else {
257		- return pathname + anchor.search + '&' + args;
258	254	}
	255	+ return pathname + anchor.search + '&' + args;
259	256	},
260	257
261	258	cleanupTrackedUrl: function () {
262	259	if ( 'function' !== typeof history.replaceState ) {
		@@ -293,9 +290,8 @@
293	290	function startRelatedPosts() {
294	291	jprp.cleanupTrackedUrl();
295	292
296	293	var endpointURL = jprp.getEndpointURL();
297		- var relatedPosts = document.querySelector( '#jp-relatedposts' );
298	294
299	295	if ( ! endpointURL ) {
300	296	return;
301	297	}
		@@ -304,8 +300,9 @@
304	300	afterPostsHaveLoaded();
305	301	return;
306	302	}
307	303
	304	+ var relatedPosts = document.querySelector( '#jp-relatedposts' );
308	305	var request = new XMLHttpRequest();
309	306	request.open( 'GET', endpointURL, true );
310	307	request.setRequestHeader( 'x-requested-with', 'XMLHttpRequest' );
311	308
		@@ -319,10 +316,9 @@
319	316	}
320	317
321	318	jprp.response = response;
322	319
323		- var html,
324		- showThumbnails,
	320	+ var showThumbnails,
325	321	options = {};
326	322
327	323	if ( 'undefined' !== typeof wp && wp.customize ) {
328	324	showThumbnails = wp.customize.instance( 'jetpack_relatedposts[show_thumbnails]' ).get();
		@@ -337,15 +333,13 @@
337	333	options.showContext = response.show_context;
338	334	options.layout = response.layout;
339	335	}
340	336
341		- html = ! showThumbnails
342		- ? jprp.generateMinimalHtml( response.items, options )
343		- : jprp.generateVisualHtml( response.items, options );
	337	+ var div = ! showThumbnails
	338	+ ? jprp.generateMinimalDiv( response.items, options )
	339	+ : jprp.generateVisualDiv( response.items, options );
344	340
345		- var div = document.createElement( 'div' );
346	341	relatedPosts.appendChild( div );
347		- div.outerHTML = html;
348	342
349	343	if ( options.showDate ) {
350	344	var dates = relatedPosts.querySelectorAll( '.jp-relatedposts-post-date' );
351	345
		@@ -355,9 +349,9 @@
355	349	}
356	350
357	351	relatedPosts.style.display = 'block';
358	352	afterPostsHaveLoaded();
359		- } catch ( error ) {
	353	+ } catch {
360	354	// Do nothing
361	355	}
362	356	}
363	357	};