@xuda.io/runtime-bundle 1.0.858 → 1.0.860

package/js/xuda-runtime-bundle.js

@@ -24718,7 +24718,7 @@ var SCREEN_BLOCKER_OBJ = {};
 var IS_PROGRESS_SCREEN_OPEN = null;
 // var UI_ENGINE_OBJ = null;
 
-var UI_WORKER_OBJ = { jobs: [], num: 9000, cache: {}, viewport_info: {} };
+var UI_WORKER_OBJ = { jobs: [], num: 9000, cache: {}, viewport_height_set_ids: [], pending_for_viewport_render: {} };
 
 glb.html5_events_handler = [
   'onabort',
@@ -27853,13 +27853,16 @@ func.UI.worker.execute = async function (SESSION_ID, queue_obj) {
           const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $div, nodeP.children[key], parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, nodeP, null, $root_container);
         }
 
-        if (!UI_WORKER_OBJ.viewport_info[$div.parent().attr('xu-ui-id')]) {
-          UI_WORKER_OBJ.viewport_info[$div.parent().attr('xu-ui-id')] = { $elm: $div.parent(), height: $div.height() };
+        const parent_id = $div.parent().attr('xu-ui-id');
+        if (!UI_WORKER_OBJ.viewport_height_set_ids.includes(parent_id)) {
+          UI_WORKER_OBJ.viewport_height_set_ids.push(parent_id);
           func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'set_viewport_height', { $elm: $div.parent(), height: $div.height() }, null, null, paramsP.dsSessionP);
         }
-        // if (!$div.parent().data().xuData.viewport_elm_height) {
-        //   $div.parent().data().xuData.viewport_elm_height = $div.height();
-        // }
+
+        if ($div.hasClass('viewport_height')) {
+          $div.addClass('viewport_height');
+          $div.css('height', 'unset');
+        }
       }
 
       return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
@@ -27867,9 +27870,13 @@ func.UI.worker.execute = async function (SESSION_ID, queue_obj) {
     set_viewport_height: async function () {
       const { $elm, height } = queue_obj?.paramsP || {};
 
-      // for (const [parent_elm_xu_ui_id, val] of Object.entries(UI_WORKER_OBJ.viewport_info)) {
-      $elm.children().css(height, height);
-      // }
+      $elm.children().css('height', height);
+
+      $.each($elm.children(), function (key, elm) {
+        if (!$(elm).height() && !$(elm).children()) {
+          $(elm).css('height', height).addClass('viewport_height');
+        }
+      });
 
       return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
     },
@@ -31181,20 +31188,12 @@ func.UI.screen.init = async function (SESSION_ID, prog_id, sourceScreenP, callin
       fix_svg();
     }, 200);
 
-    // if ($div.parent().data().xuData.viewport_elm_height) {
-    //   $div.css(height, $div.parent().data().xuData.viewport_elm_height);
-    // }
-
-    // for (const [parent_elm_xu_ui_id, val] of Object.entries(UI_WORKER_OBJ.viewport_info)) {
-    //   val.$elm.children().css(height, val.height);
-    // }
-
-    // for (const item of UI_WORKER_OBJ.viewport_info) {
-    //   item.children().css(innerHeight, item.height);
-    // }
-
     func.UI.utils.indicator.screen.normal();
 
+    for (const [container_xu_ui_id, data] of Object.entries(UI_WORKER_OBJ.pending_for_viewport_render)) {
+      debugger;
+    }
+
     let ret_screen_loading = await func.UI.screen.screen_loading_done(SESSION_ID, params, ret_render_$container, jobNoP);
     return ret_screen_loading;
   }
@@ -34434,83 +34433,95 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
     if (ret.abort || nodeP.tagName === 'svg') return await done();
     // check if iterator made to prevent children render
 
