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:
JJRcop
2017-10-05 03:58:49 -04:00
committed by oranges
parent e16fd1b151
commit 2ab85e231b
3 changed files with 84 additions and 62 deletions

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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) {