mirror of
https://github.com/yogstation13/Yogstation.git
synced 2025-02-26 09:04:50 +00:00
Moved admin music volume slider to its own menu (#31277)
* Moved admin music volume slider to its own menu * Minor fixes to goonchat
This commit is contained in:
@@ -83,7 +83,7 @@ a.popt {text-decoration: none;}
|
||||
#ping {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 40px;
|
||||
right: 80px;
|
||||
width: 45px;
|
||||
background: #ddd;
|
||||
height: 30px;
|
||||
@@ -96,12 +96,12 @@ a.popt {text-decoration: none;}
|
||||
font-size: 8pt;
|
||||
padding-top: 2px;
|
||||
}
|
||||
#options {
|
||||
#userBar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
#options .optionsCell {
|
||||
#userBar .subCell {
|
||||
background: #ddd;
|
||||
height: 30px;
|
||||
padding: 5px 0;
|
||||
@@ -111,23 +111,23 @@ a.popt {text-decoration: none;}
|
||||
line-height: 28px;
|
||||
border-top: 1px solid #b4b4b4;
|
||||
}
|
||||
#options .optionsCell:hover {background: #ccc;}
|
||||
#options .toggle {
|
||||
#userBar .subCell:hover {background: #ccc;}
|
||||
#userBar .toggle {
|
||||
width: 40px;
|
||||
background: #ccc;
|
||||
border-top: 0;
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
#options .sub {clear: both; display: none; width: 160px;}
|
||||
#options .sub.scroll {overflow-y: scroll;}
|
||||
#options .sub.optionsCell {padding: 3px 0 3px 8px; line-height: 30px; font-size: 0.9em; clear: both;}
|
||||
#options .sub span {
|
||||
#userBar .sub {clear: both; display: none; width: 160px;}
|
||||
#userBar .sub.scroll {overflow-y: scroll;}
|
||||
#userBar .sub.subCell {padding: 3px 0 3px 8px; line-height: 30px; font-size: 0.9em; clear: both;}
|
||||
#userBar .sub span {
|
||||
display: block;
|
||||
line-height: 30px;
|
||||
float: left;
|
||||
}
|
||||
#options .sub i {
|
||||
#userBar .sub i {
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
font-size: 1.1em;
|
||||
@@ -136,14 +136,14 @@ a.popt {text-decoration: none;}
|
||||
line-height: 30px;
|
||||
float: right;
|
||||
}
|
||||
#options .sub input {
|
||||
#userBar .sub input {
|
||||
position: absolute;
|
||||
padding: 7px 5px;
|
||||
width: 121px;
|
||||
line-height: 30px;
|
||||
float: left;
|
||||
}
|
||||
#options .decreaseFont {border-top: 0;}
|
||||
#userBar .topCell {border-top: 0;}
|
||||
|
||||
/* POPUPS */
|
||||
.popup {
|
||||
|
||||
@@ -27,17 +27,22 @@
|
||||
<i class="icon-circle" id="pingDot"></i>
|
||||
<span class="ms" id="pingMs">--ms</span>
|
||||
</div>
|
||||
<div id="options">
|
||||
<a href="#" class="optionsCell toggle" id="toggleOptions" title="Options"><i class="icon-cog"></i></a>
|
||||
<div class="sub" id="subOptions">
|
||||
<a href="#" class="optionsCell decreaseFont" id="decreaseFont"><span>Decrease font size</span> <i class="icon-font">-</i></a>
|
||||
<a href="#" class="optionsCell increaseFont" id="increaseFont"><span>Increase font size</span> <i class="icon-font">+</i></a>
|
||||
<a href="#" class="optionsCell togglePing" id="togglePing"><span>Toggle ping display</span> <i class="icon-circle"></i></a>
|
||||
<a href="#" class="optionsCell highlightTerm" id="highlightTerm"><span>Highlight string</span> <i class="icon-tag"></i></a>
|
||||
<a href="#" class="optionsCell saveLog" id="saveLog"><span>Save chat log</span> <i class="icon-save"></i></a>
|
||||
<a href="#" class="optionsCell clearMessages" id="clearMessages"><span>Clear all messages</span> <i class="icon-eraser"></i></a>
|
||||
<span class="optionsCell" id="musicVolumeSpan"><input type="range" class="hidden" id="musicVolume"><span id="musicVolumeText">Admin music volume</span><i class="icon-music"></i></span>
|
||||
<div id="audio">
|
||||
<a href="#" class="subCell toggle" id="toggleAudio" title="Audio"><i class="icon-volume-up"></i></a>
|
||||
</div>
|
||||
<div id="options">
|
||||
<a href="#" class="subCell toggle" id="toggleOptions" title="Options"><i class="icon-cog"></i></a>
|
||||
</div>
|
||||
<div class="sub" id="subOptions">
|
||||
<a href="#" class="subCell decreaseFont topCell" id="decreaseFont"><span>Decrease font size</span> <i class="icon-font">-</i></a>
|
||||
<a href="#" class="subCell increaseFont" id="increaseFont"><span>Increase font size</span> <i class="icon-font">+</i></a>
|
||||
<a href="#" class="subCell togglePing" id="togglePing"><span>Toggle ping display</span> <i class="icon-circle"></i></a>
|
||||
<a href="#" class="subCell highlightTerm" id="highlightTerm"><span>Highlight string</span> <i class="icon-tag"></i></a>
|
||||
<a href="#" class="subCell saveLog" id="saveLog"><span>Save chat log</span> <i class="icon-save"></i></a>
|
||||
<a href="#" class="subCell clearMessages" id="clearMessages"><span>Clear all messages</span> <i class="icon-eraser"></i></a>
|
||||
</div>
|
||||
<div class="sub" id="subAudio">
|
||||
<span class="subCell topCell" id="musicVolumeSpan"><input type="range" class="hidden" id="musicVolume"><span id="musicVolumeText">Admin music volume</span><i class="icon-music"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<audio class="hidden" id="adminMusic" autoplay></audio>
|
||||
|
||||
@@ -22,7 +22,7 @@ window.onerror = function(msg, url, line, col, error) {
|
||||
|
||||
//Globals
|
||||
window.status = 'Output';
|
||||
var $messages, $subOptions, $contextMenu, $filterMessages;
|
||||
var $messages, $subOptions, $subAudio, $selectedSub, $contextMenu, $filterMessages;
|
||||
var opts = {
|
||||
//General
|
||||
'messageCount': 0, //A count...of messages...
|
||||
@@ -37,8 +37,8 @@ var opts = {
|
||||
'restarting': false, //Is the round restarting?
|
||||
|
||||
//Options menu
|
||||
'subOptionsLoop': null, //Contains the interval loop for closing the options menu
|
||||
'suppressOptionsClose': false, //Whether or not we should be hiding the suboptions menu
|
||||
'selectedSubLoop': null, //Contains the interval loop for closing the selected sub menu
|
||||
'suppressSubClose': false, //Whether or not we should be hiding the selected sub menu
|
||||
'highlightTerms': [],
|
||||
'highlightLimit': 5,
|
||||
'highlightColor': '#FFFF00', //The color of the highlighted message
|
||||
@@ -483,6 +483,46 @@ function sendVolumeUpdate() {
|
||||
}
|
||||
}
|
||||
|
||||
function subSlideUp() {
|
||||
$(this).removeClass('scroll');
|
||||
$(this).css('height', '');
|
||||
}
|
||||
|
||||
function startSubLoop() {
|
||||
if (opts.selectedSubLoop) {
|
||||
clearInterval(opts.selectedSubLoop);
|
||||
}
|
||||
return setInterval(function() {
|
||||
if (!opts.suppressSubClose && $selectedSub.is(':visible')) {
|
||||
$selectedSub.slideUp('fast', subSlideUp);
|
||||
clearInterval(opts.selectedSubLoop);
|
||||
}
|
||||
}, 5000); //every 5 seconds
|
||||
}
|
||||
|
||||
function handleToggleClick($sub, $toggle) {
|
||||
if ($selectedSub !== $sub && $selectedSub.is(':visible')) {
|
||||
$selectedSub.slideUp('fast', subSlideUp);
|
||||
}
|
||||
$selectedSub = $sub
|
||||
if ($selectedSub.is(':visible')) {
|
||||
$selectedSub.slideUp('fast', subSlideUp);
|
||||
clearInterval(opts.selectedSubLoop);
|
||||
} else {
|
||||
$selectedSub.slideDown('fast', function() {
|
||||
var windowHeight = $(window).height();
|
||||
var toggleHeight = $toggle.outerHeight();
|
||||
var priorSubHeight = $selectedSub.outerHeight();
|
||||
var newSubHeight = windowHeight - toggleHeight;
|
||||
$(this).height(newSubHeight);
|
||||
if (priorSubHeight > (windowHeight - toggleHeight)) {
|
||||
$(this).addClass('scroll');
|
||||
}
|
||||
});
|
||||
opts.selectedSubLoop = startSubLoop();
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************************
|
||||
*
|
||||
* DOM READY
|
||||
@@ -497,6 +537,8 @@ if (typeof $ === 'undefined') {
|
||||
$(function() {
|
||||
$messages = $('#messages');
|
||||
$subOptions = $('#subOptions');
|
||||
$subAudio = $('#subAudio');
|
||||
$selectedSub = $subOptions;
|
||||
|
||||
//Hey look it's a controller loop!
|
||||
setInterval(function() {
|
||||
@@ -607,12 +649,9 @@ $(function() {
|
||||
});
|
||||
|
||||
$messages.on('mousedown', function(e) {
|
||||
if ($subOptions && $subOptions.is(':visible')) {
|
||||
$subOptions.slideUp('fast', function() {
|
||||
$(this).removeClass('scroll');
|
||||
$(this).css('height', '');
|
||||
});
|
||||
clearInterval(opts.subOptionsLoop);
|
||||
if ($selectedSub && $selectedSub.is(':visible')) {
|
||||
$selectedSub.slideUp('fast', subSlideUp);
|
||||
clearInterval(opts.selectedSubLoop);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -731,41 +770,19 @@ $(function() {
|
||||
});
|
||||
|
||||
$('#toggleOptions').click(function(e) {
|
||||
if ($subOptions.is(':visible')) {
|
||||
$subOptions.slideUp('fast', function() {
|
||||
$(this).removeClass('scroll');
|
||||
$(this).css('height', '');
|
||||
});
|
||||
clearInterval(opts.subOptionsLoop);
|
||||
} else {
|
||||
$subOptions.slideDown('fast', function() {
|
||||
var windowHeight = $(window).height();
|
||||
var toggleHeight = $('#toggleOptions').outerHeight();
|
||||
var priorSubHeight = $subOptions.outerHeight();
|
||||
var newSubHeight = windowHeight - toggleHeight;
|
||||
$(this).height(newSubHeight);
|
||||
if (priorSubHeight > (windowHeight - toggleHeight)) {
|
||||
$(this).addClass('scroll');
|
||||
}
|
||||
});
|
||||
opts.subOptionsLoop = setInterval(function() {
|
||||
if (!opts.suppressOptionsClose && $('#subOptions').is(':visible')) {
|
||||
$subOptions.slideUp('fast', function() {
|
||||
$(this).removeClass('scroll');
|
||||
$(this).css('height', '');
|
||||
});
|
||||
clearInterval(opts.subOptionsLoop);
|
||||
}
|
||||
}, 5000); //Every 5 seconds
|
||||
}
|
||||
handleToggleClick($subOptions, $(this));
|
||||
});
|
||||
|
||||
$('#subOptions, #toggleOptions').mouseenter(function() {
|
||||
opts.suppressOptionsClose = true;
|
||||
$('#toggleAudio').click(function(e) {
|
||||
handleToggleClick($subAudio, $(this));
|
||||
});
|
||||
|
||||
$('#subOptions, #toggleOptions').mouseleave(function() {
|
||||
opts.suppressOptionsClose = false;
|
||||
$('.sub, .toggle').mouseenter(function() {
|
||||
opts.suppressSubClose = true;
|
||||
});
|
||||
|
||||
$('.sub, .toggle').mouseleave(function() {
|
||||
opts.suppressSubClose = false;
|
||||
});
|
||||
|
||||
$('#decreaseFont').click(function(e) {
|
||||
|
||||
Reference in New Issue
Block a user