-    const observer_inViewport = new IntersectionObserver(
-      function (entries) {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            // Element is in viewport - trigger custom event
-            // console.log('trigger>>', 'inViewport_' + $(entry.target).attr('xu-ui-id'));
+    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
+      const xu_viewport = async function () {
+        const data = { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
+        const container_id = $container.attr('xu-ui-id');
+        if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
+          UI_WORKER_OBJ.pending_for_viewport_render[container_id] = [];
+          await iterate_child($div, nodeP, parent_infoP, $root_container);
+        }
+        UI_WORKER_OBJ.pending_for_viewport_render[container_id].push(data);
+
+        // if (!$div.children().length) {
+        //   // render the first element to determine height
+        //   await iterate_child($div, nodeP, parent_infoP, $root_container);
+        //   // hover_in($div);
+        //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
+        // } else {
+        // }
+      };
+      const xu_viewport_old = function () {
+        const observer_inViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                // Element is in viewport - trigger custom event
+                // console.log('trigger>>', 'inViewport_' + $(entry.target).attr('xu-ui-id'));
+
+                // $(entry.target).trigger('inViewport_' + $(entry.target).attr('xu-ui-id'));
+                $(entry.target).trigger('inViewport');
+
+                // Optional: stop observing once triggered
+                observer_inViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0.1, // Trigger when 10% of element is visible
+          },
+        );
 
-            // $(entry.target).trigger('inViewport_' + $(entry.target).attr('xu-ui-id'));
-            $(entry.target).trigger('inViewport');
+        const observer_outViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (!entry.isIntersecting) {
+                // Element is OUT of viewport - trigger custom event
+                $(entry.target).trigger('outViewport');
 
-            // Optional: stop observing once triggered
-            observer_inViewport.unobserve(entry.target);
-          }
-        });
-      },
-      {
-        threshold: 0.1, // Trigger when 10% of element is visible
-      },
-    );
+                // Optional: stop observing once triggered
+                // observer_outViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0, // Trigger when element is completely out of view
+          },
+        );
 
-    const observer_outViewport = new IntersectionObserver(
-      function (entries) {
-        entries.forEach((entry) => {
-          if (!entry.isIntersecting) {
-            // Element is OUT of viewport - trigger custom event
-            $(entry.target).trigger('outViewport');
+        // if ($div.parent().data().xuData.viewport_elm_height) {
+        //   $div.css(height, $div.parent().data().xuData.viewport_elm_height);
+        // }
 
-            // Optional: stop observing once triggered
-            // observer_outViewport.unobserve(entry.target);
+        $div.on('inViewport', function () {
+          if ($div.children().length) {
+            $div.removeClass('skeleton');
+            return;
           }
-        });
-      },
-      {
-        threshold: 0, // Trigger when element is completely out of view
-      },
-    );
-
-    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
-      // if ($div.parent().data().xuData.viewport_elm_height) {
-      //   $div.css(height, $div.parent().data().xuData.viewport_elm_height);
-      // }
 
-      $div.on('inViewport', function () {
-        if ($div.children().length) {
-          $div.removeClass('skeleton');
-          return;
-        }
-
-        if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
-          $div.removeClass('skeleton');
-          $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
-        } else {
-          hover_in($div);
-          func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container }, null, null, paramsP.dsSessionP);
-          // //viewport_elm_height
-          // if (!$div.parent().data().xuData.viewport_elm_height) {
-          //   setTimeout(() => {
-          //     $div.parent().data().xuData.viewport_elm_height = $div.height();
-          //   }, 2000);
-          // }
-        }
-        observer_outViewport.observe($div[0]);
-      });
+          if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
+            $div.removeClass('skeleton');
+            $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
+          } else {
+            hover_in($div);
+            func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container }, null, null, paramsP.dsSessionP);
+          }
+          observer_outViewport.observe($div[0]);
+        });
 
-      $div.on('outViewport', function () {
-        if ($div.children().length) {
-          UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
-          $div.empty();
-        }
-        // $div.addClass('skeleton');
+        $div.on('outViewport', function () {
+          if ($div.children().length) {
+            UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
+            $div.empty();
+          }
+          // $div.addClass('skeleton');
+          observer_inViewport.observe($div[0]);
+        });
+        $div.addClass('skeleton');
         observer_inViewport.observe($div[0]);
-      });
-      $div.addClass('skeleton');
-      observer_inViewport.observe($div[0]);
-      // observer_outViewport.observe($div[0]);
+      };
+      await xu_viewport();
     } else {
-      // await render_child();
       await iterate_child($div, nodeP, parent_infoP, $root_container);
     }