@everymatrix/casino-games-category-section 0.0.192 → 0.0.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "0.0.192",
+  "version": "0.0.193",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "90772f9f46872463853a444005e5adbfb07fc973"
+  "gitHead": "0960983a499b8cd9494500f0f36058fdc61fbead"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -71,6 +71,9 @@
   let getFavoredGamesCache:any = undefined;
   let mostPlayedScreen:Boolean = false;
   let customStylingContainer:HTMLElement;
+  let validObservers:boolean = false;
+
+  let thumbnailContainer:Array<HTMLElement> = new Array(1000);
 
   let favoriteGamesData:any = {
     items: [],
@@ -83,6 +86,19 @@
     addNewMessages(item, GamesCategorySectionTranslations[item]);
   });
 
+  // IntersectionObserver used for loading more games
+  let observer = new IntersectionObserver((entries, observerRef) => {
+    entries.forEach(async (entry) => {
+      let index = entry.target.elems_index; // eslint-disable-line
+
+      if (entry.isIntersecting) {
+        if (index * 1.2 > limit ) {
+          loadMoreGames(categoryid);
+        }
+      }
+    });
+  });
+
   // Start favored games section
   const getFavoredGames = (url:string, sessionId:string, userId:string) => {
     let options = {
@@ -241,6 +257,7 @@
           showLoadCategory = true;
           searchItem = false;
           mostPlayedScreen = false;
+          validObservers = false;
 
           if (e.data.receivedFavoriteResults) {
             favoriteGames = e.data.receivedFavoriteResults.items;
@@ -268,6 +285,7 @@
           searchItem = false;
           mostPlayedScreen = false;
           showLoadCategory = false;
+          validObservers = true;
           categoryid = e.data.itemId;
 
           getData(categoryid, 0, limit).then((res:any) => {
@@ -345,9 +363,9 @@
 
   // @TODO categoryId type fix
   const loadMoreGames = (categoryId:any) => {
-    limit += 20;
-    if (limit <= maxTotal) {
+    limit += 10;
 
+    if (limit <= maxTotal) {
       getData(categoryId, offset, limit).then((res:any) => {
         categoryData = res;
         // @TODO categoryData type fix
@@ -410,36 +428,28 @@
       });
   }
 
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
-
-    /* Start Lazy Loading */
-    const handler = () => {
-      if (container) {
-        const containerDimensions = container.getBoundingClientRect();
-
-        intersecting = (
-          (containerDimensions.bottom + bottom) > 0 &&
-          (containerDimensions.right + right) > 0 &&
-          (containerDimensions.top - top) < window.innerHeight &&
-          (containerDimensions.left - left) < window.innerWidth
-        );
-
-        if (intersecting && once && !lobbyView) {
-          loadMoreGames(categoryid);
+  const setupObserver = () => {
+    if (validObservers) {
+      thumbnailContainer.forEach((item, index) => {
+        if (item) {
+          // Hack to make sure that I can identify the thumbnail index
+          item.elems_index = index;
+          observer.observe(item);
         }
-      }
+      });
     }
+  }
 
-    window.addEventListener('scroll', handler, false);
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
 
     return () => {
-      window.removeEventListener('scroll', handler);
       window.removeEventListener('message', messageHandler);
     }
   });
 
+  $: thumbnailContainer && setupObserver();
   $: lang && initialSetup();
   $: clientstyling && setClientStyling();
   $: clientstylingurl && setClientStylingURL();
@@ -542,6 +552,7 @@
                       gameid={gameprops.id}
                       gamefunmode={gameprops.hasFunMode}
                       gamefavorite={gameprops.isFavorite}
+                      bind:this={thumbnailContainer[index]}
                       {clientstyling}
                       {clientstylingurl}
                       {endpoint}