Skip to content

Commit e0336ed

Browse files
justin212407justin212407
committed
Stopped triggering of Auxiliary Menu in play only mode
Signed-off-by: Justin Charles <[email protected]>
1 parent 897e7b1 commit e0336ed

File tree

2 files changed

+135
-49
lines changed

2 files changed

+135
-49
lines changed

‎css/play-only-mode.css‎

Lines changed: 80 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,5 +116,83 @@
116116
justify-content: center !important;
117117
}
118118
}
119-
120-
119+
120+
@media (max-width: 768px), (max-height: 600px) {
121+
/* Apply styles only when in play-only mode */
122+
.play-only #aux-toolbar {
123+
display: none !important;
124+
}
125+
126+
.play-only .blue.darken-1.nav-wrapper {
127+
background: transparent !important;
128+
box-shadow: none !important;
129+
}
130+
131+
.play-only #aux-toolbar > div {
132+
background: transparent !important;
133+
}
134+
135+
.play-only #toggleAuxBtn {
136+
pointer-events: none !important;
137+
opacity: 0.5 !important;
138+
}
139+
}
140+
141+
.play-only #aux-toolbar {
142+
display: none !important;
143+
}
144+
145+
.play-only #aux-dropdown {
146+
display: block !important;
147+
position: absolute;
148+
top: 50px;
149+
right: 10px;
150+
background: white;
151+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
152+
border-radius: 4px;
153+
min-width: 180px;
154+
z-index: 10000;
155+
}
156+
157+
.play-only #aux-dropdown li {
158+
padding: 10px;
159+
text-align: left;
160+
}
161+
162+
.play-only #aux-dropdown li a {
163+
color: black;
164+
display: flex;
165+
align-items: center;
166+
}
167+
168+
.play-only #aux-dropdown li a i {
169+
margin-right: 8px;
170+
}
171+
/* Play-Only Mode Dropdown */
172+
.play-only #aux-dropdown {
173+
display: none;
174+
position: absolute;
175+
top: 50px;
176+
right: 10px;
177+
background-color: white;
178+
border: 1px solid #ccc;
179+
border-radius: 5px;
180+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
181+
padding: 10px;
182+
z-index: 1000;
183+
}
184+
185+
.play-only #aux-dropdown.show-dropdown {
186+
display: block;
187+
}
188+
189+
.play-only #aux-dropdown a {
190+
display: block;
191+
padding: 8px 12px;
192+
text-decoration: none;
193+
color: black;
194+
}
195+
196+
.play-only #aux-dropdown a:hover {
197+
background-color: #f2f2f2;
198+
}

‎index.html‎

Lines changed: 55 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -678,6 +678,25 @@
678678
></a
679679
>
680680
</li>
681+
<!-- Dropdown menu for Play-Only Mode -->
682+
<ul id="aux-dropdown" class="dropdown-content">
683+
<li>
684+
<a id="themeSelectIcon" class="tooltipped dropdown-trigger" data-position="left" data-activates="themedropdown">
685+
<i class="material-icons md-48">brightness_7</i>
686+
</a>
687+
</li>
688+
<li>
689+
<a id="restoreIcon" class="tooltipped" data-position="bottom">
690+
<i class="material-icons md-48">restore_from_trash</i>
691+
</a>
692+
</li>
693+
<li>
694+
<a id="languageSelectIcon" class="tooltipped dropdown-trigger" data-position="left" data-activates="languagedropdown">
695+
<i class="material-icons md-48">translate</i>
696+
</a>
697+
</li>
698+
</ul>
699+
681700
<li>
682701
<a
683702
id="helpIcon"
@@ -988,74 +1007,43 @@
9881007
</div>
9891008
</div>
9901009
<script>
991-
let persistentNotification = null;
1010+
let persistentNotification = null;
9921011

