From 4ecc019353f408d8cfe7fb8e53aec10f761d6b36 Mon Sep 17 00:00:00 2001 From: JJRcop Date: Thu, 5 Oct 2017 03:58:49 -0400 Subject: [PATCH 1/2] Moved admin music volume slider to its own menu (#31277) * Moved admin music volume slider to its own menu * Minor fixes to goonchat --- .../browserassets/css/browserOutput.css | 24 ++--- .../browserassets/html/browserOutput.html | 25 +++-- .../browserassets/js/browserOutput.js | 97 +++++++++++-------- 3 files changed, 84 insertions(+), 62 deletions(-) diff --git a/code/modules/goonchat/browserassets/css/browserOutput.css b/code/modules/goonchat/browserassets/css/browserOutput.css index f6810d0b05..153444c0ed 100644 --- a/code/modules/goonchat/browserassets/css/browserOutput.css +++ b/code/modules/goonchat/browserassets/css/browserOutput.css @@ -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 { diff --git a/code/modules/goonchat/browserassets/html/browserOutput.html b/code/modules/goonchat/browserassets/html/browserOutput.html index a9e30b6b51..7b2d3ecfe0 100644 --- a/code/modules/goonchat/browserassets/html/browserOutput.html +++ b/code/modules/goonchat/browserassets/html/browserOutput.html @@ -27,17 +27,22 @@ --ms +
+ +
- - + +
+
+ Decrease font size - + Increase font size + + Toggle ping display + Highlight string + Save chat log + Clear all messages +
+
+ Admin music volume
diff --git a/code/modules/goonchat/browserassets/js/browserOutput.js b/code/modules/goonchat/browserassets/js/browserOutput.js index bb555982cc..f027b523aa 100644 --- a/code/modules/goonchat/browserassets/js/browserOutput.js +++ b/code/modules/goonchat/browserassets/js/browserOutput.js @@ -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) {