From 11bf428266ec5d1fa582925451ef1d48e627aa85 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 1 Oct 2024 13:54:17 +0200 Subject: [PATCH 1/5] rename and refactor --- .../osparc/dashboard/ToggleButtonContainer.js | 2 +- .../client/source/class/osparc/utils/Utils.js | 40 +++++++++---------- .../class/osparc/widget/logger/LoggerView.js | 4 +- 3 files changed, 23 insertions(+), 23 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 53b55e310f85..bbabe433161b 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/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js index 361ead0c6524..a502a5144d00 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 9b080b63c7ef..3ad1b437301c 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); } From 8d1a796b4e6084214602b5e85497eb41e8777576 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 1 Oct 2024 14:11:51 +0200 Subject: [PATCH 2/5] querySelectorAll --- .../source/class/osparc/tours/Manager.js | 39 ++++++++++++++----- 1 file changed, 29 insertions(+), 10 deletions(-) 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 74a01b4ae045..cd78996e5605 100644 --- a/services/static-webserver/client/source/class/osparc/tours/Manager.js +++ b/services/static-webserver/client/source/class/osparc/tours/Manager.js @@ -160,6 +160,12 @@ qx.Class.define("osparc.tours.Manager", { } }, + __getVisibleElement: function(selector) { + const elements = document.querySelectorAll(`[${selector}]`); + const element = [...elements].find(el => osparc.utils.Utils.isElementOnScreen(el)); + return element; + }, + __toStepCheck: function(idx = 0) { const steps = this.getSteps(); if (idx >= steps.length) { @@ -171,16 +177,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), 100); } 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 +222,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 +242,7 @@ qx.Class.define("osparc.tours.Manager", { // intro text, it will be centered stepWidget.getChildControl("caret").exclude(); } + if (step.title) { stepWidget.setTitle(step.title); } From 87312b1cf22a179567cf44c442bbd594d9b42028 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 1 Oct 2024 14:14:56 +0200 Subject: [PATCH 3/5] minor --- .../client/source/class/osparc/tours/Manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cd78996e5605..f888e5b64c41 100644 --- a/services/static-webserver/client/source/class/osparc/tours/Manager.js +++ b/services/static-webserver/client/source/class/osparc/tours/Manager.js @@ -169,7 +169,7 @@ qx.Class.define("osparc.tours.Manager", { __toStepCheck: function(idx = 0) { const steps = this.getSteps(); if (idx >= steps.length) { - idx = 0; + return; } this.__removeCurrentBubble(); From 558d515959783187cb2b03a217ceafafb5fdba8f Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 1 Oct 2024 14:21:50 +0200 Subject: [PATCH 4/5] [skip ci] comments --- .../client/source/class/osparc/tours/Manager.js | 2 ++ 1 file changed, 2 insertions(+) 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 f888e5b64c41..0e0ee494434d 100644 --- a/services/static-webserver/client/source/class/osparc/tours/Manager.js +++ b/services/static-webserver/client/source/class/osparc/tours/Manager.js @@ -161,7 +161,9 @@ 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; }, From 2a0f3728a60bcaec94f5011cd2930fb248b584ee Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 1 Oct 2024 14:24:38 +0200 Subject: [PATCH 5/5] minor --- .../client/source/class/osparc/tours/Manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0e0ee494434d..cf2618c3d4ef 100644 --- a/services/static-webserver/client/source/class/osparc/tours/Manager.js +++ b/services/static-webserver/client/source/class/osparc/tours/Manager.js @@ -192,7 +192,7 @@ qx.Class.define("osparc.tours.Manager", { } else { targetWidget.execute(); } - setTimeout(() => this.__toStep(steps, idx), 100); + setTimeout(() => this.__toStep(steps, idx), 150); } else { // target not found, move to the next step this.__toStepCheck(this.__currentIdx+1);