cyberpresidentvanellope/Yogstation
1
0
Fork 0
mirror of https://github.com/yogstation13/Yogstation.git synced 2025-02-26 09:04:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved admin music volume slider to its own menu (#31277)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

24
code/modules/goonchat/browserassets/css/browserOutput.css
View File

@@ -83,7 +83,7 @@ a.popt {text-decoration: none;}
#ping { #ping {
position: fixed; position: fixed;
top: 0; top: 0;
right: 40px; right: 80px;
width: 45px; width: 45px;
background: #ddd; background: #ddd;
height: 30px; height: 30px;
@@ -96,12 +96,12 @@ a.popt {text-decoration: none;}
font-size: 8pt; font-size: 8pt;
padding-top: 2px; padding-top: 2px;
} }
#options { #userBar {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
} }
#options .optionsCell { #userBar .subCell {
background: #ddd; background: #ddd;
height: 30px; height: 30px;
padding: 5px 0; padding: 5px 0;
@@ -111,23 +111,23 @@ a.popt {text-decoration: none;}
line-height: 28px; line-height: 28px;
border-top: 1px solid #b4b4b4; border-top: 1px solid #b4b4b4;
} }
#options .optionsCell:hover {background: #ccc;} #userBar .subCell:hover {background: #ccc;}
#options .toggle { #userBar .toggle {
width: 40px; width: 40px;
background: #ccc; background: #ccc;
border-top: 0; border-top: 0;
float: right; float: right;
text-align: center; text-align: center;
} }
#options .sub {clear: both; display: none; width: 160px;} #userBar .sub {clear: both; display: none; width: 160px;}
#options .sub.scroll {overflow-y: scroll;} #userBar .sub.scroll {overflow-y: scroll;}
#options .sub.optionsCell {padding: 3px 0 3px 8px; line-height: 30px; font-size: 0.9em; clear: both;} #userBar .sub.subCell {padding: 3px 0 3px 8px; line-height: 30px; font-size: 0.9em; clear: both;}
#options .sub span { #userBar .sub span {
display: block; display: block;
line-height: 30px; line-height: 30px;
float: left; float: left;
} }
#options .sub i { #userBar .sub i {
display: block; display: block;
padding: 0 5px; padding: 0 5px;
font-size: 1.1em; font-size: 1.1em;
@@ -136,14 +136,14 @@ a.popt {text-decoration: none;}
line-height: 30px; line-height: 30px;
float: right; float: right;
} }
#options .sub input { #userBar .sub input {
position: absolute; position: absolute;
padding: 7px 5px; padding: 7px 5px;
width: 121px; width: 121px;
line-height: 30px; line-height: 30px;
float: left; float: left;
} }
#options .decreaseFont {border-top: 0;} #userBar .topCell {border-top: 0;}
/* POPUPS */ /* POPUPS */
.popup { .popup {

25
code/modules/goonchat/browserassets/html/browserOutput.html
View File

@@ -27,17 +27,22 @@
<i class="icon-circle" id="pingDot"></i> <i class="icon-circle" id="pingDot"></i>
<span class="ms" id="pingMs">--ms</span> <span class="ms" id="pingMs">--ms</span>
</div> </div>
<div id="audio">
<a href="#" class="subCell toggle" id="toggleAudio" title="Audio"><i class="icon-volume-up"></i></a>
</div>
<div id="options"> <div id="options">
<a href="#" class="optionsCell toggle" id="toggleOptions" title="Options"><i class="icon-cog"></i></a> <a href="#" class="subCell toggle" id="toggleOptions" title="Options"><i class="icon-cog"></i></a>
<div class="sub" id="subOptions"> </div>
<a href="#" class="optionsCell decreaseFont" id="decreaseFont"><span>Decrease font size</span> <i class="icon-font">-</i></a> <div class="sub" id="subOptions">
<a href="#" class="optionsCell increaseFont" id="increaseFont"><span>Increase font size</span> <i class="icon-font">+</i></a> <a href="#" class="subCell decreaseFont topCell" id="decreaseFont"><span>Decrease 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="subCell increaseFont" id="increaseFont"><span>Increase font size</span> <i class="icon-font">+</i></a>
<a href="#" class="optionsCell highlightTerm" id="highlightTerm"><span>Highlight string</span> <i class="icon-tag"></i></a> <a href="#" class="subCell togglePing" id="togglePing"><span>Toggle ping display</span> <i class="icon-circle"></i></a>
<a href="#" class="optionsCell saveLog" id="saveLog"><span>Save chat log</span> <i class="icon-save"></i></a> <a href="#" class="subCell highlightTerm" id="highlightTerm"><span>Highlight string</span> <i class="icon-tag"></i></a>
<a href="#" class="optionsCell clearMessages" id="clearMessages"><span>Clear all messages</span> <i class="icon-eraser"></i></a> <a href="#" class="subCell saveLog" id="saveLog"><span>Save chat log</span> <i class="icon-save"></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> <a href="#" class="subCell clearMessages" id="clearMessages"><span>Clear all messages</span> <i class="icon-eraser"></i></a>
</div> </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>
</div> </div>
<audio class="hidden" id="adminMusic" autoplay></audio> <audio class="hidden" id="adminMusic" autoplay></audio>

97
code/modules/goonchat/browserassets/js/browserOutput.js
View File

@@ -22,7 +22,7 @@ window.onerror = function(msg, url, line, col, error) {
//Globals //Globals
window.status = 'Output'; window.status = 'Output';
var $messages, $subOptions, $contextMenu, $filterMessages; var $messages, $subOptions, $subAudio, $selectedSub, $contextMenu, $filterMessages;
var opts = { var opts = {
//General //General
'messageCount': 0, //A count...of messages... 'messageCount': 0, //A count...of messages...
@@ -37,8 +37,8 @@ var opts = {
'restarting': false, //Is the round restarting? 'restarting': false, //Is the round restarting?
//Options menu //Options menu
'subOptionsLoop': null, //Contains the interval loop for closing the options menu 'selectedSubLoop': null, //Contains the interval loop for closing the selected sub menu
'suppressOptionsClose': false, //Whether or not we should be hiding the suboptions menu 'suppressSubClose': false, //Whether or not we should be hiding the selected sub menu
'highlightTerms': [], 'highlightTerms': [],
'highlightLimit': 5, 'highlightLimit': 5,
'highlightColor': '#FFFF00', //The color of the highlighted message '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 * DOM READY
@@ -497,6 +537,8 @@ if (typeof $ === 'undefined') {
$(function() { $(function() {
$messages = $('#messages'); $messages = $('#messages');
$subOptions = $('#subOptions'); $subOptions = $('#subOptions');
$subAudio = $('#subAudio');
$selectedSub = $subOptions;
//Hey look it's a controller loop! //Hey look it's a controller loop!
setInterval(function() { setInterval(function() {
@@ -607,12 +649,9 @@ $(function() {
}); });
$messages.on('mousedown', function(e) { $messages.on('mousedown', function(e) {
if ($subOptions && $subOptions.is(':visible')) { if ($selectedSub && $selectedSub.is(':visible')) {
$subOptions.slideUp('fast', function() { $selectedSub.slideUp('fast', subSlideUp);
$(this).removeClass('scroll'); clearInterval(opts.selectedSubLoop);
$(this).css('height', '');
});
clearInterval(opts.subOptionsLoop);
} }
}); });
@@ -731,41 +770,19 @@ $(function() {
}); });
$('#toggleOptions').click(function(e) { $('#toggleOptions').click(function(e) {
if ($subOptions.is(':visible')) { handleToggleClick($subOptions, $(this));
$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
}
}); });
$('#subOptions, #toggleOptions').mouseenter(function() { $('#toggleAudio').click(function(e) {
opts.suppressOptionsClose = true; handleToggleClick($subAudio, $(this));
}); });
$('#subOptions, #toggleOptions').mouseleave(function() { $('.sub, .toggle').mouseenter(function() {
opts.suppressOptionsClose = false; opts.suppressSubClose = true;
});
$('.sub, .toggle').mouseleave(function() {
opts.suppressSubClose = false;
}); });
$('#decreaseFont').click(function(e) { $('#decreaseFont').click(function(e) {