From 5841641db570c4a98320b0cd465f9a656c93a00c Mon Sep 17 00:00:00 2001 From: Ketut Kumajaya Date: Thu, 20 Oct 2022 14:41:28 +0700 Subject: [PATCH] PlgScheme: Enable tooltips on mobile browser --- .../wwwroot/plugins/Scheme/css/scheme-view.css | 6 ++++++ .../wwwroot/plugins/Scheme/css/scheme-view.min.css | 2 +- .../wwwroot/plugins/Scheme/css/scheme-view.scss | 6 ++++++ .../wwwroot/plugins/Scheme/js/scheme-render.js | 5 ++++- .../wwwroot/plugins/Scheme/js/scheme-view.js | 12 ++++++++++++ 5 files changed, 29 insertions(+), 2 deletions(-) diff --git a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.css b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.css index 1722a3265..f20cafb7a 100644 --- a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.css +++ b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.css @@ -40,6 +40,12 @@ border-radius: 6px; } +.tooltip-inner { + text-align: left; + max-width: none; + white-space: nowrap; +} + body { margin: 0; padding: 0; diff --git a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.min.css b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.min.css index f58f2eecd..aaf822c3c 100644 --- a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.min.css +++ b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.min.css @@ -1 +1 @@ -.scheme-wrapper{overflow:auto;position:relative;}.scheme-wrapper.loading{background-image:url("../images/loading.gif");background-position:center;background-repeat:no-repeat;background-attachment:fixed;}.scheme{position:absolute;transform-origin:left top;}.scheme .comp{box-sizing:border-box;position:absolute;}.scheme .comp.action{cursor:pointer;}.scheme .cmd-frame{background-image:url("../images/loading.gif");background-position:center;background-repeat:no-repeat;width:100px;height:50px;left:50%;top:50%;position:fixed;transform:translate(-50%,-50%);background-color:#fff;background-size:40px 40px;border:1px solid #999;border-radius:6px;}body{margin:0;padding:0;background-color:#f1f1f1;overflow:hidden;}#divNotif{position:fixed;top:0;left:0;max-height:100px;padding:10px;background-color:#fff;border-bottom:1px solid #ced4da;font-size:12px;overflow:auto;white-space:nowrap;}#divNotif .message{color:#0073aa;}#divNotif .message.error{color:#f00;}#divToolbar{position:fixed;height:30px;line-height:30px;font-size:14px;left:0;top:0;color:#9ca1a6;display:inline-block;font-size:14px;white-space:nowrap;}#divToolbar:hover span{opacity:1;}#divToolbar .tool-btn{height:30px;margin:0 5px 0 0;padding:0 10px;cursor:pointer;background-color:#fff;display:inline-block;line-height:30px;vertical-align:top;opacity:.5;}#divToolbar .tool-btn:hover{color:#00b9eb;}#spanCurScale{height:30px;margin:0 5px 0 0;padding:0 10px;cursor:pointer;background-color:#fff;display:inline-block;line-height:30px;vertical-align:top;opacity:.5;cursor:default;font-size:12px;}#divDebugTools{padding:0 10px;display:none;font-size:12px;vertical-align:top;}#divSchWrapper{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12px;} \ No newline at end of file +.scheme-wrapper{overflow:auto;position:relative;}.scheme-wrapper.loading{background-image:url("../images/loading.gif");background-position:center;background-repeat:no-repeat;background-attachment:fixed;}.scheme{position:absolute;transform-origin:left top;}.scheme .comp{box-sizing:border-box;position:absolute;}.scheme .comp.action{cursor:pointer;}.scheme .cmd-frame{background-image:url("../images/loading.gif");background-position:center;background-repeat:no-repeat;width:100px;height:50px;left:50%;top:50%;position:fixed;transform:translate(-50%,-50%);background-color:#fff;background-size:40px 40px;border:1px solid #999;border-radius:6px;}.tooltip-inner{text-align:left;max-width:none;white-space:nowrap;}body{margin:0;padding:0;background-color:#f1f1f1;overflow:hidden;}#divNotif{position:fixed;top:0;left:0;max-height:100px;padding:10px;background-color:#fff;border-bottom:1px solid #ced4da;font-size:12px;overflow:auto;white-space:nowrap;}#divNotif .message{color:#0073aa;}#divNotif .message.error{color:#f00;}#divToolbar{position:fixed;height:30px;line-height:30px;font-size:14px;left:0;top:0;color:#9ca1a6;display:inline-block;font-size:14px;white-space:nowrap;}#divToolbar:hover span{opacity:1;}#divToolbar .tool-btn{height:30px;margin:0 5px 0 0;padding:0 10px;cursor:pointer;background-color:#fff;display:inline-block;line-height:30px;vertical-align:top;opacity:.5;}#divToolbar .tool-btn:hover{color:#00b9eb;}#spanCurScale{height:30px;margin:0 5px 0 0;padding:0 10px;cursor:pointer;background-color:#fff;display:inline-block;line-height:30px;vertical-align:top;opacity:.5;cursor:default;font-size:12px;}#divDebugTools{padding:0 10px;display:none;font-size:12px;vertical-align:top;}#divSchWrapper{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12px;} \ No newline at end of file diff --git a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.scss b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.scss index 22dc96769..40b306412 100644 --- a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.scss +++ b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/css/scheme-view.scss @@ -13,6 +13,12 @@ $toolbar-height: 30px; $toolbar-font-size: 14px; $data-font-size: 12px; +.tooltip-inner { + text-align: left; + max-width: none; + white-space: nowrap; +} + body { margin: 0; padding: 0; diff --git a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-render.js b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-render.js index 2d8be4616..359e5ea13 100644 --- a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-render.js +++ b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-render.js @@ -363,7 +363,10 @@ scada.scheme.ComponentRenderer.prototype.setVAlign = function (jqObj, vAlign) { // Set tooltip (title) of the jQuery object scada.scheme.ComponentRenderer.prototype.setToolTip = function (jqObj, toolTip) { if (toolTip) { - jqObj.prop("title", toolTip); + jqObj.prop("title", toolTip.replace(/\n|\r\n|\r/g, '
')); + jqObj.attr("data-bs-toggle", "tooltip"); + jqObj.attr("data-bs-html", true); + jqObj.addClass("user-select-none"); } }; diff --git a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-view.js b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-view.js index 0445376ea..7a2d1982a 100644 --- a/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-view.js +++ b/ScadaWeb/OpenPlugins/PlgScheme/wwwroot/plugins/Scheme/js/scheme-view.js @@ -50,6 +50,16 @@ scada.scheme.env = { } }; +// Get or create the tooltip instance +function initTooltips() { + if (scheme.dom) { + $("[data-bs-toggle='tooltip']").each(function () { + var tooltip = bootstrap.Tooltip.getOrCreateInstance($(this)[0]); + // do something + }); + } +}; + // Load the scheme function loadScheme(viewID) { scheme.load(viewID, function (success) { @@ -70,6 +80,7 @@ function loadScheme(viewID) { loadScale(); displayScale(); alignHorizontally(); + initTooltips(); startUpdatingScheme(); } } else { @@ -262,6 +273,7 @@ function initDebugTools() { $("#spanCreateDomBtn").click(function () { scheme.createDom(); alignHorizontally(); + initTooltips(); }); $("#spanStartUpdBtn").click(function () {