components
1 year ago
block.json
1 year ago
edit.js
1 year ago
index.js
1 year ago
looper.js
1 year ago
query-parameters.js
1 year ago
save.js
1 year ago
templates.js
1 year ago
toolbar-appenders.js
1 year ago
looper.js
88 lines
| 1 | const SELECTOR = 'a[data-gb-prefetch][href]'; |
| 2 | |
| 3 | function fetchPrefetchedPage( url ) { |
| 4 | return fetch( url ) |
| 5 | .then( ( response ) => { |
| 6 | if ( ! response.ok ) { |
| 7 | throw new Error( 'Network error' ); |
| 8 | } |
| 9 | return response.text(); |
| 10 | } ) |
| 11 | .catch( ( error ) => { |
| 12 | console.error( 'Error fetching prefetched page:', error ); // eslint-disable-line no-console |
| 13 | } ); |
| 14 | } |
| 15 | |
| 16 | function scrollIfNeeded( container ) { |
| 17 | const rect = container.getBoundingClientRect(); |
| 18 | const isTopInView = rect.top >= 0 && rect.top <= ( window.innerHeight || document.documentElement.clientHeight ); |
| 19 | |
| 20 | if ( ! isTopInView ) { |
| 21 | container.scrollIntoView( { behavior: 'smooth', block: 'start' } ); |
| 22 | } |
| 23 | } |
| 24 | |
| 25 | function updatePostsContainer( region = '', prefetchedContent = '' ) { |
| 26 | const container = document.querySelector( `[data-gb-router-region="${ region }"]` ); |
| 27 | if ( ! container || ! prefetchedContent ) { |
| 28 | throw new Error( 'Missing container or prefetched content' ); |
| 29 | } |
| 30 | const paginationContainer = container.parentNode.querySelector( '.gb-query-loop-pagination' ); |
| 31 | |
| 32 | const prefetchedContainer = document.createElement( 'div' ); |
| 33 | prefetchedContainer.innerHTML = prefetchedContent; |
| 34 | |
| 35 | const prefetchedPosts = prefetchedContainer.querySelector( `[data-gb-router-region="${ region }"]` ); |
| 36 | const pagination = prefetchedPosts.parentNode.querySelector( '.gb-query-loop-pagination' ); |
| 37 | |
| 38 | if ( prefetchedPosts && container ) { |
| 39 | container.innerHTML = prefetchedPosts.innerHTML; |
| 40 | scrollIfNeeded( container ); |
| 41 | paginationContainer.innerHTML = pagination.innerHTML; |
| 42 | } else { |
| 43 | console.error( 'Unable to update posts container: Missing elements' ); // eslint-disable-line no-console |
| 44 | } |
| 45 | } |
| 46 | |
| 47 | const store = {}; |
| 48 | |
| 49 | document.body.addEventListener( 'mouseenter', function( e ) { |
| 50 | const prefetchLink = e.target.closest( SELECTOR ); |
| 51 | if ( prefetchLink ) { |
| 52 | const isStored = store[ prefetchLink.href ] ?? false; |
| 53 | |
| 54 | if ( isStored ) { |
| 55 | return; |
| 56 | } |
| 57 | |
| 58 | const link = document.createElement( 'link' ); |
| 59 | link.rel = 'prefetch'; |
| 60 | link.href = prefetchLink.href; |
| 61 | document.head.appendChild( link ); |
| 62 | |
| 63 | store[ prefetchLink.href ] = true; |
| 64 | } |
| 65 | }, true ); |
| 66 | |
| 67 | document.addEventListener( 'click', ( e ) => { |
| 68 | const target = e.target.closest( SELECTOR ); |
| 69 | |
| 70 | if ( target && target.href ) { |
| 71 | const region = target.getAttribute( 'data-gb-router-target' ); |
| 72 | |
| 73 | if ( ! region ) { |
| 74 | return; |
| 75 | } |
| 76 | |
| 77 | e.preventDefault(); // Prevent default link behavior |
| 78 | const url = target.href; |
| 79 | fetchPrefetchedPage( url ) |
| 80 | .then( ( prefetchedContent ) => { |
| 81 | // Update the list of posts with content from the prefetched page |
| 82 | updatePostsContainer( region, prefetchedContent ); |
| 83 | // Navigate to the prefetched URL using History API |
| 84 | history.pushState( null, '', url ); |
| 85 | } ); |
| 86 | } |
| 87 | } ); |
| 88 |