diff --git a/scripts/system/html/css/miniTablet.css b/scripts/system/html/css/miniTablet.css index a87add36a1..7598332d28 100644 --- a/scripts/system/html/css/miniTablet.css +++ b/scripts/system/html/css/miniTablet.css @@ -64,6 +64,10 @@ img { background-image: url("./img/mt-goto-hover.svg"); } + #goto:hover.unhover { + background-image: url("./img/mt-goto-normal.svg"); + } + #expand { position: absolute; right: 1px; @@ -78,6 +82,10 @@ img { background-image: url("./img/mt-expand-hover.svg"); } + #expand:hover.unhover { + background-image: url("./img/mt-expand-normal.svg"); + } + #expand img { width:34px; margin-top: 7px; diff --git a/scripts/system/html/js/miniTablet.js b/scripts/system/html/js/miniTablet.js index f21dc7a6e6..a966cbb139 100644 --- a/scripts/system/html/js/miniTablet.js +++ b/scripts/system/html/js/miniTablet.js @@ -26,7 +26,30 @@ muteImage, gotoButton, gotoImage, - expandButton; + expandButton, + + // Work around buttons staying hovered when mini tablet is replaced by tablet proper then subsequently redisplayed. + isUnhover = true; + + // #region Utilites ======================================================================================================== + + function setUnhover() { + if (!isUnhover) { + gotoButton.classList.add("unhover"); + expandButton.classList.add("unhover"); + isUnhover = true; + } + } + + function clearUnhover() { + if (isUnhover) { + gotoButton.classList.remove("unhover"); + expandButton.classList.remove("unhover"); + isUnhover = false; + } + } + + // #endregion // #region Communications ================================================================================================== @@ -50,25 +73,28 @@ } } + function onButtonHover() { + EventBridge.emitWebEvent(JSON.stringify({ + type: HOVER_MESSAGE + })); + clearUnhover(); + } + function onMuteButtonClick() { EventBridge.emitWebEvent(JSON.stringify({ type: MUTE_MESSAGE })); } - function onButtonHover() { - EventBridge.emitWebEvent(JSON.stringify({ - type: HOVER_MESSAGE - })); - } - function onGotoButtonClick() { + setUnhover(); EventBridge.emitWebEvent(JSON.stringify({ type: GOTO_MESSAGE })); } function onExpandButtonClick() { + setUnhover(); EventBridge.emitWebEvent(JSON.stringify({ type: EXPAND_MESSAGE }));