Skip to content

Commit dcb5c12

Browse files
justin212407justin212407
committed
Fixing breaking changes
Signed-off-by: Justin Charles <[email protected]>
1 parent c5f94c3 commit dcb5c12

File tree

2 files changed

+93
-169
lines changed

2 files changed

+93
-169
lines changed

‎css/play-only-mode.css‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -130,44 +130,6 @@
130130
}
131131
}
132132

133-
/* Custom dropdown for play-only mode */
134-
.play-only #aux-dropdown {
135-
display: none;
136-
position: absolute;
137-
top: 50px;
138-
right: 10px;
139-
background-color: white;
140-
border: 1px solid #ccc;
141-
border-radius: 5px;
142-
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
143-
padding: 10px;
144-
z-index: 1000;
145-
}
146-
147-
.play-only #aux-dropdown.show-dropdown {
148-
display: block;
149-
opacity: 1; /* Make sure to override the default 0 opacity */
150-
transition: opacity 0.3s ease-in-out; /* optional for a smooth fade-in */
151-
}
152-
153-
154-
.play-only #aux-dropdown a {
155-
display: block;
156-
padding: 8px 12px;
157-
text-decoration: none;
158-
color: black;
159-
}
160-
161-
.play-only #aux-dropdown a:hover {
162-
background-color: #f2f2f2;
163-
}
164-
165-
166-
167-
.play-only #aux-toolbar {
168-
display: none !important;
169-
}
170-
171133
/* Make the container background invisible without affecting child elements */
172134
.play-only #buttoncontainerBOTTOM {
173135
background: transparent !important;
@@ -184,12 +146,3 @@
184146
position: fixed !important;
185147
}
186148

187-
.play-only .dropdown-content {
188-
background: white !important;
189-
box-shadow: none !important;
190-
}
191-
192-
.play-only .dropdown-overlay {
193-
display: none !important;
194-
}
195-

‎index.html‎

