@automattic/newspack-blocks - npm Package Compare versions

Comparing version 4.2.0-epic-ras-acc.20 to 4.2.0-epic-ras-acc.21

dist/blocks/homepage-articles/block.json

@@ -13,2 +13,6 @@ {
     },
+    "showFullContent": {
+      "type": "boolean",
+      "default": false
+    },
     "excerptLength": {
@@ -22,2 +26,6 @@ "type": "number",
     },
+    "infiniteScroll": {
+      "type": "boolean",
+      "default": false
+    },
     "readMoreLabel": {
@@ -24,0 +32,0 @@ "type": "string",

dist/homepage-articles/view.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";function t(e,r){const s=new XMLHttpRequest;s.onreadystatechange=()=>{if(4===s.readyState){if(s.status>=200&&s.status<300){const t=JSON.parse(s.responseText);return e.onSuccess(t)}return r?t(e,r-1):e.onError()}},s.open("GET",e.url),s.send()}function e(t,e){return Object.prototype.hasOwnProperty.call(t,e)}Array.prototype.forEach.call(document.querySelectorAll(".wp-block-newspack-blocks-homepage-articles.has-more-button"),(function(r){const s=r.querySelector("[data-next]");if(!s)return;const n=r.querySelector("[data-posts]");let o=!1,i=!1;s.addEventListener("click",(()=>{if(o||i)return!1;function a(){o=!1,r.classList.remove("is-loading"),r.classList.add("is-error")}o=!0,r.classList.remove("is-error"),r.classList.add("is-loading"),t({url:s.getAttribute("data-next")+"&exclude_ids="+function(){const t=document.querySelectorAll("[class^='wp-block-newspack-blocks'] [data-post-id]"),e=Array.from(t).map((t=>t.getAttribute("data-post-id")));return e.push(document.querySelector("div[data-current-post-id]").getAttribute("data-current-post-id")),[...new Set(e)]}().join(","),onSuccess:function(t){if(!function(t){let r=!1;return t&&e(t,"items")&&Array.isArray(t.items)&&e(t,"next")&&"string"==typeof t.next&&(r=!0,!t.items.length||e(t.items[0],"html")&&"string"==typeof t.items[0].html||(r=!1)),r}(t))return a();if(t.items.length){const e=t.items.map((t=>t.html)).join("");n.insertAdjacentHTML("beforeend",e)}t.next&&s.setAttribute("data-next",t.next),t.items.length&&t.next||(i=!0,r.classList.remove("has-more-button")),o=!1,r.classList.remove("is-loading")},onError:a},3)}))}))})();
+(()=>{"use strict";function e(t,n){const s=new XMLHttpRequest;s.onreadystatechange=()=>{if(4===s.readyState){if(s.status>=200&&s.status<300){const e=JSON.parse(s.responseText);return t.onSuccess(e)}return n?e(t,n-1):t.onError()}},s.open("GET",t.url),s.send()}function t(e,t){return Object.prototype.hasOwnProperty.call(e,t)}Array.prototype.forEach.call(document.querySelectorAll(".wp-block-newspack-blocks-homepage-articles.has-more-button"),(function(n){const s=n.querySelector("[data-next]");if(!s)return;const o=n.querySelector("[data-posts]"),r=s.getAttribute("data-infinite-scroll");window.newspackBlocksIsFetching=window.newspackBlocksIsFetching||!1,window.newspackBlocksFetchQueue=window.newspackBlocksFetchQueue||[];let c=!1,i=!1;const a=()=>{i||(i=!0,u())},u=()=>{if(c)return!1;n.classList.remove("is-error"),n.classList.add("is-loading");const t=s.getAttribute("data-next")+"&exclude_ids="+function(){const e=document.querySelectorAll("[class^='wp-block-newspack-blocks'] [data-post-id]"),t=Array.from(e).map((e=>e.getAttribute("data-post-id")));return t.push(document.querySelector("div[data-current-post-id]").getAttribute("data-current-post-id")),[...new Set(t)]}().join(",");if(window.newspackBlocksIsFetching)return window.newspackBlocksFetchQueue.push(u),!1;window.newspackBlocksIsFetching=!0,e({url:t,onSuccess:l,onError:d},3)};function l(e){if(!function(e){let n=!1;return e&&t(e,"items")&&Array.isArray(e.items)&&t(e,"next")&&"string"==typeof e.next&&(n=!0,!e.items.length||t(e.items[0],"html")&&"string"==typeof e.items[0].html||(n=!1)),n}(e))return d();if(e.items.length){const t=e.items.map((e=>e.html)).join("");o.insertAdjacentHTML("beforeend",t)}e.next&&s.setAttribute("data-next",e.next),e.items.length&&e.next||(c=!0,n.classList.remove("has-more-button")),w()}function d(){n.classList.add("is-error"),w()}function w(){window.newspackBlocksIsFetching=!1,n.classList.remove("is-loading"),window.newspackBlocksFetchQueue.length&&window.newspackBlocksFetchQueue.shift()(),i=!1}s.addEventListener("click",a),r&&new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting&&a()}))}),{root:null,rootMargin:"0px",threshold:1}).observe(s)}))})();

