From 7a2dbdae21c8a71eb6e729406e180b74f6e9f81d Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Tue, 1 Oct 2024 15:51:04 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20[Frontend]=20Guided=20Tours:=20p?= =?UTF-8?q?oint=20to=20visible=20selector=20or=20skip=20(#6481)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../osparc/dashboard/ToggleButtonContainer.js | 2 +- .../source/class/osparc/tours/Manager.js | 43 ++++++++++++++----- .../client/source/class/osparc/utils/Utils.js | 40 ++++++++--------- .../class/osparc/widget/logger/LoggerView.js | 4 +- 4 files changed, 55 insertions(+), 34 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ToggleButtonContainer.js b/services/static-webserver/client/source/class/osparc/dashboard/ToggleButtonContainer.js index 53b55e310f8..bbabe433161 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ToggleButtonContainer.js +++ b/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; diff --git a/services/static-webserver/client/source/class/osparc/tours/Manager.js b/services/static-webserver/client/source/class/osparc/tours/Manager.js index 74a01b4ae04..cf2618c3d4e 100644 --- a/services/static-webserver/client/source/class/osparc/tours/Manager.js +++ b/services/static-webserver/client/source/class/osparc/tours/Manager.js @@ -160,10 +160,18 @@ 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(); @@ -171,16 +179,25 @@ qx.Class.define("osparc.tours.Manager", { 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); } diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js index 361ead0c652..a502a5144d0 100644 --- a/services/static-webserver/client/source/class/osparc/utils/Utils.js +++ b/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) { diff --git a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js b/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js index 9b080b63c7e..3ad1b437301 100644 --- a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js +++ b/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); }