From 4d440aefeb8c1359f279a4873da53c959e3001b9 Mon Sep 17 00:00:00 2001
From: cupcakearmy <nicco.borgioli@gmail.com>
Date: Fri, 6 Sep 2019 22:46:32 +0200
Subject: [PATCH] lazy load remaining posts

---
 liquet/functions.php   | 33 ++++++++++++++++++++++++++++++++-
 liquet/js/lazy_load.js | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 liquet/js/lazy_load.js

diff --git a/liquet/functions.php b/liquet/functions.php
index 8f5c9d9..a5414fd 100644
--- a/liquet/functions.php
+++ b/liquet/functions.php
@@ -19,7 +19,7 @@ add_filter( 'wp_headers', function ( $headers ) {
 
 add_action( 'wp_enqueue_scripts', function () {
 	// JS
-	wp_enqueue_script( 'liquet-lights', get_template_directory_uri() . '/js/lights.js' );
+	wp_enqueue_script( 'liquet-main', get_template_directory_uri() . '/js/main.js' );
 
 	// CSS
 	wp_enqueue_style( 'flex', get_template_directory_uri() . '/css/flex.css' );
@@ -28,8 +28,39 @@ add_action( 'wp_enqueue_scripts', function () {
 	wp_enqueue_style( 'liquet-singular', get_template_directory_uri() . '/css/singular.css' );
 	wp_enqueue_style( 'liquet-logos', get_template_directory_uri() . '/css/logos.css' );
 	wp_enqueue_style( 'fonts', get_template_directory_uri() . '/vendor/fonts/import.css' );
+
+	// Lazy loading
+	global $wp_query;
+	wp_register_script( 'lazy_loading', get_template_directory_uri() . '/js/lazy_load.js', array( 'jquery' ) );
+	wp_localize_script( 'lazy_loading', 'lazy_load_params', array(
+		'ajaxurl'      => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
+		'posts'        => json_encode( $wp_query->query_vars ), // everything about your loop is here
+		'current_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
+		'max_page'     => $wp_query->max_num_pages
+	) );
+
+	wp_enqueue_script( 'lazy_loading' );
 } );
 
+
+function lazy_load_ajax_handler() {
+	$args                = json_decode( stripslashes( $_POST['query'] ), true );
+	$args['paged']       = $_POST['page'] + 1; // we need next page to be loaded
+	$args['post_status'] = 'publish';
+	query_posts( $args );
+
+	if ( have_posts() ) {
+		while ( have_posts() ) {
+			the_post();
+			get_template_part( 'post-preview', get_post_format() );
+		}
+	}
+	die;
+}
+
+add_action( 'wp_ajax_lazy_load', 'lazy_load_ajax_handler' );
+add_action( 'wp_ajax_nopriv_lazy_load', 'lazy_load_ajax_handler' );
+
 add_action( 'widgets_init', function () {
 
 	register_sidebar( array(
diff --git a/liquet/js/lazy_load.js b/liquet/js/lazy_load.js
new file mode 100644
index 0000000..d515e1e
--- /dev/null
+++ b/liquet/js/lazy_load.js
@@ -0,0 +1,37 @@
+jQuery(($) => {
+    const bottomOffset = 300
+    const app = document.getElementById('app')
+    let loading = false
+
+    function load() {
+
+        const pixelToBottom = this.scrollHeight - (this.scrollTop + this.clientHeight)
+
+        if (!loading && pixelToBottom < bottomOffset) {
+            console.log('Loading...')
+            loading = true
+            $.ajax({
+                url: lazy_load_params.ajaxurl,
+                data: {
+                    'action': 'lazy_load',
+                    'query': lazy_load_params.posts,
+                    'page': lazy_load_params.current_page
+                },
+                type: 'POST',
+                success: function (data) {
+                    if (data) {
+                        $('#list').find('hr:last-of-type').after(data) // where to insert posts
+                        lazy_load_params.current_page++
+                        loading = false
+                    }
+                }
+            })
+        }
+    }
+
+    // Bind to the scroll event
+    $('#app').scroll(load)
+
+    // Check initial page if they need loading
+    load.bind(app)()
+})
\ No newline at end of file