package.json

 {
 	"name": "@automattic/newspack-blocks",
-	"version": "4.2.0-epic-ras-acc.20",
+	"version": "4.2.0-epic-ras-acc.21",
 	"author": "Automattic",
@@ -5,0 +5,0 @@ "devDependencies": {

src/blocks/homepage-articles/block.json

@@ -13,2 +13,6 @@ {
 		},
+		"showFullContent": {
+			"type": "boolean",
+			"default": false
+		},
 		"excerptLength": {
@@ -22,2 +26,6 @@ "type": "number",
 		},
+		"infiniteScroll": {
+			"type": "boolean",
+			"default": false
+		},
 		"readMoreLabel": {
@@ -219,5 +227,3 @@ "type": "string",
 			"type": "array",
-			"default": [
-				"post"
-			],
+			"default": ["post"],
 			"items": {
@@ -233,5 +239,3 @@ "type": "string"
 			"type": "array",
-			"default": [
-				"publish"
-			],
+			"default": ["publish"],
 			"items": {
@@ -246,2 +250,2 @@ "type": "string"
 	}
-}
+}

src/blocks/homepage-articles/utils.ts

@@ -164,2 +164,3 @@ /**
 		},
+		full_content: __('Full post content.', 'newspack-blocks'),
 		post_link: '/',
@@ -166,0 +167,0 @@ featured_media: '1',

src/blocks/homepage-articles/view.js

@@ -38,15 +38,24 @@ /**
 	const postsContainerEl = blockWrapperEl.querySelector( '[data-posts]' );
+	const isInfiniteScroll = btnEl.getAttribute( 'data-infinite-scroll' );
 
 	// Set initial state flags.
-	let isFetching = false;
+	window.newspackBlocksIsFetching = window.newspackBlocksIsFetching || false;
+	window.newspackBlocksFetchQueue = window.newspackBlocksFetchQueue || [];
 	let isEndOfData = false;
+	let isPending = false;
 
-	btnEl.addEventListener( 'click', () => {
-		// Early return if still fetching or no more posts to render.
-		if ( isFetching || isEndOfData ) {
+	const maybeLoadMore = () => {
+		if ( isPending ) {
+			return;
+		}
+		isPending = true;
+		loadMore();
+	};
+
+	const loadMore = () => {
+		// Early return if no more posts to render.
+		if ( isEndOfData ) {
 			return false;
 		}
 
-		isFetching = true;
-
 		blockWrapperEl.classList.remove( 'is-error' );
@@ -59,44 +68,82 @@ blockWrapperEl.classList.add( 'is-loading' );
 
+		// If there's already a fetch in progress, queue this one to run after it ends.
+		if ( window.newspackBlocksIsFetching ) {
+			window.newspackBlocksFetchQueue.push( loadMore );
+			return false;
+		}
+
+		window.newspackBlocksIsFetching = true;
 		fetchWithRetry( { url: requestURL, onSuccess, onError }, fetchRetryCount );
+	};
 
-		/**
-		 * @param {Object} data Post data
-		 */
-		function onSuccess( data ) {
-			// Validate received data.
-			if ( ! isPostsDataValid( data ) ) {
-				return onError();
-			}
+	/**
+	 * @param {Object} data Post data
+	 */
+	function onSuccess( data ) {
+		// Validate received data.
+		if ( ! isPostsDataValid( data ) ) {
+			return onError();
+		}
 
-			if ( data.items.length ) {
-				// Render posts' HTML from string.
-				const postsHTML = data.items.map( item => item.html ).join( '' );
-				postsContainerEl.insertAdjacentHTML( 'beforeend', postsHTML );
-			}
+		if ( data.items.length ) {
+			// Render posts' HTML from string.
+			const postsHTML = data.items.map( item => item.html ).join( '' );
+			postsContainerEl.insertAdjacentHTML( 'beforeend', postsHTML );
+		}
 
-			if ( data.next ) {
-				// Save next URL as button's attribute.
-				btnEl.setAttribute( 'data-next', data.next );
-			}
+		if ( data.next ) {
+			// Save next URL as button's attribute.
+			btnEl.setAttribute( 'data-next', data.next );
+		}
 
-			if ( ! data.items.length || ! data.next ) {
-				isEndOfData = true;
-				blockWrapperEl.classList.remove( 'has-more-button' );
-			}
+		if ( ! data.items.length || ! data.next ) {
+			isEndOfData = true;
+			blockWrapperEl.classList.remove( 'has-more-button' );
+		}
 
-			isFetching = false;
+		onEnd();
+	}
 
-			blockWrapperEl.classList.remove( 'is-loading' );
+	/**
+	 * Handle fetching error
+	 */
+	function onError() {
+		blockWrapperEl.classList.add( 'is-error' );
+		onEnd();
+	}
+
+	/**
+	 * Callback to run after a fetch request is completed.
+	 */
+	function onEnd() {
+		window.newspackBlocksIsFetching = false;
+		blockWrapperEl.classList.remove( 'is-loading' );
+
+		// If there are queued fetches, run the next one.
+		if ( window.newspackBlocksFetchQueue.length ) {
+			window.newspackBlocksFetchQueue.shift()();
 		}
+		isPending = false;
+	}
 
-		/**
-		 * Handle fetching error
-		 */
-		function onError() {
-			isFetching = false;
+	btnEl.addEventListener( 'click', maybeLoadMore );
 
-			blockWrapperEl.classList.remove( 'is-loading' );
-			blockWrapperEl.classList.add( 'is-error' );
-		}
-	} );
+	if ( isInfiniteScroll ) {
+		// Create an intersection observer instance
+		const btnObserver = new IntersectionObserver(
+			entries => {
+				entries.forEach( entry => {
+					if ( entry.isIntersecting ) {
+						maybeLoadMore();
+					}
+				} );
+			},
+			{
+				root: null,
+				rootMargin: '0px',
+				threshold: 1,
+			}
+		);
+		btnObserver.observe( btnEl );
+	}
 }
@@ -103,0 +150,0 @@

src/types/index.d.ts

@@ -68,2 +68,3 @@ declare global {
 		};
+		full_content: string;
 		meta: {
@@ -108,2 +109,3 @@ newspack_post_subtitle: string;
 		showExcerpt: boolean;
+		showFullContent: boolean;
 		tags: TagId[];
@@ -117,3 +119,2 @@ customTaxonomies: Taxonomy[];
 		className: string;
-		showExcerpt: boolean;
 		excerptLength: number;
@@ -131,2 +132,3 @@ showReadMore: boolean;
 		moreButton: boolean;
+		infiniteScroll: boolean;
 		moreButtonText: string;
@@ -133,0 +135,0 @@ showAuthor: boolean;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4042617

increased by0.11%

Lines of code

15449

increased by0.66%

No dependency changes