9931012
function togglePlayOnlyMode() {
9941013
const isSmallScreen = window.innerWidth < 768 || window.innerHeight < 600;
9951014
const body = document.body;
996-
const homeButton = document.getElementById("Home [HOME]");
997-
const buttonContainer = document.getElementById("buttoncontainerBOTTOM");
1015+
const auxToolbar = document.getElementById("aux-toolbar");
1016+
const toggleAuxBtn = document.getElementById("toggleAuxBtn");
9981017

9991018
if (isSmallScreen) {
1019+
// Enable Play-Only Mode
10001020
body.classList.add("play-only");
10011021
showPersistentNotification();
10021022

1003-
if (buttonContainer) {
1004-
buttonContainer.style.display = "flex";
1005-
buttonContainer.style.justifyContent = "flex-end";
1006-
buttonContainer.style.alignItems = "center";
1023+
if (auxToolbar) {
1024+
auxToolbar.style.display = "none";
10071025
}
1008-
1009-
if (homeButton) {
1010-
homeButton.style.display = "flex";
1011-
homeButton.style.position = "fixed";
1012-
homeButton.style.right = "15px";
1013-
homeButton.style.bottom = "15px";
1014-
homeButton.style.zIndex = "10000";
1015-
}
1016-
1017-
hideElementById("Show/hide blocks");
1018-
hideElementById("Expand/collapse blocks");
1019-
hideElementById("Decrease block size");
1020-
hideElementById("Increase block size");
1021-
hideElementById("grid");
1022-
hideElementById("palette");
1026+
1027+
enableAuxDropdown();
10231028

10241029
} else {
10251030
body.classList.remove("play-only");
10261031
removePersistentNotification();
10271032

1028-
if (homeButton) homeButton.style = "";
1029-
if (buttonContainer) buttonContainer.style = "";
1030-
1031-
showElementById("Show/hide blocks");
1032-
showElementById("Expand/collapse blocks");
1033-
showElementById("Decrease block size");
1034-
showElementById("Increase block size");
1035-
showElementById("grid");
1036-
showElementById("palette");
1037-
}
1038-
}
1039-
1040-
function hideElementById(elementId) {
1041-
const elem = document.getElementById(elementId);
1042-
if (elem) {
1043-
elem.style.display = "none";
1044-
}
1045-
}
1033+
if (auxToolbar) {
1034+
auxToolbar.style.display = "";
1035+
}
10461036

1047-
function showElementById(elementId) {
1048-
const elem = document.getElementById(elementId);
1049-
if (elem) {
1050-
elem.style.display = "";
1037+
disableAuxDropdown();
10511038
}
10521039
}
10531040

10541041
function showPersistentNotification() {
10551042
if (!persistentNotification) {
10561043
persistentNotification = document.createElement("div");
10571044
persistentNotification.id = "persistentNotification";
1058-
persistentNotification.innerHTML = "Play only mode enabled. For full Music Blocks experience, use a larger display.";
1045+
persistentNotification.innerHTML =
1046+
"Play only mode enabled. For full Music Blocks experience, use a larger display.";
10591047
document.body.appendChild(persistentNotification);
10601048
}
10611049
}
@@ -1067,13 +1055,33 @@
10671055
}
10681056
}
10691057

1058+
function enableAuxDropdown() {
1059+
const toggleAuxBtn = document.getElementById("toggleAuxBtn");
1060+
if (toggleAuxBtn) {
1061+
toggleAuxBtn.addEventListener("click", function (event) {
1062+
event.preventDefault();
1063+
event.stopPropagation();
1064+
1065+
const auxDropdown = document.getElementById("aux-dropdown");
1066+
if (auxDropdown) {
1067+
auxDropdown.classList.toggle("show-dropdown");
1068+
}
1069+
});
1070+
}
1071+
}
1072+
1073+
function disableAuxDropdown() {
1074+
const auxDropdown = document.getElementById("aux-dropdown");
1075+
if (auxDropdown) {
1076+
auxDropdown.classList.remove("show-dropdown");
1077+
}
1078+
}
1079+
10701080
togglePlayOnlyMode();
1071-
10721081
window.addEventListener("resize", togglePlayOnlyMode);
10731082
</script>
10741083

10751084

1076-
10771085
<div id="searchBar" tabindex="-1">
10781086
<input
10791087
type="text"

0 commit comments

Comments
 (0)