Lines changed: 93 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -677,41 +677,7 @@
677677
class="animated-icon material-icons md-48 "
678678
>menu</i
679679
></a>
680-
<!-- Dropdown menu for Play-Only Mode -->
681-
<!-- Dropdown menu for Play-Only Mode (outside the <a>) -->
682-
<ul id="aux-dropdown" class="dropdown-content">
683-
<li>
684-
<a
685-
id="themeSelectIcon"
686-
class="tooltipped dropdown-trigger"
687-
data-position="left"
688-
data-activates="themedropdown"
689-
>
690-
<i class="material-icons md-48">brightness_7</i>
691-
</a>
692-
</li>
693-
<li>
694-
<a
695-
id="restoreIcon"
696-
class="tooltipped"
697-
data-position="bottom"
698-
>
699-
<i class="material-icons md-48">restore_from_trash</i>
700-
</a>
701-
</li>
702-
<li>
703-
<a
704-
id="languageSelectIcon"
705-
class="tooltipped dropdown-trigger"
706-
data-position="left"
707-
data-activates="languagedropdown"
708-
>
709-
<i class="material-icons md-48">translate</i>
710-
</a>
711-
</li>
712-
</ul>
713-
</li>
714-
680+
</li>
715681
<li>
716682
<a
717683
id="helpIcon"
@@ -814,6 +780,7 @@
814780
class="tooltipped dropdown-trigger"
815781
data-position="left"
816782
data-activates="themedropdown"
783+
data-tooltip="Select Theme"
817784
><i class="material-icons md-48">brightness_7</i></a
818785
>
819786
</li>
@@ -870,6 +837,7 @@
870837
id="restoreIcon"
871838
class="tooltipped"
872839
data-position="bottom"
840+
data-tooltip="Restore"
873841
><i class="material-icons md-48"
874842
>restore_from_trash</i
875843
></a
@@ -906,6 +874,7 @@
906874
class="tooltipped dropdown-trigger"
907875
data-position="left"
908876
data-activates="languagedropdown"
877+
data-tooltip="Select Language"
909878
><i class="material-icons md-48"
910879
>translate</i
911880
></a
@@ -1022,94 +991,96 @@
1022991
</script>
1023992
</div>
1024993
</div>
994+
1025995
<script>
1026-
document.addEventListener('DOMContentLoaded', function() {
1027-
// -------------------------------------
1028-
// 1) Initialize Materialize dropdowns
1029-
// (Older Materialize 0.100.x w/ jQuery)
1030-
// -------------------------------------
1031-
$('.dropdown-trigger').dropdown({
1032-
// You can add options if needed
1033-
// inDuration: 300,
1034-
// outDuration: 225,
1035-
// hover: false,
1036-
// coverTrigger: false,
1037-
// alignment: 'right',
1038-
});
1039-
1040-
// -------------------------------------
1041-
// 2) Play-Only Mode logic
1042-
// -------------------------------------
1043-
const body = document.body;
1044-
let persistentNotification = null;
1045-
1046-
function showPersistentNotification() {
1047-
if (!persistentNotification) {
1048-
persistentNotification = document.createElement('div');
1049-
persistentNotification.id = 'persistentNotification';
1050-
persistentNotification.innerHTML =
1051-
'Play only mode enabled. For full Music Blocks experience, use a larger display.';
1052-
document.body.appendChild(persistentNotification);
1053-
}
1054-
}
1055-
1056-
function removePersistentNotification() {
1057-
if (persistentNotification) {
1058-
persistentNotification.remove();
1059-
persistentNotification = null;
1060-
}
1061-
}
1062-
1063-
function togglePlayOnlyMode() {
1064-
const isSmallScreen = window.innerWidth < 768 || window.innerHeight < 600;
1065-
1066-
if (isSmallScreen) {
1067-
// Enable Play-Only Mode
1068-
body.classList.add('play-only');
1069-
showPersistentNotification();
1070-
// Hide or disable any full aux toolbar if you want:
1071-
// document.getElementById('aux-toolbar').style.display = 'none';
1072-
} else {
1073-
// Disable Play-Only Mode
1074-
body.classList.remove('play-only');
1075-
removePersistentNotification();
1076-
// Re-enable your normal toolbar if needed:
1077-
// document.getElementById('aux-toolbar').style.display = 'block';
1078-
}
1079-
}
1080-
1081-
// Run once on load, and again on resize
1082-
togglePlayOnlyMode();
1083-
window.addEventListener('resize', togglePlayOnlyMode);
1084-
1085-
// -------------------------------------
1086-
// 3) Main menu button click
1087-
// -------------------------------------
1088-
const toggleAuxBtn = document.getElementById('toggleAuxBtn');
1089-
const auxDropdown = document.getElementById('aux-dropdown');
1090-
1091-
// Optional: If you want a custom toggle on small screens only
1092-
toggleAuxBtn.addEventListener('click', function(event) {
1093-
const isSmallScreen = window.innerWidth < 768 || window.innerHeight < 600;
1094-
1095-
if (isSmallScreen) {
1096-
// Prevent the default Materialize dropdown from opening
1097-
// because we want our custom "play-only" dropdown
1098-
event.preventDefault();
1099-
event.stopPropagation();
1100-
1101-
// Manually toggle the #aux-dropdown
1102-
auxDropdown.classList.toggle('show-dropdown');
1103-
} else {
1104-
// On larger screens, let Materialize handle it
1105-
// Or do something else, like open #aux-toolbar
1106-
// event.preventDefault(); // remove this if you want default dropdown
1107-
// ...
1108-
}
1109-
});
1110-
});
1111-
</script>
1112-
996+
document.addEventListener('DOMContentLoaded', function() {
997+
let persistentNotification = null;
998+
999+
function showPersistentNotification() {
1000+
if (!persistentNotification) {
1001+
persistentNotification = document.createElement("div");
1002+
persistentNotification.id = "persistentNotification";
1003+
persistentNotification.innerHTML = "Play only mode enabled. For full Music Blocks experience, use a larger display.";
1004+
document.body.appendChild(persistentNotification);
1005+
}
1006+
}
1007+
1008+
function removePersistentNotification() {
1009+
if (persistentNotification) {
1010+
persistentNotification.remove();
1011+
persistentNotification = null;
1012+
}
1013+
}
1014+
1015+
function hideElementById(elementId) {
1016+
const elem = document.getElementById(elementId);
1017+
if (elem) {
1018+
elem.style.display = "none";
1019+
}
1020+
}
1021+
1022+
function showElementById(elementId) {
1023+
const elem = document.getElementById(elementId);
1024+
if (elem) {
1025+
elem.style.display = "";
1026+
}
1027+
}
1028+
1029+
function togglePlayOnlyMode() {
1030+
const isSmallScreen = (window.innerWidth < 768) || (window.innerHeight < 600);
1031+
const body = document.body;
1032+
const homeButton = document.getElementById("Home [HOME]");
1033+
const buttonContainer = document.getElementById("buttoncontainerBOTTOM");
1034+
1035+
if (isSmallScreen) {
1036+
// Enable play-only mode
1037+
body.classList.add("play-only");
1038+
showPersistentNotification();
1039+
1040+
if (buttonContainer) {
1041+
buttonContainer.style.display = "flex";
1042+
buttonContainer.style.justifyContent = "flex-end";
1043+
buttonContainer.style.alignItems = "center";
1044+
}
1045+
if (homeButton) {
1046+
homeButton.style.display = "flex";
1047+
homeButton.style.position = "fixed";
1048+
homeButton.style.right = "15px";
1049+
homeButton.style.bottom = "15px";
1050+
homeButton.style.zIndex = "10000";
1051+
}
1052+
1053+
// Hide certain elements
1054+
hideElementById("Show/hide blocks");
1055+
hideElementById("Expand/collapse blocks");
1056+
hideElementById("Decrease block size");
1057+
hideElementById("Increase block size");
1058+
hideElementById("grid");
1059+
hideElementById("palette");
1060+
1061+
} else {
1062+
// Disable play-only mode
1063+
body.classList.remove("play-only");
1064+
removePersistentNotification();
1065+
1066+
if (homeButton) homeButton.style = "";
1067+
if (buttonContainer) buttonContainer.style = "";
1068+
1069+
showElementById("Show/hide blocks");
1070+
showElementById("Expand/collapse blocks");
1071+
showElementById("Decrease block size");
1072+
showElementById("Increase block size");
1073+
showElementById("grid");
1074+
showElementById("palette");
1075+
}
1076+
}
1077+
1078+
togglePlayOnlyMode();
1079+
1080+
window.addEventListener("resize", togglePlayOnlyMode);
1081+
});
1082+
</script>
1083+
11131084
<div id="searchBar" tabindex="-1">
11141085
<input
11151086
type="text"

0 commit comments

Comments
 (0)