Skip to content

Commit

Permalink
Run npm run format
Browse files Browse the repository at this point in the history
  • Loading branch information
@fmfernandes
fmfernandes committed Sep 5, 2024
1 parent 1d81c19 commit bedfe0d
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 68 deletions.
137 changes: 70 additions & 67 deletions assets/js/src/frontend.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

// Keep a record of the page we have loaded, per query.
const pages = {};

Expand All @@ -7,31 +6,31 @@ const pages = {};
* @param {string} str The query string for url
* @returns {query: number, page: number} | null
*/
const extractQueryParams = (str) => {
const extractQueryParams = ( str ) => {
// Default values
let query = null;
let page = null;

// Regular expressions to match query and page
const queryMatch = str.match(/query-(\d+)/);
const pageMatch = str.match(/page=(\d+)/);
const queryMatch = str.match( /query-(\d+)/ );
const pageMatch = str.match( /page=(\d+)/ );

// Extract and convert to integer if matches are found
if (queryMatch) {
query = parseInt(queryMatch[1], 10);
if ( queryMatch ) {
query = parseInt( queryMatch[ 1 ], 10 );
}

if (pageMatch) {
page = parseInt(pageMatch[1], 10);
if ( pageMatch ) {
page = parseInt( pageMatch[ 1 ], 10 );
}

// If either are null, return null
if (query === null || page === null) {
if ( query === null || page === null ) {
return null;
}

return { query, page };
}
};

/**
* Checks if a given query and page is in the pages object
Expand All @@ -41,13 +40,13 @@ const extractQueryParams = (str) => {
*
* @returns {boolean}
*/
const isPageLoaded = (query, page) => {
if (pages[query] && pages[query].includes(page)) {
const isPageLoaded = ( query, page ) => {
if ( pages[ query ] && pages[ query ].includes( page ) ) {
return true;
} else {
return false;
}
}
};

/**
* Logs a given query and page to the pages object
Expand All @@ -57,77 +56,81 @@ const isPageLoaded = (query, page) => {
*
* @returns {void}
*/
const logPage = (query, page) => {
if (!pages[query]) {
pages[query] = [];
const logPage = ( query, page ) => {
if ( ! pages[ query ] ) {
pages[ query ] = [];
}

pages[query].push(page);
}

pages[ query ].push( page );
};

const intersectionObserver = new IntersectionObserver((entries) => {
const intersectionObserver = new IntersectionObserver( ( entries ) => {
// If intersectionRatio is 0, the target is out of view.
if (entries[0].intersectionRatio <= 0) return;
if ( entries[ 0 ].intersectionRatio <= 0 ) return;

const $url = entries[0].target.href,
$container = entries[0].target
.closest('.wp-block-query')
.querySelector('.wp-block-post-template'),
$clickedButton = entries[0].target;
const $url = entries[ 0 ].target.href,
$container = entries[ 0 ].target
.closest( '.wp-block-query' )
.querySelector( '.wp-block-post-template' ),
$clickedButton = entries[ 0 ].target;

// Get the query and page from the button href.
const queryLoopParams = extractQueryParams($clickedButton.getAttribute('href'));
const queryLoopParams = extractQueryParams(
$clickedButton.getAttribute( 'href' )
);

// If we have a page and its not already in the pages array, add it.
if (queryLoopParams && isPageLoaded(queryLoopParams.query, queryLoopParams.page) === false) {
logPage(queryLoopParams.query, queryLoopParams.page);
fetchPosts($url, $container, $clickedButton);
if (
queryLoopParams &&
isPageLoaded( queryLoopParams.query, queryLoopParams.page ) === false
) {
logPage( queryLoopParams.query, queryLoopParams.page );
fetchPosts( $url, $container, $clickedButton );
}
});
} );

/**
*
* @param {*} url
* @param {*} container
* @param {*} clickedButton
*/
const fetchPosts = (url, container, clickedButton) => {
const fetchPosts = ( url, container, clickedButton ) => {
showLoader();

// Load posts via fetch from the button URL.
fetch(url, {
fetch( url, {
method: 'GET',
headers: {
'Content-Type': 'text/html',
},
})
.then(function (response) {
if (response.ok) {
} )
.then( function ( response ) {
if ( response.ok ) {
return response.text();
}
throw new Error('Network response was not ok.');
})
.then(function (data) {
throw new Error( 'Network response was not ok.' );
} )
.then( function ( data ) {
// Get the posts container.
const temp = document.createElement('div');
const temp = document.createElement( 'div' );
temp.innerHTML = data;
const posts = temp.querySelector('.wp-block-post-template');
const posts = temp.querySelector( '.wp-block-post-template' );

// Update the posts container.
container.insertAdjacentHTML('beforeend', posts.innerHTML);
container.insertAdjacentHTML( 'beforeend', posts.innerHTML );

// Update the window URL.
window.history.pushState({}, '', url);
window.history.pushState( {}, '', url );

// Remove button.
clickedButton.remove();

hideLoader();
})
.catch(function (error) {
console.error('Fetch error:', error);
});
} )
.catch( function ( error ) {
console.error( 'Fetch error:', error );
} );
};

/**
Expand All @@ -138,11 +141,11 @@ const showLoader = () => {
'.wp-load-more__infinite-scroll'
);

if (!$loader?.length) {
if ( ! $loader?.length ) {
return;
}

$loader[0].classList.add('loading');
$loader[ 0 ].classList.add( 'loading' );
};

/**
Expand All @@ -153,54 +156,54 @@ const hideLoader = () => {
'.wp-load-more__infinite-scroll'
);

if (!$loader?.length) {
if ( ! $loader?.length ) {
return;
}

$loader[0].classList.remove('loading');
$loader[ 0 ].classList.remove( 'loading' );
intersectionObserver.observe(
document.querySelector('.wp-load-more__button')
document.querySelector( '.wp-load-more__button' )
);
};

/**
*
*/
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener( 'DOMContentLoaded', function () {
'use strict';

// Cache selectors.
const buttons = document.querySelectorAll('.wp-load-more__button');
const buttons = document.querySelectorAll( '.wp-load-more__button' );
const infiniteScroll = document.querySelectorAll(
'.wp-load-more__infinite-scroll'
);

// Attach handlers all to all load more buttons.
if (buttons?.length) {
buttons.forEach(function (button) {
button.addEventListener('click', function (e) {
if ( buttons?.length ) {
buttons.forEach( function ( button ) {
button.addEventListener( 'click', function ( e ) {
e.preventDefault();

const thisButton = e.target,
container = thisButton
.closest('.wp-block-query')
.querySelector('.wp-block-post-template'),
url = thisButton.getAttribute('href');
.closest( '.wp-block-query' )
.querySelector( '.wp-block-post-template' ),
url = thisButton.getAttribute( 'href' );

// Update button text.
thisButton.innerText =
thisButton.getAttribute('data-loading-text');
thisButton.getAttribute( 'data-loading-text' );

fetchPosts(url, container, thisButton);
});
});
fetchPosts( url, container, thisButton );
} );
} );
}

// Add infinite scroll watchers if infinite scroll is enabled.
if (infiniteScroll?.length) {
if ( infiniteScroll?.length ) {
// start observing
intersectionObserver.observe(
document.querySelector('.wp-load-more__button')
document.querySelector( '.wp-load-more__button' )
);
}
});
} );
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit bedfe0d

Please sign in to comment.