🐛 [Frontend] Guided Tours: point to visible selector or skip (ITISFoundation#6481)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/ToggleButtonContainer.js

@@ -95,7 +95,7 @@ qx.Class.define("osparc.dashboard.ToggleButtonContainer", {
     },
 
     areMoreResourcesRequired: function(loadingResourcesBtn) {
-      if (this.nextRequest !== null && loadingResourcesBtn && osparc.utils.Utils.checkIsOnScreen(loadingResourcesBtn)) {
+      if (this.nextRequest !== null && loadingResourcesBtn && osparc.utils.Utils.isWidgetOnScreen(loadingResourcesBtn)) {
         return true;
       }
       return false;

services/static-webserver/client/source/class/osparc/tours/Manager.js

@@ -160,27 +160,44 @@ qx.Class.define("osparc.tours.Manager", {
       }
     },
 
+    __getVisibleElement: function(selector) {
+      // get all elements...
+      const elements = document.querySelectorAll(`[${selector}]`);
+      // ...and use the first on screen match
+      const element = [...elements].find(el => osparc.utils.Utils.isElementOnScreen(el));
+      return element;
+    },
+
     __toStepCheck: function(idx = 0) {
       const steps = this.getSteps();
       if (idx >= steps.length) {
-        idx = 0;
+        return;
       }
 
       this.__removeCurrentBubble();
       this.__removeBlankets();
       this.__currentIdx = idx;
       const step = steps[idx];
       if (step.beforeClick && step.beforeClick.selector) {
-        const element = document.querySelector(`[${step.beforeClick.selector}]`);
-        const widget = qx.ui.core.Widget.getWidgetByElement(element);
-        if (step.beforeClick.action) {
-          widget[step.beforeClick.action]();
-        } else if (step.beforeClick.event) {
-          widget.fireEvent(step.beforeClick.event);
+        let targetWidget = null;
+        const element = this.__getVisibleElement(step.beforeClick.selector);
+        if (element) {
+          targetWidget = qx.ui.core.Widget.getWidgetByElement(element);
+        }
+        if (targetWidget) {
+          if (step.beforeClick.action) {
+            targetWidget[step.beforeClick.action]();
+          } else if (step.beforeClick.event) {
+            targetWidget.fireEvent(step.beforeClick.event);
+          } else {
+            targetWidget.execute();
+          }
+          setTimeout(() => this.__toStep(steps, idx), 150);
         } else {
-          widget.execute();
+          // target not found, move to the next step
+          this.__toStepCheck(this.__currentIdx+1);
+          return;
         }
-        setTimeout(() => this.__toStep(steps, idx), 100);
       } else {
         this.__toStep(steps, idx);
       }
@@ -207,8 +224,11 @@ qx.Class.define("osparc.tours.Manager", {
       const step = steps[idx];
       const stepWidget = this.__currentBubble = this.__createStep();
       if (step.anchorEl) {
-        const el = document.querySelector(`[${step.anchorEl}]`);
-        const targetWidget = qx.ui.core.Widget.getWidgetByElement(el);
+        let targetWidget = null;
+        const element = this.__getVisibleElement(step.anchorEl);
+        if (element) {
+          targetWidget = qx.ui.core.Widget.getWidgetByElement(element);
+        }
         if (targetWidget) {
           stepWidget.setElement(targetWidget);
           if (step.placement) {
@@ -224,6 +244,7 @@ qx.Class.define("osparc.tours.Manager", {
         // intro text, it will be centered
         stepWidget.getChildControl("caret").exclude();
       }
+
       if (step.title) {
         stepWidget.setTitle(step.title);
       }

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -287,27 +287,27 @@ qx.Class.define("osparc.utils.Utils", {
       return title;
     },
 
-    checkIsOnScreen: function(elem) {
-      const isInViewport = element => {
-        if (element) {
-          const rect = element.getBoundingClientRect();
-          const html = document.documentElement;
-          return (
-            rect.width > 0 &&
-            rect.height > 0 &&
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            // a bit of tolerance to deal with zooming factors
-            rect.bottom*0.95 <= (window.innerHeight || html.clientHeight) &&
-            rect.right*0.95 <= (window.innerWidth || html.clientWidth)
-          );
-        }
-        return false;
-      };
+    isElementOnScreen: function(element) {
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        const html = document.documentElement;
+        return (
+          rect.width > 0 &&
+          rect.height > 0 &&
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          // a bit of tolerance to deal with zooming factors
+          rect.bottom*0.95 <= (window.innerHeight || html.clientHeight) &&
+          rect.right*0.95 <= (window.innerWidth || html.clientWidth)
+        );
+      }
+      return false;
+    },
 
-      const domElem = elem.getContentElement().getDomElement();
-      const checkIsOnScreen = isInViewport(domElem);
-      return checkIsOnScreen;
+    isWidgetOnScreen: function(widget) {
+      const domElem = widget.getContentElement().getDomElement();
+      const isWidgetOnScreen = this.isElementOnScreen(domElem);
+      return isWidgetOnScreen;
     },
 
     growSelectBox: function(selectBox, maxWidth) {

services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js

@@ -413,8 +413,8 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
     __updateTable: function() {
       if (this.__loggerModel) {
         this.__loggerModel.reloadData();
-        // checkIsOnScreen will avoid rendering every single line when the user click on the Logger button the first time
-        if (!this.isLockLogs() && osparc.utils.Utils.checkIsOnScreen(this.__loggerTable)) {
+        // isWidgetOnScreen will avoid rendering every single line when the user click on the Logger button the first time
+        if (!this.isLockLogs() && osparc.utils.Utils.isWidgetOnScreen(this.__loggerTable)) {
           const nFilteredRows = this.__loggerModel.getFilteredRowCount();
           this.__loggerTable.scrollCellVisible(0, nFilteredRows);
         }