@xuda.io/runtime-bundle 1.0.1252 → 1.0.1254

package/js/xuda-runtime-bundle.js

@@ -36370,7 +36370,7 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
   };
 
   const render_screen_type = async function ($div) {
-    const set_call_screen_properties_values = async function (ui_framework) {
+    const set_call_screen_properties_values = async function (ui_framework, params) {
       params.properties = {};
 
       const get_values = async function (property) {
@@ -36409,7 +36409,6 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
 
     let $ret = $div;
     const $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
-    let params;
 
     switch (paramsP.screen_type) {
       case 'modal':
@@ -36423,7 +36422,7 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
 
         let controller_params = $(xu_modal_controller).data('xuControllerParams') || {};
 
-        params = {
+        const modalParams = {
           screenId: paramsP.screenId,
           $dialogDiv: $div.children(),
           $container: $container,
@@ -36434,40 +36433,40 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
           paramsP,
         };
 
-        controller_params[modal_id] = params;
+        controller_params[modal_id] = modalParams;
         $(xu_modal_controller).data('xuControllerParams', controller_params);
 
         const modalController = new UI_FRAMEWORK_PLUGIN.modal();
-        await set_call_screen_properties_values(modalController);
+        await set_call_screen_properties_values(modalController, modalParams);
 
         if (!APP_MODAL_OBJ[modal_id]) {
-          APP_MODAL_OBJ[modal_id] = await modalController.create(params);
+          APP_MODAL_OBJ[modal_id] = await modalController.create(modalParams);
         } else {
           $(modal_id).empty();
         }
-        await modalController.init(params);
+        await modalController.init(modalParams);
         break;
 
       case 'popover':
         const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
-        params = {
+        const popoverParams = {
           menuTitle: paramsP.screenInfo.properties?.menuTitle,
           screenId: paramsP.screenId,
           $dialogDiv: $div.children(),
           $container: $container,
         };
 
-        $(xu_popover_controller).data('xuControllerParams', params);
+        $(xu_popover_controller).data('xuControllerParams', popoverParams);
         const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
-        await set_call_screen_properties_values(popover);
-        await popover.open(params);
+        await set_call_screen_properties_values(popover, popoverParams);
+        await popover.open(popoverParams);
         CURRENT_APP_POPOVER = popover;
         func.UI.utils.screen_blocker(false, `${paramsP.prog_id}_${paramsP.sourceScreenP}`);
         break;
 
       case 'page':
         const nav = $nav[0];
-        params = {
+        const pageParams = {
           div: $div_content,
           name: paramsP.screenInfo.properties?.menuTitle,
           screenId: paramsP.screenId,
@@ -36487,19 +36486,19 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
 
         // Restore validate
         if (navXuData.params?.[paramsP.dsSessionP]) {
-          params.$container.data().xuData.validate_screen_ready = navXuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
+          pageParams.$container.data().xuData.validate_screen_ready = navXuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
         }
 
         if (!navXuData) return;
-        navXuData.nav_params[paramsP.dsSessionP] = params;
+        navXuData.nav_params[paramsP.dsSessionP] = pageParams;
 
         if (!$(component_name).length) {
           await func.UI.component.create_app_page_component(SESSION_ID, paramsP.dsSessionP);
           const page = new UI_FRAMEWORK_PLUGIN.page();
-          await set_call_screen_properties_values(page);
-          await page.create(params);
-          await page.init(params);
-          nav.push(component_name, { params });
+          await set_call_screen_properties_values(page, pageParams);
+          await page.create(pageParams);
+          await page.init(pageParams);
+          nav.push(component_name, { params: pageParams });
         } else {
           $(component_name).empty();
           await UI_FRAMEWORK_PLUGIN.page(SESSION_ID, paramsP.dsSessionP);
@@ -36514,9 +36513,9 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
 
       default:
         if (!$nav?.length) {
-          $nav = $('<xu-nav>');
-          $container.append($nav);
-          func.UI.component.init_xu_nav($container, $nav);
+          const $newNav = $('<xu-nav>');
+          $container.append($newNav);
+          func.UI.component.init_xu_nav($container, $newNav);
         }
 
         $nav.data().xuData.$div = $div_content;
@@ -36937,6 +36936,93 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
     return await fx[nodeTag]();
   }
 
+  // Old rendering path (when glb.new_xu_render is false)
+  const draw_html_element_org = async function (element) {
+    const done = async function (ret = {}) {
+      return $div;
+    };
+
+    if (!element || element === 'script') return await done();
+
+    const $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, '');
+
+    $div.hover(
+      (e) => hover_in($div, e),
+      (e) => hover_out(),
+    );
+
+    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
+      $div.on('click contextmenu', (e) => hover_in($div, e));
+    }
+
+    const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+
+    if (ret.abort || nodeTag === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
+      return await done(ret);
+    }
+
+    if (nodeP?.attributes?.['xu-viewport'] === 'true') {
+      const xu_viewport = function () {
+        const observer_inViewport = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                $(entry.target).trigger('inViewport');
+                observer_inViewport.unobserve(entry.target);
+              }
+            });
+          },
+          { threshold: 0.1 },
+        );
+
+        const observer_outViewport = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (!entry.isIntersecting) {
+                $(entry.target).trigger('outViewport');
+              }
+            });
+          },
+          { threshold: 0 },
+        );
+
+        let ui_job_id;
+
+        $div.on('inViewport', function () {
+          if ($div.children().length) {
+            $div.removeClass('skeleton');
+            return;
+          }
+
+          hover_in($div);
+          ui_job_id = 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 () {
+          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+
+          if ($div.children().length) {
+            $div.empty();
+            const height = $div?.data()?.xuData?.viewport_height || 10;
+            if (height !== undefined) {
+              $div.css('height', height);
+            }
+          }
+          observer_inViewport.observe($div[0]);
+        });
+
+        $div.addClass('skeleton');
+        observer_inViewport.observe($div[0]);
+      };
+      xu_viewport();
+    } else {
+      await iterate_child($div, nodeP, parent_infoP, $root_container);
+    }
+
+    return await done(ret);
+  };
+
   // Render HTML element
   if (!glb.new_xu_render) {
     return await draw_html_element_org(nodeTag);