From 66f75e856e5f03a4ef449cbcfa06d6851953389c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 8 Sep 2018 16:41:36 +1200
Subject: [PATCH] Fix goto and expand displaying as hovered when redisplay mini
tablet
---
scripts/system/html/css/miniTablet.css | 8 ++++++
scripts/system/html/js/miniTablet.js | 40 +++++++++++++++++++++-----
2 files changed, 41 insertions(+), 7 deletions(-)
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
}));